More on Flash Motion Tweening

Motion Tween Paths (p. 288-293)

Reposition a Path

Click on the selection tool and then click on the path to select it. You can then click and drag the motion path to a new location, or use the arrow keys to move it, or change the x and y values in the Path section of the Property Inspector.

To transform a straight line motion into an arc

Click on the path and drag; the difference from the above is that there you first click on path to select it, here you do not.

To resize the path

Select the motion path as before and click on the Free Transform Tool. You can then use the resize handles of the bounding box. For precise quantities, you can enter numbers into the Property Inspector.

To reshape the path by moving control points

Click on the Subselection Tool and position the hollow- arrow pointer over a control point (one of the large diamonds in the motion path) and drag. When a solid square modifier appears, the subselection tool is over the path but not a control point and dragging will move the entire motion path.

To add control points to a motion path

Click the frame in the Timeline in which you want to insert the position keyframe and then right-click and choose Insert Keyframe>Position. A diamond icon appears in the Timeline and a neew control point appears in the motion path on the Stage.

To remove control points from a motion path

Click the frame in the Timeline which contains the position keyframe. If you right-click and choose Clear Keyframe>Position, all position keyframes will be removed from all the frames in this motion path. To select just one frame, Ctrl-click the frame and then you can clear a single keyframe.

Changing an object along a motion path

You can resize an object along a motion path, by using the Free Transform Tool. This will add a Scale keyframe at this point. The Free Transform Tool can also add a Rotation and Skew keyframe. If you select the object, under the Color Effect section of the Property Inspector, you can set the alpha, tint, and other properties for that intermediate keyframe as well.

Orienting a Tween Target to a Curved Path (p. 294)

By default, a tween target keeps its original orientation to the Stage even when following a curving motion path. You can force a tween target to preserve its orientation to the path.

To orient a tween target to a curving path

Use the techniques covered previously to create a motion tween of a non-symmetric symbol (e.g. an arrow). Use the above techniques to make this a curved path. Turn on onion skinning to see how the tween target moves along the path without orientation. Select the tween span in the Timeline and in the Rotation section of the Property Inspector, select the Orient to Path checkbox. Flash addes a rotation keyframe to every frame in the tween span to preserve the tween target's original alignment with the path.

Swapping Tween Elements (p. 295-298)

You can swap the tween target with another symbol or you can change the motion path by pasting a different path into the tween span.

To swap a tween target

In addition to creating a motion tween, create a new symbol. Select the motion tween and from the library drag an instance of the new symbol onto the stage. A dialog box will ask you whether yoiu want to replace the existing tween target. Click OK.

To swap a motion path

Layer 1 already contains a motion tween. Add a new layer, creating another motion tween. Click on the motion path for one of the layers and choose Edit>Copy. Then do either of the following: click the instance of the symbol on the stage in the other layer or in the Timeline click the tween span for the other layer. Chosse Edit>Paste in Center or Edit>Paste in Place. To make the two tween targets follow the exact same path, access the Path section of the Property Inspector and make the x and y values the same as for the other motion path.

You can also create a path with Flash's drawing tools and then copy and paste it into a motion path. To do this, create a new layer and create the path in a blank keyframe there. The path you create must not be a closed path; if you want essentially a closed path, simply delete a small portion of the path.

Changing the Duration of a Motion Tween

As described at www.adobe.com/devnet/flash/articles/animation_intro.html, you can change the duration of a motion tween. To extend the animation, put your cursor over the end of the tween in the timeline. When the mouse icon changes to a left-right arrow, click and drag the tween to extend the tween to the desired length. Any intermediate points have been proportionally updated to reflect the new duration. To shorten the duration, put your cursor over the appropriate end of the tween in the Timeline, and when the mouse icon changes to a left-right arrow, click and drag to the new desired frame.

Reversing a Motion Tween

Right click in the motion tween timeline and select Reverse Keyframes.

Motion Editor Basics (p. 299-324)

Select an object in the document that has been motion tweened or select in the timeline a motion tween span. If the panel isn't open, choose Window>Motion Editor. The categories are Basic Motion, Transformation, Color Effect, Filters, and Eases. To expand or collapse a category, click the triangle to the left of the category name. You can set the size of the rows in the property graphs -- the minimum row height is set using the Graph Size icon at the bottom left of the Motion Editor, whereas the height of the row in pixels when you select it is set in the Expanded Graph Size icon immediately to the right. The Viewable Frames icon (next on the right) sets the number of frames displayed. The maximum value is the number of frames in the selected tween span.

To add or delete keyframes to a property curve

In the Graph section of the Motion Editor, position the playhead in the desired frame. In the row containing the property curve you want to change, click the Add or Remove Keyframe. When the current frame of the property curve lacks a keyframe, the button is a barely visible gray diamond, in between the Go to previous keyframe and the Go to next keyframe triangles. To remove a property keyframe, click the Add or Remove Keyframe button for the correct row. To add keyframes, you can also Right-click and choose Add Keyframe or right click and choose Remove Keyframe. Clicking the Reset Values button at the top of a category in the Motion Editor removes all property keyframes from all the graphs in the category.

Position - the x and y coordinates are measured from the upper left hand corner of the Stage which is the (0,0) point, just like imagemaps in HTML.

Exercise: Create a 24 frame motion tween involving a star. Position the star in frame 1 at 50,50 using the Property Inspector. Using the Motion Editor, add property keyframes for position in frame 5 and change the x coordinate to 500. Then add a position keyframe in frame 15 and change the y coordinate to 300. For frame 20, set both x and y to 100. For frame 10, set x to 350 and y to 250. Then Control>Test Movie and then remove the property keyframe from frame 10. Save the document as a template called MovingStarMaster. [Note: this is to demonstrate the techique; however it may be easier to drag the target instance on the Stage; dragging creates a new position keyframe automatically].

Animating Other Property Changes

You can add property keyframes for the other properties in a similar manner.

Exercise: Create a new document from the MovingStarMaster. Position the playhead in frame 5. In the Basic Motion section of the Motion Editor, add the property keyframe as above and then use the Rotation Z hot text to enter the degree of rotation, here 90 degrees. Scrub the playhead and save the document as a template, named RotateStarMaster.

To change the tween target's scale, you can use the Transformation section of the Motion Editor. If you want to set the scale X and scale Y values indepedently of each other, set the Link Values icon to its unlinked state. Skew X and Skew Y values are always set independently.

To change a target's color, in the Color Effect row, from the Add Color menu, choose the desired effect. For example, position the playhead in frame 12, and then click the Add Color button (the plus sign icon), choose Tint. Add the keyframe and choose the tint. Similarly add the keyframe for tint amount and set the tint amount..

Editing Curves in the Motion Editor

ty curves, you can edit the curves in the motion editor by selecting the control point in the motion editor and dragging it..

Copying Frames and Properties

You can reuse all or part of a motion tween by copying and pasting frames from the tween span into other frames in the Timeline. To do this, choose Edit>Timeline>Copy Frames and then Edit>Timeline>Paste Frames.

Source: Flash CS4 Professional Visual QuickStart Guide by Katherine Ulrich, revised April 11, 2011