Just a heads up about our Christmas hours:

We’ll be out of the office from the 23rd of December and back again from the 5th of January. During that time we’ll still be responding to all urgent support calls and emails.

Have a great Christmas and New Years everyone, catch you all next year.

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.