Adobe Flash Professional CS5 – Illustrated

1. Adobe Flash Professional CS5 – 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 Professional CS5 – Illustrated

3. Objectives • Animate nested symbols • Create frame-by-frame animation • Create a shape tween • Use shape hints • Plan and specialize animation Adobe Flash Professional CS5 – Illustrated

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

5. Specify 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 Professional CS5 – Illustrated

6. Select Animation Methods Adobe Flash Professional CS5 – Illustrated

7. Select Animation Methods • Sample frame-by-frame animation Adobe Flash Professional CS5 – Illustrated

8. Select Animation Methods • Sample motion tween Adobe Flash Professional CS5 – Illustrated

9. Understand 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 Professional CS5 – Illustrated

10. Using Frames • Frame types Adobe Flash Professional CS5 – Illustrated

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

12. 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 Professional CS5 – Illustrated

13. Creating a Motion Tween • Adjusting the value of a property keyframe Adobe Flash Professional CS5 – Illustrated

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

15. Creating and Copyinga Motion Path • Creating a motion path Adobe Flash Professional CS5 – Illustrated

16. Creating and Copyinga Motion Path • Modifying a motion path Adobe Flash Professional CS5 – Illustrated

17. 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 Professional CS5 – Illustrated

18. Using the Motion Editor • Provides detailed control over properties in every keyframe • Sections: Basic Motion, Transformation, Color Effect, 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 Professional CS5 – Illustrated

19. Using the Motion Editor • The Motion Editor Adobe Flash Professional CS5 – Illustrated

20. 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 Professional CS5 – Illustrated

21. Adding Nested Symbolsto a Movie Clip • Creating a Movie Clip symbol Adobe Flash Professional CS5 – Illustrated

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

23. Timeline Commands Adobe Flash Professional CS5 – Illustrated

24. 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 Professional CS5 – Illustrated

25. Animating Nested Symbols • Modified nested symbols Adobe Flash Professional CS5 – Illustrated

26. Animating Nested Symbols • Modifying instances in a new keyframe Adobe Flash Professional CS5 – Illustrated

27. Animating Nested Symbols • Viewing a movie clip Adobe Flash Professional CS5 – Illustrated

28. 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 Professional CS5 – Illustrated

29. Creating Frame-by-FrameAnimation • Completed frame-by-frame animation Adobe Flash Professional CS5 – Illustrated

30. 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 Professional CS5 – Illustrated

31. Creating a Shape Tween • Creating a cloud shape Adobe Flash Professional CS5 – Illustrated

32. Creating a Shape Tween • Reshaping an object in a shape tween Adobe Flash Professional CS5 – Illustrated

33. 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 Professional CS5 – Illustrated

34. Using Shape Hints • Positioning shape hints on the starting shape Adobe Flash Professional CS5 – Illustrated

35. Using Shape Hints • Positioned shape hints on the ending shape Adobe Flash Professional CS5 – Illustrated

36. Using Shape Hints • Improved shape tween Adobe Flash Professional CS5 – Illustrated

37. Planning and Specializing Animation • Planning movies with storyboards • Basic storyboards should provide an organizational and page-level view • Creating a mask • Use the shape of an object on one layer to expose the content of the layer directly beneath it Adobe Flash Professional CS5 – Illustrated

38. Planning and Specializing Animation • Animating using the Bone tool • Create inverse kinematics (IK) • Click and draw hinged segments in the object • Creating a pose • Adjusting the configuration of the joints in each keyframe Adobe Flash Professional CS5 – Illustrated

39. Planning and Specializing Animation • Creating a mask Adobe Flash Professional CS5 – Illustrated

40. Planning and Specializing Animation • Viewing Inverse Kinematics animated objects Adobe Flash Professional CS5 – Illustrated