WMD

Creating Animations

Flash-5

Zhou Hong

Contents

Review1

Frame Types2

Frame-by-Frame Animation3

Action & Shape Tweening4

Review

Review1

Review of Animation

Animation is the rapid display of a sequence of images of 2-D or 3-D artwork or model positions in order to create an illusion of movement.

Review of Frame

Describe the term of Frame?

the most basic unit in animation

each animation are divided into separated frames on the Timeline

Review of Animation Types

Describe the basic type of animation?

Frame-by-frame animation

Tweened animation

Differences

Operation:

Creating separated frames with the unique content for each.

Frame by Frame

File size saved:

stores the values for each complete frame

Differences

Operation:Creating the start frame and the end frame. Then directing the software to create the frames in between.

Tweening

File size saved:

stores only the values for the changes between frames

Question

Which type of animation is the best choice to realize the animation example before? Tweened animation is an effective way to create

movement and changes over time while simplifying the operation and minimizing file size.

Further Thinking

When the Frame-by-frame animation will be the best choice?

How to create a Frame-by-frame animation

Go to Go to demodemo

Introduce

Frame Types2

A keyframe contains no instance objects on the stage .

A frame defines changes in the animation. It contains the instance object on the stage which can be edited.

A frame can display the instance object on the timeline but can not edit it

Basic types of Frame

KeyframeKeyframe BlankBlankKeyframeKeyframe

CommonCommonFrameFrame

How to create a Frame-by-frame Animation

1

Create a new file

2

Create new layers

3

Create new keyframes, blank keyframes and normal framesAnd add contents on them.Go to Go to

demdemoo

Demo

Frame by frame AnimationD1

Thinking

How to realize a blinking animation effect in this demo ?

Using the Blank KeyFrame which can make all frames before the next keyframe empty.

The blank frame plays like blinking.

Differences

KeyFrameBlank

KeyFrameCmmon

KeyFrame

DisplayingOn the Timeline

A solid circle

A hollow circle

A small box filled in gray

Can copy objects from keyframe ahead in the same

layer by insertingYes

No,But can add

newYes

Can edit objects from keyframe ahead in the same

layer by insertingYes No

Can add ActionScript Yes Yes No

Introduce

Tweening Types3

Types of Tweened Animation

Action Action TweeningTweening

Changing properties such as position, size, rotation and alpha for an instance, group, or text block over time

Shape Shape TweeningTweening

Changing shapes between two vector images or changing the location, size, and color for one vector image over time

Physical Physical ChangeChange

Chemical Chemical ChangeChange

Demo

Tweening AnimationD2

Thinking

In this demo which animation should be realized by Action Tweening and which should realized by Shape Tweening?

Using Action Tweening to realize the eye movement and star movement.

Using Shape Tweening to realize the smile movement.

Demo

Action TweeningD3

How to create a Action Tweening Animation

1

Create a new file and layers

2

Insert a new keyframe as the start frame. add objects on it.Convert them to Symbols.

3

Insert a new keyframe as the end frame.make changes.Do the tranditional tweening.

Go to Go to demdem

oo

Differences

Action (Traditional) Tweening

Shape TweeningAnimation Tweening

DisplayingOn the

Timeline

Light purple background

Light Green background Light Blue

background

Composition Symbol Vector Graphics Symbol

EffectsProperty changes of

the same symbol.

Shape changes between two vector graphics;Location, Color and size change of one vector graphic.

Property changes of the same symbol

Features

Can realize animation filter and

Guide Layer Tweening

Can realize animation

filter

10-1

Practical

Action TweeningP1

Company Logo

Notes

Shape Tweening Animation TweeningAction Tweening

The Tweening only can be used to the vector graphics.If not should break up by Ctrl + B first.

The Tweening only can be used to the same Symbol between Keyframes

The Tweening can be act when the start keyframe exits

Demo

Shape TweeningD4

How to create a Shape Tweening Animation

1

Create a new file and layers

2

Insert a new keyframe as the start frame. add vector graphics on it.If not break up them by Ctrl+B

3

Insert a new keyframe as the end frame.add new vector graphics on it.Do the Shape Tweening.

Go to Go to demdem

oo

Differences

Action (Traditional) Tweening

Shape TweeningAnimation Tweening

DisplayingOn the

Timeline

Light purple background

Light Green background Light Blue

background

Composition Symbol Vector Graphics Symbol

EffectsProperty changes of

the same symbol.

Shape changes between two vector graphics;Location, Color and size change of one vector graphic.

Property changes of the same symbol

Features

Can realize animation filter and

Guide Layer Tweening

Can realize animation

filter

Practical

Shape TweeningP2

Notes

Shape Tweening Animation TweeningAction Tweening

The Tweening only can be used to the vector graphics.If not should break up by Ctrl + B first.

The Tweening only can be used to the same Symbol between Keyframes

The Tweening can be act when the start keyframe exits

Further Thinking

How to make a nested tweening animation?

Go to Go to demodemo

WMD

Zhou Hong