macromedia flash mx 2004 – design professional animations creating

29
Macromedia Flash MX 2004 – Design Professional Animations CREATING

Post on 21-Dec-2015

231 views

Category:

Documents


4 download

TRANSCRIPT

Macromedia Flash MX 2004 –Design Professional

AnimationsCREATING

2Creating Animations Web Collection: Flash MX 2004 Chapter D

Create frame animations

Create motion-tweened animation

Work with motion guides

Create motion animation effects

Animate text

Chapter Lessons

3Creating Animations Web Collection: Flash MX 2004 Chapter D

Animation can be an important part of a Web site, CD-ROM, Demo, or game

The perception of motion is an illusion made up from a series of still images

“Persistence of Vision” is the basis for frame rates in animations

Frames rates of 10-12 fps generally provide smooth computer-based animation

Introduction

4Creating Animations Web Collection: Flash MX 2004 Chapter D

Frame rates lower than 10-12 fps often result in jerky images, while higher frame rates result in a blurred image

Flash uses a default frame rate of 12 fps

Intro to Animation

5Creating Animations Web Collection: Flash MX 2004 Chapter D

Animation is one of the most powerful features of Flash

Basic animation is a simple process– Move an object around the stage– Change an object’s size, shape, color– Apply Special Effects, such as zooming,

fading, or a combination of effects

Two Animation Methods: Frame Animation, and Tweened Animation

Macromedia Flash Animation

6Creating Animations Web Collection: Flash MX 2004 Chapter D

Understanding Frame Animations

Also called frame-by-frame animations

Created by specifying an object that is to appear in each frame of a sequence of frames

Useful when you want to change individual parts of an image

Depending on the complexity of the animation, can require a lot of time

7Creating Animations Web Collection: Flash MX 2004 Chapter D

Understanding Frame Animations

Three images used in a Frame Animation

8Creating Animations Web Collection: Flash MX 2004 Chapter D

Understanding Frame Animations

A greater number of images generally suggests less change needed between each image — creating more realistic animationConsider the number of frames in which an image will appear– Fewer frames and the animation may

appear jerky

Consider the frame rate (10-12 fps)

9Creating Animations Web Collection: Flash MX 2004 Chapter D

Creating a Frame Animation

Insert a keyframe on the layer

Place your first drawing on the stage

Insert your next keyframe, and change the drawing

“Onion skinning” may help you placing a series of images

10Creating Animations Web Collection: Flash MX 2004 Chapter D

Creating a Frame Animation

In eachFrame, thecar is in adifferentposition

11Creating Animations Web Collection: Flash MX 2004 Chapter D

Understanding Motion Tweening

Motion tweening is far less tedious than Frame Animation– Create a Start and End frame – Flash creates the “in-between” frames

Flash only stores the attributes that change from frame to frame, thus creating smaller file sizes than Frame Animation

12Creating Animations Web Collection: Flash MX 2004 Chapter D

Understanding Motion Tweening

Two types of tweening:– Shape tweening - a “morphing” effect– Motion tweening is used to animate

objects which are moved, resized, re-colored, or rotated

13Creating Animations Web Collection: Flash MX 2004 Chapter D

Motion Tweening requires only a Start and End Frame

Light Blue Backgroundrepresents a Motion Tween

14Creating Animations Web Collection: Flash MX 2004 Chapter D

Creating a Motion TweenInsert a starting frame

Insert an ending frame

Make alterations to the ending frame

Go back to the starting frame and choose Insert>Create Motion Tween

Make adjustments through the Properties Panel

15Creating Animations Web Collection: Flash MX 2004 Chapter D

Understanding Motion Guides

A path that will guide moving objects around the stage in any direction

Without Motion Guides, animations would always travel in straight lines

Animations are placed on their own layer beneath a motion guide layer

16Creating Animations Web Collection: Flash MX 2004 Chapter D

Creating Animation with Motion Guides

Two ways to create this relationship– Create a guide layer with a path, then

create a layer of animation an attach– Or, create an animation. Then create a

motion guide layer with a path, and attach

Depending on the type of object you’re animating, you may need to orient the object to the path

17Creating Animations Web Collection: Flash MX 2004 Chapter D

Creating Animation with Motion Guides

A motion guide layerand its associated

animation

Object oriented to path

Object not oriented to path

18Creating Animations Web Collection: Flash MX 2004 Chapter D

Working with PropertiesTween - specifies Motion, Shape,or none

Scale - tweens the size of an object

Ease - specifies the rate of change between tweened frames

– Ease values are between -100(slow) and 100(fast)

Rotate - specifies the number of times an object rotates clockwise(CW) or counter clockwise(CCW)

19Creating Animations Web Collection: Flash MX 2004 Chapter D

Working with PropertiesOrient to path - orients the baseline of the object to the path

Sync - ensures that the object loops properly

Snap - attaches the object to the path by its registration point

Orient to PathFeature enabledin the PropertiesPanel

20Creating Animations Web Collection: Flash MX 2004 Chapter D

Resizing an Object using a Motion TweenSelect the object in the ending frame and then use the Scale Tool options from the Free Transform tool

21Creating Animations Web Collection: Flash MX 2004 Chapter D

Rotating an Object using a Motion TweenSelect the object in the start or end frame rotate with different options– Rotate with the Rotate Tool option of the Free Transform tool– Rotate Clockwise or Counter Clockwise a specified number of turns or

degrees through the Properties panel– Use Modify > Transform to specify rotation

22Creating Animations Web Collection: Flash MX 2004 Chapter D

Rotating an Object using a Motion Tween

Specifying the rotate settings via the Properties Panel

23Creating Animations Web Collection: Flash MX 2004 Chapter D

Changing an Object’s Color with Motion TweenNumerous ways to change an object’s color over an animation’s time– Change the Tint of the object in the last frame– Change the Alpha of the object in the last frame– Change the Brightness of the object in the last frame– Apply Advanced Effects

24Creating Animations Web Collection: Flash MX 2004 Chapter D

The Advanced Effect Panel

Onion Skin

25Creating Animations Web Collection: Flash MX 2004 Chapter D

Onion Skin FeatureA feature that allows you to view an outline of objects in any number of framesHelps in positioning animated objects on the stage– Turn Onion Skin feature on via the Icon in

the timeline– Use The sliders to determine the range of

Onion Skin display

26Creating Animations Web Collection: Flash MX 2004 Chapter D

Timeline EffectsMacromedia Flash allows you to combine various animation effects and provides several prebuilt Timeline effects

You can apply Timeline effects to the following objects:

Text

Graphics

Bitmap images

Button symbols

27Creating Animations Web Collection: Flash MX 2004 Chapter D

Apply a Timeline Effect

28Creating Animations Web Collection: Flash MX 2004 Chapter D

Animating Text

Like other objects, Text can be animated– The entire text block is animated

unless “Broken Apart”

– Text can be rotated, skewed, scaled, or re-colored

– Motion Tweened Text blocks are automatically saved as Symbols

29Creating Animations Web Collection: Flash MX 2004 Chapter D

Chapter D TasksCreate frame animations

Create motion-tweened animation

Work with motion guides

Create motion animation effects

Animate text