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|
"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( );
};
}
|