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 tweensMotion tweensShape 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 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 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 Copyinga 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 Copyinga Motion Path

Creating a motion path

Adobe Flash CS4 – Illustrated

Creating and Copyinga 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 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 CS4 – Illustrated

Adding Nested Symbolsto a Movie Clip

Creating a Movie Clip symbol

Adobe Flash CS4 – Illustrated

Adding Nested Symbolsto a Movie Clip

Extending a frame span to multiple layers in a movie clip

Adobe Flash CS4 – Illustrated

UnderstandingTimeline 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-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 CS4 – Illustrated

Creating Frame-by-FrameAnimation

Completed frame-by-frame animation

Adobe Flash CS4 – Illustrated

Creating Frame-by-FrameAnimation

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