XML JumpMenu
published on Nov 12th, 2005 // 4 Comments
From Flash MX 2004 up, there are components included that let us include external content. They are very easy to use and take little work with just a few modifications in your component inspector. In this tutorial we will be be using the XML Connector component with a ComboBox component to make a relatively simple navigation system.
You can find the source files for this tutorial here
We will start by using our XML Connector to load data from our xml file called menu.xml. We will then bind the url’s in the xml directly to our ComboBox component
The xml contains a url and a title. we will set the menu to display the title and the data property to get the url.
Open flash and create a new flash file. Open your component panel and drag the XML Connector component onto your stage. It really doesn’t matter where you put it. But we will put it off our stage for now. Next drag a ComboBox component onto your stage
Make the XML Connector instance name menu_xc and make the ComboBox instance name menu_cb. Save your file as menu.fla
Now lets configure your XML Connector. Click on your XML Connector and open up your Component Inspector panel. Enter menu.xml as your URL parameter (I’m assuming that you saved your flash file in the same folder as the XML file we made earlier. If not update the path here). Set the direction to receive. We are ignoring white space (i.e tabs and spaces in your XML file) and leave the other two at there default.
We will now import a schema. The schema describes the rules we are using in our XML document. It sets the names of XML elements and the type of data stored in each one.We are going to import our existing XML file and let flash figure out our schema.
Click on the Schema tab in the Component Inspector. There are two options params and results. We are only concerned with results so pick that.Click the import schema button on the right of the panel and choose your XML file we made earlier.
Now we can see the structure of the XML file
The only setting we need to change here is change read only property to true as we don’t need to be able to update the data.
Now we are going to bind the XML data to the ComboBox. It is worth noting that there are a number of ways to acheive this. We are going to use the simplest way without any of the extra functionality reached using different methods.
Select the Bindings tab and click Add Binding
We shown the structure of our XML content.We need to select the part of the tree to bind to which is item : Array. This contains the two attributes from the XML file sTitle and sURL.
There are a few parameters we have to configure now. Set the direction to out. Click the bound to parameter and then the magnifying glass. In the following window click the ComboBox in the left window and then choose dataProvider : Array in the right window and click ok.
To make the connection to the XML file we need to add a bit of Actionscript. Make a new layer and call it actions and add the following code into frame one of that layer.
menu_xc.trigger();
Test your movie and you should see this
You can see our problem straight away. Our Title and URL appear on the same line where we only want our Title to appear. To fix this select our ComboBox and in the Component Inspector click on the Bindings tab. In the formatter parameter choose Rearrange Fields
Click the formatter options field below the formatter parameter and enter this into the pop-up window.
data=sURL;label=sTitle
Now test the movie and only the Title will appear.
Adding an extra line to your XML will give it more functionality as we don’t want the first menu item selected.
Download this updated menu.xml file to see extra line.
Test your movie again
Now I presume you have tested the menu and you are thinking something is missing? You would be right! We have to add a listener so we know that a site has been selected. To your actions layer add the following code just after your trigger action.
menu_cb.addEventListener("change", loadItem);
function loadItem(evt:Object):Void {
var strURL:String = evt.target.selectedItem.data;
if (strURL<>0) {
getURL(strURL, "_blank");
}
}
Now you have a fully functioning menu. This is only the tip of the iceberg but hopefully this tutorial will give you a head start.
4 Comments
Andy P says:
Brilliant, thank you very much, this is very useful!