使用JavaScript调整SWF文件的大小

Question

使用JavaScript调整SWF文件的大小

3

我的客户想要一个愚蠢的介绍页面，点击后仓库的门就会打开进入仓库本身（重定向到网站）。我创建了一个1920 x 1174的SWF来实现这一点。可以在这里看到。正如您所注意到的，仓库和天空的背景被包含在SWF中。只有一个小问题：有没有更好的方法？一个想法是从SWF中裁剪出天空，并使动画变小，以便可以在介绍页面上使用CSS居中。然后将background-image设置为天空。

我的大问题是调整大小。我的（可能是无知的）假设是，如果我把SWF做得很大，它可以缩小适应不同的分辨率并保持纵横比。

我尝试了www aleosoft com/flashtutorial_autofit.html上的两个建议，它们极大地扭曲了我的SWF（可以在这里看到）。这是因为我的发布设置吗？

我转向JavaScript寻找答案。现在我正在调整swf的大小，以使其适应屏幕的宽度和高度，因为窗口的内部高度和内部宽度也会扭曲它的长宽比。我希望它能像www aleosoft com/flashtutorial_autofitexample.html那样工作。

var w = screen.width, h=screen.height;
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="'+w+'" height="'+h+'">');
document.write('<param name="movie" value="movie.swf">');
document.write('<param name="scale" VALUE="exactfit">');
document.write('<embed src="movie.swf" width="'+w+'" height="'+h+'"></embed>');
document.write('</object>');

我可以使用对象/嵌入参数或JavaScript作为解决方案。如果必要的话，我也可以使用jQuery，但我不太想用。

- Carrie Kendall

1

你是不是也“热爱”客户提出的这些“伟大”的要求呢？ - Pbirkoff

@Pbirkoff 嗯，这是我的错，因为当我们进行头脑风暴时，我最初就谈到了原始建筑的门。 - Carrie Kendall

1

我敢打赌你后悔想出这个主意了 ;) 话说回来，尝试将比例设置为默认值，并将宽度和高度设置为100%。这样它应该始终适合屏幕并保持其比例。 - Pbirkoff

用户如何知道要点击门？ - MetalFrog

@MetalFrog 是的，你必须向下滚动才能看到它。当前的SWF只是一个草稿。 - Carrie Kendall

显示剩余5条评论

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JScoobyCed · Answer 1

以下代码（不需要JavaScript）不会扭曲（在Firefox 10 Ubuntu，Firefox 4.0 Windows XP，IE 6和8 Windows XP上测试通过）：

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>Platinum Buyer's Club</title>
<style type="text/css">
html, body{
margin:0;
padding:0;
}
</style>
</head>
<body>
  <object width="100%" height="100%" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
    <param name="movie" value="http://www.example.com/example.swf">
    <param name="quality" value="high">
    <param name="wmode" value="transparent">
    <param name="SCALE" value="default">
    <embed width="100%" height="100%" src="http://www.example.com/example.swf" 
      quality="high" type="application/x-shockwave-flash" wmode="transparent" scale="default"
      pluginspage="http://www.macromedia.com/go/getflashplayer">
  </object>
</body>
</html>

然而，在MacOS浏览器上似乎仍然无法正常工作（不确定是Flash插件还是浏览器问题）

- Damian · Answer 2

为了达到最佳质量，您应该使用stage.fullScreenHeight和stage.fullScreenWidth来确定窗口大小，并处理窗口调整大小事件。图像和建筑物的图片应该是一个单独的电影剪辑。有一些AS3代码可以实现这个功能（应该放在电影的第一帧）：

import flash.events.Event;
import flash.events.MouseEvent;
import flash.media.Sound;
import fl.transitions.Tween;
import fl.transitions.easing.*;


var t:Tween;
var u:Tween;
var i:Tween;



if(stage) init(null);
else addEventListener(Event.ADDED_TO_STAGE, init);

function init(e:Event){

    stage.scaleMode = StageScaleMode.NO_SCALE; //You don't want to scale anything
    stage.align = StageAlign.TOP_LEFT;
    resizeHandler(null);
    stage.addEventListener(Event.RESIZE, resizeHandler); //function that will be executed at every window size change.


  /* some animations.
      new Tween(object, "property", EasingType, begin, end, duration, useSeconds);
      property - This is the name of the property which will be animated, it   must be specified as a string (between quotation marks). Example: "alpha", "scaleX",   "scaleY", "x", "y". so you can calculate this vaules depending on the current window size
   */

    logo_mc.logo1_mc.visible = false;
    logo_mc.logo2_mc.visible = true;
    t=new Tween(bg_top_mc, "height", Strong.easeOut, bg_top_mc.height, 341, 2, true);
    u=new Tween(diamonds_mc, "y", Strong.easeOut, diamonds_mc.y, 208, 2, true);
    i=new Tween(gradients_mc, "y", Strong.easeOut, gradients_mc.y, 221, 2, true);


}

function resizeHandler(e:Event):void {

    var sw = stage.stageWidth;
    var sh = stage.stageHeight;

    //put a footer at the bottom of window 
    footer_bg_mc.width = sw;
    footer_bg_mc.y = sh - footer_bg_mc.height;

    //specify ALL elements positions depending on the window size, it is called liquid layout
    copyright_mc.y = stage.stageHeight - copyright_mc.height - 8;

   //center     
   logo_mc.x = stage.stageWidth - logo_mc.width - 40;

   //you can also scale text size
    var format:TextFormat = new TextFormat();
    format.size = Math.round(stage.stageWidth/20); 
    myTextField.setTextFormat(format);

    gradients_mc.width = stage.stageWidth;
    bg_top_mc.width = stage.stageWidth;
    bg_site_mc.width = sw;
    bg_site_mc.height = sh;

    content_mc.x = 0;
    content_mc.y = 0;
    }

在您的 XHTML 中，您可以有以下内容：

...
<head>
<style type="text/css" media="screen">
        html, body { height:100%; background-color: #27262e;}
        body { margin:0; padding:0; overflow:hidden; }
        #flashContent { width:100%; height:100%; }
        </style>  
...
<body>
<div id="flashContent">
<div id="flashContent">
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="index" align="middle">
            <param name="allowFullScreen" value="true" />
                <param name="movie" value="index.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#e7e7e7" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="window" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="index.swf" width="100%" height="100%">
                <param name="allowFullScreen" value="true" />
                    <param name="movie" value="index.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#e7e7e7" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="window" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflash">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object> ...

这种流体布局可能不是您的最佳解决方案，但您可以使用它来使文本适应窗口。您可以尝试“让这座建筑漂浮”，两侧都可以填充背景。如果您将所有内容放大，那并不意味着缩小的图像会更好看，这取决于算法。

您可以通过使用CSS和JavaScript来实现更好的效果，而门可以保留在SWF中。