Adobe Flash CS4 – Illustrated

1. Adobe Flash CS4 – Illustrated Unit D: Creating Animation

2. Objectives Understand animation Use frames Create a motion tween Create and copy a motion path Use easing Add nested symbols to a movie clip Adobe Flash CS4 – Illustrated

3. Objectives (cont’d) • Animate nested symbols • Create frame-by-frame animation • Create a shape tween • Use shape hints Adobe Flash CS4 – Illustrated

4. Understanding Animation • Create and adjust frames and artwork that appears in then • Determine length of the animation • Set a frame rate to control the speed • Animate shape, size, color, position Adobe Flash CS4 – Illustrated

5. Specifying Frames • Change over time is represented by frames in the Timeline • Blank keyframe • Single frame in the Timeline when a new document is opened • Keyframe • Special frame that signals a change in a movie or animation • Frame span • A group of frames Adobe Flash CS4 – Illustrated

6. Selecting Animation Methods Adobe Flash CS4 – Illustrated

7. Selecting Animation Methods • Sample frame-by-frame animation Adobe Flash CS4 – Illustrated

8. Selecting Animation Methods • Sample motion tween Adobe Flash CS4 – Illustrated

9. Understanding Tweensin the Timeline • Motion tween spans • Blue • Symbols show movement • Property keyframe • Contains specific property values that change in that frame: position, scale, skew, rotation, color, or filter • Shape tween spans • Green • Use morphing Adobe Flash CS4 – Illustrated

10. Using Frames • Frame types Adobe Flash CS4 – Illustrated

11. Using Frames • Viewing a frame span Adobe Flash CS4 – Illustrated

12. Planning Movies with Storyboards • Storyboard • Is a visual script that contains captions to describe the action in a movie • Uses panels to map out sequence and major action points of the animation • Allows you to do your tweaking before you work your animation in Flash Adobe Flash CS4 – Illustrated

13. Planning Movies with Storyboards • Sample storyboard Adobe Flash CS4 – Illustrated

14. Creating a Motion Tween • Apply a motion tween to a symbol by: • Placing an instance in starting keyframe • Modifying position or transformation properties of the instance in last keyframe of the animation Adobe Flash CS4 – Illustrated

15. Creating a Motion Tween • Adjusting the value of a property keyframe Adobe Flash CS4 – Illustrated

16. Creating and Copyinga Motion Path • Copy/paste motion tween on other layers to keep animations consistent and save time • Use the Motion Presets panel • Motion Presets panel Adobe Flash CS4 – Illustrated

17. Creating and Copyinga Motion Path • Creating a motion path Adobe Flash CS4 – Illustrated

18. Creating and Copyinga Motion Path • Modifying a motion path Adobe Flash CS4 – Illustrated

19. Using Easing • Adjust easing on Properties panel • Use easing to speed up or slow down start or end of an animation • Object eases in: starts out slow, then speeds up at the end • Object eases out: starts out fast, then slows down Adobe Flash CS4 – Illustrated

20. Using the Motion Editor • Provides detailed control over properties in every keyframe • Sections: Basic Motion, Color Effect, Transformation, Filter, and Eases • Each property has its own timeline • Adjust X and Y values • Add keyframes • Create custom easing • Apply preset easing option Adobe Flash CS4 – Illustrated

21. Using the Motion Editor • The Motion Editor Adobe Flash CS4 – Illustrated

22. Adding Nested Symbolsto a Movie Clip • Nested symbols • Are created by placing a symbol inside another symbol • Create a unique new symbol while preserving individuality of original symbols Adobe Flash CS4 – Illustrated

23. Adding Nested Symbolsto a Movie Clip • Creating a Movie Clip symbol Adobe Flash CS4 – Illustrated

24. Adding Nested Symbolsto a Movie Clip • Extending a frame span to multiple layers in a movie clip Adobe Flash CS4 – Illustrated

25. UnderstandingTimeline Commands • Commands that affect frames are on Timeline submenu of Edit menu • Remove Frames • Cut Frames • Clear Frames Adobe Flash CS4 – Illustrated

26. Animating Nested Symbols • Still allows reuse of the symbol in other parts of the movie, where it can be part of another animation Adobe Flash CS4 – Illustrated

27. Animating Nested Symbols • Modified nested symbols Adobe Flash CS4 – Illustrated

28. Animating Nested Symbols • Modifying instances in a new keyframe Adobe Flash CS4 – Illustrated

29. Animating Nested Symbols • Viewing a movie clip Adobe Flash CS4 – Illustrated

30. Creating Frame-by-FrameAnimation • Comes closest to traditional animation techniques • Content is created in every frame • Can be time-consuming, but offers detailed control over the animation Adobe Flash CS4 – Illustrated

31. Creating Frame-by-FrameAnimation • Completed frame-by-frame animation Adobe Flash CS4 – Illustrated

32. Creating Frame-by-FrameAnimation • Viewing frame-by-frame animation Adobe Flash CS4 – Illustrated

33. Creating a Shape Tween • Changes (morphs) starting shape into a different ending shape • Create by using shapes instead of symbols, bitmap images, or text • Place starting shape in first frame • Place ending shape in last frame • Create the shape tween Adobe Flash CS4 – Illustrated

34. Creating a Shape Tween • Creating a cloud shape Adobe Flash CS4 – Illustrated

35. Creating a Shape Tween • Reshaping an object in a shape tween Adobe Flash CS4 – Illustrated

36. Using Shape Hints • Mark specific points on beginning and ending shapes that Flash uses to transition one area into another • Correct appearance of a shape tween • Work most effectively when arranged in a clockwise or counterclockwise pattern Adobe Flash CS4 – Illustrated

37. Using Shape Hints • Positioning shape hints on the starting shape Adobe Flash CS4 – Illustrated

38. Using Shape Hints • Positioned shape hints on the ending shape Adobe Flash CS4 – Illustrated

39. Using Shape Hints • Improved shape tween Adobe Flash CS4 – Illustrated