Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – 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 (cont’d)

Animate nested symbols

Create frame-by-frame animation

Create a shape tween

Use shape hints


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


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


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



Sample frame-by-frame animation



Sample motion tween


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


Using Frames

Frame types


Using Frames

Viewing a frame span


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


Planning Movies with Storyboards

Sample storyboard


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


Creating a Motion Tween

Adjusting the value of a property keyframe


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



Creating a motion path



Modifying a motion path


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


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


Using the Motion Editor

The Motion Editor


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



Creating a Movie Clip symbol



Extending a frame span to multiple layers in a movie clip


UnderstandingTimeline Commands

Commands that affect frames are on Timeline submenu of Edit menu Remove Frames Cut Frames Clear Frames


Animating Nested Symbols

Still allows reuse of the symbol in other parts of the movie, where it can be part of another animation



Modified nested symbols



Modifying instances in a new keyframe



Viewing a movie clip


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



Completed frame-by-frame animation



Viewing frame-by-frame animation


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



Creating a cloud shape



Reshaping an object in a shape tween


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


Using Shape Hints

Positioning shape hints on the starting shape


Using Shape Hints

Positioned shape hints on the ending shape


Using Shape Hints

Improved shape tween

Adobe Flash CS4 – Illustrated

Documents

Transcript of Adobe Flash CS4 – Illustrated