Upload
natan
View
52
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Adobe Flash Professional CS5 – 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. Animate nested symbols Create frame-by-frame animation - PowerPoint PPT Presentation
Citation preview
Adobe Flash Professional CS5 – Illustrated
Unit D: Creating Animation
Adobe Flash Professional CS5 – Illustrated
Objectives
Understand animationUse framesCreate a motion tweenCreate and copy a motion pathUse easingAdd nested symbols to a movie clip
Adobe Flash Professional CS5 – Illustrated
Objectives
Animate nested symbolsCreate frame-by-frame animationCreate a shape tweenUse shape hintsPlan and specialize animation
Adobe Flash Professional CS5 – Illustrated
Understanding Animation
Create and adjust frames and artwork that appears in themDetermine length of the animationSet a frame rate to control the speedAnimate 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 framesYou can control action in every frameCan be time-consuming and result in large file size
Flash automatically creates animation between two keyframesYou define starting and ending keyframes, then modify object/symbolTypes 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 timeUsing 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 panelUse 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 keyframeSections: Basic Motion, Transformation, Color Effect, Filter, and EasesEach 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 techniquesContent is created in every frameCan 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 shapeCreate 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 anotherCorrect appearance of a shape tweenWork 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