Below is the XML data i will be working with in this tutorial:

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

<languages>
	<language year="1999">
		<name>ActionScript 3.0</name>
		<description>ActionScript is a scripting language based on ECMAScript. ActionScript is used primarily for the development of websites and software using the Adobe Flash Player platform (in the form of SWF files embedded into Web pages).</description>
	</language>
	<language year="1995">
		<name>PHP</name>
		<description>PHP is a scripting language originally designed for producing dynamic web pages. It has evolved to include a command line interface capability and can be used in standalone graphical applications.</description>
	</language>
	<language year="1995">
		<name>Java</name>
		<description>Java is a programming language originally developed by James Gosling at Sun Microsystems and released in 1995 as a core component of Sun Microsystems' Java platform. The language derives much of its syntax from C and C++ but has a simpler object model and fewer low-level facilities. Java applications are typically compiled to bytecode that can run on any Java virtual machine (JVM) regardless of computer architecture.</description>
	</language>
	<language year="2007">
		<name>LOLCODE</name>
		<description>LOLCODE is an esoteric programming language inspired by the language expressed in examples of the lolcat Internet meme. The language was created in 2007 by Adam Lindsay, researcher at the Computing Department of Lancaster University.</description>
	</language>
</languages>

Now, say we wanted to parse this XML file using PHP, and extract the name of each of these languages…

1
2
3
4
5
6

<?php
	$languages = simplexml_load_file("languages.xml");
 
	foreach($languages as $language)
		echo $language->name."<br/>";
?>

In the above code, one can extrapolate that SimpleXML will go through your XML file and assign the nodes to an array, and in that array it will create an untyped Object with the data assigned to properties of that Object.

Simple enough, right?

Now, what if you wanted to access an attribute of each of these languages (in this scenario – the year attribute of each language)?
That’s also really easy with SimpleXML! You can reference the attributes of each node by using array notation…

1
2
3
4
5
6

<?php
	$languages = simplexml_load_file("languages.xml");
 
	foreach($languages as $language)
		echo $language["year"]."<br/>";
?>

Ok. So what if you wanted your returned data to be mapped to a class? I.e. each element in the array that is returned must be strongly typed to a class, rather than the unspecific stdClass Object that’s returned by default… This can also be done with SimpleXML!

Here’s the Language.php class i created for the returned array elements to be typed as (note that it ,must extend the SimpleXMLElement class):

1
2
3
4
5
6
7
8

<?php
	class Language extends SimpleXMLElement
	{
		public $year;
		public $name;
		public $description;
	}
?>

…and the code to return each array element as a Language Object:

1
2
3
4
5
6
7
8
9

<?php
	require_once("Language.php");
	$languages = simplexml_load_file("languages.xml", "Language");
 
	foreach($languages as $language)
	{
		print_r($language);
	}
?>

If you look at the output, you will see that the year attribute is not assigned to $year property of the Language class, but rather to a @attributes property. However, if you add this function to the Language.php class, the attributes will be assimilated to their respective properties:

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

<?php
	class Language extends SimpleXMLElement
	{
		public $year;
		public $name;
		public $description;
 
		public function attrToProp()
		{
			foreach($this->attributes() as $prop => $val)
				$this->$prop = (string) $val;
		}
	}
?>

…and run the script again, but adding this line of code:

1
2
3
4
5
6
7
8
9
10

<?php
	require_once("Language.php");
	$languages = simplexml_load_file("languages.xml", "Language");
 
	foreach($languages as $language)
	{
		$language->attrToProp();    // -- add this line
		print_r($language);
	}
?>

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.