Recipe 3.13. Laying Out Page Elements Proportionately

Problem

You want to design or lay out elements proportionately, precisely, and/or harmoniously.

Solution

Use any combination of the grid, guides, and rulers.

Discussion

For certain kinds of informal art, you can get away with positioning elements by dragging and dropping them into place; a few pixels to the left or right won't make any difference. But for certain types of files, such as technical illustrations or designs based on classical architecture, layout must be precise and proportionate. Flash offers several tools to assist you in pixel-perfect layouts.

One useful tool is the grid, which covers the stage with rectangles, like graph paper. You can set the size of the rectangles using any unit of measurementfor example, every 12 pixels, or half-inch, or whole centimeter. You can toggle snap constraints on or off as well, which makes it easier to create proportionately sized and spaced elements.

To toggle the grid on or off, choose View Grid Show Grid. The grid appears on the stage. If you export the movie, the grid will not appear in the SWF; it is an authoring aid only.

By default, the grid comprises squares, 18 pixels (or 0.25 inches) wide. You can change the size of the width and height of the rectangles, within limits. You cannot set a side to less than 7.2 pixels (0.1 inch), or more than 288 pixels (4 inches). To change the size of the grid, enter a new width and height in the Grid dialog, accessed by selecting View Grid Edit Grid.

You can use the grid as a visual guide, or you can cause Flash to snap elements to the grid. For example, if you use the Pen tool to plot the points of a line, you can cause Flash to plot the points only on the intersections of the grid.

To toggle Snap to Grid on, choose View Snapping Snap to Grid, or check Snap to Grid in the Grid dialog box. When snapping is activated, you can control the degree to which Flash applies snapping, in the Grid dialog box's Snap To accuracy dialog box. Three options cause snapping when you click within a certain proximity to the grid. From least to most tolerant, they are Must Be Close, Normal (the default), and Can Be Distant. A fourth setting, Always Snap, snaps to the nearest grid intersection, regardless of how far away from it you clicked.

A second layout tool, a guide, is like the grid in that it crosses the stage in horizontal and/or vertical lines. The difference is that with guides, you can position them arbitrarily, rather than at set intervals, and you set them one at a time. To create guides, follow these steps:

When guides are created, you can move or remove them. To move a guide, simply drag it to the new position. To remove a guide, drag it back to the ruler from which it originated. Because guides are always movable, they can interfere with your ability to select and modify stage content. To avoid this problem, you can lock guides via View Guides Lock Guides. When locked, the guides remain visible on the stage, but you cannot select or move them.

Guides can be customized in the Guides dialog box. This dialog box contains some options redundant with the main menu, including checkboxes for locking guides and activating Snap To Guides. The snap feature is nearly the same as that of the grid: the Snap Accuracy setting enables you to specify the snap tolerance, with the following settings: Must Be Close, Normal (the default), and Can Be Distant. Notice that you can also change guide color in the Guide dialog box. By default, guides are bright green, but if that color is hard to distinguish from stage content, you can change it to a different color.

Flash's snap feature extends beyond the grid and guides. You can also snap to vector art on the stage. To activate this feature, turn View Snapping Snap to Objects on. When activated, shapes and lines drawn or moved in approximation to other shapes are snapped to them. Activating this option is useful when drawing complex shapes by combining multiple primitive shapes or lines. Snap to Objects works across multiple layers; that is, an element in one layer will snap to an element in another layer.

Another useful layout feature, which is especially helpful with spacing multiple elements, is the Align panel, discussed in Recipe 3.14.

See Also

Recipe 3.12, Recipe 3.14