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

Question

I have put together an example page detailing my problem

My website is going to have a main wrapper that is set to a max-width property for compatible browsers. It will stretch to 940px across at max. When scaled down I would like the swf to scale proportionately with it. Like an image with width percent applied. The flash movie has the dimensions of 940 × 360 pixels.

I can't seem to figure out the correct attributes to add to the embed tag to get it to do this.

I am currently using jquery flash embed, but am open to other options, though this is my ideal.

In the example I have set the flash background to black.

When resize the browser window the flash movie doesn't scale proportionately to the div, only the photo does, leaving a blank canvas (black), while the div height stays the same. I can't add a height value in the CSS.

How do I make this scale correctly? Adding a noscale param only crops the image. The swf's height doesn't scale also.

All of my code can be viewed in the linked examples source.

Answer 1

This article will hopefully cover what you need: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/. It's pure CSS too!

Answer 2

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 3

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.