1. © 2010 Delmar, Cengage Learning Chapter 4: Creating Animation

2. © 2010 Delmar Cengage Learning Chapter 4 Lessons 1.Create motion-tween animation 2.Create classic-tween animation 3.Create frame-by-frame animation 4.Create shape tween animations 5.Create movie clips 6.Animate text

3. © 2010 Delmar Cengage Learning Introduction Animation is an important part of a Web site in –E-commerce –Education –Entertainment

4. © 2010 Delmar Cengage Learning How Animation Works Animation is made up of a series of still images “Persistence of Vision” is the basis for frame rates in animations Frames rates of 10-12 fps generally provide smooth computer-based animation –Frame rates lower than 10-12 fps often result in jerky images –Higher frame rates may result in blurred images Flash uses default frame rate of 12 fps

5. © 2010 Delmar Cengage Learning Flash Animation Animation is one of the most powerful features of Flash Basic animation is a simple process –Move an object around the stage –Change an object’s size, shape, color –Apply Special Effects, such as zooming, fading, or a combination of effects

6. © 2010 Delmar Cengage Learning Flash Animation Two animation methods –Frame-by-frame animation –Tweened animation (motion, classic, shape)

7. © 2010 Delmar Cengage Learning Understanding Motion Tween Animation Motion tweening is less tedious than frame animation –Create a Start and End frame –Flash creates the “in-between” frames Flash only stores the attributes that change from frame to frame, thus creating smaller file sizes than frame animation

8. © 2010 Delmar Cengage Learning Create Motion-Tweened Animation Select the starting frame and layer –Insert a keyframe, if necessary Select the object on the stage Choose the Create Motion Tween command from the Insert menu Select ending frame and make any changes to the object

9. © 2010 Delmar Cengage Learning Tween Spans When you create a motion tween, a tween span appears on the timeline, indicated by the blue highlighted area By default, the number of frames in a tween span is equal to the number of frames in one second of the movie

10. © 2010 Delmar Cengage Learning Fig. 1: Sample Motion Tween Animation Onion Skin feature turned on Tween span Outline of the car position in each of the selected frames

11. © 2010 Delmar Cengage Learning Motion Path Motion path shows position changes on the Stage. Each symbol on the path corresponds to a frame on the Timeline and indicates the location of the object when the frame is played. A motion path can be altered by dragging a point on the path using the Selection and Sub- selection tools or by manipulating Bezier handles.

12. © 2010 Delmar Cengage Learning Fig. 2: Motion Path Motion path with symbols corresponding to a frame in the Timeline and showing the location of the car when the frame is played

13. © 2010 Delmar Cengage Learning Property Keyframes A keyframe indicates a change in a Flash movie, such as the start or ending of an animation. Motion tween animations use property keyframes that are specific to each property such as: –position keyframe –color keyframe –rotation keyframe

14. © 2010 Delmar Cengage Learning Property Keyframes Only one object on the Stage can be animated in each tween span. You can have multiple motion tween animations playing at the same time, if they are on different layers. A motion tween is, in essence, an object animation because while several changes can be made in the object’s properties, only one object is animated for each motion tween.

15. © 2010 Delmar Cengage Learning Property Keyframes The types of objects that can be tweened include graphic, button, and movie clip symbols, as well as text fields. You can remove a motion tween animation by clicking the tween span on the Timeline and choosing Remove Tween from the Insert menu.

16. © 2010 Delmar Cengage Learning Fig. 4: Positioning the Car Object

17. © 2010 Delmar Cengage Learning Fig. 5: Change the End of the Tween Span Drag pointer to here

18. © 2010 Delmar Cengage Learning Fig. 11: Changing the Width of the Object Point here and drag the pointer to change the width

19. © 2010 Delmar Cengage Learning Fig. 15: Aligning the Car to the Path Rotate the car to align with the path

20. © 2010 Delmar Cengage Learning Fig. 17: Dragging the Biker Symbol to the Stage Drag g_biker symbol from the Library panel and position it on the Stage

21. © 2010 Delmar Cengage Learning Understanding Classic Tweens Classic tweens are similar to motion tweens in that you can create animations that change the properties of an object over time. Classic tweens are a bit more complex to create, however, they provide certain capabilities that some developers desire.

22. © 2010 Delmar Cengage Learning Understanding Classic Tweens A classic tween can have more than one instance of the object over the tween span. The process for creating a classic tween animation that moves an object is to select the starting frame and, if necessary, insert a keyframe. Next, insert a keyframe at the ending frame, and click anywhere on the layer between the keyframes. Then select classic tween from the Insert menu, select the ending frame, and move the object to the position you want it to be in the ending frame.

23. © 2010 Delmar Cengage Learning Understanding Motion Guides Creates a path that will guide moving objects around the stage in any direction Without Motion Guides, animations always travel in straight lines Animations are placed on their own layer beneath a motion guide layer

24. © 2010 Delmar Cengage Learning Creating Animation with Motion Guides Create a classic tween animation Select the layer the animation is on and insert a motion guide layer Draw a path using the Pen, Pencil, Line, Circle, Rectangle, or Brush tools Attach the object to the path by dragging the object by its registration point to the beginning of the path in the first frame, and to the end of the path in the last frame

25. © 2010 Delmar Cengage Learning Fig. 28: Motion Guide Layer Indented layer containing the classic tween animation that will follow the path created on the motion guide layer Motion guide layer containing the path

26. © 2010 Delmar Cengage Learning Transformation Point Each symbol has a transformation point in the form of a circle (O) that is used to orient the object when it is being animated The transformation point is also the point that snaps to a motion guide –When attaching an object to a path, you can drag the transformation point to the path –The default position for a transformation point is the center of the object –You can reposition the transformation point while in the symbol edit mode by dragging the transformation point to a different location in the object

27. © 2010 Delmar Cengage Learning Fig. 27: Motion Guide with Object Attached Transformation point

28. © 2010 Delmar Cengage Learning Registration Point Objects also have a registration point (+) that is used to position the object on the stage using ActionScript code The transformation and registration points can overlap—this is displayed as a plus sign within a circle

29. © 2010 Delmar Cengage Learning Fig. 31: Dragging the Biker Layer to the Guide Layer Drag biker layer up to but not above the Guide layer

30. © 2010 Delmar Cengage Learning Understanding Frame-by-Frame Animations Created by specifying an object that is to appear in each frame of a sequence of frames Useful when you want to change individual parts of an image Depending on complexity, animation can require a lot of time to produce

31. © 2010 Delmar Cengage Learning Fig. 35: Images Used in an Animation

32. © 2010 Delmar Cengage Learning Understanding Frame-by-Frame Animations When creating frame-by-frame animation, consider the following: –The number of different images –The number of frames in which each image will appear –The movie frame rate

33. © 2010 Delmar Cengage Learning Creating Frame-by-Frame Animations Select the beginning frame of the animation Insert a keyframe on the layer in frame –A keyframe signifies a change in an object Place the object on the stage

34. © 2010 Delmar Cengage Learning Using the Onion Skin Feature Turning on the Onion Skin feature allows you to view an outline of the object(s) in any number of frames. This can help in positioning animated objects on the Stage.

35. © 2010 Delmar Cengage Learning Fig. 36: Frame-by-Frame Animation The 3 objects placed on top of each other on the Stage each in its own frame on the Timeline Onion Skin feature is turned on so that all of the objects in frames 1-3 are viewable even though the playhead is on frame 1

36. © 2010 Delmar Cengage Learning Fig. 40: Moving Houses Layer below Stickfig Layer

37. © 2010 Delmar Cengage Learning Fig. 46: Adding Stickfig3 as the Final Object

38. © 2010 Delmar Cengage Learning Shape Tweening Allows you to have an animation change the shape of an object to any form you desire, and you can include two objects in the animation with two different shapes. As with motion tweening, you can use shape tweening to change other properties of an object, such as the color, location, and size.

39. © 2010 Delmar Cengage Learning Using Shape Tweening to Create a Morphing Effect Morphing involves changing one object into another, sometimes unrelated, object. The viewer sees the transformation as a series of incremental changes. In Flash, the first object appears on the Stage and changes into the second object as the movie plays.

40. © 2010 Delmar Cengage Learning Shape Tweening Shape tweening can be applied only to editable graphics. You can shape tween more than one object at a time as long as all the objects are on the same layer. You can use shape tweening to move an object in a straight line, but other options, such as rotating an object, are not available.

41. © 2010 Delmar Cengage Learning Shape Tweening You can use the settings in the Properties panel to set options (such as the ease value, which causes acceleration or deceleration) for a shape tween. Shape hints can be used to control more complex shape changes.

42. © 2010 Delmar Cengage Learning Properties Panel Options Adjust the rate of change between frames to create a more natural appearance –Between -1 and -100 will begin the tween gradually and accelerate –Between 1 and 100, begin the tween rapidly and then decelerate –By default, the rate of change is set to 0, which causes a constant rate of change between frames

43. © 2010 Delmar Cengage Learning Properties Panel Options Choose a blend option –Distributive for smoother, irregular shapes –Angular preserves corners and straight lines –Flash defaults to Distributive option

44. © 2010 Delmar Cengage Learning Fig. 47: Properties Panel Options

45. © 2010 Delmar Cengage Learning Shape Hints Control the shape’s transition appearance during animation. Allow you to specify a location on the beginning object that corresponds to a location on the ending object.

46. © 2010 Delmar Cengage Learning Fig. 48: Two Shape Animations with and without Shape Hints Middle frame of the morph animation without shape hints Middle frame of the morph animation with shape hints

47. © 2010 Delmar Cengage Learning Fig. 49: The Reshaped Object Drag up from here

48. © 2010 Delmar Cengage Learning Fig. 50: Positioning the Car Instance on the Stage Transformation point appears when the mouse is released Line up both cars so it appears that there is only one car; use the spokes on the wheels to help you know when the two objects are aligned

49. © 2010 Delmar Cengage Learning Fig. 51: Setting the Ease Value of the Morph

50. © 2010 Delmar Cengage Learning Fig. 52: Positioning a Shape Hint

51. © 2010 Delmar Cengage Learning Fig. 53: Adding Shape Hints

52. © 2010 Delmar Cengage Learning Fig. 54: Matching Shape Hints

53. © 2010 Delmar Cengage Learning Understanding Movie Clip Symbols Creates complex types of animation A movie within a movie Retains independent timeline when you insert an instance of symbol into a movie –This allows you to nest a movie clip that is running one animation within another animation or in a scene on the main Timeline. Keeps going even if main timeline stops

54. © 2010 Delmar Cengage Learning Understanding Movie Clip Symbols Movie clips help to organize the different reusable pieces of a movie and provide for smaller movie file sizes. Only one movie clip symbol needs to be stored in the Library panel while an unlimited number of instances of the symbol can be used in the Flash document.

55. © 2010 Delmar Cengage Learning Fig. 55: Nesting a Movie Clip The movie clip of a wheel that has been animated to rotate shown in the edit window Timeline in the edit window used to create the animation of the rotating wheel The animation of a car moving with the wheels placed on the car Main Timeline used to create the animation of the moving car

56. © 2010 Delmar Cengage Learning Fig. 59: Increasing the Tween Span on the Timeline Movie clips symbol in edit window Movie clip symbol Timeline Drag the tween span to frame 48

57. © 2010 Delmar Cengage Learning Animate Text Text can be animated like other objects –Resize, rotate, reposition, and change the colors –Create a motion-tween to move text as you would an object –Specify a rotation

58. © 2010 Delmar Cengage Learning Animate Text Once you create a motion animation using a text block, the text block becomes a symbol –Cannot edit individual characters –Can edit the symbol as a whole

59. © 2010 Delmar Cengage Learning Fig. 63: Selecting a Range of Frames Click frame 9 firstHold [Shift] and click frame 1 to select the range of frames

60. © 2010 Delmar Cengage Learning Fig. 66: Positioning the Text Block This will be the position of the text block at the end of the animation

61. © 2010 Delmar Cengage Learning Fig. 68: Resizing the Tween Span Drag to hereStart here

62. © 2010 Delmar Cengage Learning Fig. 71: Adding a Button

63. © 2010 Delmar Cengage Learning Fig. 73: Adding a Play Action

64. © 2010 Delmar Cengage Learning Chapter 4 Summary 1.Create motion-tween animation 2.Create classic-tween animation 3.Create frame-by-frame animation 4.Create shape tween animations 5.Create movie clips 6.Animate text