Full Browser Flash with changing background color and automatic scrollbars

Bowen and Company website, design by Florio Design

I finished a Flash animation for a client in which the background color of the movie fades from brown to white. The client liked it but decided that he would like the background of the browser (behind the embedded Flash movie) to change as well.

I figured the best solution would be to make the Flash movie full browser. So here is the solution that I came up with:

I set the Background (CS3) or Stage (CS4) color of the Flash movie to brown and drew a white box on the stage, converted it to a MovieClip and named it “wBox”. I moved the layer with the white box underneath my main MovieClip (named “mainMC”) in the Timeline. Now I would need to code some Actionscript that would make the white box expand to fill the browser, while the main content above would remain at a fixed size and center horizontally on the screen.

Here is the code I used:

//set the stage position
stage.align = StageAlign.TOP_LEFT;
//do not let any of the stage scale (keeps main MC at fixed size)
stage.scaleMode = StageScaleMode.NO_SCALE;

//add stage resize listener (this is called when the browser or flash movie is resized)
stage.addEventListener(Event.RESIZE, resizeHandler);

//create function that is fired when resize is triggered
function resizeHandler(event:Event):void {
position();
}

//call resize function at start of movie
position();

//this is the function that stretches the white box to fill the browser and horizontally centers the main MC.
function position() {
wBox.width = stage.stageWidth;
wBox.height = stage.stageHeight;
mainMC.x = (stage.stageWidth/2)-(mainMC.width/2);
}

At the appropriate time in the animation, I faded the white box, revealing the brown bg below.
I like using the TweenLite class, I find it is more stable than the built in AS Tweening engine. You can download it here.
Here is the fade code for the white box:

import gs.TweenLite;
TweenLite.to(this['wBox'], .5, {alpha:1});

Ok, so now the background is changing color no matter what the browser size so call it done, right? Not quite. If you were to scale the browser past the dimensions of the Flash movie, no scrollbars would appear. Not good for small screens, laptops etc.

Basically, I wanted the Flash movie to be at 100% of the browser unless it was scaled to less than its original size, after that the browser’s scrollbars would take over. The method I had used in the past to accomplish this didn’t work in this case because of the fading bg color, so I looked for a new solution.

I came across a simple Javascript method that was exactly what I needed. It embeds your Flash movie at 100% width and height, but also passes in a minimum width and height parameter. If the movie is scaled past this minimum size, scrollbars will appear.
Here is the link to the Javascript source.
You will also need to download swfobject.

Here is the way to use the embed code:

<script type=”text/javascript” src=”js/swfobject.js”></script>
<script type=”text/javascript” src=”js/swffit.js”></script>
<script type=”text/javascript”>
swfobject.embedSWF(“ani.swf”, “ani”, “100%”, “100%”, “9.0.0″);
swffit.fit(“ani”,900,700);
</script>
<div id=”ani”>swf</div>

Hope this helps with your full browser Flash implementations!

---

Possibly related posts: (automatically generated)

• Calling All-Knowing Webmasters
• ActionScript 3 Full Browser Background Image
• commission slots now available!