Create Cool Rollover Buttons Using Flash

Welcome to this beginner tutorial for Macromedia Flash 8.In this tutorial you will learn to create rollover buttons for your websites. Even though this tutorial is a fairly easy one, you will need some basic Flash knowledge to execute some of the actions needed to create buttons with cool rollover effects.

Step 1

Open a new document in Macromedia Flash (ctrl-n) and in the "Properties" tab, change the fps to 30. Use the rectangle tool (r) and use a grayish color (#CCCCCC), make sure that the outline is turned off, to create the background. In the timeline, rename "Layer 1" to "Background" so that it’s easier to keep track of all the layers. Lock the background layer.

Step 2

Create a new layer and name it "Button Home". With the new layer active, use the text tool (a) and write "Home" just like I have done. I used Verdana as font and #333333 as color. Right click on the text you just typed and convert it to a movie clip (Convert to Symbol… Movie Clip) Name it "button_home_mov" and click "OK".

Step 3

Double left-click the new symbol you just created to edit the movie clip. In the timeline, rename "layer 1" to "text" and lock it. Create a new layer and name it "rollover". In the "rollover" layer create a rectangle just like I have done. Convert the rectangle to a movie clip and name it "rollover_mov". Select the rectangle and in the "Properties" tab, under "Color" select "Alpha" and change the value to 30%.

Step 4

Create a new layer and name it "script". This is where we will put all our frame commands and labels. Lock it and ignore it for now. At frame 2 insert a keyframe for all the layers. Select the "rollover" layer and insert a keyframe at frame 11. Do the same for the "text" layer. With the keyframe at frame 11 active, select the rollover_mov rectangle and move it down just like I have done.

Create a motion tween between frame 2 and 11. With the "rollover" layer still active, insert a keyframe at frame 15. Do the same with the "text" layer. Select the rectangle again, make sure frame 15 is active, and move it a little bit up, just like I have done. Create a motion tween between frame 11 and 15.

Step 5

Insert keyframes at frame 19 and 29 for both the "rollover" layer and the "text" layer. Select the "rollover" layer and go to frame 19. Move the "rollover_mov" rectangle down a bit. Go to frame 29 and move the rectangle all the way up, out of the work area.

Create motion tweens between frame 15 – 19 and 19 – 29. Before we continue, select every frame in the "text" layer except 1 and 29 using ctrl or shift and right click to select "Clear Keyframe". Lock the "rollover" layer.

Step 6

In the "script" layer, insert new keyframes at frame 15 and 16. Select the first keyframe in the "script" layer and expand the "Actions" tab. In the first line, write stop(); . Do the same at frame 15. Then select frame 2, and in the "Properties" tab, write "s1" where it says <Frame Label>. Do the same thing at frame 16, except write "s2" instead of "s1".

Then select frame 2, and in the "Properties" tab, write "s1" where it says <Frame Label>. Do the same thing at frame 16, except write "s2" instead of "s1".

Step 7

Create a new layer and name it "button". Use the rectangle tool "r" and draw a rectangle over the text. Rightclick the rectangle and convert it to a button and name it "button". Double-click the rectangle to edit it. Drag the "Up" keyframe all the way to "Hit". Go back to "button_ home_mov". Select the new blueish button and expand the "Actions" tab. Type this:

Step 8

Done! Press ctrl+enter to test your button!