Chapter 8 – Part III Interactive Multimedia Authoring with Flash: Animation Flash: Tweening...
If you can't read please download the document
Chapter 8 – Part III Interactive Multimedia Authoring with Flash: Animation Flash: Tweening “Computers and Creativity” Richard D. Webster, COSC 109 Instructor
Chapter 8 Part III Interactive Multimedia Authoring with Flash:
Animation Flash: Tweening Computers and Creativity Richard D.
Webster, COSC 109 Instructor Office: 7800 York Road, Room 422 |
Phone: (410) 704-2424 e-mail: [email protected]@towson.edu
109 website:
http://pages.towson.edu/webster/109/http://pages.towson.edu/webster/109/
1
Slide 2
In this lecture, you will learn: 2 the types of tweening:
classic tween motion tween shape tween how to create tween
animation how to animate an object following a custom path
Slide 3
Tweening To create movement and changes of visual content over
time, without having to manually create the content frame by frame
The computer interpolates the changes between 2 keyframes 3
Slide 4
To Create Keyframes in Flash Method 1: Select a frame on
timeline Choose Insert > Timeline > Keyframe Method 2:
Right-click (Windows) or Control-click (Mac OS) on a frame on
timeline Choose Insert Keyframe 4
Slide 5
Types of Tween in Flash Classic tween (called Motion tween in
Flash CS3 and prior) Motion tween Shape tween 5
Slide 6
Motion (Classic) Tween vs. Shape Tween Motion and Classic
TweenShape Tween Works with symbols onlyWorks with shapes only Not
changing the shapesMorphing the shapes Cannot have more than one
symbol in a frame of the same layer Can have more than one shapes
in a keyframe, but the result is unpredictable Can be tweened to
follow a path that is drawn as a stroke Does not work with motion
guide Tweened frames are colored blue (Motion tween) or purple
(Classic tween) on timeline Tweened frames are colored green on
timeline 6
Slide 7
Classic Tween Example 7
Slide 8
Example of Classic Tween 8 A leaf is created as a Graphic
symbol, and placed on the stage.
Slide 9
Example of Classic Tween 9 Keyframe at frame 1
Slide 10
Example of Classic Tween 10 Keyframe at frame 20: The leaf is
repositioned, rotated, and scaled bigger. Keyframe at frame 20: The
leaf is repositioned, rotated, and scaled bigger.
Slide 11
Example of Classic Tween 11 Keyframe at frame 60: The leaf is
repositioned again, rotated, and scaled smaller. Keyframe at frame
60: The leaf is repositioned again, rotated, and scaled
smaller.
Slide 12
Example of Classic Tween 12 Result after applying classic tween
to the keyframes: 60 frames But only 3 keyframes to specify the
leaf's position, rotation, and size. The computer interpolates the
positions, rotation, and size of the leaf between keyframes. Result
after applying classic tween to the keyframes: 60 frames But only 3
keyframes to specify the leaf's position, rotation, and size. The
computer interpolates the positions, rotation, and size of the leaf
between keyframes.
Slide 13
Properties of a symbol instance that can be tweened using
Classic tween Position Rotation Width Height Color Opacity 13
Slide 14
Motion Tween Example 14
Slide 15
Example of Motion Tween 15 A leaf is created as a Graphic
symbol, and placed on the stage.
Slide 16
Example of Classic Tween 16 Keyframe at frame 1
Slide 17
Example of Classic Tween 17 Keyframe at frame 20: The leaf is
repositioned, rotated, and scaled bigger. Keyframe at frame 20: The
leaf is repositioned, rotated, and scaled bigger.
Slide 18
Example of Classic Tween 18 Keyframe at frame 60: The leaf is
repositioned again, rotated, and scaled smaller. Keyframe at frame
60: The leaf is repositioned again, rotated, and scaled
smaller.
Slide 19
Properties of a symbol instance that can be tweened using
Motion tween Position Rotation Width Height Color (Classic tween)
Opacity (Classic tween) 19
Slide 20
Shape Tween Example 20
Slide 21
Example of Shape Tween 21 Keyframe at frame 1: A shape of the
letter "I" in blue Keyframe at frame 1: A shape of the letter "I"
in blue
Slide 22
Example of Shape Tween 22 Keyframe at frame 15: A heart shape
in pink Keyframe at frame 15: A heart shape in pink
Slide 23
Example of Shape Tween 23 Keyframe at frame 40: A shape of the
letter "U" in green Keyframe at frame 40: A shape of the letter "U"
in green
Slide 24
Example of Shape Tween 24 Result after applying shape tween to
the keyframes: 40 frames But only 3 keyframes to specify the
shapes. The computer interpolates the shapes between keyframes.
Result after applying shape tween to the keyframes: 40 frames But
only 3 keyframes to specify the shapes. The computer interpolates
the shapes between keyframes.
Slide 25
Properties of a shape that can be tweened in shape tween
Position Rotation Width Height Color Opacity Shape 25
Slide 26
Troubleshooting If a Classic or Shape tween sequence is working
correctly: an solid-line arrow in timeline If a Classic or Shape
tween sequence is working correctly: a dash line in timeline
26
Slide 27
Possible Causes for Tweening Problems Multiple symbol instances
in the same keyframe Classic tween applied to shapes Shape tween
applied to symbol instances A mix of symbol instances and shapes in
the same keyframe 27
Slide 28
Tween a Symbol to Follow a Path 28
Slide 29
Tween a Symbol to Follow a Path Motion path for Motion tween
Motion guide for Classic tween 29
Slide 30
Motion Guide 30
Slide 31
Motion Guide Allows an object to follow a path that you draw as
a stroke Works with symbols, not shapes Note that the color and
width of the path in the motion guide do not matter 31
Slide 32
To Create Animation with Motion Guide 1.Create keyframes like
you would create a classic tween animation 2.Create a motion guide
layer for the tween animation: 1.In the timeline, right-click
(Windows) or Control-click (Mac OS) on the motion tween layer.
2.Choose the option of motion guide 3.In the motion guide layer,
draw a path (using pencil or pen tool) in one single stroke. Do not
create multiple strokes. 4.For each keyframe of the tween
animation, drag the symbol instance to snap on the path. 32
Slide 33
Motion Guide Example: Returning to the leaf animation to make
it follow a more complex path 33
Slide 34
Example of Motion Guide 34 A classic tween sequence with the
leaf is created using only 2 keyframes.
Slide 35
Example of Motion Guide 35 A motion guide is created for the
classic tween layer.
Slide 36
Example of Motion Guide 36 A complex path is drawn in the
motion guide layer using the Pencil tool.
Slide 37
Example of Motion Guide 37 The leaf in frame 1 (first keyframe)
is snapped to the beginning of the path.
Slide 38
Example of Motion Guide 38 The leaf in frame 60 (last keyframe)
is snapped to the end of the path.
Slide 39
Example of Motion Guide 39 Result: 60 frames of animation The
leaf follows the path drawn in the motion guide layer Result: 60
frames of animation The leaf follows the path drawn in the motion
guide layer
Slide 40
More About Motion Guide The color and width of the path do not
matter. The motion guide is automatically hidden when the movie
plays. In the example: Only 2 keyframes are used but it can have
more than 2 keyframes. The leaf is snapped to the two ends of the
path, but it can be snapped anywhere along the path. 40
Slide 41
Motion Path for Motion tween 41
Slide 42
Motion Path 42 A motion path is automatically generated for
each Motion twee span.
Slide 43
Motion Path 43 Can be edited like a stroke using Selection and
Subselection tools
Slide 44
Motion Path Can also be a custom-drawn stroke To apply a stroke
as the motion path for a Motion tween: 1.Copy the stroke 2.Select
the Motion tween span on the timeline 3.Paste the stroke 44
Mask Defines areas to reveal its linked layer (maskee layer)
The content in a mask layer can be thought of as a hole that lets
the underlying maskee layers show through. In other words, the mask
item acts as a window that reveals the area of linked layers that
lie beneath it. The rest of the mask layer conceals everything else
on these linked layers 46
Slide 47
Mask 47 a mask original mask effect
Slide 48
To Create Mask Effect 1.On the timeline, arrange the maskee
layer immediately below the layer that you want to be the mask
layer. 2.On the timeline, right-click (Windows) or Control-click
(Mac OS) on the mask layer, and select Mask. 48
More About Mask Effect The resulted mask effect can be seen on
the stage by locking the mask layer. The mask effect always shows
when you do a Test Movie, with or without unlocking the mask layer.
Don't forget to unlock the mask layer when you want to edit the
mask layer. 54
Slide 55
Mask Effect Example X-ray Effect 55
Slide 56
Mask Effect Example: X-ray Effect mask layer, immediately above
the maskee layer(s) Right-click on it, choose "Mask" to make it a
mask maskee layer(s) 56
Slide 57
Mask Effect Example: X-ray Effect 57 mask layer, immediately
above the maskee layer(s) Right-click on it, choose "Mask" to make
it a mask maskee layer(s)Resulted mask effect 57
Slide 58
Mask Effect Example: X-ray Effect 58 Add a bottom layer of a
man Result
Slide 59
If you create a tween animation of the x- ray bar (the mask),
then you get 59
Slide 60
Mask Effect Example Appearance Effect 60
Slide 61
Mask Effect Example: Appearance Effect 61 Maskee layer:
Contains only the little alien Maskee layer: Contains only the
little alien
Slide 62
Mask Effect Example: Appearance Effect 62 Mask layer: Contains
only the light beam Mask layer: Contains only the light beam
Slide 63
Mask Effect Example: Appearance Effect 63 Mask effect is
applied by locking the mask layer. Note: The mask does not always
show up. Mask effect is applied by locking the mask layer. Note:
The mask does not always show up.
Slide 64
Mask Effect Example: Appearance Effect 64 Blue beam layer:
Overlay the blue beam by adding it on another layer because we want
to see the blue beam. Blue beam layer: Overlay the blue beam by
adding it on another layer because we want to see the blue
beam.
Slide 65
If you tween the height of the blue beam (both the mask and the
blue beam on the extra layer), then you get 65