Creating a menu

This tutorial explains how to create a menu using the the slideMenu component.

1. Drag and drop the slideMenu onto the stage.

2. Set the width and height of the slideMenu either in the properties panel or using the transform tool. The size of the slideMenu that's on the stage will determine the size of the mask which displays the amount of icons that are visible at a time.

3. Give the slideMenu component an instance name, e.g. myslideMenu

4. Create movie clips for each icon. The movie clips should remain in the library and should not be placed on the stage.

5. Right click on each icon movie clip that's in the library and select "linkage". Enter an identifier name and select "export for ActionScript" and "export in first frame".

6. Add the following ActionScript code to the main timeline, to the first frame in which the slideMenu component appears:

myslideMenu.addIcon("Details", "icon1");
myslideMenu.addIcon("Details", "icon2");
myslideMenu.addIcon("Details", "icon3");
myslideMenu.addIcon("Details", "icon4");
myslideMenu.addIcon("Details", "icon5");
myslideMenu.addIcon("Details", "icon6");

Note: In the above code, icon1-icon6 are the identifier names that you gave to each icon in step 5. You may replace "Details" with a short word or two that will appear underneath each icon. You may also leave this blank.

7. Enter a name for the callback function in the "callback" property of the component. The callback function will be called whenever an icon is clicked. In this tutorial, we will enter the name cb.

8. Now we'll create the callback function on the main timeline, just below the code that we added in step 6. The callback function that we'll use in this tutorial can be as follows:

function cb(id) {

if (id == 0) {
  loadMovie("movie1.swf", _level2);
} else if (id == 1) {
  gotoAndStop(3);
} else if (id == 3) {
  gotoAndStop(4);
} else if (id == 4) {
  getURL("http://www.flashloaded.com", "_blank");
} else if (id == 5) {
  getURL("http://www.fontsforflash.com", "_blank");
}

}

Note: In the above example, the id refers to the number of the icon that was pressed. The icons are numbered from 0, with the first icon on the left being 0, the second being 1 etc... You may give any actions that you wish to each icon by following the code example above.

The sideMenu will now work correctly, using the default scroll arrows. You may wish to continue this tutorial by adding your own scroll buttons:

Creating custom scroll buttons

If you do not want to use the built-in scroll buttons, you can create your own custom button which can be placed anywhere on the stage that you wish. To do this:

1. Create two buttons/movie clips on the stage (one for left scrolling and one for right scrolling).

2. Give the button on the left an instance name of bwd and the button on the right an instance name of fwd.

3. Add the following code to the main timeline, just above the code that you added in step 6 above, in order not to view the built-in scroll buttons:

myslideMenu.viewButtons(true);

4. Add the following code under the code that you just added in step 3 in order to give actions to these buttons:

fwd.onRelease = function() {
myslideMenu.scrollLeft();
};
bwd.onRelease = function() {
myslideMenu.scrollRight();
};

You may now test your movie.