1 / 40

Adobe Flash Professional CS5 – Illustrated

Adobe Flash Professional CS5 – Illustrated. Unit D: Creating Animation. Objectives. Understand animation Use frames Create a motion tween Create and copy a motion path Use easing Add nested symbols to a movie clip. Objectives. Animate nested symbols Create frame-by-frame animation

natan
Download Presentation

Adobe Flash Professional CS5 – Illustrated

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

More Related