OVERVIEW

1
(No Transcript)
2
Chapter Lessons
OVERVIEW

• Create frame-by-frame animations
• Create motion-tweened animation
• Work with motion guides
• Create animation effects
• Animate text

3
Introduction
INTRODUCTION

• Animation is an important part of a Web site in
• E-commerce
• Education
• Entertainment
• Animation is made up of a series of still images
• Persistence of Vision is the basis for frame
  rates in animations

4
Introduction
INTRODUCTION

• 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

5
Macromedia Flash Animation
INTRODUCTION

• Animation is one of the most powerful features of
  Flash
• Basic animation is a simple process
• Move an object around the stage
• Change an objects size, shape, color
• Apply Special Effects, such as zooming, fading,
  or a combination of effects

6
Macromedia Flash Animation
INTRODUCTION

• Two animation methods
• Frame-by-frame animation
• Tweened Animation

7
Understanding Frame-by-Frame Animations
LESSON 1

• 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

8
Understanding Frame-by-Frame Animations
LESSON 1
FIGURE 1 Three images used in an animation
9
Understanding Frame-by-Frame Animations
LESSON 1

• The greater the number of images, the less change
  needed in each image
• Creating more realistic animation
• Number of frames creates varied results
• Fewer frames, jerky animation

10
Creating Frame-by-Frame Animations
LESSON 1

• 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

11
Creating Frame-by-Frame Animations
LESSON 1

• Insert keyframe where you want change to occur
• Change the object
• Onion skinning helps placement of image series

12
Creating Frame-by-Frame Animations
LESSON 1
In each Frame, the car is in a different position
Figure 2 The first six frames of an animation
13
Create Motion-Tweened Animation
LESSON 2

• 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

14
Create Motion-Tweened Animation
LESSON 2

• 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

15
LESSON 2
Keyframe for where the car ends
Keyframe for where the car starts
Figure 10 Sample motion-tweened animation
16
Create Motion-Tweened Animation
LESSON 2

• 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

17
Create Motion-Tweened Animation
LESSON 2

• Insert a keyframe in the ending frame of the
  animation
• Move the object and/or make changes to the object
• Change the objects size
• Rotate the object

18
Things to Remember
LESSON 2

• 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

19
Things to Remember
LESSON 2

• 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

20
Work with Motion Guides
LESSON 3

• 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

21
Creating Animation with Motion Guides
LESSON 3

• 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

22
Creating Animation with Motion Guides
LESSON 3

• 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

23
Creating Animation with Motion Guides
LESSON 3

• 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

24
Creating Animation with Motion Guides
LESSON 3
25
Working with Properties
LESSON 3

• 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)

26
Working with Properties
LESSON 3

• 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

27
Working with Properties
LESSON 3

• Sync
• Ensures that the object loops properly
• Snap
• Attaches the object to the path by its
  registration point

28
Create Animation Effects
LESSON 4

• Resizing an object
• Rotating an object
• Changing the color of an object

29
Resizing an Object Using a Motion Tween
LESSON 4
30
Rotating an Object Using a Motion Tween
LESSON 4

• 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

31
Changing an Objects Color with Motion Tween
LESSON 4

• Numerous ways to change an objects color over an
  animations time
• Change the Tint of the object
• Change the Alpha of the object
• Change the Brightness of the object
• Apply Advanced Effects

32
Using the Onion Skin Feature
LESSON 4

• Allows you to view an outline of objects in any
  number of frames
• Helps in positioning animated objects on the
  stage
• Turn Onion Skin feature on via the Icon in the
  timeline
• Use sliders to determine the range of Onion Skin
  display

33
Combining Various Animation Effects
LESSON 4

• 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

34
Creating Timeline Effects
LESSON 4

• You can apply Timeline effects to the following
  objects
• Text
• Graphics, including shapes, groups, and graphic
  symbols
• Bitmap images
• Button symbols

35
Apply a Timeline Effect
LESSON 4
36
Animate Text
LESSON 5

• 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

37
Animate Text
LESSON 5

• 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

38
Chapter 4 Tasks
SUMMARY

• Create frame-by-frame animations
• Create motion-tweened animation
• Work with motion guides
• Create animation effects
• Animate text