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] - PowerPoint PPT Presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Chapter 8 – Part IIIInteractive Multimedia Authoring with Flash:
Animation
Flash: Tweening “Computers and Creativity”
Richard D. Webster, COSC 109 InstructorOffice: 7800 York Road, Room 422 | Phone: (410) 704-2424
• 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
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
Tween a Symbol to Follow a Path
28
Tween a Symbol to Follow a Path
• Motion path– for Motion tween
• Motion guide– for Classic tween
29
Motion Guide
30
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
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
Motion Guide
Example:Returning to the leaf animation to
make it follow a more complex path
33
Example of Motion Guide
34A classic tween sequence with the leaf is created using only 2 keyframes.
Example of Motion Guide
35A motion guide is created for the classic tween layer.
Example of Motion Guide
36
A complex path is drawn in the motion guide layer using the Pencil tool.
Example of Motion Guide
37
The leaf in frame 1 (first keyframe) is snapped to the beginning of the path.
Example of Motion Guide
38
The leaf in frame 60 (last keyframe) is snapped to the end of the path.
Example of Motion Guide
39
Result:• 60 frames of animation• The leaf follows the path drawn
in the motion guide layer
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
Motion Path
for Motion tween
41
Motion Path
42
A motion path is automatically generated for each Motion twee span.
Motion Path
43
Can be edited like a stroke using Selection and Subselection tools
Motion Path
• Can also be a custom-drawn stroke• To apply a stroke as the motion path for a
Motion tween:1. Copy the stroke2. Select the Motion tween span on the timeline3. Paste the stroke
44
Chapter 8Interactive Multimedia Authoring with Flash:
Animation
Flash: Mask
45
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
Mask
47
a mask
original
mask effect
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
Mask Effect Example
Spotlight Effect
49
Mask Effect Example:Spotlight Effect
50
Mask Effect Example:Spotlight Effect
51Maskee layer
Maskee content
Mask Effect Example:Spotlight Effect
52
Mask layer
Mask content:black circle
Mask Effect Appliedby locking the mask layer
53
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
Mask Effect Example
X-ray Effect
55
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
Mask Effect Example:X-ray Effect
5757
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
Mask Effect Example:X-ray Effect
5858
Add a bottom layer of a man
Result
If you create a tween animation of the x-ray bar (the mask), then you get
59
Mask Effect Example
Appearance Effect
60
Mask Effect Example:Appearance Effect
61
Maskee layer:Contains only the little alien
Mask Effect Example:Appearance Effect
62
Mask layer:Contains only the light beam
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 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.
If you tween the height of the blue beam (both the mask and the blue beam on the extra layer),