# Quick Tip: Stretch Your SWF with Stage.ScaleMode

##### Tutorial Details
• Difficulty: Basix
• Program: Flash CS3+ or the Flex SDK with a suitable editor
• Estimated Completion Time: 10 mins

What happens when a website crams your SWF into an area where it doesn’t fit? In this Quick Tip, you’ll find out how to take control of how your SWF scales.

## Step 1: Set up Your SWF

Start a new Flash project, and set your stage to be 350px wide, 250px high.

Create a basic document class (see this Quick Tip for more info):

package
{
import flash.display.Sprite;
public class Main extends Sprite
{
public function Main()
{

}
}
}


The FLA (and the SWC, for those of you not using Flash Pro) in the zip file contains two assets:

CheckedBackground, which is the same size as the stage, with its registration point in the top-left corner.

Face, which is about half as wide as the stage, with its registration point in the center.

Position them on the stage like so:

public class Main extends Sprite
{
private var checkedBackground:CheckedBackground;
private var face:Face;
public function Main()
{
checkedBackground = new CheckedBackground();
checkedBackground.x = 0;
checkedBackground.y = 0;

face = new Face();
face.x = stage.stageWidth / 2;		//center the face horizontally
face.y = stage.stageHeight / 2;		//center the face vertically
}
}


## Step 2: Stretch the Player Window

Make the window bigger, make it smaller, stretch it both in and out of proportion, and see how the contents change:

This is Flash’s default scale mode, SHOW_ALL. The contents are never distorted, and you can always see the whole stage. This means you get a “letterbox” effect if stretching out of proportion.

## Step 3: Try the NO_BORDER Scale Mode

SHOW_ALL is the default scale mode, but there are three others we can use.

Import the StageScaleMode class:

import flash.display.StageScaleMode;


This contains static consts that can be used to set the scale mode. Let’s try NO_BORDER; add this line to your constructor function:

stage.scaleMode = StageScaleMode.NO_BORDER;


Run your SWF and stretch it again:

As the name suggests, NO_BORDER avoids the letterbox effect. The contents stay in proportion but always fill the available area, even if that means cropping the edges.

## Step 4: Try the EXACT_FIT Scale Mode

Change the line that sets the scale mode like so:

stage.scaleMode = StageScaleMode.EXACT_FIT;


Try it out:

EXACT_FIT makes the edges of the stage stick to the edges of the available area, leading to distortion if the player is stretched out of proportion.

## Step 5: Try the NO_SCALE Scale Mode

To check out the final scale mode, change the line like so:

stage.scaleMode = StageScaleMode.NO_SCALE;


Check it out:

With NO_SCALE, the contents don’t change size at all; they stay centered in the player window, even if that means cropping huge amounts of the edges, or leaving massive borders on all sides.

## Conclusion

Stage.scaleMode lets you control how your SWF will appear if a website changes the size of the available area. It’s also useful for creating AIR apps and full screen Web sites; NO_SCALE is a particularly good choice there, as (when combined with a RESIZE event listener) it allows you to fit the entire content to the window, while maintaining the size and proportions of the individual assets.

For more on that, check out Franci Zidar’s series on full screen scalable Web sites :)

Tags: Tips
• Shawn Stringfield

Nice Tutorial!

• http://www.nitras.be Nit’ras

Nice one, good information for those who learn about the stage.

Now we only need a PutAllLibraryItemsOnStageAndMakeItWorkLikeACharm(); function hehe

would be good to read more short articles on actually quite indepth corners of flash.

• LostMind

Awesome tutorial! Just what I need now, thanks

• Les

Well explained and swf works fine.
…but after publishing the images get cropped if the window is made smaller.

With the #flashContent tag set to width:37%; height:49% and “align” “left” the 2 image centres aligned and the images scale corretly.

Is there a more direct way of using SHOW_ALL in the browser otherr than hand editing the html file?

Thanks,

Les

• brahim

Thank you.

• Tony Smith

How would I restrict how small the window gets before scrollbars appear?

Is there any way to crop animated objects that move off the stage in Flash? I assumed that the parts that hung over the edge of the stage would not appear when exported to swf, but they do!

• Ikmail

ThnQ very very much :)

• anzoni

Thanks a lot!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

• Noah

thank you very much sir, i’ve been looking for such an easy explanation to this for days now!!