Flash and ActionScript tutorials – flashadvanced

In this tutorial I will show you the easiest way to create a nice colorful menu with tabs using Flash and AS3.

1. Open a new Flash document and save it under “tabbedmenu.fla”. Set its size to 500 x 80 pixels.

2. Rename the first layer to “rectangle”. As you guessed, we’ll be drawing a rectangle. Take the rectangle tool, disable the stroke, for color select #1E73E6 and draw a rectangle with size 500 x 40 px and position it on the bottom center of the stage. Convert the rectangle to movie clip. Lock this layer.

3. Create a new layer called “tabs” and take the rectangle tool again. Set its top corner values to 15:

Disable the stroke, select #1E73E6 for fill color and draw your tab. Your tab should be 96px wide by 33px high. Now take the text tool, select “Tahoma” for font, bold, size 18 and type “Home”. Convert both the tab and the text to Button symbol. Position the button like this:

4. Now make 4 copies of the the button and position them one after another. To modify each of the buttons you need to select each of them and then go to Modify -> Symbol -> Duplicate Symbol. Now you can modify them. Go inside the first copy and change its color to #BF7AC7. Double click the text field and type “about”. For the second copy choose #6DB6F4 for color and type “portfolio”, for the third one – #97C57E for color and type “photos”, for the fourth one – #CD846B for color and type “contact”.
Now give the buttons instance names: “home_btn”, “about_btn”, “pf_btn”, “photos_btn”, “contact_btn”.

5. On the “tabs” layer, click on the first frame, go to Properties Panel and under “Frame” type “home_selected”:

Now click on frame 5, 10, 15, 20, convert them to keyframes and under “Frame” type:

frame 5: “about_selected”
frame 10: “portfolio_selected”
frame 15: “photos_selected”
frame 20: “contact_selected”

6. Go back to “rectangle” layer and unlock it. Now click on frame 5, 10, 15, 20 and convert them to keyframes. Click on frame 5 and select the rectangle. Go to Properties Panel and under color select “Tint” and set it to 100%. Change the color to #BF7AC7:

Go to the other keyframes and do the same. On frame 10 set the “Tint” color to #6DB6F4, on frame 15 – #97C57E and on frame 20 – #CD846B.

7. Create a new layer called actions and click on frame 5, 10, 15, 20 and convert them to keyframes. On frames 1, 5, 10, 15, 20 open the Actions Panel and type “stop();”.
Go to the first frame again, open the Actions Panel and type the following block of code:

home_btn.addEventListener(MouseEvent.CLICK, homeSelected);
about_btn.addEventListener(MouseEvent.CLICK, aboutSelected);
pf_btn.addEventListener(MouseEvent.CLICK, portfolioSelected);
photos_btn.addEventListener(MouseEvent.CLICK, photosSelected);
contact_btn.addEventListener(MouseEvent.CLICK, contactSelected);

function homeSelected(e:MouseEvent):void{
	gotoAndPlay("home_selected");
}

function aboutSelected(e:MouseEvent):void{
	gotoAndPlay("about_selected");
}

function portfolioSelected(e:MouseEvent):void{
	gotoAndPlay("portfolio_selected");
}

function photosSelected(e:MouseEvent):void{
	gotoAndPlay("photos_selected");
}

function contactSelected(e:MouseEvent):void{
	gotoAndPlay("contact_selected");
}

Here is the final result: