- 1). Create three layers in a new Flash document, one called "actionscript," one called "buttons" and one called "picture." This simple button example will show you how using frame labels can make your coding efforts easier.
- 2). Create a new keyframe by right-clicking and choosing "Insert Keyframe" in the first frame of the "buttons" layer. Within that keyframe, create a red button. Draw a red circle using Flash's drawing tools. Right-click the shape and select "Convert to Symbol." Give the button a name, and make sure that "Button" is selected in the "Type" drop-down menu. Once you've defined the button as an item in your Library, you need to give the instance of the button on the stage a name. Select the button and choose "Window" > "Properties." In the white box at the top of the "Properties" window, type "redbtn."
- 3). Import a picture of your choice into Flash. When you click your button, this is the picture that Flash will display. Choose "File" > "Import" > "Import to Library." Navigate to your photo and click "Open."
- 4). Select the second frame on the "picture" layer. Right-click it and choose "Insert Keyframe." From your Library, click and drag the picture you imported in the previous step onto the stage. If the Library isn't visible in your work area, select "Window" > "Library" to show it.
- 5). Right-click the picture and choose "Create Motion Tween." If you see a message telling you that you need to convert your image to a symbol first, click "OK." A blue tween span will appear on the timeline. Adjust the length of the tween to 50 frames by clicking and dragging the end of it.
- 6). Drag the red timeline indicator to the second frame and click your picture to select it. Choose "Window" > "Properties." Under "Color Effect," choose "Alpha" and set the alpha value to zero. Your picture should appear transparent. Drag the timeline indicator to the 50th frame and open the "Properties" panel again. Set the alpha value to 100. When you program your button, your picture will fade in slowly when it's pressed instead of popping up suddenly.
- 7). Select the first frame of the "actionscript" layer and choose "Window" > "Actions." Now, you'll write the code that makes your button work. Type the following:
stop();
redbtn.addEventListener(MouseEvent.CLICK, showimage1);
function showimage1(event:MouseEvent):void {
gotoAndPlay(2);
}
This code adds an event listener to your button. When you click it, Flash runs a function that sends the program to the second frame, causing it to play the animation that fades your picture in. The line of code "gotoAndPlay(2)" tells Flash to start playing from the second frame.
Test your button to make sure it works as expected. Click "Control" > "Test Movie." - 8). Pretend that you want to add an extra animation before users see your button. Add a few extra frames at the beginning of your timeline by clicking and dragging the beginning of the tween span to move it down five frames. Move individual frames in other layers by clicking them and dragging them down to the fifth frame, just before the start of your tween span.
- 9). Test your button again. You'll notice that it doesn't work. That's because the "gotoAndPlay" command tells Flash to start playing your tween from the second frame, and your tween span starts in the sixth frame now. You inserted extra frames, but your ActionScript code didn't change to account for your modification.
- 10
Delete your tween and re-create it. This time, after you create a keyframe, look at its "Properties" before you drag in your photo. You'll notice that you can specify a label name. Label the frame "start" and continue creating your tween like you did in the previous steps. - 11
Replace the "2" in your ActionScript code with your frame label in quotation marks ("start"). The final code should read:
stop();
redbtn.addEventListener(MouseEvent.CLICK, showimage1);
function showimage1(event:MouseEvent):void {
gotoAndPlay("start");
} - 12
Test your button. You'll notice it works again, even though you didn't move any frames. That's because you've changed your ActionScript to refer to a frame label that stays constant, even if you insert or delete frames from the timeline. If you want, remove a few frames and test your file again to prove it to yourself.
SHARE
