Among the many workflow improvements included with Flash CS4, there is a handful of new graphic effects features that provide new options for animation and graphic production. These features are supported in ActionScript 3 files and require Flash Player 9, or Flash Player 10 in some cases.

This section provides an overview of many of the new graphics related features in Flash CS4.

Requirements

To follow along with this learning guide, you will need to install the following software:

Flash CS4 Professional

• Try
• Buy

Prerequisite knowledge

This article assumes you are familiar with the Flash Professional workspace and have a basic knowledge of working with FLA files. An intermediate knowledge of ActionScript is required for the sections of this learning guide that discuss how to create graphic effects programmatically.

Inverse kinematics

The Bone tool in Flash CS4 lets you create armatures using inverse kimematics. An armature creates coordinated movements within a chain of connected parts. The parts within the armature can be sections of a drawing object or multiple symbol instances.

To create a simple armature:

1. Create a new ActionScript 3 FLA file and name it ikMovement.fla.
2. Draw a shape on frame 1 and convert it to a symbol (Modify > Convert to Symbol).
3. Duplicate the shape (Edit > Duplicate) two times and spread the instances out on the Stage about 50 pixels apart.
4. Click the Bone tool in the Tools panel. Select the instance farthest to the left and drag the selection to the next instance to the right. Notice the "bone" selection indicator that connects the two instances. The first object that you select is the root joint, from which all other joints in the armature stem. Connect all the instances with the Bone tool.
5. Choose the Selection tool (V) and click on the instance farthest to the right, and then drag it around the screen. Notice how you can use the armature to position the collection of graphics at authortime.
6. Select the keyframe in the timeline containing the armature to show its frame properties in the Property inspector. Change the Type field from Authortime to Runtime under the Options section.
7. Export the SWF file (Control > Test Movie) to see the armature animation at runtime. Drag the shapes around to see the effect.

Note: You can work with armatures with either the Authortime or Runtime setting. In Authortime mode, you can create tweened animations by creating pose frames on the armature layer.

You can create armatures in the Flash CS4 authoring tool for Flash Player 10 and later. For more information, please see the Working with inverse kinematics section of Programming ActionScript 3 for Flash, as well as the Animating with the Bone tool section of Creating animation in ActionScript 3.

3D animation of 2D objects

Flash CS4 and Flash Player 10 support 3D animation of 2D objects using the new z property and 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 CS4.

To create a 3D tween:

1. Create a new ActionScript 3 FLA file and name it 3dTween.fla.
2. Draw a shape on frame 1 and convert it to a symbol (Modify > Convert to Symbol).
3. Right-click the keyframe containing the shape and choose Create Motion Tween. Make sure the playhead is in the last frame on the Timeline.
4. Select the 3D Rotation Tool. Click and drag the shape into position.
5. Export the SWF file (Control > Test Movie) to see the 3D tween play.

Copy and paste motion

One exciting and relatively new feature is the ability to create a motion tween along the Timeline and then copy and paste the exact tweening effect on another object. This feature can act as a consistency tool and offers an easy and efficient method for applying animation effects across a movie or multiple movies.

Note: The process for creating tweened animations has changed in Flash CS4, but the process for copying a tween is the same as it was in Flash CS3.

To copy and paste all the properties of a motion tween:

1. Create a new ActionScript 3 FLA file and name it pasteMotion.fla.
2. Name the default layer shape1. Draw a shape on frame 1 and convert it to a symbol (Modify > Convert to Symbol).
3. Right-click the keyframe on frame 1 of the shape1 layer and choose the Create Motion Tween option. Notice that 24 frames are automatically added to the Timeline.
4. Change the physical properties of the instance at frame 20 by moving it on the Stage and distorting the shape using the Free Transform (Q) tool. Notice the motion guide line that connects the two instances on the Stage; you can select the line and drag to bend it into a curve if you like.
5. Select the frames in the timeline layer where the animation exists. Right-click in the selection and choose the Copy Motion option from the context menu.
6. Create a new layer named shape2 and draw a second shape on the layer. Select the shape and convert it to a symbol.
7. Right-click the keyframe in the timeline that contains the new instance and choose the Paste Motion option to paste the motion tween to the shape2 layer.
8. Export the SWF file (Control > Test Movie) to see the animations play.

To save a tween as a motion preset:

1. Repeat Steps 1–4 in the previous section.
2. This time, right-click the keyframe and choose the Save as Motion Preset option.

3. Select the options from the original tween that you want to paste and click the Apply button to apply the effect (see Figure 7).

   

   Figure 7. The Motion Presets panel is a new feature in Flash CS4 enabling you to choose animation presets or create custom presets.

4. To apply a saved preset, add an instance of a movie clip to a keyframe and select it.
5. Right-click the preset in the Motion Presets panel and choose the Apply to current location option.
6. Export the SWF file (Control > Test Movie) to see the animations play.

Copy and paste motion as ActionScript 3

Copying a motion tween as ActionScript 3 allows you to paste the effect as ActionScript. In Flash CS3, the resulting ActionScript uses descriptive data written in XML format along with the ActionScript 3 Animator class to dynamically create the animation effect. In Flash CS4, the resulting ActionScript uses the AnimatorFactory class to produce the effect without XML. These approaches offer a quick way to generate animation in your code-based work or as a consistent way to quickly apply motion animation settings to a number of objects without using the Timeline.

Note: The Animator and AnimatorFactory classes are available in Flash Player 9 and later. The Animator3D and AnimatorFactory3D are available in Flash Player 10 and later for 3D tweens.

To copy a motion tween as ActionScript 3:

1. Create a new ActionScript 3 FLA file and name it copyAS3Motion.fla.
2. Name the default layer shape1. Draw a shape on frame 1 and convert it to a symbol (Modify > Convert to Symbol).
3. Right-click the keyframe containing the instance and choose the Create Motion Tween option. The Timeline automatically extends to 24 frames.
4. Change the physical properties of the instance at frame 24 to create a tween.
5. Right-click the frames in the layer containing the tween and choose the Copy motion as ActionScript 3 option.
6. Create a ActionScript 3 FLA file named pasteAS3Motion.fla.
7. Name the default layer Assets and draw a second shape on the layer. Select the shape and convert it to a symbol.
8. With the new shape still selected, assign the instance name my_mc to the instance in the Property inspector.
9. Add a new layer and name it Actions. Select the keyframe on frame 1 of the Actions layer and paste the motion code from the Clipboard to the Actions panel. Depending on what your original tween looks like, your code will look similar to the following:
   

   import fl.motion.AnimatorFactory;
   import fl.motion.MotionBase;
   import flash.filters.*;
   import flash.geom.Point;
   var __motion_sq_2:MotionBase;
   if(__motion_sq_2 == null) {
      import fl.motion.Motion;
       __motion_sq_2 = new Motion();
       __motion_sq_2.duration = 24;
   
   
       // Call overrideTargetTransform to prevent the scale, skew,
       // or rotation values from being made relative to the target
       // object's original transform.
   
       // __motion_sq_2.overrideTargetTransform();
   
   
       // The following calls to addPropertyArray assign data values
       // for each tweened property. There is one value in the Array
       // for every frame in the tween, or fewer if the last value
       // remains the same for the rest of the frames.
       __motion_sq_2.addPropertyArray("x", [0,5.63511,11.3635,17.3335,23.9381,32.789,45.597,55.1297,63.5817,71.8295,80.1171,88.5647,97.1921,106.035,115.079,124.33,133.779,143.438,153.271,163.286,173.464,183.794,194.295,204.95]);
       __motion_sq_2.addPropertyArray("y", [0,-12.9125,-25.8012,-38.585,-51.0339,-61.9071,-60.1564,-49.8042,-38.5181,-27.078,-15.6877,-4.38936,6.75406,17.75,28.5647,39.203,49.6592,59.9546,70.0589,79.9907,89.7427,99.3154,108.736,118]);
       __motion_sq_2.addPropertyArray("scaleX", [1.000000]);
       __motion_sq_2.addPropertyArray("scaleY", [1.000000]);
       __motion_sq_2.addPropertyArray("skewX", [0]);
       __motion_sq_2.addPropertyArray("skewY", [0]);
       __motion_sq_2.addPropertyArray("rotationConcat", [0]);
       __motion_sq_2.addPropertyArray("blendMode", ["normal"]);
   
       // Create an AnimatorFactory instance, which will manage
       // targets for its corresponding Motion.
       var __animFactory_sq_2:AnimatorFactory = new AnimatorFactory(__motion_sq_2);
       __animFactory_sq_2.transformationPoint = new Point(0.499281, 0.499281);
   
       // Call the addTarget function on the AnimatorFactory
       // instance to target a DisplayObject with this Motion.
       // The second parameter is the number of times the animation
       // will play - the default value of 0 means it will loop.
       // __animFactory_sq_2.addTarget(<instance name goes here>, 0);
   }
   

10. Delete the comment on the second-to-last line of code and insert the name of your instance in place of the <instance name goes here> text.
11. Export the SWF file (Control > Test Movie) to see the animations play.

Tip: For dynamic processing of animations, explore using the Timeline object in Flash JavaScript (JSFL) for possibilities in author-time automation. Please see Extending Adobe Flash CS4 Professional in the online Help pages.

9-slice scaling

The 9-slice scaling feature was introduced in Macromedia Flash 8 and now features an improved, more accurate authortime preview in Adobe Flash CS4. This feature allows you to better control the effects of scaling vector graphics within movie clip instances. By using 9-slice scaling you can create graphics that can be scaled without the distortion that often occur in scaling. For example, you may find this feature very 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 FLA and name it scalingRectangle.fla.
2. Using the Circle tool, draw nine circles of the same size (see Figure 8).
3. Select all nine circles and convert them to a symbol (Modify > Convert to Symbol).
4. In the symbol properties dialog, check the Enable guides for 9-slice scaling option.
5. Click OK to accept the settings and then double-click on the instance to enter its symbol editing mode.
6. 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.

7. 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.

   

   Figure 8. Guides available for placement while editing within a symbol with 9-slice scaling enabled

Where to go from here

To learn more and explore what you can do with graphic effects in Flash CS4, check out the Graphic effects section of the Flash Developer Center.

About the author