Loading Menu from XML
If you would rather stay away from actionscript you can build your menu using an xml file. The xml file has to be formatted in a certain way otherwise the component will not be able to translate your xml document into a menu. There are two ways to build your menu using an xml file. You can either define an external xml file location and have the component load it and display it, or you can import an xml file and have it included in the Flash Movie at compile time. Either way, the xml needs to be formatted in a particular way for the component to understand it.
The node names are irrelevant, the zoomMenu component replicates the hierarchy of the xml document regardless. Whitespace in your xml document is also ignored. It does however go through each node in the xml document looking for valid Menu Item nodes. A valid Menu Item node is simply an xml node that has the required attributes. The following nodes are all valid Menu Item nodes:
<products backgroundColor="0xFFCC00" label="Products" /> <services r="1" c="1" backgroundColor="0xFF0000" label="Services" /> <contact backgroundColor="0xFFCC00" labelColor="0xFFFFFF" label="Contact" /> <someRandomNodeName backgroundColor="0xFF0000" labelColor="0x000000" labelPlacement="bottomRight" label="Some random Node" />
A Menu Item node can have the following attributes:
The following attributes are required:
If you don't specify an r attribute or a c attribute then the component will place the menu item in the next available grid cell.
If you don't specify a labelColor attribute then the default labelColor is used. The default labelColor is White (0xFFFFFF) but it can be changed in the Component Inspector. See Component Configuration.
If you don't specify a labelPlacement attribute then the default labelPlacement is used. The default labelPlacement is topLeft but it can be changed in the Component Inspector. See Component Configuration.
If you don't specify a gridSize attribute then the default gridSize is used. The default gridSize is 2 but it can be changed in the Component Inspector. See Component Configuration.
Loading an External XML File
Here we will show you how to set up your component so that it will load the structure of your menu from an external xml file at run-time. We will also show you how to correctly structure your xml document such that the component can understand it.
Let's start by creating a new xml file in your favorite xml editor (for example, Dreamweaver 2004).
All xml documents must have a root node, this is how the root node should look:
<node label="zoomMenu"></node>
Now, for this example we are going to create a menu that contains four main menu items:
To do this, we need to create four valid menu item nodes inside the root node:
<node label="zoomMenu">
<node c="0" r="0" backgroundColor="0x006600" gridSize="2" labelColor="0xFFFFFF" labelPlacement="topLeft" label="Products" />
<node c="0" r="1" backgroundColor="0xE8AB00" gridSize="2" labelColor="0xFFFFFF" labelPlacement="topLeft" label="Services" />
<node c="1" r="0" backgroundColor="0x12577C" gridSize="2" labelColor="0xFFFFFF" labelPlacement="topLeft" label="About Us" />
<node c="1" r="1" backgroundColor="0x990000" gridSize="2" labelColor="0xFFFFFF" labelPlacement="topLeft" label="Contact Us" />
</node>
We would get a much greater zooming effect if we add more menu items inside of the main menu items. This adds the feeling of depth to the menu.
So, now we'll add a couple of Products to our menu:
<node label="zoomMenu">
<node c="0" r="0" backgroundColor="0x006600" gridSize="2" labelColor="0xFFFFFF" labelPlacement="topLeft" label="Products"> <node c="2" r="2" backgroundColor="0x448BBF" gridSize="2" labelColor="0xFFFFFF" labelPlacement="topLeft" label="First Product" />
<node c="1" r="2" backgroundColor="0x2E75A9" gridSize="2" labelColor="0xFFFFFF" labelPlacement="topRight" label="Second Product" />
<node c="1" r="1" backgroundColor="0x448BBF" gridSize="2" labelColor="0xFFFFFF" labelPlacement="bottomLeft" label="Third Product" />
<node c="2" r="1" backgroundColor="0x2E75A9" gridSize="2" labelColor="0xFFFFFF" labelPlacement="bottomRight" label="Fourth Product" />
</node>
<node c="0" r="1" backgroundColor="0xE8AB00" gridSize="2" labelColor="0xFFFFFF" labelPlacement="topLeft" label="Services" />
<node c="1" r="0" backgroundColor="0x12577C" gridSize="2" labelColor="0xFFFFFF" labelPlacement="topLeft" label="About Us" />
<node c="1" r="1" backgroundColor="0x990000" gridSize="2" labelColor="0xFFFFFF" labelPlacement="topLeft" label="Contact Us" />
</node>
In practice, you could add five menu items inside of each of the products or add two more menu items inside of the contact menu item and so on and so forth. You are not restricted to any number of levels deep, however it is recommended that you keep the number of levels to around 5 or 6. Any more than this and Flash, due to the way it rounds numbers, will start to get an inaccurate zoom effect.
The number of child menu items inside of each menu item is restricted. The restriction varies depending upon your Grid Size (See Component Configuration).
Remember, each cell in the grid of a menu item can only contain one child menu item. Therefore if your Grid Size is 3, there are 3 rows and 3 columns, which means that there are 9 available cells:
3 * 3 = 9
Now save this xml document. For this example save it as 'menu.xml'.
We now need to tell the zoomMenu Component which xml file it should use to create the menu.
So, open Flash, create a new Flash Document (File > New > Flash Document) and drag an instance of the zoomMenu component onto the stage.
Select the component instance on the stage and then open the Component Inspector (Window > Development Panels > Component Inspector) .
Ensure that the Parameters tab is selected and then click the Structure button.
You will see a field called 'External XML File'. In this field can enter the location of an xml file which the zoomMenu component can use to build its menu at run-time.
The 'External XML File' field can contain any valid URL. It can be relative or absolute, it can be a file on the internet or a file on the same server as the Flash Movie:
In this example, we simply need to enter 'menu.xml' for the value of the 'External XML File'. When you enter something into the 'External XML File' field everything else is disabled.
Now, save this Flash Document in the same folder as the xml file we created earlier (File > Save As) and then test your movie (Control > Test Movie).
You should now see your menu.
Importing an External XML File (Flash MX 2004 7.2+)
Here we will show you how you can use the Component Inspector to import an external xml file and include it in the Flash Movie when it is compiled.
First open Flash, create a new Flash Document (File > New > Flash Document) and drag an instance of the zoomMenu component onto the stage.
Now select the zoomMenu component that's on the stage and and open the Component Inspector ( Window > Development Panels > Component Inspector)
Ensure that the Parameters tab is selected and then click the Structure button.
Press "import XML". You can browse for the XML file to import.
Press "Ok" once you have located the XML file and the XML contents should then be read into the zoomMenu component.