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

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

Adobe Flash Professional CS5 – Illustrated Adding Nested Symbols to 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-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 Professional CS5 – Illustrated Creating Frame-by-Frame Animation 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