This user is yet to take control of their account and provide a biography. If you are the author of this article, please contact us via support AT actionscript DOT org. Written by: Billy T. [email:billyt@bigpond.net.au]
Time: 25 minutes
Difficulty Level: Intermediate
Requirements: Flash 5 or higher.
Topics Covered: How to create fly-in drop-down menues.
Assumed knowledge: Variables, Paths, Button and Clip Eent handlers.
Written by: Billy T. [email:billyt@bigpond.net.au]
Time: 25 minutes
Difficulty Level: Intermediate
Requirements: Flash 5 or higher.
Topics Covered: How to create fly-in drop-down menues.
Assumed knowledge: Variables, Paths, Button and Clip Eent handlers.
OK I want to show you how to make this funky little actionscripted drop down menu -
| |
You can download the finished source file for this tute here.
This involves some fairly complex scripting so if you are still struggling with concepts from earlier tutorials it would probably be best to stop reading now.
One of the advantages of making your drop down menu with actionscript (as opposed to the tweened animation drop downs I showed you the other day) is that they are hard to break. By that I mean that if the user rolls over the button quickly or clicks lots or whatever you won't see the menu get stuck or anything. The same can't be said for the tweened method where you may of noticed the drop down gets stuck open if the user moves the mouse quickly and jumps over the invisible button that is supposed to send the menu back to the closed position.
Anyway, let's get on with it. Load Flash, set your frame rate to 21, the stage size to 400X300 and the background colour dark grey.
We'll do the graphics before the scripting. Draw a bar right along the top to place our main buttons on. Mine is 400X30 - use the align pannel to center it up the top (if that makes sense!). Name the layer background and lock it. Make another layer, name it actions and drag it down the bottom. Make another and name it "main buttons" and make sure it is at the top. Make another layer and name it "sub buttons" and move it second from the top. Make another layer, name it "content" and move it to under the button layers.
Save your movie as "AS_dropDown_menu.fla".
Now click on the first frame of the content layer and draw a rectangle that fills up most of the bottom part of the stage. Select the rectangle and hit F8 to convert it to a symbol. Make it a movieclip and name it "content". Click OK and give it an instance name of "content". Double click on the content mc to go inside it. Name the one only layer "background" and then lock it. Make a new layer and name it actions - put a stop action in the first frame. Make another layer, name it content and drag it to the top. Click on frame 100 of the background layer and hit F5 to extend the frames. Now every 5 frames (5, 10, 15 etc) on the actions layer put a stop action. Do this all the way to frame 45. Now go back and give each of these keyframes frame labels. Label them like so
Frame 5 - menu1_1
Frame 10 - menu1_2
Frame 15 - menu1_3
Frame 20 - menu1_4
Frame 25 - menu2_1
Frame 30 - menu2_2
Frame 35 - menu2_3
Frame 40 - menu2_4
Frame 45 - menu2_5
OK now in frame 5 of the content layer put a keyframe and type "menu 1 / option 1". Click on frame 10 of the content layer and hit F6. Change the text to "menu 1 / option 2". Do this every 5 frames and change it to the appropriate text so that by frame 45 you end up with the text "menu 2 / option 5". Your timeline should now look like this -
Save your movie.
OK now go back to the main time line and click on the first frame of the "main buttons" layer. Draw a rectangle on the background bar along the top. The colour is irrelevant. The size of my rectangle is 50X15. Select the rectangle and convert it to a button - name it "invisible button". Double click on the button to go inside it and put a keyframe in the hit state. Delete everything from the other 3 states (tip: click on the over state where there is no keyframe and it should select the up, over and down states - hit delete). OK go back to your main timeline and you will see your button has turned a light blue - this is the colour flash uses to display invisible buttons (buttons with just a hit state). Align the bottom of the button with the bottom of the background bar. The button should be about 90 on the x axis (check the info panel)
 |  |
OK now click on the first frame of the sub buttons layer. Draw a rectangle the same size as the last button - this time use the colours that you want for the up state of your buttons. Select the rectangle and hit f8 to covert it to a movieclip - name it "menu 1 sub buttons". Click ok and give the new mc an instance name of "menu1". Double click on the new mc to go inside it. The rectangle should be automatically selected so just hit f8 again and convert this to another movieclip - name this one "sub button template". Double click on the sub button template to go inside it. Make an actions layer and put stop actions in frames 1, 2 and 3. On the layer with the rectangle put keyframes in frames 2 and 3. Change the colour of the rectangle in frame 2 to what you want for the over state of your buttons. Change the colour of the rectangle in frame 3 to what you want for the down state of your buttons.
OK now go back one step so that you are inside the "menu 1 sub buttons" mc. Option drag out 3 copies of the sub button template. They should be all aligned neatly. Now from the top button down give each one an instance name - they should be sub1, sub2, sub3 and sub4. Name one and only layer "buttons". Make a new layer above it and name it "text". On the text layer, type some text above each button and then lock it.
Save your movie.
OK go back to the main timeline and align the top of the "menu1 sub buttons" mc withe the bottom of the invisible button. Click on the invisible button and hit F8 - convert it to a movieclip and name it "main button template". Now your invisible button is nested inside an mc. give it an instance name of "button1". Make a new layer up the very top and name it "text". Type some text above your invisible button mc.
Continued overleaf...OK time to do some scripting. Click on the first frame of the actions layer in the main timeline. Paste these actions into the actions panel (must be in expert mode
[as]/*this is a function with a "for" loop.
with the "for" action, you have to give flash 3 parameters.
The first (j=1) just sets the starting value of a variable.
The second (j<10) sets a condition so that the for loop eventually stops
The third (j++) tells flash what to do with our variable each time the action loops
- in other words - increase the value of j by 1 each time.
So, when the function is called -
_root.button1.pressed will be set to false
_root.button2.pressed will be set to false
right through to
_root.button9.pressed being set to false
This all happens so quickly that you don't see the loop occurring
and you should be able to see how many lines of code a "for" loop can
save you writing.
*/
function resetButtons() {
for (j=1; j<10; j++) {
_root["button"+j].pressed = false;
}
}
//this is another function. It will send our sub buttons to their first frame
//(the up state) and set a variable in each one
function resetSubButtons() {
for (j=1; j<10; j++) {
_root.menu1["sub"+j].gotoAndStop(1);
_root.menu2["sub"+j].gotoAndStop(1);
_root.menu1["sub"+j].pressed = false;
_root.menu2["sub"+j].pressed = false;
}
}
//This is a prototype contained a refined code that does the same
//thing as the scrolling code I have shown you already.
//Basically, when the prototype is called (by our drop down menus) it takes the
//values provided to it (xPos,yPos, targScale) and moves the calling clip accordingly.
Movieclip.prototype.scrollme = function(xPos, yPos, targScale) {
this._x -= (this._x-xPos)/3;
this._y -= (this._y-yPos)/3;
this._xscale -= (this._xscale-targScale)/3;
this._yscale = this._xscale;
};
fscommand("allowscale", false);
[/as]
Damn that's a lot of actions. Actually, most of it is just comments which I have put in to help explain what the actions do. I won't explain them any more so just paste them into flash and check out the pink bits (as you do...).
Now click on the menu 1 sub buttons mc and paste these actions
[as]onClipEvent (enterFrame) {
//this checks to see if the main button has been pressed
if (_root.button1.pressed == true) {
//this scales up the menu
scrollme(90, 37, 100);
} else {
//this shrinks the menu
scrollme(400, 200, 0);
}
}
[/as]
The value of the blue bits will vary depending on the "scaled up" location you want for your menu. If you have followed all the instructions so far, you should just be able to look at the x and y position of your clip in the "info panel" (make sure you are getting the info of the center of the clip - not the top left corner) and insert these figures into your actions (x pos first, then y pos). The value of the green bits may vary - just set them to where ever you want the menu to fly to when it shrinks (or just leave them as they are).
Save your movie. Test your movie. You should see your menu fly off but that's about it.
OK now go inside your main button template mc and click on the invisible button - give it this action
[as]on (press) {
//this calls the resetButtons function
_root.resetButtons();
//when the resetButtons function is complete, we move to the next line
//which sets a variable inside itself
this.pressed = true;
}
on (release, releaseOutside) {
//this calls the resetButtons function again
_root.resetButtons();
}
[/as]
Test your movie again and click the main button a few times.
OK now go inside the menu 1 sub buttons mc and click on the top sub button (sub1). Give it this action
[as]onClipEvent(load){
//sets a variable inside itself
this.pressed=false;
}
onClipEvent(enterFrame){
//this checks to see if the mouse is over it and that it has not already
//been clicked
if(this.hitTest(_root._xmouse,_root._ymouse)&&this.pressed==false){
gotoAndStop(2);
//this tells the clip what to do if the mouse is not over it
//and it (the sub button) has not been clicked
}else if(!this.hitTest(_root._xmouse,_root._ymouse)&&this.pressed==false){
gotoAndStop(1);
}
}
onClipEvent(mouseUp){
//this determines if the mouse is over the mc when the button is released
if(this.hitTest(_root._xmouse,_root._ymouse)){
_root.resetSubButtons();
this.gotoAndStop(3);
this.pressed=true;
_root.content.gotoAndStop("menu1_1");
}
}
[/as]
Now paste this action on to sub2, sub3 and sub4 changing just the blue bit to the appropriate frame label within the content clip (ie "menu1_2", "menu1_3" and "menu1_4".
Save your movie and then Test it again.
OK getting there.
OK back in the main timeline, click on the "main button template" mc and option drag a copy over to the right. Change the instance name of the copy to "button1". Copy the text across too and change it to "menu 2" or whatever. Now click on the "menu 1 sub buttons" mc in the library and from the options drop down menu in the library choose "duplicate". Name the copy "menu 2 sub buttons". Click on the first frame of the sub buttons layer and drag an instance of the "menu 2 sub buttons" mc from the library on to the stage - position it under the menu 2 button. Give it an instance name of "menu2" and give it this action -
[as]onClipEvent(enterFrame){
//this checks to see if the main button has been pressed
if(_root.button2.pressed==true){
//this scales up the menu
scrollme(158,37,100);
}else{
//this shrinks the menu
scrollme(0,200,0);
}
}
[/as]
Again, just change the blue bits to the appropriate figures. It is important to note that this is checking to see if button 2 has been pressed - not button 1 like the other menu.
OK double click on the "menu 2 sub buttons" mc to go inside it. Click on the sub4 instance (the button down the bottom) and option drag down another copy - change the instance name of the copy to sub5 and put some appropriate text above the new button. Now the only action you need to change on all these sub buttons is the frame label that they send the content mc to - eg "menu2_1" etc
Change the frame label for each sub button and then go back to the main timeline.
Save the movie and then Test it.
Pretty cool huh? If it ain't cool then you must have done something wrong because my mine works and I can absolutely, positively say without a doubt that it is cool.
You can download the finished source file for this tute here.
Cheers