Video Training – Tutorials

Adobe Flash CS3 Tutorial – Scaling Flash Movies

January 2, 2009 at 11:24 pm Leave a comment

For users who prefer to learn Flash visually we have a range of Adobe Flash CS3 video tutorials, this method of training greatly enhances learning and allows beginners to master even the most complex aspects of Adobe Flash with ease.
View the Adobe Flash CS3 Tutorial Video

Scaling Your Flash Movie

There may be times when you want to adjust your Flash movie to scale or align differently in the Flash player. By default the Flash player scales and aligns Flash movies in a certain way but there are ways to change it to suit your application needs. In the examples below we’ll take a look at some of the different scaling and alignment modes we can apply. First we’ll look at scaling movies inside the Flash player, we have a few options available to us when scaling such as SHOW_ALL, NO_BORDER, NO_SCALE, and EXACT_FIT. These are all properties of the StageScaleMode class and will be explained below. Secondly we’ll look at the alignment of the movie within the Flash Player, for example you may want the movie to appear in the top right of the Flash Player. To alter the alignment of the movie we use properties of the StageAlign class.

How to Set the Scale Mode

Before we start looking through the different scale modes we need to import the StageScaleMode.
 

import flash.display.StageScaleMode

Setting a different scale mode for your application can be accomplished with one line of code. We access the stage class and use the scaleMode property and set that equal to the StageScaleMode class, finally we choose what particular scale mode property we require for the application. The first scale mode property we’ll look at is the SHOW_ALL; this is the default mode of the Flash Player and will scale the movie to fit the Flash Player. This also means the movie

The default scale mode of the Flash Player is the SHOW_ALL scale mode. This scale mode will ensure that the whole application is visible while maintaining it’s original size.

stage.scaleMode  = StageScaleMode.SHOW_ALL;

Next we have the no border scale mode, this mode works similar to the show all mode, the difference is that the no border makes sure the Player doesn’t display any borders around the stage. To set the scale mode to no border do the following;

stage.scaleMode  = StageScaleMode.NO_BORDER;

The no scale mode is pretty self explanatory in the fact that it doesn’t scale the movie. This means that it will maintain it’s original size no matter what the stage size is.

stage.scaleMode  = StageScaleMode.NO_SCALE;

The exactFit mode scales a movie to fit the Player, and it alters the movie’s aspect ratio, if necessary, to match that of the Player. The result is that the movie always fills the Player exactly, but the elements of the movie may be distorted. For example:

stage.scaleMode  = StageScaleMode.EXACT_FIT;

Adjusting The Movie Alignment

Flash movies appear in the centre of the Player by default. To adjust the alignment of the movie we use the stage.align property. Again this can be accomplished with just one line of code, below all the various alignment properties are explained.

Aligns the stage to the top.

 stage.align = StageAlign.TOP;

Aligns the stage to the top right corner.

  stage.align = StageAlign.TOP_RIGHT;

Aligns the stage to the top left.

  stage.align = StageAlign.TOP_LEFT;

Aligns the stage to the left.

  stage.align = StageAlign.LEFT;

Aligns the stage to the right.

  stage.align = StageAlign.RIGHT;

Aligns the stage to the bottom.

  stage.align = StageAlign.BOTTOM;

Aligns the stage to the bottom right.

  stage.align = StageAlign.BOTTOM_RIGHT;

Aligns the stage to the bottom left.

  stage.align = StageAlign.BOTTOM_LEFT;

Entry filed under: Adobe Flash CS3. Tags: ActionScript 3, AS3, Flash CS3 Tutorial, scaling Flash Movies.