Recipe 3.14. Aligning, Distributing, Resizing, and Spacing Elements
You want to align or space elements relative to each other and/or the stage.
Use the Align panel for alignment, distribution, and resizing presets. Use the Snap Align feature to align elements to one another. Use the keyboard arrow keys to nudge elements for greater precision.
Flash's Align panel includes quite a variety of unique alignment commands. As you would expect, these commands enable you to align multiple elements along a given edge or the centers. In addition, the Align panel has several options that enable you to distribute elements proportionately in space. You can even automatically resize elements.
To access the Align panel, choose Window Align. Though the Align panel is not included in the default panel layout, you should consider adding it to the panel stack or at least memorize its keyboard shortcut: Ctrl-K (Windows) or Command-K (Macintosh).
To use the Align panel, select one or more elements with the Arrow tool. Then, decide whether you want to align the elements to each other or to the stage. If you want to align elements to the stage, toggle the To Stage button on. Doing so effectively causes Flash to treat the stage as one of the selected elements when aligning or resizing, and it automatically uses the stage edges as the outer bounds when distributing or spacing elements.
The six buttons in the Align category (the top row of buttons in the panel) function as you would expect. The first three, Align Left Edge, Align Vertical Center, and Align Right Edge, align along the specified vertical axis. That is, if you choose Align Left Edge, Flash aligns all objects along their left edges, so that wider elements will extend further to the right than narrower elements. Likewise, the top row includes three horizontal alignment
The six buttons in the Distribute category space the selected elements equidistantly along a vertical or horizontal axis. That is, the spaces between the selected axes for all selected elements are made the same. This is true even if the elements are of different sizes. The Align panel does not provide a preset that allows you to distribute elements such that the space between them is equal regardless of their dimensions. If you want to achieve that effect, you must use the mouse and/or keyboard to move the elements. If a close
The Align panel also contains a trio of buttons that enable you to resize elements so that they have the same height, width, or both. These are found in the Match Size section. When the To Stage modifier is toggled on, the selected elements are scaled to the same size as the stage, though they retain their original positioning. In all cases, the smaller element is scaled up so that it is the same size as larger elements; that is, no element is ever scaled down in a resize operation. The only exception occurs when you select an element that is larger than the stage, and you perform a match size operation with the To Stage modifier toggled on; in this situation, the element is scaled down to the
The Align panel is particularly useful when you want to align several elements at once. However, there are plenty of situations in which you don't want to have to
You can adjust the settings for the Snap Align feature by choosing View Snapping Edit Snap Align. By default, the elements will snap their alignment to the right, left, top, and/or bottom edges. If you want them to snap their alignment relative to the center point, you can check the "Show horizontal guides" and/or "Show vertical guides" options to cause Flash to snap to the center of the selected element in the horizontal and/or vertical directions. You may have noticed that in addition to snapping elements to one another's centers and/or edges, the Snap Align feature will also display a dashed line when you have dragged an element within a certain proximity of another. By default, Flash uses a proximity of 10 pixels in both the horizontal and vertical directions. You can change those settings so that the elements will align nearer or further from one another by changing the Snap tolerance settings in the Snap Align dialog box. Additionally, the Snap Align feature will align elements relative to the stage. By default, the elements will align to an 18-pixel invisible border. You can adjust the movie border value to change how near or far from the edge of the stage the elements will align.