1. Animation Part III: Interactive Multimedia Authoring with Flash
Flash: Tweening
“Computers and Creativity”
Richard D. Webster, COSC 109 Instructor
Office: York Road, Room 422 | Phone:  (410)
109 website: 

2. In this lecture, you will learn:
the types of tweening:
classic tween
motion tween
shape tween
how to create tween animation
how to animate an object following a custom path

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

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

5. Types of Tween in Flash
Classic tween (called Motion tween in Flash CS3 and prior)
Motion tween
Shape tween

6. Motion (Classic) Tween vs. Shape Tween
Motion and Classic Tween
Shape Tween
Works with symbols only
Works with shapes only
Not changing the shapes
Morphing 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

7. Classic Tween
Example

8. Example of Classic Tween
A leaf is created as a Graphic symbol, and placed on the stage.

9. Example of Classic Tween
Keyframe at frame 1

10. Example of Classic Tween
Keyframe at frame 20:
The leaf is repositioned, rotated, and scaled bigger.

11. Example of Classic Tween
Keyframe at frame 60:
The leaf is repositioned again, rotated, and scaled smaller.

12. Example of Classic Tween
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.

13. Properties of a symbol instance that can be tweened using Classic tween
Position
Rotation
Width
Height
Color
Opacity

14. Motion Tween
Example

15. Example of Motion Tween
A leaf is created as a Graphic symbol, and placed on the stage.

16. Example of Classic Tween
Keyframe at frame 1

17. Example of Classic Tween
Keyframe at frame 20:
The leaf is repositioned, rotated, and scaled bigger.

18. Example of Classic Tween
Keyframe at frame 60:
The leaf is repositioned again, rotated, and scaled smaller.

19. Properties of a symbol instance that can be tweened using Motion tween
Position
Rotation
Width
Height
Color (Classic tween)
Opacity (Classic tween)

20. Shape Tween
Example

21. Example of Shape Tween Keyframe at frame 1:
A shape of the letter "I" in blue

22. Example of Shape Tween
Keyframe at frame 15:
A heart shape in pink

23. Example of Shape Tween Keyframe at frame 40:
A shape of the letter "U" in green

24. Example of Shape Tween
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.

25. Properties of a shape that can be tweened in shape tween
Position
Rotation
Width
Height
Color
Opacity
Shape

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

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

28. Tween a Symbol to Follow a Path

29. Tween a Symbol to Follow a Path
Motion path
for Motion tween
Motion guide
for Classic tween

30. Motion Guide

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

32. To Create Animation with Motion Guide
Create keyframes like you would create a classic tween animation
Create a motion guide layer for the tween animation:
In the timeline, right-click (Windows) or Control-click (Mac OS) on the motion tween layer.
Choose the option of motion guide
In the motion guide layer, draw a path (using pencil or pen tool) in one single stroke. Do not create multiple strokes.
For each keyframe of the tween animation, drag the symbol instance to snap on the path.

33. Returning to the leaf animation to make it follow a more complex path
Motion Guide
Example:
Returning to the leaf animation to make it follow a more complex path

34. Example of Motion Guide
A classic tween sequence with the leaf is created using only 2 keyframes.

35. Example of Motion Guide
A motion guide is created for the classic tween layer.

36. Example of Motion Guide
A complex path is drawn in the motion guide layer using the Pencil tool.

37. Example of Motion Guide
The leaf in frame 1 (first keyframe) is snapped to the beginning of the path.

38. Example of Motion Guide
The leaf in frame 60 (last keyframe) is snapped to the end of the path.

39. Example of Motion Guide
Result:
60 frames of animation
The leaf follows the path drawn in the motion guide layer

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.

41. Motion Path
for Motion tween

42. Motion Path
A motion path is automatically generated for each Motion twee span.

43. Motion Path
Can be edited like a stroke using Selection and Subselection tools

44. Motion Path Can also be a custom-drawn stroke
To apply a stroke as the motion path for a Motion tween:
Copy the stroke
Select the Motion tween span on the timeline
Paste the stroke

45. Interactive Multimedia Authoring with Flash: Animation
Flash: Mask

46. 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

47. Mask
a mask
original
mask effect

48. To Create Mask Effect
On the timeline, arrange the maskee layer immediately below the layer that you want to be the mask layer.
On the timeline, right-click (Windows) or Control-click (Mac OS) on the mask layer, and select Mask.

49. Mask Effect Example
Spotlight Effect

50. Mask Effect Example: Spotlight Effect

51. Mask Effect Example: Spotlight Effect
Maskee content
Maskee layer

52. Mask Effect Example: Spotlight Effect
Mask content:black circle
Mask layer

53. Mask Effect Applied by locking the mask layer

54. 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.

55. Mask Effect Example
X-ray Effect

56. Mask Effect Example: X-ray Effect
maskee layer(s)
mask layer,
immediately above the maskee layer(s)
Right-click on it, choose "Mask" to make it a mask

57. Mask Effect Example: X-ray Effect57
maskee layer(s)
Resulted mask effect
mask layer,
immediately above the maskee layer(s)
Right-click on it, choose "Mask" to make it a mask 57

58. Mask Effect Example: X-ray Effect
Add a bottom layer of a man
Result 58

59. If you create a tween animation of the x-ray bar (the mask), then you get

60. Mask Effect Example
Appearance Effect

61. Mask Effect Example: Appearance Effect
Maskee layer:
Contains only the little alien

62. Mask Effect Example: Appearance Effect
Mask layer:
Contains only the light beam

63. Mask Effect Example: Appearance Effect
Mask effect is applied by locking the mask layer.
Note: The mask does not always show up.

64. Mask Effect Example: Appearance Effect
Blue beam layer:
Overlay the blue beam by adding it on another layer because we want to see the blue beam.

65. If you tween the height of the blue beam (both the mask and the blue beam on the extra layer), then you get