2. Chapter Lessons Create frame-by-frame animations
OVERVIEW
Chapter Lessons
Create frame-by-frame animations
Create motion-tweened animation
Work with motion guides
Create animation effects
Animate text
Creating Animations

3. 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
Creating Animations

4. INTRODUCTION
Introduction
Frames rates of fps generally provide smooth computer-based animation
Frame rates lower than fps often result in jerky images
Higher frame rates may result in blurred images
Flash uses default frame rate of 12 fps
Creating Animations

5. Macromedia Flash Animation
INTRODUCTION
Macromedia 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
Creating Animations

6. Macromedia Flash Animation
INTRODUCTION
Macromedia Flash Animation
Two animation methods
Frame-by-frame animation
Tweened Animation
Creating Animations

7. Understanding Frame-by-Frame Animations
LESSON 1
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
Creating Animations

8. Understanding Frame-by-Frame Animations
LESSON 1
Understanding Frame-by-Frame Animations
FIGURE 1: Three images used in an animation
Creating Animations

9. Understanding Frame-by-Frame Animations
LESSON 1
Understanding Frame-by-Frame Animations
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
Creating Animations

10. Creating Frame-by-Frame Animations
LESSON 1
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
Creating Animations

11. Creating Frame-by-Frame Animations
LESSON 1
Creating Frame-by-Frame Animations
Insert keyframe where you want change to occur
Change the object
“Onion skinning” helps placement of image series
Creating Animations

12. Creating Frame-by-Frame Animations
LESSON 1
Creating Frame-by-Frame Animations
In each
Frame, the
car is in a
different
position
Figure 2: The first six frames of an animation
Creating Animations

13. Create Motion-Tweened Animation
LESSON 2
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
Creating Animations

14. Create Motion-Tweened Animation
LESSON 2
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
Creating Animations

15. LESSON 2 Keyframe for where the car ends
Keyframe for where the car starts
Figure 10: Sample motion-tweened animation
Creating Animations

16. Create Motion-Tweened Animation
LESSON 2
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
Creating Animations

17. Create Motion-Tweened Animation
LESSON 2
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
Creating Animations

18. LESSON 2
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
Creating Animations

19. LESSON 2
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
Creating Animations

20. Work with Motion Guides
LESSON 3
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
Creating Animations

21. Creating Animation with Motion Guides
LESSON 3
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
Creating Animations

22. Creating Animation with Motion Guides
LESSON 3
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
Creating Animations

23. Creating Animation with Motion Guides
LESSON 3
Creating Animation with Motion Guides
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
Creating Animations

24. Creating Animation with Motion Guides
LESSON 3
Creating Animation with Motion Guides
Creating Animations

25. Working with Properties
LESSON 3
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)
Creating Animations

26. Working with Properties
LESSON 3
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
Creating Animations

27. Working with Properties
LESSON 3
Working with Properties
Sync
Ensures that the object loops properly
Snap
Attaches the object to the path by its registration point
Creating Animations

28. Create Animation Effects
LESSON 4
Create Animation Effects
Resizing an object
Rotating an object
Changing the color of an object
Creating Animations

29. Resizing an Object Using a Motion Tween
LESSON 4
Resizing an Object Using a Motion Tween
Creating Animations

30. Rotating an Object Using a Motion Tween
LESSON 4
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
Creating Animations

31. Changing an Object’s Color with Motion Tween
LESSON 4
Changing an Object’s Color with Motion Tween
Numerous ways to change an object’s color over an animation’s time
Change the Tint of the object
Change the Alpha of the object
Change the Brightness of the object
Apply Advanced Effects
Creating Animations

32. Using the Onion Skin Feature
LESSON 4
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
Turn Onion Skin feature on via the Icon in the timeline
Use sliders to determine the range of Onion Skin display
Creating Animations

33. Combining Various Animation Effects
LESSON 4
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
Creating Animations

34. Creating Timeline Effects
LESSON 4
Creating Timeline Effects
You can apply Timeline effects to the following objects:
Text
Graphics, including shapes, groups, and graphic symbols
Bitmap images
Button symbols
Creating Animations

35. Apply a Timeline Effect
LESSON 4
Apply a Timeline Effect
Creating Animations

36. Animate Text Text can be animated like other objects
LESSON 5
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
Creating Animations

37. LESSON 5
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
Creating Animations

38. Chapter 4 Tasks Create frame-by-frame animations
SUMMARY
Chapter 4 Tasks
Create frame-by-frame animations
Create motion-tweened animation
Work with motion guides
Create animation effects
Animate text
Creating Animations