- 1). Open Flash. Use the Square tool to create a rectangle on the stage. Use the Text tool to put a label over it with the name "Button."
- 2). Select the two graphics. Press F8. Select "Movie Clip" in the "Create New Symbol" pop-up window. Input "Button" in the "Name" field.
- 3). Select the movie-clip "Button." Go to the Properties Inspector, which is below the stage. Input an instance name of "my_button."
- 4). Double-click on movie-clip to activate its timeline. Insert a new layer by clicking on the Layer icon, which is under the Timeline. The icon resembles a page with a bottom corner upturned. Name it "Labels." Insert a second layer and name it "Actions."
- 5). Use the Selection Tool to click on the stage once. This will deactivate the button's artwork. Right-click on the rectangle. Select "Distribute to layers." The rectangle and text will separate and appear in two different layers. Four layers in your movie-clip are: "Actions," "Labels," "text" and "background."
- 6). Click on Frame 1 in the "Labels" layer timeline. Go to the Properties Inspector and input "up" into the frame label field. Click on Frame 10 of the "Labels" layer timeline. Press "F6" to insert a new keyframe. Go to the Properties Inspector, input "over" into the frame label field. The keyframe in Frame 10 begins the animated rollover.
- 7). Click on Frame 30 in the "Labels" layer timeline. Press "F6" to insert a new keyframe. Go to the Properties Inspector and label it "out." Click on Frame 40. Press "F5." This shortcut will add 10 frames between frames 30 and 40.
- 8). Click on Frame 1 in the "Actions" layer timeline. Press "Option" plus "F9." Input "stop()" into the Actions pop-up window, then close it. This step keeps the movie from playing until you roll over the button.
- 9). Click on Frame 1 in the "Actions" layer timeline. Hold down the "Option" key ("Alt" on a PC) and drag to the right. Release on Frame 20. This will add a new keyframe to Frame 20 and apply the stop action. Your button will remain highlighted until you roll off it.
- 10
Click on Frame 20 in the "Actions" layer timeline. Hold down the "Option" key and drag. Release on Frame 40. The button will return to its normal state after you roll off it. - 11
Click on Frame 40 in the timeline of the "text" layer. Press "F5" to copy the frames from Frame 1 to 40. The button text does not change. - 12
Select the rectangle background on the stage. Convert it to a movie clip symbol in the same way that you did in Step 2, but only the shape is selected. The text has been separated from the graphic. Name the new movie clip symbol "Button Anim." - 13
Insert new keyframes to Frame 10 and Frame 20 in the timeline of the "background" layer. Click on Frame 20 in "background" layer. Use the Free Transform Tool to extend the rectangle on the stage to the right about 20 pixels. Right-click on any frame between frames 10 and 20. Select "Create Motion Tween." - 14
Click on Frame 30 in the timeline of the "background" layer. Insert a keyframe. Right-click on Frame 1 and select "Copy Frames." Right-click on Frame 40 and select "Paste Frames." Right-click on any frame between frames 30 and 40. Select "Create Motion Tween." Click on "Scene 1" in the edit bar under the Timeline. Return to the main timeline. - 15
Insert a new layer at the top of your layer stack in the main timeline. Name the layer "Actions." Click on the padlock icon to lock it. Click on Frame 1 in the "Actions" layer. Press "Option" plus "F9." Input this code into the "Actions" window:
btn_mc.buttonMode = true;
btn_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
btn_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
function onButtonOver(e:MouseEvent): void
{
e.currentTarget.gotoAndPlay("over");
}
Function onButtonOut(e:MouseEvent): void
{
e.currentTarget.gotoAndPlay("out");
} - 16
Press "Ctrl" plus "Enter" to test the button.
- Advertisement -
- Advertisement -