Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

66
Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION

Transcript of Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Page 1: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Adobe Flash CS3 Revealed

CHAPTER 4: CREATING ANIMATION

Page 2: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

1. Create frame-by-frame animations

2. Create motion-tweened animation

3. Work with motion guides

4. Create animation effects

5. Animate text

Chapter 4 Lessons

Chapter 4

Page 3: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Animation is an important part of a Web site in

E-commerce

Education

Entertainment

Introduction

Chapter 4

Page 4: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

How Animation Works

Animation is made up of 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

Frame rates lower than 10-12 fps often result in jerky images

Higher frame rates may result in blurred images

Flash uses default frame rate of 12 fps

Chapter 4

Page 5: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Flash Animation

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

Chapter 4

Page 6: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Flash Animation

Two animation methods

Frame-by-frame animation

Tweened animation

Chapter 4

Page 7: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Understanding 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 complexity, animation can require a lot of time to produce

Chapter 4

Page 8: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Understanding Frame-by-Frame Animations

Chapter 4

Page 9: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Understanding Frame-by-Frame Animations

When creating frame by frame animation, consider the following:

The number of different images

The number of frames in which each image will appear

The movie frame rate

Chapter 4

Page 10: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Creating Frame-by-Frame Animations

Select the beginning frame of the animation

Insert a keyframe on the layer in frame

A keyframe signifies a change in an object

Place the object on the stage

Chapter 4

Page 11: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Creating Frame-by-Frame Animations

Insert keyframe where you want change to occur

Change the object

“Onion skinning” helps placement of image series

Chapter 4

Page 12: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 2: The First Six Frames of an Animation

In each frame, the front end of the car is in a different position

Chapter 4

Page 13: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 4: Timeline with Keyframes

Chapter 4

Page 14: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 9: Changing the Frame Rate

Chapter 4

Page 15: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Create Motion-Tweened Animation

Motion tweening is 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

Chapter 4

Page 16: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Create Motion-Tweened Animation

Two types of tweening

Shape tweening

A “morphing” effect

One object slowly turns into another

Motion tweening

Used to animate objects which are moved, resized, re-colored, or rotated

Chapter 4

Page 17: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 10: Motion-tweened Animation

Chapter 4

Page 18: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Create Motion-Tweened Animation

Select the starting frame

Insert a keyframe, if necessary

Position the object on the stage

Verify that it is selected

Choose the Create Motion Tween command

From the Timeline option on the Insert menu

Chapter 4

Page 19: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Create Motion-Tweened Animation

Insert a keyframe in the ending frame of the animation

Move the object and/or make changes to the object

Change the object’s size

Rotate the object

Chapter 4

Page 20: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Things to Remember

If you change the position of the object, it will move in a direct line from start position to the end position

If you reshape an object in the ending keyframe, the object will slowly change from the starting keyframe to the ending

Chapter 4

Page 21: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Things to Remember

When you select an object and create a motion tween, Flash automatically creates a symbol

You can remove a motion tween animation by selecting a frame within the tween and using the Remove Tween command

Chapter 4

Page 22: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 11: Final Position of First Motion Tween

Starting frame

Ending frame

Chapter 4

Page 23: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 12: Final Position of Combined Motion Tweens

Chapter 4

Page 24: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Work with Motion Guides

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

Without Motion Guides, animations always travel in straight lines

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

Chapter 4

Page 25: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Creating Animation with Motion Guides

Two ways to work with motion guides

Insert a guide layer, draw a path, then create an animation and attach the animated object to the path

Create an animation, insert a motion guide layer and draw a path, then attach animated object to the path

Chapter 4

Page 26: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Creating Animation with Motion Guides

Second method described

Create a motion-tweened animation

Select the layer the animation is on and insert a motion guide layer

Draw a path using the Pen, Pencil, Line, Circle, Rectangle, or Brush tools

Attach the object to the path by dragging the object by its registration point to the beginning of the path in the first frame, and to the end of the path in the last frame

Chapter 4

Page 27: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 17: Motion Guide Layer

Motion guide layer

Indented layer containing animation that will follow the path created on the

guide layer

Chapter 4

Page 28: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Working with Properties

Tween

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)

Chapter 4

Page 29: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Working with Properties

Rotate

Specifies the number of times an object rotates clockwise (CW) or counter clockwise (CCW)

Orient to path

Orients the baseline of the object to the path

Chapter 4

Page 30: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Working with Properties

Sync

Ensures that the object loops properly

Snap

Attaches the object to the path by its registration point

Chapter 4

Page 31: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Transformation Point

Each symbol has a transformation point in the form of a circle (O) that is used to orient the object when it is being animated

The transformation point is also the point that snaps to a motion guide

When attaching an object to a path, you can drag the transformation point to the path

The default position for a transformation point is the center of the object

You can reposition the transformation point while in the symbol edit mode by dragging the transformation point to a different location in the object

Chapter 4

Page 32: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 16: Motion Guide with Object Attached

Transformation point

Chapter 4

Page 33: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Registration Point

Objects also have a registration point (+) that is used to position the object on the stage using ActionScript code

The transformation and registration points can overlap—this is displayed as a plus sign within a circle

Chapter 4

Page 34: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 19: Completed Motion Path

Chapter 4

Page 35: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 20: Snapping an Object to the Path

The transformation point of the object attaches to

the path

Chapter 4

Page 36: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 22: Setting the Ease Value

Chapter 4

Page 37: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Create Motion Animation Effects

Resizing an object

Rotating an object

Changing the color of an object

Chapter 4

Page 38: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Resizing an Object Using a Motion Tween

The simplest process for resizing an object during a motion tween:

select a frame as the starting frame

draw or place an object on the stage

and then create a motion tween

You can select an ending frame and resize the object using the resize handles that are displayed when you select the Free Transform tool and the Scale option on the Tools panel

Chapter 4

Page 39: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 23: Snapping an Object to the Path

Chapter 4

Page 40: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Rotating an Object Using a Motion Tween

Select the object in the start or end frame, then rotate with options

Rotate Tool option of Free Transform tool

Rotate clockwise or counter clockwise a specified number of turns or degrees through Properties panel

Stipulate an Ease value to cause the rotation to accelerate or decelerate

Chapter 4

Page 41: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Changing an Object’s Color with Motion Tween

The most basic change involves starting with one color for the object and ending with another color

The tweening process slowly changes the color across the specified frames

When the movie is played, the colors are blended as the object moves across the stage

Chapter 4

Page 42: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Changing an Object’s Color with Motion Tween

More sophisticated changes using the Property inspector

Change the Tint of the object

Change the Alpha of the object

Change the Brightness of the object

Apply Advanced Effects

Chapter 4

Page 43: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Using the Onion Skin Feature

Allows you to view an outline of objects in any number of frames

Helps in positioning animated objects on the stage

The Edit Multiple Frames feature is also turned on, allowing you to view the objects in the Keyframes in a non-outline form

Chapter 4

Page 44: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 24: Onion Skin Feature Turned On

Chapter 4

Page 45: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Combining Various Animation Effects

Combine motion-tween effects so they occur simultaneously during an animation

Example: airplane object

Enter from offstage and perform a loop

Rotate the plane horizontally to create a barrel roll effect

Grow smaller as it moves across the screen to simulate the effect of plane speeding away

Chapter 4

Page 46: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Creating Timeline Effects

You can apply Timeline effects to the following objects:

Text

Graphics, including shapes, groups, and graphic symbols

Bitmap images

Button symbols

Chapter 4

Page 47: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Adding an Effect to an Object

To add an effect to an object, you select the object and then choose Timeline Effects from the Insert menu

The Timeline Effects menu has three options that name categories of effects available for the type of object you’ve selected

Chapter 4

Page 48: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 25: Timeline Effects Options on the Insert Menu

Chapter 4

Page 49: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Default Settings for Transition Effect

These settings specify the duration of the effect in:

Number of frames

Specify the direction (In or Out)

Specify a motion ease

Chapter 4

Page 50: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 26: Default Settings for Transition Effect Fade In

Chapter 4

Page 51: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Editing a Timeline Effect

To edit a Timeline effect, you select the object associated with the effect on the Stage and click Edit in the Property inspector

This displays the appropriate Effects Setting dialog box

Chapter 4

Page 52: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Deleting a Timeline Effect

When you right-click (Win) or control click (Mac) an object, a menu opens with options specific to the object you clicked

This menu is used to delete Timeline effects

on the Stage, right-click (Win) or control click (Mac) the object

select Timeline Effects from the context menu

select Remove Effect

Chapter 4

Page 53: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 29: Specifying the Rotate Settings

Rotation will be counter clockwise

1 time

Chapter 4

Page 54: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 31: Changing the Color Settings

Color is determined by mixing RGB values and

percentages

Chapter 4

Page 55: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 32: Using the Onion Skin Feature

Onion skin icon

Edit multiple frames icon

Start Onion Skin slider

Drag End Onion Slider to

Frame 22

Chapter 4

Page 56: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 35: The Library Panel Displaying the Transition Effect

Play button

Chapter 4

Page 57: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 36: The Completed Transition Dialog Box

Fade

Direction

Motion ease slider

Chapter 4

Page 58: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 37: The Completed Transform Dialog Box

Chapter 4

Page 59: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Animate Text

Text can be animated like other objects

Resize, rotate, reposition, and change the colors

Create a motion-tween to move text as you would an object

Specify a rotation

Chapter 4

Page 60: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Animate Text

Once you create a motion animation using a text block, the text block becomes a symbol

Cannot edit individual characters

Can edit the symbol as a whole

Chapter 4

Page 61: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 38: Examples of Animated Text

Text scrolls from off the stage to

the stage

Text zooms

Text rotates

Chapter 4

Page 62: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 41: Examples of Animated Text

This will be the position of the text block at the end of the animation

Chapter 4

Page 63: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 45: Setting the Alpha Amount to 0

The alpha amount

Chapter 4

Page 64: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 46: Adding a Button

Chapter 4

Page 65: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

Fig. 48: Adding a Play Action

Chapter 4

Page 66: Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.

1. Create frame-by-frame animations

2. Create motion-tweened animation

3. Work with motion guides

4. Create animation effects

5. Animate text

Chapter 4 Tasks

Chapter 4