1. CIS 205—Web Design & Development Flash Chapter 4 Creating Animations

2. Chapter 4: Creating Animations Introduction – Animation can be extremely important for any web site How Does Animation Work? – Animation is a perception created by series of still images (frames) – Frame rates of 10-12 frames per second (fps) are good for animation (Flash uses 12 fps) Flash Animation – There are two kinds of Flash animation Frame-by-frame Tweened animations

3. Lesson 1: Create Frame-by-Frame Animations Understanding Frame-by-Frame Animations – Things to consider for frame animations The number of different images (more  realistic) The number of frames in which an image appears The movie frame rate ( 30 is blurred) – A keyframe signifies a change in the object Each frame in a frame animation may need to be a keyframe Creating a Frame Animation – Select a frame for the animation to begin, insert a keyframe, place the object on the stage – Select a frame for a change to occur, insert a keyframe, then change the object or add a new one

4. Lesson 1: Create Frame-by-Frame Animations (2) Create an in-place frame-by-frame animation 1.Start Flash, open the file fl4_1.fla where your Data Files are stored, then save the file as frameAn.fla 2.Verify that the Tools panel, Property inspector, and Library panel are the only open panels 3.On the menu bar, click View, point to Magnification, click Fit to Window 4.Click the Free Transform tool, then click the Rotate and Skew option in the Options section of the Tools panel 5.Click Frame 2 on the carGo layer, insert a keyframe 6.Drag the top-right handle up to tilt the car up

5. Lesson 1: Create Frame-by-Frame Animations (3) Create an in-place frame-by-frame animation (cont’d) 7.Click Frame 3 on the carGo layer, insert a keyframe 8.Drag the top-right handle up to tilt the car up again 9.Click Frame 4 on the carGo layer, insert a keyframe 10.Drag the top-right handle up to tilt the car down 11.Click Frame 5 on the carGo layer, insert a keyframe 12.Drag the top-right handle up to tilt the car down again 13.Click Frame 6 on the carGo layer, insert a keyframe 14.Save and test the movie (click Control, Test Movie)

6. Lesson 1: Create Frame-by-Frame Animations (4) Add detail to the animation 1.Click the Zoom tool, then click the car 2.Click the Line tool, set the Stroke color to black 3.Verify that Frame 6 is selected, then draw two lines as in Figure 5 on p. 4-7. 4.Click Frame 1 on the Timeline, then press the period [.] five times 5.Press [Enter] to play the movie 6.Click View on the menu bar, point to Magnification, click Fit in Window

7. Lesson 1: Create Frame-by-Frame Animations (4) Create a moving frame animation 1.Insert a keyframe in Frame 7 on the carGo layer 2.Click the Selection tool, drag a marquee around the car and lines 3.Drag the car and lines to the right about half the distance across the stage, as in Figure 6, p. 4-8 4.Insert a keyframe in Frame 8, click the Line tool and draw a third line as in Figure 7 on p. 4-8 5.Click the Selection tool, drag a marquee around the car and lines, drag the car and lines to the right edge 6.Insert a keyframe in Frame 9, then drag the car and lines completely off the stage to the right 7.Play the movie by pressing [Enter]

8. Lesson 1: Create Frame-by-Frame Animations (5) Change the frame rate 1.Click Control on the menu bar, click Test Movie, close the Flash player window 2.Click the Selection tool, then click a blank area of the stage 3.Click the Size button in the Property inspector 4.Type 6 in the Frame rate text box, click OK 5.Click Control on the menu bar, click Test Movie, close the Flash player window 6.Change the frame rate to 18 and test the movie 7.Change the frame rate to 12 and test the movie 8.Save your work

9. Lesson 2: Create Motion-Tweened Animations Understanding Motion Tweening – Frame-by-frame animations can be tedious – Tweening involves creating start and end frames and letting Flash fill in the in-between frames – Framed animation have larger file sizes than tweened – Two types of tweened animations: Shape: An object changes shape Motion: An object moves while possibly changing size, rotation, or color – Tweening is done by Setting a start keyframe and positioning an object Insert (on the menu bar), Timeline, Create Motion Tween Setting an end keyframe and positioning an object

10. Lesson 2: Create Motion-Tweened Animations (2) Create an in-place frame-by-frame animation 1.Start Flash, open the file fl4_2.fla where your Data Files are stored, then save the file as carAn.fla 2.Click View on the menu bar, point to Magnification, click Fit in Window 3.Click Frame 1 on the carTurn layer, click Insert on the menu bar, Timeline, click Create Motion Tween 4.Insert a keyframe in Frame 20 on the carTurn layer 5.Click the Selection tool, select the car, drag the car to the upper right corner of the stage 6.Press [Enter] to play the movie 7.Click Frame 1, press the period [.] several times to see how Flash has filled in the frames

11. Lesson 2: Create Motion-Tweened Animations (3) Combine motion-tweened animations 1.Insert a keyframe in Frame 21 on the carTurn layer 2.Select the car, click Modify on the menu bar, point to Transform, click Rotate 90° CW (CW means clockwise) 3.Insert a keyframe in Frame 30 on the carTurn layer (a motion tween is automatically inserted because of the previous motion tween that was created) 4.Select the car, drag the car to the lower right corner of the stage 5.Press [Enter] to play the movie 6.Save your work

12. Lesson 2: Create Motion-Tweened Animations (4) Copy a motion-tweened animation 1.Insert a new layer (icon on the left, below the timelines), name it blueCar 2.Click Frame 1 of the blueCar layer 3.Display the Library panel (Window, Library if necessary), drag g_blueCar graphic to just off the stage on the left (see Figure 13, p. 4-14) 4.Click a blank area of the stage to deselect the car 5.Click Frame 1 of the carTurn layer 6.Press and hold [Shift], then click Frame 30 to select the range of frames 7.Click Edit on the menu bar, point to Timeline, click Copy Motion

13. Lesson 2: Create Motion-Tweened Animations (5) Copy a motion-tweened animation (continued) 8.Click the blue car to select it 9.Click Edit on the menu bar, point to Timeline, click Paste Motion Special 10.Deselect the Horizontal scale option and the Vertical scale option (to prevent resizing the blue car), click OK 11.Press [Enter] to play the movie 12.Click Control on the menu bar, click Test Movie, close the Flash player window 13.Click File on the menu bar, point to Publish Preview, click Default to view the movie in a browser 14.Close the browser window

14. Lesson 2: Create Motion-Tweened Animations (6) Copy a motion-tweened animation (continued) 15.Click Frame 1 of the blueCar layer 16.Drag the blue car to the right until it is directly below the red car 17.Press [Enter] to play the movie 18.Click the other keyframes on the blueCar layer and reposition the blue car as desired to make the movie meet your requirements 19.Save your work

15. Lesson 3: Work with Motion Guides Understanding Motion Guides – You can create a path that will guide moving objects – A motion guide layer is used to create the path – The moving object is on its own layer beneath the motion guide layer – The object can be oriented to the path to make the object rotate as it moves – To improve the animation, you can step through one frame at a time, then insert a keyframe at the frame that needs improving, and change the object in that frame

16. Lesson 3: Work with Motion Guides (2) Working with the Property Inspector – These are the options provided by the Property inspector Tween (Motion, Shape, or None) Scale (making objects smaller or larger) Ease (frame rate increases or decreases to change speeds) Rotate (clockwise or counterclockwise) Orient to path (orients the baseline of the object to the path) Sync (ensures that the object loops properly) Snap (attaches the object to the path)

17. Lesson 3: Work with Motion Guides (3) Create an animation without a motion guide 1.Start Flash, open the file fl4_3.fla where your Data Files are stored, then save the file as carPath.fla 2.Verify the Tools panel and Property Inspector are displayed 3.Set the view to Fit in Window 4.Click Frame 1 on the carRoute layer, select the car 5.Click Insert on the menu bar, Timeline, click Create Motion Tween 6.Insert a keyframe in Frame 40 on the carRoute layer 7.Drag the car to the lower right corner of the stage 8.Press [Enter] to play the movie

18. Lesson 3: Work with Motion Guides (4) Add a motion guide to an animation 1.Click Frame 1 on the carRoute layer 2.Click Insert on the menu bar, point to Timeline, click Motion Guide 3.Click Frame 1 on the Guide layer, click the Pencil tool, click the Smooth option, and draw a path as in Fig. 4- 19. 4.Click the Selection tool and click the lock icon for the Guide layer

19. Lesson 3: Work with Motion Guides (5) Add a motion guide to an animation (continued) 5.Click Frame 1 on the carRoute layer a.If necessary, drag the tranformation point of the car to the beginning of the path 6.Click Frame 40 on the carRoute layer 7.If necessary, drag the tranformation point of the car to the end of the path 8.Press [Enter] to play the movie

20. Lesson 3: Work with Motion Guides (6) Orient an object to the path 1.Play the movie again and notice the car doesn’t turn 2.With the PI displayed, click Frame 1 on the carRoute layer 3.Select the car, click the Orient to path check box in the PI 4.Press [Enter] to play the movie

21. Lesson 3: Work with Motion Guides (7) Alter the path 1.Click Frame 1 on the carRoute layer 2.Click the Selection tool (if necessary) 3.Click the Lock icon on the Guide layer to unlock the layer, then point to the middle of the right curve 4.When the pointer changes to an arc pointer, drag the line to the left (see Fig. 4-21) 5.Lock the Guide layer and play the movie

22. Lesson 3: Work with Motion Guides (8) Accelerate an animated object 1.Play the movie and note the car speed is constant 2.Click Frame 1 on the carRoute layer 3.Click the Ease list arrow in the PI, drag the slider to 100, then click a blank area outside the stage 4.Play the movie and notice the deceleration of the car 5.Click Frame 1 on the carRoute layer 6.Click the Ease list arrow in the PI, drag the slider to -100, then click a blank area outside the stage 7.Play the movie and notice the acceleration of the car 8.Click Control on the menu bar, click Test Movie

23. Lesson 4: Create Animation Effects Creating Motion Animation Effects – In addition to moving objects with motion tweening, you can resize, rotate, and change color while it moves Resizing an Object Using a Motion Tween – You can select a starting frame, place an object on the stage, create a motion tween, select an ending frame, place the object on the stage and resize it Rotating an Object Using a Motion Tween – There are many objects to make an object rotate or flip while it moves, accelerates, and changes size Changing an Object’s Color – Color or brightness can gradually change during a motion tween Using the Onion Skin Feature – View an outline of an object in multiple frames for positioning

24. Lesson 4: Create Animation Effects (2) Combining Various Animation Effects – All the above effects can be combined to create simulated reality Creating Timeline Effects – There are several prebuilt Timeline effects that can be applied to text, graphics, and buttons (easier than doing manual animations) Adding an Effect to an Object – Select an object, click Insert, Timeline Effects, the select a submenu and competing a dialog box for the desired effect Editing a Timeline Effect – Select the object then click Edit in the PI Deleting a Timeline Effect – Right-click an object to remove an effect

25. Lesson 4: Create Animation Effects (3) Use motion tweening to resize an object 1.Open the carPath.fla movie 2.Click Frame 1 on the carRoute layer 3.Click the Zoom tool then click the car 4.Select the car, click the Free Transform tool, click the Scale option in the Options section of the Tools panel 5.Drag the upper-left corner handle inward until the car is about half its original size 6.Change the view to Fit in Window 7.Click Frame 40 in the carRoute layer 8.Select the car, click the Scale option button 9.Drag the upper-right corner handle outward until the car is about twice its original size 10.Play the movie, save your work

26. Lesson 4: Create Animation Effects (4) Use motion tweening to rotate an object 1.Open fl4_4.fla, save it as mBikeRotate, select Fit in Window, and play the movie 2.Click Frame 10 on the motorBike layer 3.With the motorbike selected, click Insert, Timeline, Create Motion Tween 4.Click the Rotate list arrow in the PI, click CCW, and enter 1 in the times box 5.Insert a keyframe in Frame 20 on the motorBike layer 6.Play the movie, save your work

27. Lesson 4: Create Animation Effects (5) Use motion tweening to change the color of an object 1.Click Frame 20 on the motorBike layer 2.Click the Selection tool, then click the motorbike 3.Click the Color list arrow in the PI, click Advanced, and click the Settings button 4.Change the value in the x R) + text box to 86 (86% red) 5.Click OK 6.Click Frame 1 on the Timeline, then play the movie

28. Lesson 4: Create Animation Effects (6) Display the Onion Skin feature 1.Click Frame 1 on the motorBike layer, then click the Onion Skin button on the Timeline (at the bottom, below Frame 5) 2.Click the Edit Multiple Frames button on the Timeline (below about Frame 8) 3.Drag the End Onion Skin slider on the Timeline to Frame 22 (the right side of the slider is just to the left of Frame 5) Note: You can view the onion skin outlines, select a frame that you want to change, make it a keyframe, then implement the change 4.Play the movie and notice that the animation is not affected 5.Click the Onion Skin button and the Edit Multiple Frames button to turn of these features

29. Lesson 4: Create Animation Effects (7) Create a Timeline Effect 1.Open fl4_5.fla and save it as carEffects, change view to Fit in Window 2.Click Window in the menu bar, click Library to display the Library panel 3.Click the Selection tool, drag the g_car graphic from the Library panel to the upper-left corner of the stage 4.Click Modify on the menu bar, click Break Apart 5.Click Insert on the menu bar, point to Timeline Effects, point to Transform/Transition, click Transition 6.Click the Wipe check box to turn it off, click Update Preview 7.Click OK 8.Play the movie

30. Lesson 4: Create Animation Effects (8) View a Timeline Effect in the Library 1.Double-click the Effects Folder button in the Library panel, click effectSymbol to see a preview 2.Click the Transition 1 symbol in the Library panel 3.Click the Play button in the preview window of the Library panel

31. Lesson 4: Create Animation Effects (9) Edit and remove a Timeline Effect 1.Display the PI 2.Click Frame 30 on the Timeline, click the Selection tool, then click the car 3.Click the Edit button in the PI 4.Click the Out option button to change the direction 5.Drag the Motion Ease slider to the right (value 100) 6.Click Update Preview, click OK 7.Click Frame 1 on the Timeline, play the movie 8.Click Frame 1 on the Timeline 9.Right-click the car, point to Timeline Effects, click Remove Effect 10.Play the movie

32. Lesson 4: Create Animation Effects (10) Apply several Timeline Effects to one object 1.Click the Selection tool, drag a marquee around the car 2.Click Insert on the menu bar, point to Timeline Effects, point to Transform/Transition, click Transform 3.Change the effect duration to 40 frames 4.Click the Change Position by list arrow, click Move to Position 5.Double-click 0 in the X Position text box, type 400 6.Double-click 0 in the Y Position text box, type 300 7.Click the Scale Lock button to unlock it 8.Double-click 100 in the Scale X % text box, type 50 9.Double-click 100 in the Scale Y % text box, type 50 10.Change the spin times to 3 11.Change the Motion Ease value to 100 12.Click Update Preview, click OK, play the movie, and save

33. Lesson 5: Animate Text Animating Text – You can motion tween text block objects just like graphic objects Select, copy, and paste frames 1.Open frameAn.fla (created earlier) and save it as textAn.fla 2.Change the view to Fit in Window 3.Click Frame 9 on the carGo layer, hold [Shift], click Frame 1 to select all frames 4.Click Edit on the menu bar, point to Timeline, click Cut Frames 5.Click the Frame View icon (at the right end of the frame numbers), click Small 6.Click Frame 71 on the carGo layer 7.Click Edit on the menu bar, point to Timeline, click Paste Frames 8.Click Frame 1 of the carGo layer 9.Play the movie, save your work

34. Lesson 5: Animate Text (2) Create animated text 1.Insert a new layer and name it scrollText 2.Click Frame 1 on the scrollText layer (make sure PI is displayed) 3.Click the Text tool (T), click the pointer in the extreme upper left corner or the workspace (outside the stage) 4.Click the Font list arrow on the PI, click Times New Roman 5.Click the Font Size list arrow, drag the slider to 20 6.Click the Text (fill) color swatch, click the blue color on the left 7.Type The Classic Car Club 8.Click the Selection tool, insert a keyframe in Frame 20 on the scrollText layer 9.Drag the text block horizontally to the top center of the stage 10.Insert a keyfram in Frame 10, click the Tween list arrow in the PI, click Motion 11.Click Frame 1 on the Timeline and play the movie

35. Lesson 5: Animate Text (3) Create rotating text 1.Insert a new layer and name it rotateText 2.Insert a keyframe in Frame 21 on the rotateText layer 3.Click the Text tool, click the pointer about 1 cm below the ‘a’ in ‘Classic’ 4.Click the Align Left button in the PI, click the Font Size list arrow on the PI, enter 24, type Annual 5.Click the Selection tool, insert a keyframe in Frame 40 of the rotateText layer 6.Click Frame 30 (any frame between 21 and 40), click the Tween list arrow on the PI, click Motion 7.Click Frame 21 on the rotateText layer, click the Rotate list arrow in the PI, click CW, type 2 in the times text box, click anywhere on the stage 8.Click Frame 1 on the Timeline, play the movie

36. Lesson 5: Animate Text (4) Resize and fade in text 1.Insert a new layer, name it fadeinText, insert a keyframe at 40 2.Click the Text tool, position the pointer below the Annual text box, aligned with the ‘h’ in ‘The’, then type ROAD RALLY 3.Click Frame 40 on the fadeinText layer, click Insert, point to Timeline, click Create Motion Tween 4.Insert a keyframe in Frame 60 on the fadeinText layer 5.Click Frame 40 on the fadeinText layer, select the Free Transform tool, click the Scale button in the Options section of Tools panel 6.Drag the upper-left corner handle inward to make it smaller 7.Click the Color list arrow on the PI, click Alpha, click the Alpha % list arrow, drag the slider to 0 8.Click Frame 60, click the Selection tool, click the new text block 9.Select Alpha in the Color list, drag the Alpha % slider to 100 10.Click Frame 70, right-click Frame 70, click Remove Tween, test

37. Lesson 5: Animate Text (5) Make a text block into a button 1.Insert a new layer, name it continue 2.Insert a keyframe in Frame 71 on the continue layer 3.Click the Text tool, click below the back wheel of the car, type Click to Continue 4.Drag the pointer over the text to select it, click the Font Size list arrow in the PI, drag the slider to 12, click the Selection tool 5.Click the text block, click Modify on the menu bar, click Convert to Symbol, type b_continue for the name, click the Button option button, click OK 6.Click the Selection tool, double-click the text block 7.Insert a keyframe in the Over frame, set the fill color to black 8.Insert a keyframe in the Down frame, set the fill color to green 9.Insert a keyframe in the Hit frame, select the Rectangle tool, draw a rectangle just covering the text block, click Scene 1

38. Lesson 5: Animate Text (6) Add an action to the button 1.Click Window on the menu bar, click Actions 2.Click the Selection tool, click the Click to continue button on the stage 3.Verify that the Script Assist button is turned off and the b_continue button and button symbol appear in the lower-left 4.Click the Add a new item button, point to Global Functions, point to Timeline Control, click play 5.Insert a new layer, name it stopmovie, insert a keyframe in Frame 71 on that layer 6.Verify that stopmovie:71 is displayed in the lower-left corner 7.Click the Add a new item button, point to Global Functions, point to Timeline Control, click stop 8.Click Control on the menu bar, click Test Movie, then click the Click to Continue button when it appears; save your work