Swfobject和MooTools:动态电影高度

时间:2009-11-12 21:48:31

标签: javascript flash mootools swfobject tween

问候。

我正在为Flash-HTML混合网站开发一个动画主页,为了标准,我的解决方案很难实现。我不是Javascript专业人士,所以任何帮助表示赞赏!

这是破败:

对于Flash用户,HTML页面加载一个可变高度的AS3 Flash电影,该电影将以 556像素高开始,并在完成其动画序列后,通过Actionscript + JavaScript补间到 250像素高

启动此电影序列 - (左下角) - 我试图通过MooTools设置Flash电影的初始高度,因此如果用户没有启用Flash或Javascript ,他们会看到较短高度的图像区域,其他图像内容和HTML内容显示(右下方)

Element.setStyle设置高度,直到swfObject运行,此时影片崩溃,因为我没有通过CSS指定高度。如果用户没有Flash,则默认为静态图像的高度。

所以这是我的问题:当设置为宽度/高度@ 100%时,是否有人知道如何动态地将高度变量传递给swfobject?我无缘无故地试图以两页的高度杀死自己吗?

图片序列:
左 - 初始Flash电影,下面是HTML导航
右 - 使用HTML nav& amp;序列结束时调整大小的电影下面的内容,看起来与无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 个答案:

答案 0 :(得分:2)

最简单的解决方案是将SWF嵌入到包装器DIV中。将SWF设置为包装器DIV的100%宽度/高度,然后使用JS调整包装器DIV的大小,&lt; object&gt;本身。这种方式不那么多了。

由于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>

答案 1 :(得分:1)

我认为在这里发布内容的行为有助于我思考问题 - 在这样做之后,答案变得更加清晰。对于那些后来偶然发现这种情况的人来说,这是我的解决方案。

要将Flash影片的高度设置为初始的较高状态,同时为非Flash用户保留较短的高度(请参阅上图),我使用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时不会发生。同样,这完全是为了标准。

答案 2 :(得分:0)

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

答案 3 :(得分:0)

当你使用Mootools时你不需要SWF对象,因为它有一个叫做Swiff的调用,可以完成SWFObject所做的一切,然后是一些! :d