Graphic Effects Learning Guide for Flash: Transformations

One of the most common tasks for Flash developers is to change (transform) their graphics by moving, scaling, or otherwise altering their layout using the range of features in the Adobe Flash Professional CS5 workspace.

Graphic transformations are a central part of building tweened animations in Flash Professional. For example, it's common to create an animation where the position, scale, and rotation of object change over time. The animation could be a bouncing ball or scrolling text or an infinite number of other visual effects. While the features that create these animations are very simple, the results can be quite impressive.

Graphic transformations are also used to create effects on static graphics. For example, if you were positioning buttons in a column on the Stage, you could use the Align panel to align their edges or distribute the position of the buttons equally within an area. Moving, scaling, and rotating shapes are also common tasks while creating graphic compositions.

Transformations applied to any display object are undoable. The original state of the object is saved and can be reset using the Transform panel or the Modify menu (Modify > Transform > Remove Transformation).

You can transform drawing objects, grouped objects, text blocks, and symbol instances using the Free Transform tool in the Tools panel (see Figure 1). The Free Transform tool allows you to select and transform display objects on the Stage. Use this option to quickly change your graphics while visually evaluating the transformation.

Check out Jen deHaan's blog post, Set transformation point and reset transformation point in Flash CS3, for some helpful tips for working with the Free Transform tool.

If you need precise control over the transformation effect, you can enter numerical data into the Transform panel (see Figure 2). Use the Transform panel to numerically adjust the scale, rotation, skew, 3D rotation, and center point location of the transformation. The center point is a reference to the point which the object rotates around or scales from.

Note: Use the Reset button in the lower right corner of the Transform panel to restore a display object back to its original state.

If you need to align objects, you can use the Align panel (see Figure 3). Use the Align panel to align multiple objects to each other or to the Stage. You can also match the horizontal or vertical sizes of objects or distribute objects evenly within a given area.

For more information on transformations, see the Transforming objects section of the Flash Professional online help and the transform section of the Flash glossary.

The 9-slice scaling feature was introduced in Flash Professional 8 and now features an improved, more accurate author-time preview in Flash CS4 and later. This feature gives you better control of the effects of scaling vector graphics within movie clip instances. With 9-slice scaling you can create graphics that can be scaled without the distortion that often occurs in scaling. For example, you may find this feature useful when creating button graphics with rounded corners where the graphic needs to change size while retaining the shape of the original button.

To turn on 9-slice scaling:

1. Create a new ActionScript 3 FLA and name it 9-slice.fla.
2. Rename Layer 1 to assets.
3. Using the Circle tool, draw nine circles of the same size (see Figure 4).
4. Select all nine circles and convert them to a movie clip symbol (Modify > Convert to Symbol) named Circles.
5. In the Symbol Properties dialog box, check the Enable guides for 9-slice scaling option.
6. Click OK to accept the settings and then double-click the instance to enter its symbol editing mode.
7. Notice the guide lines that appear in the editing mode. Use the cursor to drag the guides to the proper locations to isolate the circles in the corners.
8. Return to the Stage to view the instance again. Scale it to a larger size using the Free Transform tool. Notice that the circles in the corners do not scale and that the stroke weight remains the same.

For more information on 9-slice scaling, see the Scaling and caching symbols section of the Flash Professional online help and the 9-slice scaling section of the Flash glossary.

Flash Professional CS4 (and later) and Flash Player 10 support 3D rotation of two-dimensional objects using the z property and the rotationX , rotationY , and rotationZ properties of the DisplayObject class. You can access these properties in ActionScript 3 or by using the 3D Rotation tool (W) in Flash Professional (see Figure 5).

To create a 3D transformation:

1. Create a new ActionScript 3 FLA file and name it 3d-tween.fla.
2. Rename Layer 1 to assets.
3. Draw a shape on Frame 1 and convert it to a movie clip symbol (Modify > Convert to Symbol) named Shape.
4. Right-click the keyframe containing the shape and choose Create Motion Tween. Make sure the playhead is in the last frame on the Timeline.
5. Select the 3D Rotation tool. Click the shape and drag it into position. You can adjust the x, y, or z axis by clicking the different lines in the 3D rotation view.
6. Export the SWF file (Control > Test Movie) to see the 3D tween play.
7. Save the file.

Note: The 3D Rotation tool can be used with TLF text fields but cannot be directly used on Classic text fields or bitmap images.

For more information on 3D transformations, see the 3D graphics section of the Flash Professional online help and the 3D Rotation tool section of the Flash glossary. Also check out the 3D rotation and advanced 3D effects ActionScript samples.

Display objects can also be transformed using ActionScript at runtime. Each display object contains a common programming interface which allows you to move, scale, rotate, and change the characteristics of the display object instance.

To transform an object using ActionScript:

1. Create a new ActionScript 3 FLA file and name it transform_as.fla.
2. Rename Layer 1 to assets.
3. Draw a shape on Frame 1 and convert it to a movie clip symbol (Modify > Convert to Symbol) named Shape.
4. Select the instance and name it shape_mc in the Properties panel.
5. Rename Layer 1 to assets and add a new layer named actions above it.
6. Select Frame 1 of the actions layer and open the Actions panel (Window > Actions).
7. Copy and paste the following code in the Script window of the Actions panel:

8. Run the Test Movie (Control > Test Movie) command to see the effect. Notice that the shape rotates in three-dimensional space spinning on its y axis. Use a number larger than 5 to speed up the animation.
9. Save the file.

This sample uses the Stage's ENTER_FRAME event as an animation engine to transform the rotation of the shape. The ENTER_FRAME event fires every time Flash Player enters a new frame, or in the case of a single frame timeline, loops at the speed of the frame rate.

For more information on display object programming, see the Manipulating display objects section of the ActionScript 3 Developer's Guide.

This section of the Graphic Effects Learning Guide provides an overview of transformation effects and options for applying transformations to your graphics. Spend some time experimenting with the workspace features in Flash Professional and then see if you can reproduce the same effects in ActionScript.

Check out the following resources for more advanced information on working with transformations in ActionScript:

• Transform and Matrix classes (ActionScript 3 Reference for the Flash Platform)
• Using matrices for transformations, color adjustments, and convolution effects in Flash (Phil Chung)
• Working in three dimensions (ActionScript 3 Developer's Guide)