Advanced Drop Down Menu

Flash Tutorials

Photoshop Tutorials

Flash Games

Flash Game Design

Part 3) Writing the Actionscript to Create the Buttons

Now that we've created the menu buttons and some content for them to control, we're going to write the actionscript which will add the buttons. You'll need to make a new layer, on the main timeline above the buttons and pages, for the Actionscript. The first lines of Actionscript are shown below, with their explanation followed after.

Step 9.

Line 1 - The 'menu' array is created to hold each menu button name. We'll be writing the actionscript so that menu buttons can be added by simply add and subtracting names from the menu array.

Line 2 - xStart is the X position where the 1st drop down button will appear.

Line 3 - yStart is the Y position where the 1st drop down button will appear.

Line 4 - bWidth is the width of the button. Since the button has a hairline border (stroke), the thickness of it won't change as the width and heigh of the button are changed.

Line 5 - bHeight is the height of the button. This value will be used to place each button vertically.

Line 6 - A 0.05 second insterval is stored in this variable, which will be used inbetween scrolling down each menu button. The higher this number, the longer it will take for each button to move down after the previous one.

Line 7 - This variable holds number of items in the menu array. It'll be used when attaching the menu buttons - More will be explaing later.

Line 8 - A variable to hold a boolean value for the menu being open or closed.

Line 9 - A time stamp will be held in this variable.

Line 10 - A variable to hold the speed at which the buttons will move down

Step 10.

Line 11 - A for loop is created to loop through the items in the menu array. The "i" in the loop will start off at 0 and increment by 1 (i++), while i is below the menu's length.

Line 12 - Each sub button MC is attached, by referencing the identifier ('subButton') that we gave the button earlier. The subButton is then assigned to 'b', which we can then use to reference it.

Line 13 - When the buttons scroll down, each will appear from behind the previous one, so when they're created they need to be attached on a level below the preious button. So, the countDown variable is used on line 21 to give the subButtons a level, and then decreased by 1, for the next button appears to appear on a level below.

Line 14 - 'b' (The current subButton MC) is told to stop since it has 2 frames.

Line 15 - 16 - The subButtons are positioned at xStart and yStart, which were decalred at the top earlier.

Line 17 - A interval' property is then given to the 'b'. The interval, which was created earlier, is multiplied by 'i', so the buttons descend sequentially.

Line 18 - When the 'mainButton' is pressed, each subButton needs a target Y position to scroll down to. So the subButton height is multiplied by 'i' and then added on to the star position of the sub buttons. This valued is assigned to the target property.

Line 19 - A property is then created for each button called txt. This will hold the page, form the menu array, that the pagesMc will go to when the buttons is pressed.

Step 11.

Line 20 - An onPress function is given to 'b'

Line 21 - The closeMenu function, which is about to be created, is called.

Line 22 - The pages MC is then told to go to the page that was assign to the txt attribute assigne dto the button.

Line 23 - A function is going to be created to tell the sub button to go to it's roll over state (frame 2) whenever it's rolled over. When the sub button is pressed, the buttons's state must change back to the default (frame 1).

Line 25 - 30 - The roll over and out functions are created.

Line 31 - Each sub button is set to be insible when they are first created

So, now that we've added the menu buttons and sections using actionscript, go to Advanced Drop Down Menu - Part 4) Adding Functionality to the Buttons

Part: 1 | 2 | 3 | 4