Tài liệu Thiết kế flash với flash cs5 part 36 docx

Animating with Motion Tweening 8 8 What You’ll Do Understand Motion Tweening Apply Motion Tween Presets Create a Motion Tween Adjust Motion Tween Properties Edit Motion Tween Properties

Trang 1

Animating with Motion

Tweening

8

What You’ll Do

Understand Motion Tweening Apply Motion Tween Presets Create a Motion Tween Adjust Motion Tween Properties Edit Motion Tween Properties with the Motion Editor

Add Color Effects and Filters Work with Property Keyframes Edit the Path of a Motion Tween Copy Motion as ActionScript

Introduction

In Flash, it’s not necessary to draw every frame of an

anima-tion You can set the position and attributes of your art in the

beginning and ending frames, and Flash will create all of the

frames in between This is called tweening A motion tween

connects two keyframes, each with different effects or

charac-teristics applied to them and then gradually "morphs" one

into the other Tweening allows you to quickly animate

objects, apply fades, and gradually alter color, alpha, scale,

and any other effect that can be applied to a symbol, group,

or text object

The span between the starting frame and ending frame of

a motion tween is called the tween span The tween span

consists of a group of frames in a single layer with a blue

background in the Timeline in which an object changes over

time Only one object, known as the target object, on the

Stage can be animated in each tween span

Once an animation is tweened, you can continue to edit it

by adding or removing frames to make it move slower or

faster, adjust effects, or control the inertia with ease-in and

ease-out properties, adding further complexity Motion

tweening produces smaller files than frame-by-frame

anima-tion because Flash describes the moanima-tion mathematically,

incrementally transforming the object in between the two

keyframes

Trang 2

Motion tweening allows you to apply smooth

motion and transform effects, such as scale,

position, rotation, and skew, to symbol

instances (movie clip, graphic, and button)

and text fields Additionally, you can utilize

Flash's advanced color effects to apply

changes to color, alpha, and brightness

Because these effects are applied to

instances, they only affect the instance placed

on the Stage Its parent (original) symbol in

the Library is not affected Motion tweening

produces the smallest file sizes of any of

Flash's animation methods

Flash use two different types of motion

tweens: classic tween and motion tween A

classic tween uses several instances in

keyframes of an object along with property

keyframes to create a tween, while a motion

tween uses one object instance over the entire

span along with property keyframes to create

a tween A property keyframe is a frame

within the motion tween where you define a

value for a property A motion tween is known

as object based animation Motion tweens are

easy to create and provide precise control,

while classic tweens are more complex to

cre-ate and provide more advanced control All

motion tweens from Flash CS3 are classic

tweens

Tween Differences

There are several differences between classic

and motion tweens

Classic Tweens

◆ Use Keyframes and property keyframes

to create tweens

◆ Allow frame scripts

Understanding Motion Tweening

◆ Allow only symbols (movie clip, graphic, and button) as a tweenable type It converts all others (editable shapes, groups, and text objects) to a graphic symbol

◆ Consist of groups of individually selectable frames in the Timeline

◆ Apply eases to groups of frames between keyframes within the tween

◆ Allow animation between two different color effects, such as tint and alpha transparency

◆ Don’t allow animation of 3D objects

◆ Allow symbol swaps and setting the frame number of a graphic symbol to display in a property keyframe

Motion Tweens

◆ Use one object instance and property keyframes instead of keyframes to create tweens

◆ Don’t allow frame scripts

◆ Allow text as a tweenable type It doesn’t convert it to a symbol

◆ Treat tween spans as a single object that you can stretch and resize in the

Timeline

◆ Apply eases across the entire length of a motion tween span

◆ Apply only one color effect per tween

◆ Allow animation of 3D objects

◆ Don’t allow symbol swaps and setting the frame number of a graphic symbol to display in a property keyframe

◆ Convert all non-allowed object types (editable shapes and groups) to a movie clip symbol

Trang 3

Motion tweening when viewed in Onion Skin/Multiple Frames mode

Motion Tweening of Scale and Alpha Changes

Motion Tweening of Scale, Alpha, and Rotation Changes

Trang 4

Motion Presets are ready-made motion tweens that you can apply to

an object on the Stage After you preview a motion tween in the Motion Presets panel, you can quickly apply it to a selected object You can apply only one motion preset per object on the Stage If you apply another preset to an object, it replaces the previous one You can only apply a 3D motion preset to a movie clip instance, which is the only object type for 3D effects Each motion preset contains a specific number of frames, which you can adjust later In the Motion Presets panel, you can also create and save your own custom motion presets

as well as import and export them (stored as XML files) to share with others

Applying Motion

Tween Presets

Apply a Motion Tween Preset

Select a tweenable object (symbol

instance or text field) on the Stage

Click the Window menu, and then

click Motion Presets to open the

panel

Select a preset in the Motion

Presets panel

A preview of the preset plays in

the Preview pane at the top of the

Motion Presets panel

◆ To stop the preview, click

outside the Motion Presets

panel

Click Apply.

◆ If you apply a motion tween to

a non-tweenable object, a

dialog box appears, asking you

to convert it to a symbol

The motion is set to start at the

current position of the object on

the Stage

◆ To apply the preset so that the

motion ends at the current

position of the object on the

Stage, hold down Shift, and

then click Apply.

4

3

2

1

4

1

3

Trang 5

Save a Tween as a Custom

Motion Preset

Select the tween span, object on

the Stage, or the motion path on

the Stage with the custom tween

that you want to save as a preset

click Motion Presets to open the

panel

Click the Save Selection As Preset

button

Type a name for the preset

Click OK.

The new preset appears in the

Motion Presets panel under

Custom Presets The preset is

saved as an XML file in the Motion

Presets folder, which you can

locate by performing a search

using Instant Search (Win) or

Spotlight (Mac)

◆ To create a preview for the new

preset, publish a SWF of the

motion tween with the same

name in the Motion Presets

folder

5

4

3

2

1

Did You Know?

You can import and export a motion

preset To import a motion preset, click

the Options button on the Motion

Presets panel, click Import, select the

XML file, and then click Open To

export a motion preset, select the

pre-set in the Motion Prepre-sets panel, click

the Options button, click Export,

spec-ify a name and location, and then click

Save

You can delete a motion preset Select

the motion preset in the Motion

Presets panel that you want to delete,

3

2

4 1

5

Trang 6

You can tween position, scale, rotation and other transform effects applied to symbols instances and text fields A motion tween uses one instance over the entire span along with property keyframes, which you define with property values to modify the tween You can change prop-erty keyframes on Stage, in the Propprop-erty Inspector, or in the Motion Editor You should have only one object when you apply the tween or the results will be unpredictable Tweened frames must reside on the same layer in the Timeline After you add a tween to a layer, Flash changes it to a tween layer, which you can no longer draw on A tween layer can contain tween spans, static frames, and actions

Creating a Motion

Tween

Create a Motion Tween

Select one or more objects to

tween on the Stage

◆ To create multiple tweens at

once, place objects on multiple

layers, and then select them all

Click the Insert menu, and then

click Motion Tween.

◆ If you apply a motion tween to

a non-tweenable object, a

dialog box appears, asking you

to convert it to a symbol

Flash converts the layer

containing the tweened object

to a tween layer and creates a

tween span in the layer

To change the length of the tween

span, drag either end of the tween

span in the Timeline

To add motion to the tween, click a

frame within the tween span, and

then drag the object on the Stage

To tween 3D rotation or position,

use the 3D Rotation tool or 3D

Translation tool.

To remove a motion tween, select

the tweened object, click the

Insert menu, and then click

Remove Tween.

To add another tween to an

existing layer, drag a tween span

from a different layer

7

6

5

4

3

2

1

Motion tween appears with a blue background.

A black dot indicates a target object in the first frame.

Black diamonds indicate property keyframes and the last frame.

4

2

3

5

7

1

Trang 7

Motion tweens can be fine-tuned in the Property Inspector or the Motion Editor When a tweened object is selected, a number of options are enabled that you use to add complexity to your motion path You can set motion tween properties to deal with position and size, set rota-tion direcrota-tion and frequency, apply color and display blending effects,

or control the easing in or out of the motion The options you set in the Property Inspector are applied to the entire tween span

Adjusting Motion

Tween Properties

Set Motion Tween Properties in

the Property Inspector

click Properties to open the

Property Inspector

Select an object on the Stage with

a tween applied

Choose from the available settings;

options vary depending on the

selected tweened object:

◆ Ease Sets the motion speed in

and out

◆ Position and Size Sets the X

and Y position, and the

selection width and height

◆ 3D Position and View Sets the

3D X, Y, and Z position, 3D

perspective selection width and

height, perspective angle, and

vanishing point

◆ Rotation Sets the direction and

frequency your object rotates

Select the Orient To Path check

box to keep your object parallel

to the guide relative to its

center point

◆ Path Sets the X and Y position,

and the selection width and

height

◆ Color Effect Sets the color

style effect: Brightness, Tint,

Alpha, or Advanced

◆ Display Sets the display

3

2

1

2

3 1

Trang 8

The Motion Editor panel allows you to view and edit all tween properties and related keyframe properties You can change the basic motion of the tween by changing the x-, y-, and z-axes, transform the skew and scale, apply color and filter effects, or add motion speed easing in or out You can open the Motion Editor panel by using the Window menu It appears next to the Timeline When you select a tween space, a tweened object, or motion path, the Motion Editor panel displays tween property values in categories and a grid with a graph for each property

Editing Motion Tween

Properties with the

Motion Editor

Change the Motion Editor

Display

a tween applied

click Motion Editor to open the

panel

To change the display of the

Motion Editor, do any of the

following:

◆ Display Properties Click the

triangle next to a property

Định dạng
Số trang	9
Dung lượng	718,66 KB