Recipe 2.6 Changing the Alignment

2.6.1 Problem

You want to change the alignment of the movie within the Player.

2.6.2 Solution

Use the Stage.align property.

2.6.3 Discussion

Flash movies appear in the center of the Player by default. You can control the alignment of a movie within the Player by setting the Stage.align property, as shown in Table 2-1.

Table 2-1. Alignment as controlled by Stage.align

Value	Horizontal alignment	Vertical alignment
"T"	Center	Top
"B"	Center	Bottom
"L"	Left	Center
"R"	Right	Center
"C" or " "	Center	Center
"LT" or "TL"	Left	Top
"RT" or "TR"	Right	Top
"LB" or "BL"	Left	Bottom
"RB" or "BR"	Right	Bottom

There is no "official" value to center the Stage both vertically and horizontally in the Player. Technically, any string that doesn't match one of the other modes will center the Stage. The value "C" is listed in Table 2-1 because it is convenient to remember and it will work.

The following code demonstrates the effects of both the scale mode and alignment of a movie within the Player. This code relies on the DrawingMethods.as file from Chapter 4 (specifically, the drawRectangle( ) method). Additionally, make sure to include the PushButton component in the movie's Library (see Recipe 11.1). Once you have added this code to a new movie's main timeline, test the movie in the Standalone Player. Experiment by scaling the Player and clicking on the different buttons to see the effects.

// Include DrawingMethods.as from Chapter 4 for the drawRectangle(  ) method.
#include "DrawingMethods.as"

// Create a movie clip and draw a rectangle in it. The rectangle is 550   x   400 (the
// dimensions of the default movie), and it is positioned so that the upper-left 
// corner of the rectangle is at (0,0) within the Stage. This movie clip allows you
// to see the boundaries of the Stage when the movie is scaled.
_root.createEmptyMovieClip("background", 1);
background.lineStyle(0, 0, 0);
background.beginFill(0xFF00FF);
background.drawRectangle(550, 400, 0, 0, 275, 200);
background.endFill(  );

// Array of possible values for scaleMode
scaleLabels = ["noScale", "exactFit", "showAll", "noBorder"];

// Create push buttons for each scale mode.
for (var i = 0; i < scaleLabels.length; i++) {
  btn = _root.attachMovie("FPushButtonSymbol", "scaleBtn" + i, (i + 2),
         {_y: (i * 25)});
  btn.setLabel(scaleLabels[i]);
  btn.onRelease = function (  ) {
    Stage.scaleMode = this.getLabel(  );
  };
}

// Array of possible alignment values
alignLabels = ["T", "B", "L", "R", "C", "LT", "RT", "LB", "RB"];

// Create push buttons for each alignment option.
for (var i = 0; i < alignLabels.length; i++) {
  btn = _root.attachMovie("FPushButtonSymbol", "scaleBtn" + (i + 4), (i + 6), 
         {_x: 200, _y: (i * 25)});
  btn.setLabel(alignLabels[i]);
  btn.onRelease = function (  ) {
    Stage.align = this.getLabel(  );
  };
}