Actionscript 3 full browser background & tweening positioned elements upon browser resize

28 Jun

There are tons of tutorials on how to do this in AS2, but since my site required AS3, and because I’m migrating away from AS2 anyways – I had to figure this out.

Here’s how to position a background image to scale proportionally while never revealing the stage AND how to make movie clips tween to their correct position when the browser is resized.

Again, this is how to resize the background while not revealing the stage, and how to make your site content animate or “tween” to the center (or whatever position really) of the screen while the client resizes their browser window.

This is not how to animate the background resize event, or work with any  javascript plugins that alter the flash movie size on the fly like swffit. Although I’m working on those.

Full browser background:
Create a new AS3 document. Import an image to the stage that is large enough so that it has to scale down. Convert that image to a movieclip and give it an instance name of bg_mc. Create a new layer – You can name it actionscript or AS – it’s always a good idea to stay organized! Now select that layer & open up your actions panel.
First you want to tell the stage not to scale & how it should be aligned:
stage.scaleMode = StageScaleMode.NO_SCALE;stage.align = StageAlign.TOP_LEFT;Next we need to import some stuff into our document:import flash.display.Sprite;import flash.display.StageAlign;import flash.display.StageScaleMode;import;Add our event listener:stage.addEventListener(Event.RESIZE, resizeHandler);Now we’re going to create a function that will tell our background movieclip “bg_mc” how to scale:function setBackground() {var reg2 = stage.stageWidth / 2;var reg1 = stage.stageHeight / 2;bg_mc.x = reg2;bg_mc.y = reg1;bg_mc.width = stage.stageWidth;bg_mc.height = stage.stageHeight;bg_mc.scaleX <= bg_mc.scaleY ? (bg_mc.scaleX = bg_mc.scaleY) : (bg_mc.scaleY = bg_mc.scaleX);}Now we’re going to call that function we just created:setBackground();function resizeHandler(event:Event):void {setBackground();}Hit Cmd+Return (Ctrl+Enter on PC) to test the movie. Try scaling etc;

Repositioning movie clips with a tween:
Create a new movie clip on the stage with an instance name of “site” – for now this can just be a shape.Import some basic transitions:import fl.transitions.Tween;import fl.transitions.easing.*;Create variables that will tween:var xTween:Tween;var yTween:Tween;Create an event listener for the stage resize:stage.addEventListener(Event.RESIZE, resizeListener);Create a function that will tell our movie clip (site) to tween to it’s new position on stage:function resizeListener (e:Event):void {xTween = new Tween (site, “x”, Strong.easeOut, site.x, (stage.stageWidth / 2), 2, true);yTween = new Tween (site, “y”, Strong.easeOut, site.y, (stage.stageHeight / 2), 2, true);}Instead of Strong try using any of these (taken from Adobe’s AS3 online reference) to see how it changes the animation:

Class Description
Back The Back class defines three easing functions to implement motion with ActionScript animations.
Bounce The Bounce class defines three easing functions to implement bouncing motion with ActionScript animation, similar to a ball falling and bouncing on a floor with several decaying rebounds.
Elastic The Elastic class defines three easing functions to implement motion with ActionScript animation, where the motion is defined by an exponentially decaying sine wave.
None The None class defines easing functions to implement nonaccelerated motion with ActionScript animations.
Regular The Regular class defines three easing functions to implement accelerated motion with ActionScript animations.
Strong The Strong class defines three easing functions to implement motion with ActionScript animation.

And that’s it! It’s not as complicated as some would have you believe.

If you want a .zip of working files just send me a donation and let me know in the comment that you want them.
Click here to be taken to a PayPal donation page.

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT
Leave a comment

Posted by on June 28, 2009 in Actionscript 3, Flash


Tags: , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: