CIS 205—Web Design & Development

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

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

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

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

5. Appendix A—Revised Instructions for Animations (4) • Assign a stop action to frames • Insert a new layer called stopmovie, click Frame 1 • Click Window, Actions to display the Actions panel • Verify that stopmovie:1 is showing at the bottom of the window; verify that the Script Assist button is OFF • Click the List arrow for ActionScript options and click ActionScript 1.0 & 2.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 • Insert a keyframe at Frame 30 in the stopmovie layer (stopmovie:30 should show at the bottom) and repeat Step 5 above • Save the file and test the movie (nothing happens w/ stop();)

6. Appendix A—Revised Instructions for Animations (5) • Assign a goto action to a button • Click Frame 1 of the goButton layer • Move the Actions panel so that the button is visible • 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) • Click the Add a new item button (+), point to Global Functions, point to Movie Clip, and click on • In the list that appears, double-click release so that the script says on(release) { • 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) • Click the Add a new item button, Timeline, gotoAndPlay • Enter the value 2 in the () after gotoAndPlay (to go to Frame 2) • Save the file and test the movie (click the button to play)