motion tweening – lesson 81 motion tweening lesson 8

Motion Tweening – Lesson 8 1

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.


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


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.


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.


A movie with tweening setupThis figure shows the Timeline for a movie that has had motion tweening transitions defined in the shown section.


Controlling animation with keyframesThis 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.


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.


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.


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.


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.


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.


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.


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.

motion tweening – lesson 81 motion tweening lesson 8

Documents