Adding more menus

In this one, I'm going to show you what needs to be changed in order to add more main menus.

Step 1

Let's open the index.fla file. Now press the Edit Symbols button and select our menu.

Step 2

Now let's create another menu. Select the text tool(T) and type our new menu's name - Entertainment for example - using MyriadPro font with a size of 14 px and as Static Text.


Step 3

Now let's convert our new menu to a movie clip! Select it and press F8. Set it's name to b5 because it is out fifth button and set it's registration point to the absolute middle.


Step 4

Set our new movieclip instance name to b5 also.


Step 5

Now go back to Scene 1, open the action script pan F9 and let's type some code in order for our new menu to work. Go to the bottom of our code and let copy paste the code for the 4th button and adjust it for our fith one. ;)


Step 6

Your code for the fith button should look like this:


////////////////////////////////////
// Menu b5 (entertainment) Setup //
////////////////////////////////////
menu.b5.onRollOver = function(){
this.alphaTo(100,1,"easeOutExpo")
menu.b1.alphaTo(10,1,"easeOutExpo")
menu.b2.alphaTo(10,1,"easeOutExpo")
menu.b3.alphaTo(10,1,"easeOutExpo")
menu.b4.alphaTo(10,1,"easeOutExpo")
}

menu.b5.onRollOut = function(){
this.alphaTo(100,1,"easeOutExpo")
menu.b1.alphaTo(100,1,"easeOutExpo")
menu.b2.alphaTo(100,1,"easeOutExpo")
menu.b3.alphaTo(100,1,"easeOutExpo")
menu.b4.alphaTo(100,1,"easeOutExpo")
}

menu.b5.onRelease = menu.b4.onReleaseOutside = function(){
contact_mc.tween("_x", Stage.width/2, 1, "easeOutCubic");
contact_mc.tween("_y", Stage.height/2-800, 1, "easeOutCubic");
aboutus_mc.tween("_x", Stage.width/2, 1, "easeOutCubic");
aboutus_mc.tween("_y", Stage.height/2-800, 1, "easeOutCubic");
main.tween("_x", Stage.width/2, 1, "easeOutCubic");
main.tween("_y", Stage.height/2-800, 1, "easeOutCubic");
services_mc.tween("_x", Stage.width/2, 1, "easeOutCubic");
services_mc.tween("_y", Stage.height/2-800, 1, "easeOutCubic");
entertainment_mc.tween("_x", Stage.width/2, 1, "easeOutCubic");
entertainment_mc.tween("_y", Stage.height/2, 1, "easeOutCubic");
}


Step 7

Now if I test the movie, flash tells me that I have an "Error creating flash movie" and that my "Destination directory does not exist". It is not actually and error or a bug or whatever. Let's fix it! Go to File>Publish Settings and select the new paths to the index.html file and our index.swf file. Then press Publish, overwrite everything and OK.


Step 8

Let's test the movie! As we roll over our menu, we observe that our new menu doesn't alpha to value of 10. In order to make it alpha we will have to add new lines to our action script. Let's do that! Take a look at the helping pictures and do so.









So, we added two lines of code for each button (b1,b2,b3,b4), playing with alpha of our new fith button. Basically we want each time we rollOver a button, the other buttons to alpha out to a value of 10 and each time we rollOut a button, the alphas go back to 100.

Step 9

Our menu right now behaves correctly but it doesn't load any external swf file and it is not aligned correctly so what we need do to is modify some more our action script code. Let's do it! Go to line 58 and modify it with this: menu.tween("_x", Stage.width - menu._width - 50, 1, "easeoutBack");



Now let's add another two lines as you see inside the helping picture:


Now let's make our new button load an external swf:

Step 10

Alright guys! We made all the changes neccessary for our new button to work. Now we gotta create our external swf file (entertainment.swf) and modify a little bit our swfs.xml file.


Create a new swf file with a size of 550x350, save it as entertainment.swf


Open the swfs.xml file and add a new node as seen in the picture.

Step 11

We forgot something to do inside the index.fla file, so let's open again the index.fla file! Now let's zoom out a bit, go above the stage, select the aboutus_mc copy and paste it.




Now set the instance name of our pasted movieclip to entertainment_mc

Step 12

If we test our movie, our menu works now but what it loads, doesn't go away from the stage. We need to fix that! What we need to do is add 2 code lines for each button onRelease instance. The lines are these:

entertainment_mc.tween("_x", Stage.width/2, 1, "easeOutCubic");
entertainment_mc.tween("_y", Stage.height/2-800, 1, "easeOutCubic");


Check out the pictures:




Step 13

The last thing we gotta do is put the contact button the last. So we need to arrange a little bit our buttons. Put them in order. Let's do again the first step (Step 1) of this tutorial, select the contact movieclip and by pressing and holding Shift, move it to the right by pressing the right arrow key. Then move the entertainment menu to the left.



Now test your movie! Our new menu button works just fine! Iuhuuu!



Click here to download the fla file