Basic Tutorial
The easiest and quickest way to start using the zoomMenu component is to create your menu using the Component Inspector.
The first thing you need to do is to drag an instance of the component onto the stage. Resize the bounding box to the desired size.
Note: When the zoomMenu component draws itself, its width and height will be equal to its width (to ensure that squares do not become rectangles). For more information on the size of the zoomMenu Component see Grid Layout.
If you are to think of the zoomMenu as a way of visualizing a tree of data, you will see that it consists of various levels (branches) in a hierarchy. The zoomMenu component allows you to drill down through these levels.
To begin customizing your zoomMenu component you will need to open the Component Inspector. To open the Component Inspector, select the zoomMenu component on the stage and then open (Window > Development Panels > Component Inspector)
Ensure that the Parameters tab is selected.
The zoomMenu Component Inspector consists of two different sections which allow you to customize the component:
To jump to a section, click on one of the titles and its contents will move into view.
Adding a Menu Item
The first thing you need to do is define the structure of the menu, we do this in the Structure section, so click the Structure button.
Click on the main menu item called zoomMenu to select it. Menu Items will be highlighted with a blue color when they are selected. When a menu item is selected in the tree, you can add child menu items to it using the Add button.
Click the Add button and you will see the New Menu Item window appear.
This window allows you to create a new menu item as a child of the selected menu item. The Window title will display the label of the selected menu item for convenience.
You must specify a label for the new menu item otherwise you will not be able to click the Ok button. Enter the label for your menu item in the Label field.
You can then specify where the label will be displayed inside of the menu item by selecting a position from the Label Placement dropdown list (default is Top Left corner).
You can then specify the color of the label by clicking on the Label Color swatch, move your mouse around the color palette and click on the desired color. You can also enter a hex color by opening the color palette and then clicking inside of the hex field at the top and then you can type the desired hex code (default is Black - #000000).
The same goes for the background color of the menu item. Click on the Background Color swatch and choose your desired color from the color palette. (default is White - #FFFFFF)
The Row, Column and Grid Size fields are for advanced users only and can be ignored for now. See Grid Layout
Click the Ok button to create the new menu item or click the Cancel button at any time to close the window.
Ensure you have Live Preview enabled (Control > Enable Live Preview)
Your zoomMenu component on the stage should now contain one colored square with the label that you specified (in this case "Products"). Any changes that you make to the component can be seen on the stage.
To add a menu item as a child of another menu item, simply select that menu item and then click the Add button.
If the Add button is disabled when clicking a particular menu item, that is because you are limited to the number of child menu items that you can add to any given menu item. This is dependent on the gridSize for that particular menu item. If the gridSize you specified is 2, then there are 2 rows and 2 columns in the grid for that particular menu item, which means that there are 4 available cells. Therefore you are limited to adding only 4 child menu items. For more information see Grid Layout
To find out the gridSize of a menu item, or to change it, please read the Editing Menu Items tutorial below. The default gridSize for all menu items is 2.
Editing Menu Item's
To modify a particular menu item you need to select it in the Structure section. Open the Structure section by clicking on the Structure button.
Now in the tree you will see the hierarchy of your navigation system. Click on the Menu Item that you want to edit and it will be selected. Now click on the Edit button at the bottom of the screen
The Edit Menu Item window will appear.
Modify the desired settings for this menu item and then click the Ok button to confirm your changes. If you selected the wrong menu item then click the Cancel button.
Removing Menu Items
To remove a particular menu item you need to select it in Structure section. Open the Structure section by clicking on the Structure button.
Now in the tree you will see the hierarchy of your navigation system. Click on the Menu Item that you want to remove and it will be selected. Now click the Remove button at the bottom of the screen
By default a warning message will appear that asks if you are sure that you want to remove this menu item.
If you click Yes, then the selected Menu Item will be removed. If you click No, then nothing will happen.
Note: Removing a menu item that has children will also remove all of the children.
To turn off the warning that appears when you attempt to remove and item, see the Component Configuration page for more information.
Exporting an XML File (Flash MX 2004 7.2+)
You can use the zoomMenu Component Inspector to build your menu structure as shown above and then export an external xml file that contains that structure.
You can then tell the zoomMenu component to load this external xml file. See Loading Menu from XML
This option is provided because sometimes you may prefer to have a separate XML file that can be changed really easily without opening Flash.
All you need to do is open the Component Inspector (Window > Development Panels > Component Inspector)
Ensure the Parameters tab is selected and then click on the Structure button.
Build a menu structure that you want to export and then click on the Export XML button in the bottom right corner.
A dialog box will open. Use this dialog box to find the location where you want to save the exported xml file.
Enter a name for the exported xml file in the 'File Name' field including the ".xml" extension and then click the Save button.
That's it. You can now open the file in your favorite text editor for future editing.