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 or when objects disappear   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 using several consecutive keyframes You can control action in every frame Can be time-consuming and result in larger 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 History of Keyframes & Tweening   In traditional hand-drawn film animation, senior artists drew the animation’s major action points (which they named “keyframes”)   Junior artists were known as “tweeners” – had the monotonous job of drawing the frames “in between”

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 Shortcuts   F5 = frame   F6 = Keyframe   F7 = Blank Keyframe

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 To have an object fade in/out, adjust the Alpha setting in the Properties Panel

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 OR Use 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 Select the Motion Path 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 (negative value)   Object eases out: starts out fast, then slows down (positive value)

Adobe Flash Professional CS5 – Illustrated Using the Motion Editor Motion Editor is beside the Timeline 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”   Creates a unique new symbol while preserving individuality of original symbols   Example: Lights blinking on the ship

Adobe Flash Professional CS5 – Illustrated Adding Nested Symbols to a Movie Clip Creating a Movie Clip symbol Shortcut Key: F8 OR Choose Modify|Conver t to Symbol OR right-click

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 Right-click the Timeline to see these options:

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 Creating Frame-by-Frame Animation Close to traditional animation techniques Content is created in every frame or at frame intervals 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 Shape tweens show a solid line/arrow when correct; broken line when not

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 Used to correct appearance of a shape tween Mark specific points on beginning and ending shapes that Flash uses to transition one area into another 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

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