Flash Stretch (AS3 Class)
Tags Code,Flash,Website Development - posted by Alysson on 03 Dec, 2008 02:07 pm
Hey all, my name is Alysson. I’m the lead Flash developer at MaxGen, and would like to share an AS3 class that I’ve made to stretch things in Flash.
During the planning stages of developing a website, we often consider the option to build it fully in Flash. If we decide that Flash is the best way forward, a consideration that always arises is whether we should design the site with a fixed width or if it should scale to 100% of the browser window.
As web designers/developers are aware, this is very much a question of aesthetics. In our case, we needed a small and fast AS3 class to help us stretch certain content like the navigation menu and background image. In fact the class we created can dynamically enlarge any content without distortion as the user increases the browser window size.
We’ve found it pretty useful for our projects, and hopefully you will too.
How to use:
Click here to see a live demo. (resize it)
Step 1: Download these files (download here).
Step 2: Create a new Flash AS3 document and create a MovieClip and instance it as “myMc”. Once that’s done, open the Actionscript console and type the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import maxgen.utils.Stretch; stage.align = StageAlign.TOP_LEFT; stage.quality = StageQuality.HIGH; stage.scaleMode = StageScaleMode.NO_SCALE; var s:Stretch = new Stretch(); stage.addEventListener(Event.RESIZE, onResize); function onResize(e:Event):void { s.baseWidth(myMc, stage.stageWidth); if(s.target.height < stage.stageHeight) { s.baseHeight(s.target, stage.stageHeight); } } |
And that’s it. To explain:
The files that you have downloaded must be in the same directory as your .fla file.
The code inside the “onResize” function is the most important: “s.baseWidth(myMc, stage.stageWidth);” This says that “myMc” will be of the same width as the browser window when resized.
If the content to be resized is smaller than the height of the browser window, this code will correct it:
15 16 17 18 | if(s.target.height < stage.stageHeight) { s.baseHeight(s.target, stage.stageHeight); } |
Enjoy. and be sure to leave a comment if you’ve found this class helpful for your own projects.
on 03 Feb 2009 at 3:45 am 1. malcolm said …
sample is broken — it is teeny tiny on load and only scales when the window size is changed
on 03 Feb 2009 at 4:10 pm 2. alysson said …
Hi Malcolm,
It was working, but perhaps the function wasn’t as obvious as it should be. I’ve updated the sample, so hopefully it’s clearer now.
Be sure to let me know how you get on.
Thanks,
Alysson.
on 27 May 2009 at 11:58 pm 3. jonathan said …
hi thanks for the info will be giving this a whirl later as i would like to redesign my portfolio – and will go will the flash as3 route this time but need the ability to increase the sites background alongside the browser window. thanks for the article.
on 11 Dec 2009 at 10:43 am 4. gain height said …
Very remarkable entry to read on.. I am truly impressed with this article. Looking forward for future posts.
on 18 Aug 2010 at 5:01 pm 5. ebook search said …
good site!
on 08 Dec 2010 at 2:01 am 6. Rick Tisue said …
Hi, awesome site.I spotted this using ask on a semi related search. Reguards from England
on 09 May 2011 at 10:31 pm 7. Ahmad Yousaf said …
Dear Alysson,
Its a great entry, but a little thing i know. The image came full screen when we resized. I want to know is is possible when browser open its already stretched???
Thanks..