Adobe Dreamweaver CS5 - Illustrated Unit D: Working with Text and Cascading Style Sheets.
Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation.
-
Upload
rafe-melton -
Category
Documents
-
view
226 -
download
2
Transcript of Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation.
Adobe Flash Professional CS5 – Illustrated
Unit D: Creating Animation
Adobe Flash Professional CS5 – 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 Professional CS5 – Illustrated
Objectives
Animate nested symbols
Create frame-by-frame animation
Create a shape tween
Use shape hints
Plan and specialize animation
Adobe Flash Professional CS5 – Illustrated
Understanding Animation
Create and adjust frames and artwork that appears in them
Determine length of the animation
Set a frame rate to control the speed
Animate shape, size, color, position
Adobe Flash Professional CS5 – Illustrated
Specify 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 Professional CS5 – Illustrated
Select 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 Professional CS5 – Illustrated
Select Animation Methods
Sample frame-by-frame animation
Adobe Flash Professional CS5 – Illustrated
Select Animation Methods
Sample motion tween
Adobe Flash Professional CS5 – Illustrated
Understand 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 Professional CS5 – Illustrated
Using Frames
Frame types
Adobe Flash Professional CS5 – Illustrated
Using Frames
Viewing a frame span
Adobe Flash Professional CS5 – 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 Professional CS5 – Illustrated
Creating a Motion Tween
Adjusting the value of a property keyframe
Adobe Flash Professional CS5 – Illustrated
Creating and Copyinga Motion Path
Copy/paste motion tween on other layers to keep animations consistent and save time
Using the Motion Presets panel
Motion Presets panel
Adobe Flash Professional CS5 – Illustrated
Creating and Copyinga Motion Path
Creating a motion path
Adobe Flash Professional CS5 – Illustrated
Creating and Copyinga Motion Path
Modifying a motion path
Adobe Flash Professional CS5 – 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 Professional CS5 – Illustrated
Using the Motion Editor
Provides detailed control over properties in every keyframe
Sections: Basic Motion, Transformation, Color Effect, 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 Professional CS5 – Illustrated
Using the Motion Editor
The Motion Editor
Adobe Flash Professional CS5 – 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 Professional CS5 – Illustrated
Adding Nested Symbolsto a Movie Clip
Creating a Movie Clip symbol
Adobe Flash Professional CS5 – Illustrated
Adding Nested Symbolsto a Movie Clip
Extending a frame span to multiple layers in a movie clip
Adobe Flash Professional CS5 – Illustrated
Timeline Commands
Adobe Flash Professional CS5 – 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 Professional CS5 – Illustrated
Animating Nested Symbols
Modified nested symbols
Adobe Flash Professional CS5 – Illustrated
Animating Nested Symbols
Modifying instances in a new keyframe
Adobe Flash Professional CS5 – Illustrated
Animating Nested Symbols
Viewing a movie clip
Adobe Flash Professional CS5 – 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 Professional CS5 – Illustrated
Creating Frame-by-FrameAnimation
Completed frame-by-frame animation
Adobe Flash Professional CS5 – 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 Professional CS5 – Illustrated
Creating a Shape Tween
Creating a cloud shape
Adobe Flash Professional CS5 – Illustrated
Creating a Shape Tween
Reshaping an object in a shape tween
Adobe Flash Professional CS5 – 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 Professional CS5 – Illustrated
Using Shape Hints
Positioning shape hints on the starting shape
Adobe Flash Professional CS5 – Illustrated
Using Shape Hints
Positioned shape hints on the ending shape
Adobe Flash Professional CS5 – Illustrated
Using Shape Hints
Improved shape tween
Planning and Specializing Animation
Planning movies with storyboards Basic storyboards should provide an
organizational and page-level view
Creating a mask Use the shape of an object on one layer
to expose the content of the layer directly beneath it
Adobe Flash Professional CS5 – Illustrated
Planning and Specializing Animation
Animating using the Bone tool Create inverse kinematics (IK) Click and draw hinged segments in the
object Creating a pose
• Adjusting the configuration of the joints in each keyframe
Adobe Flash Professional CS5 – Illustrated
Planning and Specializing Animation
Creating a mask
Adobe Flash Professional CS5 – Illustrated
Planning and Specializing Animation
Viewing Inverse Kinematics animated objects
Adobe Flash Professional CS5 – Illustrated