The Drawing Panels Flash

When drawing in Flash, the drawing panels Info, Transform, and Align can be your best friends. Use the Info Panel to modify the coordinates and dimensions of an item. Or use the Transform Panel to scale, rotate, and skew an item. Use the Align Panel to align, regularize (match the sizes of), or distribute several items on Stage either relative to each other or to the Stage.

The Info Panel
Use the Info Panel, shown below, to give precise coordinates and dimensions to your items. Type the numbers in the spaces provided, and your item will be transformed relative to its top-left corner. Or, when working with groups and symbol instances, use the Alignment Grid to apply changes from the center. To open the Info Panel, use Window➪Panels➪Info.

Use the Info Panel options to change the location and dimensions of an item.

Use the Info Panel options to change the location and dimensions of an item.

The Info Panel has these controls:

  • Width: Use this numeric entry field to alter the width of a selected item.
  • Height: Use this numeric entry field to alter the height of a selected item.
  • Alignment Grid: The alignment grid is located just to the left of the numeric entry fields that are used for adjusting the X and Y location of any selected item. This alignment grid consists of nine small squares. Together, these squares represent an invisible bounding box that encloses the selected item. Every shape created in Flash, even circles, resides within an imaginary rectangular bounding box that includes the extremities of the shape. The alignment grid enables you to position the selected item relative to either the upper-left corner or to the center of its bounding box. Click either square to define which point to use for positioning.
  • X: Use this numeric entry field to either read the X coordinate of the item or to reposition the item numerically, relative to the center point on the X (or horizontal) axis.
  • Y: Use this numeric entry field to either read the Y coordinate of the item or to reposition the item numerically, relative to the center point on the Y (or vertical) axis.
  • RGBA: This sector of the Info Panel gives the Red, Green, Blue, and Alpha values or graphic items and groups at the point immediately beneath the cursor. Values for symbols, the background, or interface elements do not register.
  • + X: / + Y: This sector of the Info Panel gives the X and Y coordinates for the point immediately beneath the cursor—including offstage values. A negative X value is to the left of the Stage, while a negative Y is located above the Stage.To scale or reposition an item, select the item and then open the Info Panel with Window➪Panels➪Info:
  • First you must choose to scale or reposition the item relative to either the center, or to the upper-left corner. (The selected square turns black to indicate that it is selected.)
    • To work relative to the center, select the center square of the Alignment Grid.
    • Or to scale relative to the upper-left corner, click that square of the Alignment Grid.
  • To scale the item numerically, enter new values in the Width and Height fields, and then click elsewhere or press Enter to effect the change.
  • To reposition the item numerically, enter new values in the X and Y fields (located in the upper half of the panel), and then either press Enter or click elsewhere, outside the panel, to effect the change.

The Transform Panel
This panel gives precise control over scaling, rotation, and skewing of an item. With this panel, instead of using manual techniques which may be imprecise numeric values are entered in the appropriate fields and applied directly to the item. However, once transformations are applied to an item, these numbers disappear when it is deselected. With an item selected, open the Transform Panel with Window➪Panels➪ Transform, as shown below.

Use the Transform Panel to scale, rotate, and skew items.

Use the Transform Panel to scale, rotate, and skew items.

The Transform Panel has several options that relating to scaling, rotating, and skewing:

  • Scale: Use this to scale the selected item numerically by percentage. Enter a new number in the Scale field and press the Return or Enter key. The shape scales to the specified percentage of its previous scale. To constrain the shape to its current proportions, click the Constrain check box. To restore the shape to its original size, press the Reset button However, once the shape is deselected, it cannot be Reset. The only way to get back your original object’s size is to immediately choose Edit➪Undo (probably more than once) or exit your movie without saving your changes (in which case you’ll probably lose other work as well).
  • Rotate: Click the radio button and then apply a rotation to the selected item by entering a number in the Rotate field, and then pressing the Return or Enter key.
  • Skew: Items can be skewed (slanted in the horizontal or vertical direction) by clicking the Skew radio button, and then entering values for the horizontal and vertical angles. Click Apply and the item will be skewed to the values entered.
  • Copy and Apply Transformation: Note this Copy button! It’s the left button at the bottom-right corner of the panel. Press it and Flash makes a copy of the selected item (including shapes and lines), with all Transform settings applied to it. The copy is pasted in the same location as the original, so select it with the Arrow Tool and scoot it to a new position.
  • Reset: This button, at the bottom-right corner of the panel, removes the transformation you just performed on a selected object. However, once the object is deselected, this button does not work. For simple items, this is really an Undo button, rather than a Reset button. However, you can use the Reset button for instances, groups, or type blocks even after they have been deselected (but not after you save your movie).

The Transform submenu
If you’ve already mastered Part I, “Mastering the Flash Environment,” you know that the Arrow Tool options enable you to interactively scale, rotate, or skew an item relative to its center point. In conjunction with a watchful eye over either the Transform Panel, or the Info Panel, the Arrow Tool options can be used for a measure of numeric control over these processes. But there’s another area of Flash (only briefly mentioned in Part I) that can be indispensable. It’s the Transform submenu, Modify➪ Transform, shown below.

The Transform submenu of the Modify menu

The Transform submenu of the Modify menu

The Transform submenu has these items:

  • Scale: Use this command to interactively scale an item, several selected items, or a group.
  • Rotate: Use this command to interactively rotate an item, several selected items, or a group.
  • Scale and Rotate: Use this command to invoke the Scale and Rotate dialog to numerically scale and rotate an item, several selected items, or a group.
  • Rotate 90°CW: Use this command to rotate an item, several selected items, or a group 90°clockwise.
  • Rotate 90°CCW: Use this command to rotate an item, several selected items, or a group 90° counterclockwise.
  • Flip Vertical/Flip Horizontal: Use either Flip command to flip an item, several selected items, or a group on either their vertical or horizontal axis while leaving the relative position of the item intact, as shown below.
  • The item on the left is the original. The item in the middle has been flipped vertically, while the item on the right was flipped horizontally.

  • Remove Transform: Use this command to remove previous transformations. Depending on the item transformed, this command remains viable as follows:
    • Simple items—until deselected.
    • Instances, groups, and type blocks—until the movie is saved.
  • Edit Center: Use this command to relocate the center, or axis, of a group, instance, type block, or bitmap to a position that is off-center. This command does not work on simple graphic shapes.

Below shows the same item as in the previous one, except that the center, as shown on the left, is being edited, so that the new center will be at the lower right. As shown in the middle, this affects the way that it responds to a rotation as well as how it sits when scaled, as at the right.

Changing an item’s center for rotation and scaling.

Changing an item’s center for rotation and scaling.

The Align Panel
The Align Panel, shown below, is one of many features for which you’ll be grateful every time you use it. It enables you, with pixel-perfect precision, to align items to each other and the Stage and to distribute items evenly on the Stage. To open the Panel, choose Window➪Panels➪Align (Ctrl+K/Command+K).

Use the Align Panel to both size and line up items without fuss.

Use the Align Panel to both size and line up items without fuss.

The Align Panel has five controls. The icons on the buttons are relatively selfexplanatory:

  • Align: There are six buttons in this first control. The first group of three buttons is for horizontal alignment, and the second group of three is for vertical alignment. These buttons align two or more items (or one or more items with the Stage) horizontally (top, middle, bottom) or vertically (left, middle, right).
  • Distribute: This control also has six buttons, three for horizontal distribution and three for vertical distribution. These buttons are most useful when you have three or more items that you want to space evenly (such as a set of buttons). These buttons distribute items equally, again vertically or horizontally. The different options enable you to distribute from edge to edge, or from item centers.
  • Match Size: This control enables you to force two or more items of different sizes to become equal in size; match items horizontally, vertically, or both.
  • Space: This option enables you to space items evenly, again, vertically or horizontally.
  • You might wonder how this differs from Distribute. Both are similar in concept, and if your items are all the same size, they will have the same effect. The difference becomes more apparent when the items are of different sizes:
    • Distribute evenly distributes the items according to a common reference (top, center, or bottom). For example, if one item is larger than the others, it may be separated from the other items by less space, but the distance between its top edge and the next item’s top edge will be consistent with all the selected items.
    • Space ensures that the spacing between items is the same; for example, each item might have exactly 36 pixels between it and the next.
  • To Stage: On the right, you will also notice a To Stage button. By clicking this, you include the full Stage in the operation.

To align an item to the exact center of the Stage, do the following:

  1. Click to select the item that you wish to center.
  2. Click To Stage in the Align Panel.
  3. Click the Align horizontal center button.
  4. Click the Align vertical center button

Face Book Twitter Google Plus Instagram Youtube Linkedin Myspace Pinterest Soundcloud Wikipedia

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Flash Topics