Chapter 8 – Part III Interactive Multimedia Authoring with Flash: Animation Flash: Tweening “Computers and Creativity” Richard D. Webster, COSC 109 Instructor

Embed Size (px)

Citation preview

  • Slide 1
  • 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
  • Slide 45
  • Chapter 8 Interactive Multimedia Authoring with Flash: Animation Flash: Mask 45
  • Slide 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 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
  • Slide 49
  • Mask Effect Example Spotlight Effect 49
  • Slide 50
  • Mask Effect Example: Spotlight Effect 50
  • Slide 51
  • Mask Effect Example: Spotlight Effect 51 Maskee layer Maskee content
  • Slide 52
  • Mask Effect Example: Spotlight Effect 52 Mask layer Mask content:black circle
  • Slide 53
  • Mask Effect Applied by locking the mask layer 53
  • Slide 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. 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