Basic Tutorial
In the following tutorial we will go through the basic usage of the BJC Drop Menu. Follow the steps for easy understanding of the component.
1. Open Notepad or any text editing application.
2. Add the following code:
<?xml version="1.0" encoding="utf-8"?>
<menu>
3. The XML-nodes for the main menu items look like this:
<mainitem title="Main item 1" link="$2" target="" enabled="true" icon="ico01">
<subitem title="Sub item 1" link="$contacts" target="" enabled="true" icon="ico02" />
<subitem title="Sub item 2 " link="http://www.flashloaded.com" target="_blank" enabled="true" icon="ico02" />
<subitem title="Disabled sub item" link="$3" target="" enabled="false" icon="ico02" />
</mainitem>
4. The main item in this example will have it's title set to 'Main item 1'. In the link attribute, the $ -symbol in front of a number means that the link is to a frame number. The $ -symbol in front of a string means that link is to a frame name.
5. If the link attribute is set to an URL (in this case to 'http://www.flashloaded.com'), the item will work as a link to a internet source. You can also set the target attribute to define where the browser window will be opened.
6. The enabled attribute defines the availability of the item. If set to true, the item will be enabled.
7. The icon attribute is the linkage id of a movieclip that will be attached as an icon. The icon will be resized to fit in the item.
8. As described go through the steps from 3 to 7 for each main item.
9. Add the following code to the last line:
</menu>
10. Save the XML-file. Set the name of the file to menu.xml, and make sure the encoding is set to UTF-8. Save the file in the same directory as the FLA-file will be.
Open Flash MX2004 and create a blank file in the same directory as the XML-file. Follow the steps to create the menu.
1. Drag the BJC Drop Menu component from the components panel on your stage.
2. Set the frame rate to 20-30 fps for smooth effects.
3. Resize the menu. In the vertical modes, the width of the main menu items will be the same as the component width. In the horizontal mode the width of the main menu items will be related to the length of the item title. Main menu items outside the component will not be shown.
4. Set the Source to the xml-file you created. In this case menu.xml.
5. Set the Callback parameter to 'myCallback'. You can add the following code to the main timeline of your application:
function myCallback( main, sub ) {
trace( "main item: " + main + ", sub item: " + sub ); // this code will run when the user clicks on a menu item
}
6. Select the Mode of the menu. In the vertical mode the menu items will be above each other and in the horizontal beside each other.
7. Set the Item padding parameter. This parameter defines the space between menu items.
8. Create a new font in the library by clicking on the menu icon on the right side of the library window. Select the font you want to use, and set the linkage id to Font1.
9. Set the Font parameter to Font1.
10. Set the text alignment and the component colors as you wish.
11. Test the menu by pressing Ctrl+Enter.
12. Play with the effect parameters for different results.