WMD Creating Animations Flash-5 Zhou Hong

Contents Review 1 Frame Types 2 Frame-by-Frame Animation 3 Action & Shape Tweening 4

Review 1

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 demo

Introduce Frame Types 2

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 Keyframe BlankKeyframe CommonFrame

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 frames And add contents on them. Go to demo

Demo Frame by frame Animation D1

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 KeyFrame Blank KeyFrame Cmmon KeyFrame Displaying On 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 inserting Yes No, But can add new Yes Can edit objects from keyframe ahead in the same layer by inserting Yes No Can add ActionScriptYes No

Introduce Tweening Types 3

Types of Tweened Animation ActionTweening Changing properties such as position, size, rotation and alpha for an instance, group, or text block over time ShapeTweening Changing shapes between two vector images or changing the location, size, and color for one vector image over time Physical Change Chemical Change

Demo Tweening Animation D2

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 Tweening D3

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 demo

Differences Action (Traditional) Tweening Shape Tweening Animation Tweening Displaying On the Timeline Light purple background Light Green background Light Blue background CompositionSymbolVector GraphicsSymbol Effects Property 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 Tweening P1

Company Logo Notes Shape Tweening Animation Tweening Action 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 Tweening D4

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 demo

Differences Action (Traditional) Tweening Shape Tweening Animation Tweening Displaying On the Timeline Light purple background Light Green background Light Blue background CompositionSymbolVector GraphicsSymbol Effects Property 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 Tweening P2

Notes Shape Tweening Animation Tweening Action 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 demo

WMD Zhou Hong