Motion Tweening – Lesson 81 Motion Tweening Lesson 8

2 Motion Tweening – Lesson 8 Objectives Insert motion tweens to create animated transitions between sections of the Web site. Insert keyframes and frames to extend the Timeline. Create frame actions to stop the movie clip. Create button actions so users can navigate the Gallery site.

3 Motion Tweening – Lesson 8 Create animated transitions between sections of your movie You create animation in a Flash movie by changing the contents of successive frames on the Timeline. Flash allows you to create animation in two different ways: Motion tweening Frame-by-frame

4 Motion Tweening – Lesson 8 Motion tweening Tweening is the process of setting a starting and ending frame for an animation and then having Flash create all the scenes in between. You should create an animation plan before attempting to create the animation. You create the structure of the animation by inserting keyframes at the points indicated in your animation plan. Keyframes are special indicators that mark a change in what appears on the Timeline.

5 Motion Tweening – Lesson 8 Creating a motion tween Add keyframes to the frames where changes will occur. Modify the Stage elements in the keyframes to indicate the changes that occur between each keyframe. Use the Property inspector to add motion tweens to each keyframe. Test the movie to see if your “tweens” appear correctly. If not, you can delete one or more sets of tweens and redo them.

6 Motion Tweening – Lesson 8 A movie with tweening setup This figure shows the Timeline for a movie that has had motion tweening transitions defined in the shown section.

7 Motion Tweening – Lesson 8 Controlling animation with keyframes This figure shows a section of the Timeline with a layer named Artist. In this case, Frame 1 (which was a keyframe) was dragged to frame 11 of the same layer. Now, the keyframe is in Frame 11. That means that this layer will not be displayed until the movie reaches frame 11.

8 Motion Tweening – Lesson 8 Tweening hints When dragging something from one frame to another frame, hold down the Shift key while dragging the scene or element to retain its vertical position. You must insert keyframes, not regular frames, for motion tweening to work. You can define Shape tweens, which change the shape of an ungrouped element or broken-apart image into some other shape.

9 Motion Tweening – Lesson 8 Insert frames to extend a Timeline for a layer You can extend a layer to display longer by adding frames. To add frames to extend the Timeline: In the Timeline, click in the number for the frame you want to extend the layer to. Click the Insert menu and point to Timeline. Click the Frame option. A small rectangle will appear in the frame to indicate the end of the instance in the Timeline segment.

10 Motion Tweening – Lesson 8 Add actions to navigation buttons You can associate actions with buttons to allow the user to navigate from one section of your site to another. Actions can also be assigned to a button to play a sound clip when the button is clicked. You can create a shape around a button to define the Hit state area that makes the button active when the pointer is anywhere within the defined shape. You need to create keyframes for the button states when adding actions to the button.

11 Motion Tweening – Lesson 8 Defining the Hit state area This figure shows a rectangle being used to indicate the area of a button that will respond to the mouse being clicked on it. This area is defined for the Hit state of a button symbol. Stroke and fill color do not matter because the Hit state area is not visible when the movie is played. The area is active, but the drawn rectangle is not itself visible.

12 Motion Tweening – Lesson 8 Add frame actions to control the play of the movie You can add actions to frames to control how the movie is viewed. For example, you could have the movie play an introductory scene and then stop and wait for the user to click some navigation button or object. Actions are added in the Actions panel. You can also add labels to frames which can be referenced in ActionScript code. Frame labels are defined in the Property inspector.

13 Motion Tweening – Lesson 8 Add an action to stop a movie To insert an action that will stop a movie at a specified frame: Click the frame where you want the action to occur and insert a keyframe. Open the Actions panel and expand the Global Functions, then the Timeline Control categories. Double-click the stop action to add the action to the Script pane for the selected keyframe. Test the movie. It should stop at the specified frame.

14 Motion Tweening – Lesson 8 Summary In this lesson, you learned: To insert motion tweens to create animated transitions between sections of the Web site. To insert keyframes and frames to extend the Timeline. How to create frame actions to stop the movie clip. How to create button actions so users can navigate the Gallery site.