Adobe Photoshop 7'0 Design Professional

1
(No Transcript)
2
Unit Lessons
OVERVIEW

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

3
Intro to Animation
INTRODUCTION

• 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
• Brain holds image for 1/10 th of a second
• Frames rates of 10-12 fps generally provide
  smooth computer-based animation

4
Intro to Animation
INTRODUCTION

• 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

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
• Two Animation Methods Frame Animation, and
  Tweened Animation

6
Understanding Frame Animations
LESSON 1

• 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

7
Understanding Frame Animations
LESSON 1
Three images used in a Frame Animation
8
Understanding Frame Animations
LESSON 1

• A greater number of images generally suggests
  less change needed between each image creating
  more realistic animation
• Consider the number of frames in which an image
  will appear
• Fewer frames and the animation may appear jerky
• Consider the frame rate

9
Creating a Frame Animation
LESSON 1

• 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

10
Creating a Frame Animation
LESSON 1
In each Frame, the car is in a different position
11
Exercise
LESSON 1

• Use fld_1.fla file
• Create frame-by-frame animation (in-place) page
  D-6
• Add detail to animation lines to indicate
  motion page D-7
• Add animation (moving frame) page D-8
• Change frame rate page D-9

12
Understanding Motion Tweening
LESSON 2

• 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

13
Understanding Motion Tweening
LESSON 2

• Two types of Tweening
• Shape Tweening-A morphing effect, covered in a
  later unit
• Motion Tweening-used to animate objects which are
  moved, resized, re-colored, or rotated

14
LESSON 2
Motion Tweening requires only a Start and End
Frame
Light Blue Background represents a Motion Tween
15
Creating a Motion Tween
LESSON 2

• Insert a starting keyframe
• Insert an ending keyframe
• Make alterations to the ending frame
• Go back to the starting frame and choose
  InsertgtCreate Motion Tween
• Make adjustments through the Properties Panel

16
Exercise
LESSON 2

• Use fld_2.fla file
• Create motion-tweened animation page D-12
• Add rotation page D-13

17
Understanding Motion Guides
LESSON 3

• 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

18
Creating Animation with Motion Guides
LESSON 3

• Two ways to create this relationship
• Create a guide layer with a path, then create a
  layer of animation and attach
• Or, create an animation. Then create a motion
  guide layer with a path, and attach
• Depending on the type of object youre animating,
  you may need to orient the object to the path

19
Creating Animation with Motion Guides
LESSON 3
Object not oriented to path
A motion guide layer and its associated animation
Object oriented to path
20
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)
• Rotate-specifies the number of times an object
  rotates clockwise(CW) or counter clockwise(CCW)

21
Working with Properties
LESSON 3

• Orient 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 Path Feature enabled in the
Properties Panel
22
Exercise
LESSON 3

• Use fld_3.fla file
• Create animation w/o guide page D-16
• Add motion guide page D-17
• Orient object to path page D-18
• Accelerate object page D-19
• Use of ease-in and ease-out

23
Resizing an Object using a Motion Tween
LESSON 4

• Select the object in the ending frame and then
  use the Scale Tool options from the Free
  Transform tool

24
Rotating an Object using a Motion Tween
LESSON 4

• Select 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 gt Transform to specify rotation

25
Rotating an Object using a Motion Tween
LESSON 4
Specifying the rotate settings via the Properties
Panel
26
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 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

27
LESSON 4
The Advanced Effect Panel
Onion Skinning
28
Onion Skinning
LESSON 4

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

29
Exercise
LESSON 4

• Resize object page D-22
• Rotate object page D-23
• Change color page D-24
• Use Onion Skin feature page D-25

30
Animating Text
LESSON 5

• 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

31
Exercise
LESSON 5

• Select, copy, and paste frames page D-28
• Create animated text page D-29
• Create rotating text page D-30
• Resize and fade text page D-31
• Add a play button page D-32
• Add action to button page D-33

32
Unit D Tasks
SUMMARY

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