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 tweens  Motion tweens  Shape 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 Tweens in 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 Copying a 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 Copying a Motion Path Creating a motion path

Adobe Flash CS4 – Illustrated Creating and Copying a 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 Symbols to 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 Symbols to a Movie Clip Creating a Movie Clip symbol

Adobe Flash CS4 – Illustrated Adding Nested Symbols to a Movie Clip Extending a frame span to multiple layers in a movie clip

Adobe Flash CS4 – Illustrated Understanding Timeline 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-Frame Animation 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-Frame Animation Completed frame-by-frame animation

Adobe Flash CS4 – Illustrated Creating Frame-by-Frame Animation 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