Creating XML-based menus with Flash CS4 and Flex

In this tutorial, i’ll be showing you how to use the Flex Component Kit, XML, Flash CS4 and Flex 3 to build an extensible, aesthetically pleasing and interactive menu system. Each ingredient in this tutorial is of equal important (with the exception of XML which can easily be replaced with JSON, CSV, etc).

First, a preview of what i will be covering in this tutorial:

In the SWF file above, an XML file is being processed and x amount of menu items are being created at runtime according to the XML specification of the menu. In the SWF above, i’m using the following XML file:

1
2
3
4
5
6
7

<menu>
	<item label="The Dark Side Of The Moon"/>
	<item label="Wish You Were Here"/>
	<item label="Delicate Sound Of Thunder"/>
	<item label="The Division Bell"/>
	<item label="Pulse"/>
</menu>

Click here to download the exercise files for this tutorial.
You will also need to download and install the Flex Component Kit from here.

Alright, so let’s dive right in.

So what are we exactly trying to achieve here? We’re trying to:

1. take a symbol that we have created in Flash CS4 and export it
2. import the symbol into Flex
3. create an XML-based menu with instances of the symbol

Step 1

Open the flash folder in the exercise files and open the MenuItem.fla file inside of Flash CS4. (Note: There is nothing Flash CS4-specific in this file, so if you’d like a version of the FLA that’ll work with CS3, pop me an email)

On the stage you will find one symbol – the MenuItem symbol. In the Library, there is a MenuItem symbol that has been exported for Flex, the FlexComponentBase and two other symbols that are used inside the MenuItem symbol.

All that the MenuItem symbol is is a MovieClip with a little animation, a little masking, a dynamic text field and a background MovieClip. The reason why i made the background its own symbol is because you may want to do a color transform tween or something once you roll over the MenuItem symbol. I have not done this in the tutorial, but nonetheless – give it a go if you feel the need.

Once you have installed the Flex Component Kit, you will see that two new items are available in the Commands menu: Convert Symbol to Flex Component and Convert Symbol to Flex Container. Once you have created a symbol inside of Flash, you will select it and select the Convert Symbol to Flex Component from the Commands menu. This will do all the heavy lifting that is required to make it compatible with Flex.

There are a couple of things to note before you export the symbol:

Firstly, you will need to export your symbol for ActionScript by right-clicking the symbol in the library and selecting Properties. Check the box next to Export for ActionScript. Next, choose a name for your symbol to be used in Flex. I have chosen MenuItem as the Class, and i have chosen MenuItemClass as the Base Class.

I will be coming back to this in a moment. For the moment, you can set the Base Class value to mx.flash.UIMovieClip – this class is a modified implementation of the usual MovieClip class you use in Flash, and will make your symbol compatible with Flex. Now select the Convert Symbol to Flex Component option from the Commands menu.

Step 2

Now we’re going to import the newly prepared Flash symbol for Flex. Flex makes use of .SWC files when importing external libraries, so we’re going to export our Flash symbol to a .SWC file. We do this by publishing the FLA. Go over to Flash and hit Shift+F12, or select Publish from File->Publish. This will export our symbol as a SWC file, as well as a SWF file. We will not be using the SWF file.

Now, go over to Flex and import the project in the exercise files. Go to File->Import->Flex Project, and navigate to the path where you exported the exercise files.

Create the Flex project and then go to the Project menu, and select Properties. Find the Flex Build Path option and select the Library Path tab. In this tab, click on the Add SWC button. Navigate to the flash folder in the project and find the SWC file you have recently published.

Now you’re ready to use your symbol inside of Flex! Remember the name of the class you specified in your symbol linkage in Flash? I used MenuItem. Go over to your main application file in Flex, open a new MXML tag and start typing MenuItem. You will see that Flex picks up your Flash symbol in the MXML declaration. Now we’re ready for some real action.

Step 3

As you can see from my Flex example, i am loading in an XML file called structure.xml. This XML file contains a very basic structure – it’s merely 5 items, each with label attributes – and all relating to one of the greatest bands i’ve had the pleasure of listening to… Pink Floyd

If you open up the flash folder of the project, you will find a MenuItemClass.as file. This will act as the base class for your Flash symbol. Go back to Flash CS4, right click on your symbol in the library and click Properties. Now set the Base Class value to MenuItemClass.as. Here’s an explanation of the MenuItemClass.as file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

package
{
	import mx.flash.UIMovieClip;	// UIMovieClip extends the functionality of the standard flash.display.MovieClip class, so you can use play(), gotoAndStop(), etc to control your Flash symbol's timeline like you normally would in Flash
 
	public class MenuItemClass extends UIMovieClip
	{
		public function MenuItemClass()
		{
			super();		// Inheret the super-class' properties and functions
		}
 
		// Setter function for the label dynamic textfield
		public function set label(label:String):void
		{
			textField.text = label;
		}
 
		// Getter function for the label dynamic textfield
		public function get label():String
		{
			return textField.text;
		}
	}
}

Once you have changed your Flash symbol in Flash CS4, remember to re-publish it so that the SWC will be updated in Flex.

Here’s an explanation of the logic in the Menu.mxml file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

private function createMenu():void
{
	var items:XMLList = menuXML..item;		// Search for all items in the XML
 
	for each(var item:XML in items)		// Loop through all items
	{
		var menuItem:MenuItem = new MenuItem();	// Create new instance of the Flash symbol we imported
		menuItem.label = item.@label;		// Set the text property of the dynamic text field to the label of the current item in the XML
		menuItem.height = 45;
		menuItem.xml = item;		// Add the XML of the current item to the xml property of the menuItem variable. Note: this can be named anything since MenuItem's superclass is UIMovieClip which is a dynamic class. You could use menuItem.myBigToe = item if you liked
		addChild(menuItem);		// Add the item to the stage
 
		menuItem.addEventListener(MouseEvent.CLICK, showDetails);
	}
}

And that’s it! That’s how you can use Flash symbols inside of Flex.