 |
Welcome To Swish-Designs.co.uk Have a Nice Tuesday
Jump Menu / Drop Down Menu - SwishMax
Learn how to create a dynamic jump / dropdown menu with swishmax
First Of All
Open swishmax and set the size for the movie, i have used 150 x 120
and frame rate of 25 fps
Step.1
Using the Rectangle tool drag out a rectangle approximatley 113pixels wide x 20 pixels high give it a solid line colour of #6699CC and a solid colour fill of #FFFFFF, now name the shape border you should have something looking like fig.1 below.
This is an enlarged view.
Fig.1
Step.2
Now to create the button, using the Rectangle tool but this time drag out a square whilst holding down the Shift Key approximatley 15 pixels wide x 15 pixles wide with a solid line colour of #6699CC and a linear gradient colour fill of #CCCCFF to #CCFFFF untill you have something looking like fig.2 below.
This is an enlarged view.
Fig.2
now to create the down arrow symbol, i have created my own using the Bezier tool.
here is how we do it.
select the bezier tool, make a horizontal line and then come back again along the same path to your starting point, select Reshape tool and right click on the center of your line insert vertex, drag the anchor point downwards to create the bottom of the arrow now slightly in from the right and also in from the left insert vertexes again and finaly insert a vertex on the top line in the center drag the top center anchor point down until you have a uniform arrow shape see fig.3 below.
This is an enlarged view.
Fig.3
Step.3
Now you have the button shape and the arrow, group the two shapes as a button and name the button arrow_button. now move the button into place inside the border shape see fig.4 below
This is an enlarged view.
Fig.4
Step.4
Now to create the options that the jump / dropdown menu will have, this will all be done dynamically to make it easy to change the options.
Select the text tool
and make the text type dynamic and style Pixel, drag the text box out to fit inside the border shape and enter the text 'Select' name it link see fig.5 below.
This is an enlarged view.
Fig.5
Step.5
Now to add the rest of the options, using the rectangle tool drag out a rectangle approximately 116pixels wide x 65 pixels high with a solid black line #000000 and a solid fill colour of white #FFFFFF, Now using the bezier tool start at the bottom left corner of the rectangle shape and go up the left and accross the top of the recatngle using a solid line with the colour # 999999 then group both shapes together as a new shape and name border now group as a sprite and name drop_down see fig.6 below.
This is an enlarged view.
Fig.6
Step.6
Open up the drop_down sprite and inside the sprite using the rectangle tool create a rectangle approximately 115 pixels wide x 15 pixels high no Line and a solid colour fill of #3366CC,Now using the text tool create a dynamic text box with font type set to 'D' for dynamic
type some text in the box for the option example 'option 1' and name it link1 group as a button and name it link_1, check has seperate over state, remove the blue rectangle from the up / hit state and change the text colour in the over state to white. you should have something like fig.7
This is an enlarged view.
Fig.7
Step.7
Now you have one button working you can duplicate it as many time as you wish, in this tutorial we are going to have 3 options so duplicate the button two more times and place them under one another naming them as you go, Buton 2 would be link_2 and the textbox name would be link2 and button 3 would be link_3 and textbox name would be link3 you should now have something looking like fig.8 below.
This is an enlarged view.
Fig.8
Step.8
create a rectangle that is slightly smaller than the border shape approximatley 110 pixels wide x 65 pixels wide group this new shape as a button and name linksafe place it over the border shape making it central.
Now to make it all work, add the following code to Scene_1
Code:
onLoad () {
press=false;
arrow_button.useHandCursor = false;
drop_down.link_1.useHandCursor = false;
drop_down.link_2.useHandCursor = false;
drop_down.link_3.useHandCursor = false;
drop_down.border.useHandCursor = false;
drop_down.linksafe.useHandCursor = false;
border.useHandCursor = false;
drop_down._visible=false;
}
Now add the following code to arrow_button
Code:
on (press) {
drop_down._visible=true;
_root.press=true;
}
Now add the following code to border outside of the drop_down sprite
Code:
on (press) {
if(press==false){
_root.drop_down._visible=true;
press=true;
}else{
link=link;
_root.drop_down._visible=false;
press=false;
}
}
Now add the following code to the drop_down sprite
Code:
onLoad () {
link1="Administration";
link2="Tutorials";
link3="Downloads";
}
Now add the following code to link_1 inside the drop_down sprite.
Code:
on (press) {
_root.link=link1;
_root.press=false;
}
on (release) {
_root.drop_down._visible=false;
}
Now add the following code to link_2 inside the drop_down sprite.
Code:
on (press) {
_root.link=link2;
_root.press=false;
}
on (release) {
_root.drop_down._visible=false;
}
Now add the following code to link_3 inside the drop_down sprite.
Code:
on (press) {
_root.link=link3;
_root.press=false;
}
on (release) {
_root.drop_down._visible=false;
}
Now add the following code to linksafe inside the drop_down sprite.
Code:
on (press) {
_root.drop_down._visible=false;
_root.press=false;
}
Now add the following code to border inside the drop_down sprite.
Code:
on (rollOut) {
_root.drop_down._visible=false;
_root.press=false;
}
on (press) {
_root.drop_down._visible=false;
_root.press=false;
}
Thats all now press Ctrl+t to test in the player to see how it functions, if everything has gone well you should end up with something like the example at the start of the tutorial
Thank you for reading.
