• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 1. Flash Basics > Arranging and Aligning Elements

Arranging and Aligning Elements

The Align panel lets you align selected elements on the horizontal or vertical axis. You can align objects horizontally and vertically along the edges or center of the selected elements; or horizontally and vertically along the edges or center of the stage. An element's edges are determined by the bounding boxes enclosing it. You can also use the Align panel to distribute selected elements so that their centers or edges are evenly spaced, and to resize selected elements so that the horizontal or vertical dimensions of all elements match those of the largest selected element.

1.
Open shapes.fla from the Lesson01/Assets folder, and choose the arrow tool in the toolbar.

This file contains six colored circles. You'll arrange and align these circles on the stage.

2.
Open the Align panel by choosing Window > Panels > Align.

The Align panel consists of several buttons, which you can use to arrange and align selected elements. These buttons are arranged in groups, based on their function.

The Align and Distribute groups include buttons that let you align or distribute elements on the stage by their left edges, horizontal centers, right edges, top edges, vertical centers, or bottom edges.

There's also a Match Size group, which lets you match the width or height, or both, of elements. Finally, the Space group lets you space objects evenly, either vertically or horizontally.

In addition, the To Stage button lets you align or distribute elements in relation to the stage, rather than in relation to other selected elements.

3.
Choose Edit > Select All to select all the circles on the stage. In the Align panel, click the button to distribute the horizontal centers of the elements.

If you can't figure out from the icons which button distributes the horizontal centers, use the Tooltips feature. Let the pointer rest over the icons one at a time until the labels pop up.

When you click the button to distribute the horizontal centers, the selected circles are spread out evenly, based on their horizontal centers. This distribution is based on the outermost elements.

4.
In the Align panel, click the To Stage button to select it; then click the button to align the vertical centers.

When you click the To Stage button, the alignment effects that you apply are based on the bounding box of the stage, instead of the other selected elements.

5.
Deselect all the circles by clicking the stage outside any circles. Use the arrow tool to select the red circle on the left side of the stage. In the Align panel, click the button to match the heights of the elements.

The Match Size: height button resizes the selected circle so that it matches the height of the movie, because you had the To Stage button selected when you made this modification.

6.
Save your work as shapes1.fla in the MyWork folder on your hard disk.

Keep this file open, because you're going to continue working with it in the next exercise.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint