Swfobject and MooTools: Dynamic movie height

Question

Greetings.

I am developing an animated homepage for a Flash-HTML hybrid website, and for the sake of standards, my solution is proving difficult. I am not a Javascript pro, so any help is appreciated!

Here is the run-down:

For Flash users, HTML page loads a variable-height AS3 Flash movie that will start at 556 pixels high, and after finishing its animation sequence, tween via Actionscript + JavaScript to 250 pixels high.

To kick off this movie sequence -- (below-left) -- I am attempting to set the initial height of the Flash movie via MooTools, so if users do not have Flash or Javascript enabled, they will see the shorter-height image area with alternative image content and HTML content revealed (below-right).

Element.setStyle sets the height just fine until swfObject runs, at which point the movie collapses since I am not specifying a height via CSS. If users do not have Flash, it defaults to the height of a static image.

So here is my question: Does anyone know how to dynamically pass a height variable to swfobject when it is set up to width/height @ 100%? Am I killing myself for no reason trying to work with two page heights?

Image Sequence:
Left - Initial Flash movie with HTML navigation below
Right - Resized movie at the end of the sequence with HTML nav & content below, looks the same as no-Flash version (static image)

                                           ^^ 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>

Answer 1

Have you tryed SWFForceSize? It's an SWFObject addon and it could help you. Even if you don't use it, you could take a look at the source code to see how they do things.

Answer 2

I think the act of posting something on here helps me think through the problem -- after doing so, the answer became more clear. So here is my solution for anyone who stumbles across this later.

To animate the Flash movie's height to its initial, taller state while preserving shorter height for non-Flash users (see images above), I use JavaScript the same way I would to tween the movie's height once sequence is complete. The result resembles a push-down ad on a newspaper website.

In AS3, after preloading is done, I tell Javascript to tween the height of the flash movie container (simplified, obviously -- there is no preloading code):

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);
           }
        }
    }

}

In JavaScript (via 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>

I will probably take it one step further and check for Flash before hiding the home-page content, so that it will not occur if the user has Javascript but not Flash. Again, this is all for the sake of standards.

Answer 3

The simplest solution is to embed your SWF in a wrapper DIV. Set the SWF to 100% width/height of the wrapper DIV, then use JS to resize the wrapper DIV, not the <object> itself. Less buggy that way.

Since SWFObject 2 replaces the target DIV with the object, you'll need an additional div in your markup:

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

becomes

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

Answer 4

Btw you don't need SWF object when using Mootools as it has a call called Swiff that does everything SWFObject does and then some! :D