This chapter is from the book
This chapter is from the book
This chapter is from the book
Using Layout Aids
Flash provides several aids to help you draw with precision and create unified layouts. Grids, guides, and guide layers help you to align elements within your layouts, helping to create an overall sense of order and intention. If elements are placed randomly, with no relation to other elements within a layout, a design will seem haphazard and will lack a sense of unity.
Grids, Guides, and Guide Layers
Grids, guides, and guide layers help you to place objects precisely on the Stage. Grids and guides provide vertical and horizontal guidelines that objects can be aligned or snapped against. The grid option displays a series of uniformly placed horizontal and vertical lines that cover the Stage, appearing behind any artwork. Guides are individual horizontal and vertical lines that are manually placed on the Stage. Guide layers allow you to create your own visual alignment aids.
Grids provide a visual framework for alignment as you draw or place elements in a layout. Grids are not exported, so they will not be visible in your final movie. To show the grid, choose View, Grid, Show Grid. To edit the grid, choose View, Grid, Edit Grid, and the Grid dialog box will appear, as shown in Figure 3.25. You can specify the spacing of the grid lines in pixels, from 7 to 288.
)
Figure
3.25 You can change the size, color, and snapping settings of grids in the
Grid dialog box.
You can also enable snapping so that objects align exactly along the grid.
Whereas grids automatically place guidelines over the entire Stage, guides allow you to place vertical and horizontal guidelines at random intervals on the Stage. Guides are most useful for marking the alignment of recurring elements that give structure to your layout, such as menu bars or columns of text.
To use the guides, you must show the rulers by choosing View, Rulers. Rulers then appear along the top and left side of the Stage. To add a guide, click on the horizontal ruler at the top of the Stage and drag down from it to create horizontal guides, or click and drag across from the vertical ruler on the left to create vertical guides. To move a guide, click and drag it with the Arrow tool. You can also choose View, Guides, Snap to Guides to snap objects to your guides. To remove a guide from the Stage, drag it with the Arrow tool back to its originating ruler.
To edit guides, choose View, Guides, Edit Guides to launch the Guides dialog box, as shown in Figure 3.26. Guide options are almost identical to Grid options, with an additional option named Clear All, which deletes all of your guides.
){kind=small}
Figure
3.26 You can change the color and snapping settings of guides in the Guides
dialog box.
Guide layers allow you to create irregular guides. Grids and guides produce guidelines that are horizontal and vertical and that extend from one end of the Stage to the other. What's special about guide layers is that they allow you to use any of the drawing tools to create your guides. With guide layers, you are not limited to perpendicular guidelines, or even to lines at all. In a guide layer, you could draw a diagonal line, or hexagonal shapes, to use for alignment. Click the Guide icon below the layers to create a guide layer. Draw your guide shapes and then use the Align panel to position elements on other layers to elements on your guide layers.
The Align Panel
Using the Align panel, you can align objects to each other or to the Stage. To align objects to the Stage, select the To Stage button on the right of the panel, as shown in Figure 3.27. Use To Stage to align objects relative to the Stage—for example, to center them or to align them to the left side of the Stage. To align objects to each other, deselect the To Stage button. Select two or more objects, and use the Align buttons to align the right or left edges or to center, or to align the tops or bottoms of objects, or to center them vertically. The Distribute buttons will distribute a series of objects evenly, by their top or bottom edges or by their centers, by their left or right edges, or by their vertical centers.
TIP
When Flash aligns objects to each other, it notes which edge you want to align and then uses whichever object's edge is furthest in that direction to align the others.
)
Figure
3.27 The Align panel aligns objects to each other or to the Stage.
Snapping
Another way to align elements is to use snapping. One of the simplest yet most needed new features in MX is pixel snapping. Because Flash is vector based, you can easily and inadvertently place objects in between whole pixels. These seemingly insignificant pixel fractions can throw off alignment and create problems. Pixel snapping has finally arrived in MX. Pixel snapping works by creating a grid with one pixel spacing between guidelines, and then snaps objects on the Stage to those guidelines. To enable pixel snapping, choose View, Snap to Pixels. Voila! Any object you create or place on the Stage will snap to a whole pixel coordinate. The vast majority of alignment problems are solved. I always turn on pixel snapping as I work to help avoid sub-pixel alignment issues. Unfortunately, MX will turn off pixel snapping whenever you open a new Flash document or launch Flash, so you have to keep turning it on.
NOTE
At 400% magnification, pixel snapping displays its grid. If you zoom in, it will appear. To hide the grid, press and hold X. The grid will reappear when you let go.
You can temporarily disable pixel snapping as you work. Press C to turn it off. It will reactivate as soon as you release C.