wmd creating animations flash-5 zhou hong. contents review 1 frame types 2 frame-by-frame animation...
TRANSCRIPT
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