Publishing System Settings Logout Login Register
Downdown Navigation Made Easy - Create a small navigation bar
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on October 29th, 2005
21308 views
Adobe Flash
Welcome back to a short flash tutorial on twodded!
My mate Matt asked a while ago how to create a dropdown menu, now after a long while, I decided to reply him, and here's the outcome.

ATTENTION: I'm using flash 8 for this tutorial, most of the functions are available on older versions, everything marked with an (8) is only available for flash8 d'oh ;)

First of all, I assume that you guys already have some knowledge of photoshop or any other similar graphics software, if not then click on the homebutton on the topright and browse through the huge index of photoshop tutorials :)

I've created 2 graphics in photoshop, one is the background of the movie and one for the buttons, I've saved them as png to keep the transparency of the graphics.
Here what I've done:
Background
background
Button
button

So next step is to import everything into flash, this can be done by pressing CTRL+R or by going to File->Import both the same thing, I just prefer keyboard shortcuts :)
If you can't see your library then press CTRL+L to bring it up

So let's do our flash stuff now


Everything imported and inside the library? cool, then let's get to work.
Change your stagesize to 460x70px and a framerate of 25fps.
Create 4 Layers and give them the name: Buttons, Background, hitarea, actions (from bottom to top)
Drag your background.png from the librarty to the stage on the background layer and press F8 so we can convert it to a graphicSymbol and give it a new name like "background_gfx". Align the graphic to the center of our stage by pressing CTRL+K to display the align panel, now you can lock this layer by pressing the small lock.
The Align Panel:
align panel

Now let's drag our button.png to the stage and again press F8 to convert it to a graphicSymbol, give it the name "button_gfx" and press again F8 to convert it into a movieClip, this time you give it the name "butAnim". Place the newly created movieclip on the buttons layer and put it somewhere where it looks nice, here's mine:
button

Doubleclick on this movieclip to enter edit mode, and create 2 new keyframes at position 15 and 30.

On frame 15 move the button a bit down so that it just touches the border of the movie.
Rightclick on frame 1 and select "Create Motion Tween", do the same for frame 15
Now if you just press enter you will notice that our button goes up and down and will never stop doing that unless you say it so, for that we select frame 1 and press F9 to open up our actions panel. Now you just need to type
stop();
do the same on frame 15 and frame 30.

Our animation works fine, but we can give it a better look, so again select frame 1 and on the properties panel you will see an option called Ease I've used a value of -100 on the frame 1 and a value of +100 on frame 15.

What's Easing??
Ease will just accelerate/deaccelerate the animation on the first few frame, so we get a smoother look on the animation.
(8) with flash 8 you have more control on the easing, you can do it graphically which is a big step towards animation, if you're on flash 8 press the edit button and play around with it

Before you go back to your main timeline, doubleclick again on the graphic and create a dynamic textfield with the length of the button, choose a nice font, size and colour and give it an instancename of "but_txt". I've used Tahoma with a fontsize of 12 and black.
(8) Since Flash 8 you have the possibility to anti-alias the text specifically for your needs, since our text is being animated (together with the button) I've chosen "anti-alias for animation"

Good, we're done with the button, get back to the main timeline.
Duplicate our button movieclip twice and place then beneath each other nicely, give each movieClip an instance name, mine are named "menu1", "menu2" and "menu3".



Now let's create an hitArea movieclip. Just draw a rectangle without borders of about the same size of the button, and place it right underneath the button, press F8 to convert it to a movieClip and give it the name "hitArea_mc".
My hitArea movieclip is just a black rectangle as you see:
hitArea

Duplicate the hitArea_mc twice and place it underneath the corresponding button, don't forget to also give the hitArea_mc a unique instancename, mine are named "hitArea_mc1" and so on.

Now you can safely lock all layers, we will do our work now on actionscript. go to our actions layer and on frame 1 press F9 to open the actions window.

So what do we need now? We need a) rollover action b) rollout action c) on release action d) a text, let's get to work.

First of all we want that our ugly hitArea movieclips get invisible, to achieve that just type:

hitArea_mc1._visible = false;
hitArea_mc2._visible = false;
hitArea_mc3._visible = false;

I think there is no need to explain this, since it's pretty clear what we are doing here.

Next we want to give our buttons some names like "Home" or "Services" or whatever you want, for that you need to use this code:
menu1.but_txt.text = \"this is button 1\";
menu2.but_txt.text = \"this is button 2\";
menu3.but_txt.text = \"this is button 3\";

Here we are adressing our movieclip named "menu1" and our dynamic textfield named "but_txt", then we declare that we will send a text string to it, and after the = operand we set the text in quotationmarks

okeydokey.. last step!!
We are using extra hitArea movieclips so that there is no ugly movement if the user doesn't move the mouse over the correct area.
menu1.hitArea = hitArea_mc1;

With this line we give our movieClip menu1 a new hitArea equals to hitArea_mc1 ;) easy hmm..

And we also need to assign the functions so the button animates on rollover, rollout and release.

menu1.onRollOver = function(){
menu1.gotoAndPlay(2);
}
menu1.onRollOut = function(){
menu1.gotoAndPlay(16);

}
menu1.onRelease = function(){
menu1.getURL(\"http://www.yoursite.com/button1\");
}

Here you tell flash that when the mouse is over the menu1 movieclip, menu1 movieclip should play from frame 2 on till it reaches a stop action, the rollout is pretty much the same, we just start our movie from frame 16 on, and since it's not your first time in flash, you know what getURL does :)

Now you just need to duplicate this last piece of script and change the menu1 to the corresponding movieclip name.

Here the complete code:
// Disable visability of hitArea
hitArea_mc1._visible = false;
hitArea_mc2._visible = false;
hitArea_mc3._visible = false;

// Set the button Names
menu1.but_txt.text = \"this is button 1\";
menu2.but_txt.text = \"this is button 2\";
menu3.but_txt.text = \"this is button 3\";

//Buttons (first)
menu1.hitArea = hitArea_mc1;
menu1.onRollOver = function(){
menu1.gotoAndPlay(2);
}
menu1.onRollOut = function(){
menu1.gotoAndPlay(16);

}
menu1.onRelease = function(){
menu1.getURL(\"http://www.yoursite.com/button1\");
}
//Buttons (Second)
menu2.hitArea = hitArea_mc2;
menu2.onRollOver = function(){
menu2.gotoAndPlay(2);
}
menu2.onRollOut = function(){
menu2.gotoAndPlay(16);
}
menu2.onRelease = function(){
menu2.getURL(\"http://www.yoursite.com/button2\");
}
//Buttons (third)
menu3.hitArea = hitArea_mc3;
menu3.onRollOver = function(){
menu3.gotoAndPlay(2);
}
menu3.onRollOut = function(){
menu3.gotoAndPlay(16);
}
menu3.onRelease = function(){
menu3.getURL(\"http://www.yoursite.com/button3\");
}


That's it guys, here a small EXAMPLE of what we've done
and HERE the .zip file with the sourcefile (flashmx format) and the 2 png files.

See you next time when it's flash time :)

Tiago Dias aka. Funkysoul
Premium Publisher
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
funkysoul

This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top