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

Changing Shape Tweening Color and Alpha Options Change Shape-Tween Color Select the beginning or ending keyframe in a shape tween or select the shape on the Stage.. Using Shape Hints

When shape tweens are applied to keyframes, the Property Inspector enables several options for controlling how Flash draws the tweened frames Settings such as easing in and easing out enable you to control how the shape changes are distributed across the frames in the tween

Frame Blending allows you to set preferences to let Flash know which qualities to maintain during the tween

Adjusting Shape

Tween Properties

Set Shape-Tween Properties

Click the Window menu, and then

click Properties to open the

Property Inspector

Select a keyframe with shape

tween applied

Choose from the following

settings:

◆ Ease This sets the speed at

which your object eases in or

out of its motion A positive

value eases in, a negative value

eases out

◆ Blend The Distributive option

smoothes out the tweened

shapes, while the Angular

option preserves corners and

straight lines in the shape

tweens

3

2

3

Because shape tweening can only be applied to editable shapes, you can't use the same color style effects that are available to instances

Instead, you must make these changes directly to the shape using the color palettes, the Color panel, or the Swatches panel When shape tweening is applied, differences in color and alpha are tweened along with any shape changes This applies to strokes as well as fills

Changing Shape

Tweening Color and

Alpha Options

Change Shape-Tween Color

Select the beginning or ending

keyframe in a shape tween or

select the shape on the Stage

Click the Window menu, and then

click Color, if necessary

TIMESAVER Press Shift+F9 to

open the Color panel

Make changes to the shape's

stroke and fill colors by entering

values in the RGB, HSB, and Alpha

fields, or by using the list arrows to

the right of these fields

Click the Control menu, point to

Test Movie, and then click Test.

The shape color changes as the

shape tweens

4

3

2

1

Stroke Color Fill Color

Did You Know?

You can use any palette available to

change the color of a shape in a

tween In addition to the Color Mixer,

there are palettes located on the Tools

panel, Property Inspector, and

Swatches panel

1

See Also

See “Modifying Instance Color Styles

and Blends” on page 158-159 for more

information on working with color and

alpha options

Color Picker

3

Sometimes it isn't possible to predict how some, more complicated, shapes will tween To exercise greater control over the tweening process, you can set shape hints to guide how Flash draws the in-between frames You simply specify a beginning shape hint and then a corresponding end shape hint In this way, Flash will know which parts

of the shape in the first keyframe will transform into which parts in the end keyframe Even with shape hints enabled, the results can be unpre-dictable, but you will have a greater control over the process

Using Shape Hints

Set Shape Hints

Create a shape tween of a simple

shape into a complex shape

Click to place the playhead on the

first frame of the shape tween

Click the Modify menu, point to

Shape, and then click Add Shape

Hint.

A small red, circle with a small

letter on it appears in the center of

the shape The first letter is "a"

Shape hints appear in alphabetical

order "a, b, c…" You can use up to

26 hints in one tween

TIMESAVER Press Shift+A+H

(Mac) or Ctrl+Shift+H (Win) to

insert a shape hint

Drag the shape hint to an area of

the shape you want to control

Click to place the playhead on the

last frame of the shape tween

The corresponding shape hint

appears as a small green circle

with a corresponding letter that

matches the beginning hint

5

4

3

2

4

2

Place start shape hints

on problem areas.

Did You Know?

You can show all shape hints Click

the View menu, and then click Show

Shape Hints

5

Drag the corresponding end shape

hints to the part of the shape that

corresponds to the placement of

the beginning shape hint

"a" should correspond with "a", "b"

should correspond with "b", etc

Move the playhead back to the

first frame

Repeat steps 3, 4, 5, 6, and 7 until

you have set and placed shape

hints on all areas of the shape you

want to control

Click the Control menu, point to

Test Movie, and then click Test.

The shape hints help make

complex shape tweens more

predictable

9

8

7

Animation with Shape Hints

Did You Know?

You can remove shape hints Drag

shape hints off the Stage or click the

Modify menu, point to Shape, and then

click Remove All Hints

You should place your shape hints

consecutively in a clockwise or

counter-clockwise direction Placing

shape hints out of order can confuse

Flash and often produces unwanted

results

In addition to creating animation using the Timeline and Property Inspector, you can also use

ActionScript to animate movie clips, buttons, text, and components You can animate any

instance name with ActionScript For an ActionScript 3.0 example, see Project 4, “Modifying an

Object with ActionScript in the Workshops, available at www.perspection.com For ActionScript

2.0, you can animate an object over time and change any ActionScript property, such as scale,

rotation, color, and transparency ActionScript provides two events that work well for

anima-tion: onEnterFrame and setInterval The onEnterFrame event is a continuously executing event

based on the frame rate of your movie until you stop (delete) it The setInterval event is a

contin-uously executing event for only a certain period of time The one disadvantage of these actions

is the large use of memory and CPU, so you need to clear it

◆ onEnterFrame event The following example is a frame script that animates a movie clip

to the right until it reaches the position it should be in:

myMovieClip.onEnterFrame=function()

{

if(this._x<300) {

this._x+=10;

} else { delete this onEnterFrame;

◆ setInterval event This event requires two parameters: funtionName and an interval

(amount of time in milliseconds between executions) If your interval is smaller than

your frame rate, the screen cannot refresh If your interval is greater than your frame

rate, it executes as close as possible The following example moves a TextArea

component to the right every 10 milliseconds until it has reached its final location:

myInternval=setInterval(textAreaMove, 10);

function textAreamove() {

if (textAreaInstance._x<300) {

textAreaInstance._x += 10;

} else clearInterval(myInterval);

} }

Creating Animation Using ActionScript

Inverse Kinematic (IK) allows you to stretch

and bend shape objects and link groups of

symbol instances to make them move

together in naturalistic ways using an internal

structure of bones to create character

anima-tion

You can add bones to the interior of a

shape or to separate symbol instances When

you move one bone, the other connected

bones move in relation to the one that initially

moved A chain of bones is called an

arma-ture, which is either linear or branched in

structure

There are two types of Inverse Kinematic

animation: those with symbols and those with

shapes For the symbol type, you link them

together as a chain For the shape type, you

add bones inside the shape

When you add bones to a shape or

sym-bol instance, Flash creates a new layer called

a pose layer For a shape, Flash also converts

the selected shapes and bones into an IK

shape object Each pose layer can contain

only one armature The first bone in an

arma-ture is the root bone It appears with a circle

around the head of the bone Each bone has

a head, the round end, and a tail, known as

the pointed end

After you add bones to an armature, you

can change the position and length of a bone,

delete bones, and edit objects containing

bones

When you’re ready to animate an

arma-ture, all you need to do is add frames to the

pose layer and reposition the armature on the

Stage to create a keyframe Keyframes in

pose layers are called poses To insert a frame

in a pose layer, right-click (Win) or

Option-click (Mac) a frame in a pose layer to the right

of any existing frames, and then click Insert Frame To add a pose to a frame, right-click (Win) or Option-click (Mac) the frame in the pose layer, and then click Insert Pose After you insert a pose, you can use the Selection tool to change the configuration of the arma-ture If you want to change the length of the animation, drag the last frame of the pose layer to the right or left in the Timeline to add

or remove frames

You can adjust the speed of an armature animation in frame around each pose by applying an easing motion To add easing to frames in a pose layer, click a frame in a pose layer, open the Property Inspector, click the Ease popup, select an ease option, and then enter an ease strength value (0-100, where 0

is no easing and 100 is the most easing)

Using Inverse Kinematics

Inverse Kinematics