代码之家 › 专栏 › 技术社区 › Marcy Sutton

swfobject和mootools:动态电影高度

tween swfobject mootools flash javascript

Marcy Sutton · 技术社区 · 16 年前

问候语。

我正在为一个FlashHTML混合网站开发一个动画主页,为了达到标准,我的解决方案证明是困难的。我不是一个javascript专业版,所以任何帮助都是非常感谢的!

下面是详细记录:

对于flash用户,html页面加载一个可变高度的as3 flash电影,该电影将从 556像素高 在完成动画序列后,tween通过actionscript+javascript 250像素高 .

开始这部电影-- (左下方) --我正在尝试通过moootools设置Flash电影的初始高度,因此如果用户没有启用Flash或javascript,他们将看到具有可选图像内容和HTML内容的较短高度图像区域。 (右下) .

Element.setStyle 设置高度直到swfobject运行为止,此时电影将折叠,因为我没有通过css指定高度。如果用户没有Flash,则默认为静态图像的高度。

所以我的问题是:有人知道当swfobject设置为width/height@100%时,如何动态地将高度变量传递给swfobject吗?我是不是无缘无故地想用两页纸的高度工作?

图像序列:
左- 下面的带有HTML导航的初始Flash电影
右- 在序列末尾调整了大小的电影,下面是HTML导航内容,看起来与无Flash版本(静态图像)相同。

alt text http://client.deicreative.com/op/images/twopages.jpg

                                           ^^ should land here for users w/o Flash

<script type="text/javascript">
  <!--
  window.addEvent('domready', function() {
     $('flashContent').setStyle('height', 556); // sets height for initial movie
     $('homeContent').setStyle('display', 'none'); // hides homepage text + photos below
     doSwfObject(); // attempting to start swfObject after setStyle is done
  });
  function resizePage(h) { // to be called from AS3
   var tweenObj = new Fx.Tween('flashContent');
   tweenObj.start('height', h);
  }
  function doSwfObject(){
   var flashvars = {};
   var params = { scale: "noScale" };
      var attributes = { id: "flashContent", name: "flashContent" };
   swfobject.embedSWF("swf/homeMovie.swf", "flashContent", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
   alert(document.getElementById('flashContent').style.height); 
   // alerts & shows correct height, but page collapses after hitting 'ok'
  }
  //-->
</script>

4 回复 | 直到 16 年前

pipwerks 16 年前

最简单的解决方案是将SWF嵌入一个包装分区。将SWF设置为包装分区的100%宽度/高度,然后使用JS调整包装分区的大小。不对象本身。这样的车就少了。

因为swfobject 2用对象替换了目标div,所以在标记中需要一个额外的div:

<div id="wrapper">
   <div id="flashcontent"></div>
</div>

变成

<div id="wrapper">
   <object id="flashcontent" width="100%" height="100%" (etc.) ></object>
</div>

Marcy Sutton 16 年前

我认为在这里张贴一些东西的行为有助于我思考这个问题——这样做之后,答案变得更加清楚了。所以这是我的解决方案,对于以后偶然遇到这个问题的人。

为了使Flash电影的高度动画化到初始的更高的状态,同时为非Flash用户保留较短的高度(见上图),我使用JavaScript的方式与在序列完成后在电影高度之间使用JavaScript的方式相同。结果就像报纸网站上的一则推送广告。

在AS3中,预加载完成后,我告诉javascript在flash电影容器的高度之间(显然是简化的,没有预加载代码):

package {
   import flash.display.MovieClip;
   import flash.display.StageAlign;
   import flash.display.StageScaleMode;
   import flash.external.ExternalInterface;

    public class HomeMovie extends MovieClip {

       private var stageHeight:uint;

       public function HomeMovie(){

           this.stage.scaleMode = StageScaleMode.NO_SCALE;
           this.stage.align = StageAlign.TOP_LEFT;

           stageHeight = 556;
           // Tell javascript the stage needs resizing.
           if (ExternalInterface.available) {
           ExternalInterface.call("resizePage", stageHeight);
           }
        }
    }

}

在javascript中(通过mootools):

<script type="text/javascript">
<!--
window.addEvent('domready', function() { // hide content on home-page below movie
   $('homeContent').setStyle('display', 'none');
});
function resizePage(h) {
    var tweenObj = new Fx.Tween('flashContent', {
        property:'height',
        duration:500,
        transition:Fx.Transitions.Quad.easeOut
    });
    tweenObj.start(h);
}
//-->
</script>

我可能会更进一步,在隐藏主页内容之前检查flash,这样如果用户有javascript但没有flash,就不会发生这种情况。同样,这一切都是为了标准。

Adam Harte 16 年前

你试穿了吗? SWFForceSize 是吗?这是一个swfobject插件,它可以帮助你。即使您不使用它,您也可以查看源代码以了解它们是如何工作的。

Nic Bell 16 年前

顺便说一句,使用moooltools时不需要swf对象,因为它有一个名为swiff的调用,它执行swf object执行的所有操作,然后执行一些操作!:d