1. © 2011 Delmar, Cengage Learning Chapter 4 Creating Animations

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

3. Create Animation Introduction –Animation is an important part of any application or website –Animations are made up of still images –Works for many types of websites including e-commerce, education, and entertainment websites

4. © 2011 Delmar Cengage Learning Create Animation Introduction –Persistence of vision is the concept that our eyes hold an image for one-tenth of a second before processing another image –One-tenth of a second is the basis for the frame rate in animation –Frames rates of 10-12 fps generally provide smooth computer-based animation

5. © 2011 Delmar Cengage Learning Create Animation Introduction –Flash allows you to create animations that can move and rotate an object around the Stage –The animation feature also allows you to change an object’s shape, size, and color, as well as, object zooming and fading in and out

6. © 2011 Delmar Cengage Learning Create Animation Introduction –Flash animation provides two animation methods 1.Frame-by-frame animation 2.Tweened animation a.Motion b.Classic c.Shape tweens

7. © 2011 Delmar Cengage Learning Tools You’ll Use Create Animation

8. © 2011 Delmar Cengage Learning Create Motion Tween Animation In motion tween animation, you can specify the position of the object in the beginning and ending frames, and Flash fills in the in-between frames, a process known as tweening. When you create a motion tween, a tween span appears on the Timeline.

9. © 2011 Delmar Cengage Learning Create Motion Tween Animation A blue highlighted area, called a tween or motion span, will appear on the Timeline for the frames of the animation. You can increase or decrease the number of frames in the span by: dragging the end of the span moving the span to a different location or copying the span and applying it to another object

10. © 2011 Delmar Cengage Learning Sample motion tween animation Create Motion Tween Animation Outline of the car position in each of the selected frames Tween span Onion skin feature turned on

11. © 2011 Delmar Cengage Learning Create Motion Tween Animation A keyframe indicates a change in a Flash movie, such as the start or ending of an animation. Property keyframes are specific to each property such as a position, color, or rotation keyframe.

12. © 2011 Delmar Cengage Learning Create Motion Tween Animation Keep in mind: –You can only animate one object on the stage in each tween span –You can have multiple motion tween animations playing at the same time if they are on different layers

13. © 2011 Delmar Cengage Learning Create Motion Tween Animation Keep in mind: –A motion tween is an object animation because, while several changes can be made to an object’s properties, only one object is animated for each motion tween –The types of objects that you can tween include graphic, button, movie clip symbols, and text fields

14. © 2011 Delmar Cengage Learning Create Motion Tween Animation Keep in mind: –You can remove a motion tween animation by clicking the tween span on the Timeline and choosing Remove Tween from the Insert menu

15. © 2011 Delmar Cengage Learning Create Motion Tween Animation Bezier handles used to alter the path Bezier handles used to reshape the motion path

16. © 2011 Delmar Cengage Learning Create Motion Tween Animation Positioning the car objectChanging the ease value Drag the pointer to the right

17. © 2011 Delmar Cengage Learning Using the Free Transform tool to skew the object Create Motion Tween Animation Aligning the car to the path

18. © 2011 Delmar Cengage Learning Create Classic Tween Animation Classic tweens provide certain capabilities that motion tweens cannot including altering the ease values on objects. In classic tween animations, objects move in a straight line from the beginning location to the end location on the stage.

19. © 2011 Delmar Cengage Learning Create Classic Tween Animation A motion guide can be used to alter the path of a classic tween animation A motion guide with an object (motorbike) attached

20. © 2011 Delmar Cengage Learning Create Classic Tween Animation Each symbol has a transformation point in the form of a circle (O) that you can use to orient the object when it is being animated. The transformation point is also the point that snaps to a motion guide.

21. © 2011 Delmar Cengage Learning Create Classic Tween Animation You can reposition the transformation point’s position while in the symbol edit mode by dragging it to a different location. Objects also have a registration point (+) that can help you determine the X and Y coordinates of an object on the Stage.

22. © 2011 Delmar Cengage Learning Create Frame-by-Frame Animation You can create a frame-by-frame animation by specifying the object that is to appear in each frame of a sequence of frames. Frame-by-frame animations are useful when you want to change individual parts of an image.

23. © 2011 Delmar Cengage Learning Three images used in an animation Create Frame-by-Frame Animation

24. © 2011 Delmar Cengage Learning When creating a frame-by-frame animation, you need to consider the following points: –The number of different images –The number of frames in which each image will appear –The movie frame rate Create Frame-by-Frame Animation

25. © 2011 Delmar Cengage Learning Create Frame-by-Frame Animation Keyframes signify a change in the object. You create frame animation by changing the object, thus each frame in a frame animation may need to be a keyframe. The exception to this is when you want an object displayed in several frames before it changes.

26. © 2011 Delmar Cengage Learning Create Frame-by-Frame Animation This figure shows the first three frames of an animation in which three different objects are placed one on top of the other in succeeding frames 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 The 3 objects placed on top of each other on the Stage, each in its own frame on the Timeline A frame-by-frame animation of three figures appearing to walk in place

27. © 2011 Delmar Cengage Learning Create Shape Tween Animation When you use shape tweening you can have an animation change the shape of an object to any form you want. You can also include two objects in the animation with two different shapes. You can use shape tweening to change the object’s location, size, and color.

28. © 2011 Delmar Cengage Learning Create Shape Tween Animation Morphing is when you change a shape into another, sometimes unrelated, object. The number of frames included from the beginning to the end of this shape tween animation determines how quickly the morphing effect takes place.

29. © 2011 Delmar Cengage Learning Create Shape Tween Animation When working with shape tweening, you need to keep the following points in mind: –You can apply shape tweening only to editable graphics –You can shape tween more than one object at a time as long as all objects are on the same layer

30. © 2011 Delmar Cengage Learning Create Shape Tween Animation You can use shape tweening to move an object in a straight line. You can use the settings in the Properties panel to set options for a shape tween. You can use shape hints to control more complex shape changes.

31. © 2011 Delmar Cengage Learning Create Shape Tween Animation Adjust the rate of change between frames. Choose a blend option. –The Distributive option –The Angular option The Properties panel options for a shape tween

32. © 2011 Delmar Cengage Learning Create Shape Tween Animation The Distributive option creates an animation in which the in-between shapes are smoother and more irregular. The Angular option preserves the corners and straight lines and works only with objects that have these features.

33. © 2011 Delmar Cengage Learning Create Shape Tween Animation You can use shape hints to control the shape’s transition appearance during animation. Shape hints allow you to specify a location on the beginning object that corresponds to a location on the ending object.

34. © 2011 Delmar Cengage Learning Create Shape Tween Animation Middle frame of the morph animation without shape hints Middle frame of the morph animation with shape hints Two shape animations (A morphing into B) with and without shape hints

35. © 2011 Delmar Cengage Learning Create Movie Clips Movie clip symbols provide a way for you to create more complex types of animations. A movie clip is essentially a movie within a movie. Each movie clip has a Timeline which is independent of the main Timeline.

36. © 2011 Delmar Cengage Learning Create Movie Clips When you insert an instance of the movie clip into a Flash document, the movie clip continues in an endless loop even if the main Timeline stops. Movie clips will help you to organize the different reusable pieces of a movie and provide for smaller movie file sizes.

37. © 2011 Delmar Cengage Learning Create Movie Clips The process of nesting a movie clip within an animation 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 animations 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

38. © 2011 Delmar Cengage Learning Create Movie Clips You can view an animated movie clip in the Edit window that is displayed when you double-click the movie clip symbol in the Library panel. You cannot view the animated clip by playing the movie on the main Timeline.

39. © 2011 Delmar Cengage Learning Animate Text You can motion tween text block objects just as you do graphic objects. You can resize, rotate, reposition, and change the colors of text blocks.

40. © 2011 Delmar Cengage Learning Animate Text Once you create a motion animation using a text block, the text block becomes a symbol. You are unable to edit individual characters within a text box. You can, however edit the symbol as a whole.

41. © 2011 Delmar Cengage Learning Create Movie Clips Three examples of animated text Text rotates Text zooms Text scrolls from off the Stage to the Stage