Recipe 3.14. Aligning, Distributing, Resizing, and Spacing ElementsProblemYou want to align or space elements relative to each other and/or the stage. SolutionUse 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. DiscussionFlash'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 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 You can adjust the settings for the Snap Align feature by choosing View See AlsoRecipe 3.11 ![]() |
![]() |
![]() |
![]() |
![]() |
Tripod >> 3pod Tips & Learning and manuals for educations