How to make flash movie to scale proportunatly to div width?

Answer 1

I had several ideas that went from calling and actionscript function from javascript using ExternalInterface, to passing FlashVars to the swf just to let the swf know what is the size of the div, to a more simple idea.

here goes.

Have 1 MovieClip as the background and 1 MoveClip containing the head.

I think your best bet would be the "This is the flash movie on top" option from your example. Your best will be setting

stage.scaleMode = StageScaleMode.NO_SCALE;

or

stage.scaleMode = StageScaleMode.SHOW_ALL;

The idea is to have content scaled proportionally.

Then you would add an event listener for the resize event and scale/redraw the background.

stage.addEventListener(Event.RESIZE, stageResizeHandler);

function stageResizeHandler(event:Event = null):void{
   //assuming your background is called "background"
   background.width = stage.stageWidth;
   background.height = stage.stageHeight;
   //if content needs recentering, assuming "content" is the name used
   content.x = (stage.stageWidth - content.width) * .5;
   content.y = (stage.stageHeight - content.height * .5;
}

I've set a default for the event handler argument so you can call that function withouth dispatching an event

e.g.

stageResizeHandler();

instead of

stage.dispatchEvent(new Event(Event.RESIZE));

You might need to call that function when you initiallize, not sure.

Also you'll need to resize the content proportionally depending on the size of the stage. so here's some code I tested:

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


stage.addEventListener(Event.RESIZE, stageResizeHandler);

stageResizeHandler();

function stageResizeHandler(event:Event = null):void{
    //resize bg
    bg.width = stage.stageWidth;
    bg.height = stage.stageHeight;

    //scale proportionally
    if(content.width > stage.stageWidth || content.height > stage.stageHeight){
     var ratio:Number = getRatio(content);
     if(stage.stageWidth > stage.stageHeight){
      content.height = stage.stageHeight;
      content.width = content.height * ratio;
     }else 
     if(stage.stageWidth < stage.stageHeight){
      content.width = stage.stageWidth;
      content.height = content.width / ratio;
     }
    }else {
     content.scaleX = content.scaleY = 1;
    }

    //centre
    content.x = (stage.stageWidth - content.width) * .5;
    content.y = (stage.stageHeight - content.height) * .5;
}

function getRatio(target:MovieClip):Number{
    var ratio:Number; 
    target.width > target.height ? ratio = (target.width / target.height) : ratio = (target.height / target.width);
    return ratio;
}

Unfortunately I've noticed a some flickering on certain sizes. I'm guessing that the scaling and the fact the the ratio changes often depending on how you resize.

Answer 2

Thanks George Profenza for giving me all the actionscript codes. There was too much flicker and I am not familiar enough with actionscript to know how to fix it. Big props for putting that much together though.

I created a solution using jquery. It's very simple.

First I embed the flash movie with the max possible height, for folks with css disabled. It will still scale with the width but will show canvas background like in the linked examples.

$(selector).flash({
    src: swf,
    width: '100%',
    height: '360',
});

//get ratio from native width and height
var nativeWidth = 940;
var nativeHeight = 360;
var ratio = nativeWidth/nativeHeight;

var containerWidth = $(selector).width();
var containerHeight = containerWidth/ratio;
$(selector+' embed').height(containerHeight);

//resize flash movie
$(window).resize(function() {
    containerWidth = $(selector).width();
    containerHeight = containerWidth/ratio;
    $(selector+' embed', selector+' object').height(containerHeight);
    $(selector).height(containerHeight);
});

Then pretty much resize the movie as the browser window is resized and calculate the height from the new width divided by the original aspect ratio. This code could be cleaned up a lot, but I hope it helps someone else avoid hours of annoyance.

Answer 3

This article will hopefully cover what you need: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

Answer 4

It's very interesting, I also working on the same problem with full width flash movie clip.