In a new ActionScript 3.0 FLA file, use the Rectangle tool to draw an approximately 300 × 400 pixel rectangle on the stage.

Convert the rectangle to a movie clip symbol named standin, with its registration point in the center, and then position it just above the lower middle edge of the stage. Use the Free Transform tool to resize the movie clip to approximately 25 percent of its actual size (Figure 8-1).

In the Timeline, select frame 20, and then add a new frame (Insert→Timeline→Frame) to produce a span of frames. Flash’s new tweening model creates property keyframes for you. Right-click (Ctrl-click) anywhere inside the span of frames, and then select Create Motion Tween. This action sets the current layer apart as a Motion Tween layer, so you can take advantage of the new Motion Editor panel to configure tween characteristics.

Select frame 20. This step indicates your intent to apply changes to that frame. Now select the movie clip, and then use the Free Transform tool to resize the movie clip’s dimensions to approximately 80 percent. Make sure to rotate the rectangle as described in the hypothetical project requirements (for example, apply a 15-degree rotation) and reposition the movie clip up toward the top of the stage.

Open the Motion Editor panel by clicking its tab or selecting Window→Motion Editor. Note the three hot text values along the bottom-left corner (Figure 8-2). Hover over these to see a tooltip of their names: Graph Size, Expanded Graph Size, and Viewable Frames. These hot text values adjust the settings of the property graphs inside the Motion Editor panel. Click and hold over the number for Viewable Frames. While holding down the mouse button, slide the mouse left and right to adjust the number. As you do, note that the number of visible frames in the Motion Editor panel’s graphs update to match. Set the Viewable Frames value to 20, to show the full number of frames in your tween span.

Scrub the playhead—that is, drag the playhead back and forth—to assess your work. As you do, note that a yellow diamond appears in the graphs’ Keyframe column when the playhead encounters a property keyframe. This is an Add or Remove Keyframe button, which does what its name describes. Drag the playhead to frame 1.

Scroll vertically if necessary to locate the Filters. Click the Add Color, Filter, or Ease button, and then select Blur. Change the default Blur X and Blur Y values to 0, and then drag the playhead to frame 13. Add a keyframe to the Blur Y row by clicking the Add Keyframe button or right-clicking (Ctrl-clicking) the curve and choosing Add Keyframe from the context menu. Change the Blur Y value to 40 at this new keyframe. Finally, drag the playhead to frame 20, add another keyframe to the Blur Y row, and then, in that last keyframe, change the Blur Y value to 0 again.

Select the Timeline—not in the Motion Editor panel, but the panel labeled Timeline—and then click the Motion Tween layer to select it. Use the Property inspector’s Ease hot text to apply an ease of 100. If you like, scrub the playhead again or press Enter (Return) to preview the animation with the easing. When you’re satisfied, right-click (Ctrl-click) inside the span of frames, and then select Copy Motion as ActionScript 3.0.

Create a new ActionScript 3.0 FLA file. In the Timeline, select frame 1, and then open the Actions panel as if to type some code. Instead, paste the contents of the clipboard. You should now see a considerable amount of ActionScript in the Actions panel. The actual code pasted depends on the tweens you made in your role as designer, but you should see something like the following:

import fl.motion.AnimatorFactory;
import fl.motion.MotionBase;
import flash.filters.*;
import flash.geom.Point;
var __motion_standin_2:MotionBase;
if(__motion_standin_2 == null) {
    import fl.motion.Motion;
    __motion_standin_2 = new Motion();
    __motion_standin_2.duration = 20;

    // 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_standin_2.addPropertyArray("x", [0,0,0,0,0,0,0,0,0,0,¬
         0,0,0,0,0,0,0,0,0,0]);
    __motion_standin_2.addPropertyArray("y", [0,−14.7562,−28.7166,¬
         −41.8812,−54.2425,−65.8156,−76.5852,−86.5591,−95.7297,¬
         −104.104,−111.683,−118.467,−124.454,−129.638,−134.026,¬
         −137.611,−140.408,−142.401,−143.598,−144]);
    __motion_standin_2.addPropertyArray("scaleX", [0.25,0.31,0.36,¬
         0.41,0.46,0.50,0.54,0.58,0.62,0.65,0.68,0.70,0.73,0.75,¬
         0.76,0.78,0.79,0.79,0.80,0.80]);
    __motion_standin_2.addPropertyArray("scaleY", [0.25,0.31,0.36,¬
         0.41,0.46,0.50,0.54,0.58,0.62,0.65,0.68,0.70,0.73,0.75,¬
         0.76,0.78,0.79,0.79,0.80,0.80]);
    __motion_standin_2.addPropertyArray("skewX", [0]);
    __motion_standin_2.addPropertyArray("skewY", [0]);
    __motion_standin_2.addPropertyArray("rotationConcat", [0,¬
         −1.53716,−2.99142,−4.36279,−5.65047,−6.85604,−7.97792,¬
         -−9.01691,9.9722,−10.8446,−11.6341,−12.3407,−12.9644,¬
         −13.5044,−13.9616,−14.335,−14.6263,−14.834,−14.9587,¬
         −15.0005]);

    // This call to initFilters supplies the Motion with an Array
    // of the fully-qualified class names of the filters in the
    // target's DisplayObject.filters list, in the same order and
    // indices.
    __motion_standin_2.initFilters(["flash.filters.BlurFilter"],¬
         [0]);

    // The following calls to addFilterPropertyArray assign data
    // values for each tweened filter's properties.
    __motion_standin_2.addFilterPropertyArray(0, "blurX", [0]);
    __motion_standin_2.addFilterPropertyArray(0, "blurY", [0,¬
         6.48999,12.63,18.42,23.8567,28.9467,33.6833,38.07,36.3943,¬
         30.08,24.3657,19.2514,14.7371,10.8286,7.52001,4.81715,¬
         2.70857,1.20572,0.302858,0]);
    __motion_standin_2.addFilterPropertyArray(0, "quality",¬
         [BitmapFilterQuality.LOW]);

    // Create an AnimatorFactory instance, which will manage
    // targets for its corresponding Motion.
    var __animFactory_standin_2:AnimatorFactory = new AnimatorFactory(¬
         __motion_standin_2);

    // Call the addTarget function on the AnimatorFactory
    // instance to target a DisplayObject with this Motion.
    // __animFactory_standin_2.addTarget(<instance name goes here>);
}

Note a number of important aspects here:

On its own, this pasted code can’t produce anything visual. It expects a DisplayObject instance, which means you have to provide one. Select File→Import→Import to Library, and then locate three image files approximately 300 × 400 pixels apiece.

Create a new layer in the timeline, and then drag each image to the stage. Convert each image to a movie clip symbol. Use the Free Transform tool to resize each movie clip to 25 percent of its actual size, and then arrange the movie clips as shown in Figure 8-3.

Select the movie clip on the left, and then give it the instance name photo1. Return to the Actions panel, and then uncomment the last line of code by removing the leading double slashes (change shown in bold).

// Call the addTarget function on the AnimatorFactory
    // instance to target a DisplayObject with this Motion.
    __animFactory_standin_2.addTarget(<instance name goes here>);

Replace the expression <instance name goes here> with the instance name photo1.

Select Control→Text Movie to compile the SWF file. Thanks to the Copy Motion as ActionScript 3.0 feature, the left movie clip now mimics the animation created in a separate FLA file by the designer (Figure 8-4).