Week 5 Topics

Chapter 7 - Motion Tweening

Motion tweens require the use of symbols, groups, and text blocks whereas a shape tween uses shapes and broken-apart text. In addition to position, motion tweens can animate scale, tint, transparency, rotation, and distortion.

Exercise 1 - Basic Motion Tweening (using motionTween.fla)

  1. Click on the Insert Layer button to add a new layer. Double-click on the layer name to change it to motionTween. Open the library and click the boarder symbol to select it. Click and drag an instance onto the Stage.
  2. Click on frame 20 and press F6 to insert a keyframe; this will copy the contents of frame 1 to frame 20.
  3. Click on frame 20 of the background layer and press F5 to add a frame on that layer; this will mean the background image will be visible from frame through frame 20.
  4. With the playhead still over Frame 20, drag the boarder to the bottom right corner of the Stage. Notice that when you select the boarder, the motionTween layer became active. View>Magnification>Show All permits one to see the entire image.
  5. In the Timeline, click anywhere between frame 1 and 20 and in the Property Inspector, choose Motion from the Tween drop-down menu. Press Enter to preview it.
  6. In the Property Inspector, choose CW (clockwise) for the Rotate option. This will rotate him once. Press Enter to Preview

Exercise 2 - Tweening Effects - One can tween the alpha, tint, brightness, size, position, and skew of a Graphic symbol.

  1. Using the previous file, make sure the Playhead is in frame 20. Select the boarder by clicking on it. In the Property Inspector, set the Color Styles to Brightness and then change the brightness either by using the slider or by entering a percent. Preview the animation. The first frame was left the same, but one changed the last frame, so the intervening frames were changed as well.
  2. Move the Playhead to Frame 1. Select the Free Transform tool and select the boarder on the Stage. Drag a corner inword to make it smaller (holding down Shift key keeps the aspect ratio the same). Click on Frame 20 and again using the Free Transform tool, drag outward at the diagonal to make it bigger. Press Enter to preview.

Exercise 3 - Editing Multiple Frames (using editMultipleFrames.fla) - The Edit Multiple Frames feature allows one to reposition an entire animation.

  1. Open the file. In the Timeline, click the Insert Layer button to add a new layer. Double click on the name of the new layer and rename it tween. Open the Library by pressing F11 and drag the boarder in the Library onto the upper left hand corner of the sky
  2. Select Frame 15 and press F6 to add a keyframe - this will copy the contents of Frame 1 to Frame 15.
  3. Select Frame 15 on the background layer and press F5 to add frames to that layer so that the background will be visible throughout the entire motion tween.
  4. In Frame 15, drag the boarder to the right side of the sky, and then click in the Timeline anywere between the two keyframes and then select Motion from the Tween drop down menu in the Property Inspector. Set the rotate option to CCW. Press Enter to preview.
  5. Turn on the Edit Multiple Frames feature by clicking the Edit Multiple Frames button in the status bar of the Timeline. Position the starting and ending point of the dark bar at the top of the timeline to span from Frame 1 to Frame 15.
  6. Click to the right of the tween layer name to select all the frames in the layer. Click on one of the boarders (from either the beginning or ending frame) and drag - both boarders will move.
  7. Turn off Edit Multiple Frames by clicking the Edit Multiple Frames button again and press Enter to Preview. Close the file.

Exercise 4 - (using MotionGuideFinal.fla and motionGuide.fla) - Using a Motion Guide - A Motion Guide is a type of layer on which you can draw a path. The symbol used in the motion tween can then follow this path rather than a straight line between the two keyframes.

  1. Open the final version of the file and choose Control>Test Movie to view it. Close the preview window and the file and then open the other file.
  2. Insert a new layer to the Timeline and rename it flake. Press F11 to open the library and drag an instance of the snowflake onto the top left corner of the Stage. Close the library by pressing F11.
  3. To make the background show in frames 1-40, clicking in frame 40 of the background layer and press F5 to insert a frame.. On the flake layer, click on Frame 40 and press F6 to add a new keyframe. Then click on the snowflake instance to drag it to the lower right corner of the Stage.
  4. Click anywhere between Frame 1 and Frame 40 to select a frame between the two keyframes and in the Property Inspector, select Motion from the Tween drop down box. Press Enter to test the animation.
  5. Select the flake layer by clicking to the right of the layer name. Click the Add Motion Guide button - it's at the bottom of the Timeline, immediately to the right of the Insert Layer button. Lock the flake layer.
  6. Select the Pencil tool and for the Pencil Mode option, choose Smooth. Choose a stroke color that will show up against the background. Draw a curved line. Unlock the flake layer and lock the Guide:flake layer.
  7. Move the Playhead to Frame 1 and using the Arrow tool, click the little plus sign in the circle in the middle of the snowflake instance (the registration point). Click and drag the snowflake to the top point of the line you drew in the Guide layer. When you get close, the snowflake will snap to the line and the registration point will turn into a small circle. One must grab the snowflake instance from the Registration Point in order for this to work.
  8. In Frame 40, again click the Registration Point of the snowflake symbol instance and drag to the bottom point of the line and it should again snap to the line. Preview your animation by pressing Enter. When you select Control>Test Movie the contents of the Guide layer will not be visible. If the snowflake follows a straight line rather than the curved line, reattach it to the line at both beginning and end and try again.
  9. Click on Frame 1 in the flake layer. In the Property Inspector, click on the checkbox next to Orient to path. The snowflake will be turned in the direction of the Path. Then enter a value of -50 for Ease (this will make the snowflake start off slow and then speed up).

Exercise 5 - Exploding Text (using explodeFinal.fla and explode.fla)

  1. Open the final version and test by Control>Test Movie. Close the file and open the other file. Select the text tool and in the Property Inspector, set the Font to Arial, the Font Size to 96, and Bold. Click on the stage and type xboarding.
  2. With the text selected, select Modify>Break Apart. This will break the text box into 9 individual text boxes. With them still selected, choose Modify>Distribute to Layers. This will place each letter on a separate layer.
  3. Select the Arrow tool and click off the Stage to deselect all nine letters. Then select the x. Press F8 to convert to a graphic symbol, naming it x. [Note: you don't have to convert the text box to a symbol to use a motion tween but you can do additional things with it]. Repeat this step for each of the other letters.
  4. On the Timeline, click on Frame 20 and drag your cursor down over the nine layers that have a symbol in them. Then press F6 on the keyboard -- this inserts a keyframe on all nine layers. Add a keyframe in frame 40 on all layers using the same procedure.
  5. Click off the stage to deselect the symbols and with the Playhead in frame 40, drag the x off the left side of the stage onto the work area. Select the Free Transform tool to rotate and scale the x.
  6. In the Property Inspector, choose Alpha in the Color Styles box and set the amount to 0%. Repeat these steps for the other letters .
  7. Click anywhere between Frame 20 and 40 on the top letter layer and drag all the layers on that frame. Choose Motion from the Tween drop down box in the Property Inspector.
  8. Click and drag down in Frame 20 on all nine layers. Drag the ease slideer up till it reads 80 Out. This will start it off fast and then slow it down. Choose Control>Test Movie to test it.
  9. In the Timeline, double-click to the left of the Layer 1 name to open the Layer Properties dialog box. Name the layer text and set the Type to Folder. Shift click all the layers to select them and then drag them onto the Layer folder. Click the arrow to the left of the layer folder to collapse the folder.

p. 255 provides a list of what motion tweening can and can't do.

Revised: February 18, 2006. Comments to William Pegram, wpegram@nvcc.edu