Recipe 3.14. Aligning, Distributing, Resizing, and Spacing Elements

Problem

You want to align or space elements relative to each other and/or the stage.

Solution

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.

Discussion

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 buttons, which align along a horizontal axis. To align an element to the center of the stage, activate the To Stage button, and click Align Vertical Center and then Align Horizontal Center.

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 approximation is good enough, you can simply move the elements until they appear close enough. If a greater degree of precision is required, remember that the Property inspector reports the width and height as well as the coordinates of the selected element. You can use that information to align elements to a tenth of a pixel of precision. As we've already seen, using the Align panel will distribute the rectangles such that their registration points are equidistant. And because the heights are different for the rectangles, the effect would be that the space between the rectangles would vary. Instead, the rectangles are 5 pixels apart. You can achieve that effect by adding the y-coordinate and height of one element plus the number of pixels of space between elements to determine the y coordinate for the next.

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 size of the stage.

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 open the Align panel, select elements, and choose a preset. It may be much more convenient to simply align elements with the mouse. With the Snap Align feature, you can do just that. To activate the feature, make sure that the Snap Align option is checked in the View Snapping menu. With the feature toggled on, a dashed line appears when you are dragging an element and it has aligned to another element or to the stage.

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.

See Also

Recipe 3.11