adobe flash cs4 – illustrated
DESCRIPTION
Adobe Flash CS4 – Illustrated. Unit D: Creating Animation. Objectives. Understand animation Use frames Create a motion tween Create and copy a motion path Use easing Add nested symbols to a movie clip. Objectives (cont’d). Animate nested symbols Create frame-by-frame animation - PowerPoint PPT PresentationTRANSCRIPT
Adobe Flash CS4 – Illustrated
Unit D: Creating Animation
Adobe Flash CS4 – Illustrated
Objectives
Understand animation
Use frames
Create a motion tween
Create and copy a motion path
Use easing
Add nested symbols to a movie clip
Adobe Flash CS4 – Illustrated
Objectives (cont’d)
Animate nested symbols
Create frame-by-frame animation
Create a shape tween
Use shape hints
Adobe Flash CS4 – Illustrated
Understanding Animation
Create and adjust frames and artwork that appears in then
Determine length of the animation
Set a frame rate to control the speed
Animate shape, size, color, position
Adobe Flash CS4 – Illustrated
Specifying Frames
Change over time is represented by frames in the Timeline Blank keyframe
• Single frame in the Timeline when a new document is opened
Keyframe• Special frame that signals a change in a
movie or animation
Frame span• A group of frames
Adobe Flash CS4 – Illustrated
Selecting Animation Methods
Frame-by-frame animation
Tweened animation
Flash animates object gradually over several consecutive frames
You can control action in every frame
Can be time-consuming and result in large file size
Flash automatically creates animation between two keyframes
You define starting and ending keyframes, then modify object/symbol
Types of tweensMotion tweensShape tweens
Adobe Flash CS4 – Illustrated
Selecting Animation Methods
Sample frame-by-frame animation
Adobe Flash CS4 – Illustrated
Selecting Animation Methods
Sample motion tween
Adobe Flash CS4 – Illustrated
Understanding Tweensin the Timeline
Motion tween spans Blue Symbols show movement Property keyframe
• Contains specific property values that change in that frame: position, scale, skew, rotation, color, or filter
Shape tween spans Green Use morphing
Adobe Flash CS4 – Illustrated
Using Frames
Frame types
Adobe Flash CS4 – Illustrated
Using Frames
Viewing a frame span
Adobe Flash CS4 – Illustrated
Planning Movies with Storyboards
Storyboard Is a visual script that contains captions to
describe the action in a movie Uses panels to map out sequence and
major action points of the animation Allows you to do your tweaking before
you work your animation in Flash
Adobe Flash CS4 – Illustrated
Planning Movies with Storyboards
Sample storyboard
Adobe Flash CS4 – Illustrated
Creating a Motion Tween
Apply a motion tween to a symbol by: Placing an instance in starting keyframe Modifying position or transformation
properties of the instance in last keyframe of the animation
Adobe Flash CS4 – Illustrated
Creating a Motion Tween
Adjusting the value of a property keyframe
Adobe Flash CS4 – Illustrated
Creating and Copyinga Motion Path
Copy/paste motion tween on other layers to keep animations consistent and save time
Use the Motion Presets panel
Motion Presets panel
Adobe Flash CS4 – Illustrated
Creating and Copyinga Motion Path
Creating a motion path
Adobe Flash CS4 – Illustrated
Creating and Copyinga Motion Path
Modifying a motion path
Adobe Flash CS4 – Illustrated
Using Easing
Adjust easing on Properties panel
Use easing to speed up or slow down start or end of an animation Object eases in: starts out slow, then
speeds up at the end Object eases out: starts out fast, then
slows down
Adobe Flash CS4 – Illustrated
Using the Motion Editor
Provides detailed control over properties in every keyframe
Sections: Basic Motion, Color Effect, Transformation, Filter, and Eases
Each property has its own timeline Adjust X and Y values Add keyframes Create custom easing Apply preset easing option
Adobe Flash CS4 – Illustrated
Using the Motion Editor
The Motion Editor
Adobe Flash CS4 – Illustrated
Adding Nested Symbolsto a Movie Clip
Nested symbols Are created by placing a symbol inside
another symbol Create a unique new symbol while
preserving individuality of original symbols
Adobe Flash CS4 – Illustrated
Adding Nested Symbolsto a Movie Clip
Creating a Movie Clip symbol
Adobe Flash CS4 – Illustrated
Adding Nested Symbolsto a Movie Clip
Extending a frame span to multiple layers in a movie clip
Adobe Flash CS4 – Illustrated
UnderstandingTimeline Commands
Commands that affect frames are on Timeline submenu of Edit menu Remove Frames Cut Frames Clear Frames
Adobe Flash CS4 – Illustrated
Animating Nested Symbols
Still allows reuse of the symbol in other parts of the movie, where it can be part of another animation
Adobe Flash CS4 – Illustrated
Animating Nested Symbols
Modified nested symbols
Adobe Flash CS4 – Illustrated
Animating Nested Symbols
Modifying instances in a new keyframe
Adobe Flash CS4 – Illustrated
Animating Nested Symbols
Viewing a movie clip
Adobe Flash CS4 – Illustrated
Creating Frame-by-FrameAnimation
Comes closest to traditional animation techniques
Content is created in every frame
Can be time-consuming, but offers detailed control over the animation
Adobe Flash CS4 – Illustrated
Creating Frame-by-FrameAnimation
Completed frame-by-frame animation
Adobe Flash CS4 – Illustrated
Creating Frame-by-FrameAnimation
Viewing frame-by-frame animation
Adobe Flash CS4 – Illustrated
Creating a Shape Tween
Changes (morphs) starting shape into a different ending shape
Create by using shapes instead of symbols, bitmap images, or text Place starting shape in first frame Place ending shape in last frame Create the shape tween
Adobe Flash CS4 – Illustrated
Creating a Shape Tween
Creating a cloud shape
Adobe Flash CS4 – Illustrated
Creating a Shape Tween
Reshaping an object in a shape tween
Adobe Flash CS4 – Illustrated
Using Shape Hints
Mark specific points on beginning and ending shapes that Flash uses to transition one area into another
Correct appearance of a shape tween
Work most effectively when arranged in a clockwise or counterclockwise pattern
Adobe Flash CS4 – Illustrated
Using Shape Hints
Positioning shape hints on the starting shape
Adobe Flash CS4 – Illustrated
Using Shape Hints
Positioned shape hints on the ending shape
Adobe Flash CS4 – Illustrated
Using Shape Hints
Improved shape tween