CIS 205—Web Design & Development Flash Chapter 3 Appendix B on Creating Animations

Appendix B—More About Creating Animations Strategy for creating an animation w/ buttons 1.This appendix covers how to create the animation required in the Portfolio Projects of Flash Chapters Here’s the strategy: A.Create a home layer that has graphics such as ovals that say My Portfolio, Animations, Work History, etc. B.Create an animations layer that has the graphics Sample Animation and Home C.Create a ball layer that has an animated ball that moves across the stage (e.g., a tweened animation) D.Create a stopmovie layer that serves to begin and end the animation

Appendix B—Revised Instructions for Animations (2) Create two layers and graphics for buttons 1.In Flash, create a new animation file by clicking File, New, selecting ActionScript 1.0 & 2.0, OK. Save it as (for example) myPortfolio.fla. 2.Rename Layer 1 as home. Click on Frame 1. Create your graphics (the various ovals with text, such as My Portfolio, Animations, Work History, etc. 3.Insert a new layer (Layer 2) and rename it as animations. Click on Frame 2 on this layer and insert a keyframe. Create your graphics (ovals that say Sample Animations and Home). 4.Save your work.

Appendix B—Revised Instructions for Animations (3) Convert graphics to buttons and activate 1.Click the home layer and click Frame 1. Convert the Animations graphic to a button symbol. 2.Right-click on this button in the Library panel and make each of the various states (Over, Down, Hit) operational, using different colors for the different states. Click Scene 1 to return to the stage. 3.Click Control, Enable Simple Buttons and test your button to see if it changes color properly. 4.Select the button with a marquee, click Window, Actions. Under Movie Clip Control double-click on and then double-click release. 5.Click in front of the } on line 2, double-click gotoAndPlay under Timeline Control and type 2 (for Frame 2) inside the () for gotoAndPlay. Save your work.

Appendix B—Revised Instructions for Animations (4) Insert a stopmovie layer and add actions 1.Insert a new layer (Layer 3) and rename it as stopmovie. Click on Frame 1 of this layer. Click Window, Actions and double-click stop under Timeline Control. Click a later frame, such as Frame 50 on this layer, make it a keyframe, and add a stop action. Save your work. 2.Click the animations layer and click Frame 2. Click Window, Actions and add a stop action to this frame. Click Control, Test Movie and see if clicking the Animations button on the home page brings up the second page. 3.If this does not work properly then review all steps above again.

Appendix B—Revised Instructions for Animations (5) Add an animation layer 1.Insert a new layer (Layer 4) and rename it ball. Click Frame 3 on this layer and make it a keyframe. 2.Create a ball graphic and place on the left side of the stage. Select the ball with a marquee. Click Insert, Timeline, Create Motion Tween (for a tweened animation). 3.Click Frame 50 on this layer and make it a keyframe. Select the ball and move it to the right edge of the stage. Press Enter and test this animation. Save your work.

Appendix B—Revised Instructions for Animations (6) Activate an animation with a button 1.Click the animations layer, select the Sample Animations graphic and make it a button symbol. 2.Set the actions for this button to be "on release go to and play Frame 3". 3.Test the movie to see if the Animations button on the home page takes you to the second page, and clicking the Sample Animations button runs the animation. 4.Close the movie. Save your work.

Appendix B—Revised Instructions for Animations (7) Complete the animation 1.Click Frame 50 on the ball layer and add an action "gotoAndPlay(2)". 2.Test the movie to see if it works correctly. Save your work. 3.Click Frame 2 of the animations layer. Select the Home graphic, convert it to a button, and give it the action of "on release go to and play Frame 1”. 4.Save your work and test the movie.