Vertical Navigation Bar

Open up the Macromedia Extension Manager and press the install button.

Then navigate to the file you downloaded

Press Install then Accept the licence agreement.

Then the extension will be installed.

If you had Flash open, restart it now for the extension to take effect.

To use this extension in your Flash documents when using action script 2.0 you just need to add this line once to your actionscript in frame 1.

#include "lmc_tween.as"

If you are using action script 1.0 then you need to use this instead.

#include "lmc_tween_as1.as"

Firstly I am going to set up the Layers on the Timeline so that everything is already set out and ready.

Create 9 layers and label them like so:

From the labels you can pick out Home, About, Services and Contact. These can be changed and more can be added if you want to.

Also look under Navigation. You may not need a sub navigation, but I am going to put it in to show you how.

Now I am going to change the size of the document as we dont need it to be too wide, I am going to set it to 120px wide and 500px high and set the frame rate to 30.

On to setting up our Labels Layer. Put a keyframe in every 5 frames so we have a set for Home, About, Services, Contact and any sub sections you may have.

Now make sure you have the properties bar showing.

Click in the frame 1 on the labels layer. In the Frame box on the properties panel type in Home then press the Return key on your keyboard.

If you look up at your timeline you will see that the word home has been put in the first 4 frames.

Now do this for the rest of the keyframes. For me they were:

Frame 5 - About
Frame 9 - Services
Frame 13 - Contact
Frame 17 - Design
Frame 21 - Hosting

Design and Hosting will be my options in the sub navigation under Services.

On the Code layer create keyframes at the same points as on your Labels layers. But we won't do any coding yet. Then on the Navigation and SubNav layers press F5 in frame 24.

It is at this point that I realise I have forgot to do Layers for my 2 sub options Design and Hosting, so I will add them in under Contact. You will want to order them the same way as you did on the Labels layer, just makes everything a lot neater.

Now add a keyframe on the About layer on frame 5. Then do a keyframe on the Services layer on frame 9. Do the same for the rest of the layers:

Contact - Frame 13
Design - Frame 17
Hosting - Frame 21

Then press F5 on the background layer on frame 24.

As you can see it is all nicely aligned.

Perfect, so now you can lock the layers that we won't be using for now, such as Background, Hosting, Design, Contact, Services, About, Home, Code and Labels.

Now to create the button that we will be using.

Click in frame 1 of the Navigation layer. Press Ctrl + F8 to create a new Symbol.

Name it navBack and click the Advanced button so we can set the Linkage. Check the Export for Actionscript checkbox. This will also check Export in first frame, leave that checked. Press OK.

This will then give you a new layer in which you can create your button as you wish. I am just going to create a simple gradient button with a 1px stroke. Make sure that the width of the button isn't as big as the the canvas size.

Convert it to a symbol and name it navBg. Leave it at basic settings, we don't need to do linkage for this.

To keep the fla nicely layed out, name the layer navBg. Then create a new layer. Name this layer navTxt.

On the navTxt layer, create a new dynamic text box and make sure it is no bigger than the buttons background.

You can add text if you want, but we will use actionscript to set the text later on.

On the properties panel for the dynamic text box give it the name navTxt.

Now that is our navigation button finished. Go back to the main stage by clicking Scene 1 at the top of the timeline panel.

Click on the any frame on the navigation layer and drag the navBack movie clip from the Library on to the canvas, the co-ordinates don't matter as we will do this by using actionscript courtesy of our new tweening abilities. But I want my navigation bar to be blank then the buttons will slide in, so what I will do is set move all the buttons off the canvas to the left and set the y co-ordinates to what I want to use. This way the only motion they have at the beginning is a sliding motion on the x axis.

Single click the button on the stage. Then in the properties panel give it an instance name of navHome.

Repeat this process for the rest of the main buttons. Name them navAbout, navServices and navContact.

Now for some code.

Paste this code in frame one of your code layer:

stop();
#include "lmc_tween.as"

navHome.navTxt.text = "Home";
navAbout.navTxt.text = "About";
navServices.navTxt.text = "Services";
navContact.navTxt.text = "Contact";

var speed:Number = 1;
var ease_type:String = "easeInOutBack";

navHome.tween("_x",4,speed,ease_type,0.1);
navHome.tween("_y",20,speed,ease_type,0.1);

navAbout.tween("_x",4,speed,ease_type,0.2);
navAbout.tween("_y",50,speed,ease_type,0.2);

navServices.tween("_x",4,speed,ease_type,0.3);
navServices.tween("_y",80,speed,ease_type,0.3);

navContact.tween("_x",4,speed,ease_type,0.4);
navContact.tween("_y",110,speed,ease_type,0.4);

navHome.onPress = function() {
gotoAndStop("home");
getURL("index2.html");
}

navAbout.onPress = function() {
gotoAndStop("about");
getURL("about.html");
}

navServices.onPress = function() {
gotoAndStop("services");
}

navContact.onPress = function() {
gotoAndStop("contact");
getURL("contact.html");
}

Now to explain what the code does.

stop();
Stops the timeline from playing.

#include "lmc_tween.as"
Includes the tweening abilities that we need that we installed earlier. Without this the tutorial won't work.

navHome.navTxt.text = "Home";
navAbout.navTxt.text = "About";
navServices.navTxt.text = "Services";
navContact.navTxt.text = "Contact";
These set the text that will appear in the dynamic text box that we put on the buttons. Each button is defined by it's instance name.

var speed:Number = 1;
This sets the variable for the speed that all the tweens go at.

var ease_type:String = "easeInOutBack";
This sets the variable for the type of tween. There are lots of different types of tweens you can go for. Here is a list of what you can use:

easeInQuad
easeOutQuad
easeInOutQuad
easeOutInQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeOutInCubic
easeInSine
easeOutSine
easeInOutSine
easeOutInSine
easeInCirc
easeOutCirc
easeInOutCirc
easeOutInCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeOutInElastic
easeInBack
easeOutBack
easeInOutBack
easeOutInBack
easeInBounce
easeOutBounce
easeInOutBounce
easeOutInBounce

navHome.tween("_x",4,speed,ease_type,0.1);
navHome.tween("_y",20,speed,ease_type,0.1);
This sets the final postition for our navHome button. The number proceeding the "_x" or "_y" represents the x co-ordinate and the y co-ordinate respecitvely. The speed and ease_type are the variables that we defined earlier. The last number is the number of seconds that goes until the tween starts in this case after 0.1 seconds the tween will start.

navAbout.tween("_x",4,speed,ease_type,0.2);
navAbout.tween("_y",50,speed,ease_type,0.2);
This sets the final postition for our navAbout button. The number proceeding the "_x" or "_y" represents the x co-ordinate and the y co-ordinate respecitvely. The speed and ease_type are the variables that we defined earlier. The last number is the number of seconds that goes until the tween starts in this case after 0.2 seconds the tween will start, this will give the navHome button a slight headstart so that the buttons slide in 1 by 1.

navServices.tween("_x",4,speed,ease_type,0.3);
navServices.tween("_y",80,speed,ease_type,0.3);
This sets the final postition for our navServices button. The number proceeding the "_x" or "_y" represents the x co-ordinate and the y co-ordinate respecitvely. The speed and ease_type are the variables that we defined earlier. The last number is the number of seconds that goes until the tween starts in this case after 0.3 seconds the tween will start.

navContact.tween("_x",4,speed,ease_type,0.4);
navContact.tween("_y",110,speed,ease_type,0.4);
This sets the final postition for our navContact button. The number proceeding the "_x" or "_y" represents the x co-ordinate and the y co-ordinate respecitvely. The speed and ease_type are the variables that we defined earlier. The last number is the number of seconds that goes until the tween starts in this case after 0.4 seconds the tween will start.

navHome.onPress = function() {
gotoAndStop("home");
getURL("index2.html");
}
This sets the function that will happen once our button is clicked. First it will go to the first frame that we labeled home. Then the page will navigate to the address that you put in the getURL command.

navAbout.onPress = function() {
gotoAndStop("about");
getURL("about.html");
}
This sets the function that will happen once our button is clicked. First it will go to the fifth frame that we labeled about. Then the page will navigate to the address that you put in the getURL command.

navServices.onPress = function() {
gotoAndStop("services");
}
This sets the function that will happen once our button is clicked. For the services button, we don't want it to load a new page as we want the submenu to appear when its clicked, so we just need it to go to our services frame, so we can bring in the sub navigation.

navContact.onPress = function() {
gotoAndStop("contact");
getURL("contact.html","_blank");
}
This sets the function that will happen once our button is clicked. First it will go to the first frame that we labeled home. Then the page will navigate to the address that you put in the getURL command, then you can set the target of the link after a comma, in this case our link would open in a new window.

Now we need to add the code for the other frames.

If you remember when we created the navBack movie clip we gave it some linkage settings, well this means that the code that doesn't change doesn't have to be reentered in to the other frames.

So all we need to do is set new co-ordinates and reset the variables for speed and ease_type.

For frame 5, enter this code.

stop();
var speed:Number = 1;
var ease_type:String = "easeInOutBack";

navHome.tween("_x",4,speed,ease_type,0.1);
navHome.tween("_y",20,speed,ease_type,0.1);

navAbout.tween("_x",4,speed,ease_type,0.2);
navAbout.tween("_y",50,speed,ease_type,0.2);

navServices.tween("_x",4,speed,ease_type,0.3);
navServices.tween("_y",80,speed,ease_type,0.3);

navContact.tween("_x",4,speed,ease_type,0.4);
navContact.tween("_y",110,speed,ease_type,0.4);

This just sets the buttons in to position if they have been moved.

Now for frame 9, enter this code:

stop();
var speed:Number = 1;
var ease_type:String = "easeInOutBack";

navHome.tween("_x",4,speed,ease_type,0.1);
navHome.tween("_y",20,speed,ease_type,0.1);

navAbout.tween("_x",4,speed,ease_type,0.2);
navAbout.tween("_y",50,speed,ease_type,0.2);

navServices.tween("_x",4,speed,ease_type,0.3);
navServices.tween("_y",80,speed,ease_type,0.3);

navContact.tween("_x",4,speed,ease_type,0.4);
navContact.tween("_y",150,speed,ease_type,0.4);

You may or may not have noticed that the y co-ordinate for navContact has changed. This is so it moves down and latter on once we have setup our sub navigation, allow them to slide inbetween the navServices and navContact buttons.

Then for frame 13, enter this code:

stop();
var speed:Number = 1;
var ease_type:String = "easeInOutBack";

navHome.tween("_x",4,speed,ease_type,0.1);
navHome.tween("_y",20,speed,ease_type,0.1);

navAbout.tween("_x",4,speed,ease_type,0.2);
navAbout.tween("_y",50,speed,ease_type,0.2);

navServices.tween("_x",4,speed,ease_type,0.3);
navServices.tween("_y",80,speed,ease_type,0.3);

navContact.tween("_x",4,speed,ease_type,0.4);
navContact.tween("_y",110,speed,ease_type,0.4);

This will set the navContact button back in to its proper position.

Now preview your navigation bar and check to make sure the buttons move properly once you click them.

If it works go on to the next step, if not make sure you have given instance names to the buttons, this is normally forgotten as it's so easy to forget.

Rather than repeating myself I am just going to give you the names of the properties that I used as we will be using exactly the same technique for the sub navigation.

First of all we need to create a new button, for mine I am just using a dynamic text box, no fancy graphics.

Once again you will need to create this by pressing Ctrl + F8 and giving it a name such as subNav. Remember to give it the same linkage as we gave navBack. Within this movie clip add a dynamic text box, you can use navTxt as the instance name again. Drag 2 of these on to the canvas on the SubNav layer and give them instance names navDesign and navHosting respectively.

Move them off the canvas like the other buttons so they can slide in. Now that we have our sub navigation in place, we need to add code in like we did for the other buttons.

To try and make sure you are understanding what we are going through, try to code the sub navigation by yourself and see if you can get it working. It uses the same principals and will show that you are learning from the tutorial.

If you can't do it, don't worry I will explain it.

In frame 1 on your code layer you will need to add the following code to either the bottom of the rest of the code or you can insert the snippets to where they should go.

navDesign.navTxt.text = "Design";
navHosting.navTxt.text = "Hosting";

This sets the text for our sub navigation buttons.

navDesign.tween("_x",-100,speed,ease_type,0.1);
navDesign.tween("_y",110,speed,ease_type,0.1);
navHosting.tween("_x",-100,speed,ease_type,0.1);
navHosting.tween("_y",130,speed,ease_type,0.1);

The y co-ordinate of the navDesign button matches the y co-ordinate of the navContact button, but they don't overlap as we still have the subnavigation off the canvas.

In frame 5, we just need this code:

navDesign.tween("_x",-100,speed,ease_type,0.1);
navDesign.tween("_y",110,speed,ease_type,0.1);
navHosting.tween("_x",-100,speed,ease_type,0.1);
navHosting.tween("_y",130,speed,ease_type,0.1);

In frame 9 we need to have the sub navigation move in, so we need to change the x co-ordiantes.

navDesign.tween("_x",10,speed,ease_type,0.6);
navDesign.tween("_y",110,speed,ease_type,0.6);
navHosting.tween("_x",10,speed,ease_type,0.6);
navHosting.tween("_y",130,speed,ease_type,0.6);

I have also changed the time that it takes for the tween to start, this will give the navContact button time to move down before our sub navigation slides in.

Then in frame 13 add the following code:

navDesign.tween("_x",-100,speed,ease_type,0.1);
navDesign.tween("_y",110,speed,ease_type,0.1);
navHosting.tween("_x",-100,speed,ease_type,0.1);
navHosting.tween("_y",130,speed,ease_type,0.1);

This moves our sub navigation back to its position off the canvas and is set to a short time to get out of the way of the navContact button.

If you test your navigation now the sub navigation should slide in and out without intefering with the navContact button.

To add functionality to our sub navigation buttons we need to add some code on to the first frame of our code layer.

navDesign.onPress = function() {
getURL("design.html");
}

navHosting.onPress = function() {
getURL("hosting.html");
}

Depending on how you make your website, the other layers we created may not be needed.

If you are using just standard HTML with no frames then the flash is going to reloaded every time you go on a new page so the layers aren't needed, although you could add some loading text at the bottom for users still on 56k so they know that their destination is loading.

If you are using a framed page then the flash won't be reloaded. In which case you can add text or a picture that will display for each link. For example, if they click Home, then a home icon will appear, if they click Design, a paintbrush will appear.

Well that is the tutorial finished, I hope you enjoyed it and it is useful to you.

View my result here

Download my fla here