1 / 65

Chapter 8 Interactive Multimedia Authoring with Flash: Animation

Chapter 8 Interactive Multimedia Authoring with Flash: Animation. Flash: Tweening. 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. Tweening.

chars
Download Presentation

Chapter 8 Interactive Multimedia Authoring with Flash: Animation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Chapter 8Interactive Multimedia Authoring with Flash: Animation Flash: Tweening

  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

  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 incorrectly: 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 for Classic tween

  31. Motion Guide • Allows an object to follow a path that you draw as a stroke • Works with symbols, not shapes

  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. 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. Chapter 8Interactive 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.

  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

More Related