CIS 205—Web Design & Development Flash Chapter 3 Appendix on Using Buttons

Appendix A—Revised Instructions for Animations Create a tweened animation 1.Launch Flash CS3, click File, New, select the ActionScript 2.0 option, click OK 2.Click File, Save as, type stage2.fla (for example), click Save 3.Rename Layer 1 in the Timeline to ball 4.Create an object (a circle) and place on the left of the stage (note that Frame 1 is automatically a keyframe) 5.Select the circle (ball) on the stage 6.Click Insert on the menu bar, Timeline, Create Motion Tween 7.Click Frame 30 on the ball timeline, press [F6] to make this frame a keyframe 8.Select the ball and move it to the right side of the stage 9.Press Enter to test the movie (or click Control, Test Movie)

Appendix A—Revised Instructions for Animations (2) Create and test a button to control the animation 1.Click the Insert Layer icon in the lower left of the Timeline and name the new layer goButton 2.Create a rectangle object and place it near the top of the stage (you could add text, such as “Go!”, if you want) 3.Click the Selection tool and draw a marquee around the rectangle to select it 4.Click Modify on the menu bar, click Convert to Symbol 5.Type b_go in the Name text box, click the Button option button, click OK 6.Right-click on b_go in the Library panel, click Edit (the Up frame is automatically set up as a keyframe) 7.Click the Over frame in Layer 1, press [F6] to insert a keyframe 8.Change the Fill color (or other attributes) for the button

Appendix A—Revised Instructions for Animations (3) Create and test a button (continued) 9.Click the Down frame in Layer 1, insert a keyframe, change the Fill color (or other attributes) 10.Insert a keyframe for the Hit frame on Layer 1 11.Click the Rectangle tool and draw a rectangle just covering the button (specifying the entire button as the hit area) 12.Save the file 13.Click Scene 1 below the Timeline to return to the stage 14.Click the Selection tool and click a blank area of the stage 15.Click Control on the menu bar, click Enable Simple Buttons 16.Point to the go button, click it, and release to test its operation 17.Click Control on the menu bar, click Enable Simple Buttons to turn this feature off 18.Save the file and test the movie (it should loop continuously)

Appendix A—Revised Instructions for Animations (4) Assign a stop action to frames 1.Insert a new layer called stopmovie, click Frame 1 2.Click Window, Actions to display the Actions panel 3.Verify that stopmovie:1 is showing at the bottom of the window; verify that the Script Assist button is OFF 4.Click the List arrow for ActionScript options and click ActionScript 1.0 & In the pane below this List, click Global Functions to display these functions, click Timeline Control, and double-click stop to add the code stop(); in the script—you can click the Add new item button (+) to do the same thing 6.Insert a keyframe at Frame 30 in the stopmovie layer (stopmovie:30 should show at the bottom) and repeat Step 5 above 7.Save the file and test the movie (nothing happens w/ stop();)

Appendix A—Revised Instructions for Animations (5) Assign a goto action to a button 1.Click Frame 1 of the goButton layer 2.Move the Actions panel so that the button is visible 3.Click the Selection too and draw a marquee around the button (the object b_go should be displayed at the bottom of the Actions panel) 4.Click the Add a new item button (+), point to Global Functions, point to Movie Clip, and click on 5.In the list that appears, double-click release so that the script says on(release) { 6.In the script, click at the beginning of Line 2, press Enter, and click on Line 2 (the curly brace should move down to Line 3) 7.Click the Add a new item button, Timeline, gotoAndPlay 8.Enter the value 2 in the () after gotoAndPlay (to go to Frame 2) 9.Save the file and test the movie (click the button to play)