If youd like to download the file used in this tutorial to practice these techniques, visit www.layersmagazine.com and navigate to the Magazine section. All files are for personal use only.
At some point, nearly every Flash application needs to access some form of external data, which is usually in the form of an XML file. Learning how to load and process an XML file is a vital skill to have in your Flash arsenal. In this tutorial, well load in data from an XML file and display it inside of the built-in DataGrid component in Flash.
1 VIEW THE STARTER FILES
Download the exercise file for this tutorial at www.layersmagazine.com and unzip it onto your desktop or other location of your choosing. Open Flash CS4 and then open the items.xml file by choosing File>Open and then navigating to it in the Open dialog. Flash actually has a minimalistic XML editor built in that shows you the XML data nicely formatted with color-coding. Now create a new ActionScript 3.0 document by choosing File>New and choosing Flash File (ActionScript 3.0) in the New Document dialog. Choose File>Save As and save this file into the same directory as the XML file that you have open.
2 INSPECT THE XML FILE
If youre already familiar with XML, then feel free to skip ahead to Step 3. For the rest of you, lets take a look at the structure of the items.xml file. The first line is called the XML declaration and it simply declares that this is an XML document. Every XML needs to have a root tag that contains all the other tags. In this case, its the tag found on line 2. Inside of that youll see a series of tags. These contain the actual data that well display inside of Flash.
3 SET UP THE FLASH DOCUMENT
Go back to the new Flash document you created in Step 1. Double-click the first layers name and rename it grid, as it will contain the DataGrid component. Click the New Layer icon at the bottom of the Timeline panel and name the new layer actions. This layer will hold all of our ActionScript code. Lock this layer so that you cant accidentally add any visual assets to it. The act of keeping all of your code on a single layer is considered the best practice and will keep your Flash projects more organized and clean. Consider making a template with this layer structure.
4 ADD THE DATAGRID COMPONENT
Although not used very often, Flash comes with a wide assortment of prebuilt UI components for you to use. Open the Components panel by choosing Window>Components. Inside of the User Interface folder youll see the DataGrid component. With the grid layer selected, click-and-drag the DataGrid component onto the Stage. In the Property Inspector, give it an Instance Name of grid. Position it at the top left of the stage. Now, get the Free Transform tool (Q) and Option-drag (PC: Alt-drag) the bottom-right corner to resize the grid and make it fill the Stage.
5 SET DATAGRID OPTIONS
All of the components that come with Flash have various options that you can set in the Component Inspector panel. With the DataGrid selected on the Stage, choose Window>Component Inspector. As you can see, there are many options available for adjustment, such as the height of the header and rows, as well as how you want the scrollbars to behave. Change the sortableColumns property from true to false as we wont be using that feature in this example. You can now close the Components and Component Inspector panels.
6 ADD SOME COLUMNS
Click the first keyframe in the actions layer to select it and open the Actions panel (Window>Actions). The first piece of ActionScript that well write adds columns to the DataGrid component on the Stage. Type the code you see in the image above into the Actions panel. This adds three columns into the DataGrid, which matches the data we have contained in the XML file. You can name these columns whatever you like. For this example, Ive kept things simple. Test the movie by pressing Command-Return (PC: Ctrl-Enter) and you should see the columns in the DataGrid.
7 FETCH THE XML FILE
To get the XML data into the DataGrid, the first thing youll need to do is create a new instance of the URLLoader class. This is the class that will go out and retrieve the external XML file for you. When you create this object, you need to pass in the URL to the XML file inside of an URLRequest object. In this example, the XML file is in the same folder, so its simply items.xml. Type the highlighted code from the image above into the Actions panel.
8 SET UP THE COMPLETE LISTENER
In the last step, we sent the URLLoader out to fetch our XML file. Now we need to let it know how to reach us when it finishes its work. We do this by registering for the complete event and have it call a function named onComplete. Type the highlighted code you see in the image above into the Actions panel. On line 6 we register for the event and then on line 8 we create the onComplete function that will be called when the data is returned.
9 PASS DATA INTO XML OBJECT
When the URLLoader comes back with the data and notifies us by calling the onComplete function, we can then begin working with it. The first thing we need to do is take the raw data that was returned and put it inside of an XML object. Type the highlighted code into the Actions panel. On line 10 we take the data from the URLLoader object and pass it into a new XML object. From this point forward, Flash sees this data as XML rather than simple text.
10 GETTING TO THE ITEMS
Now that we have our data as XML, we need to get to the information contained inside of the series of item tags. To do this we need a little bit of E4X, which is a new way of dealing with XML data that was introduced in ActionScript 3.0. If you do a lot of XML work, definitely get a good reference on E4X, as its very powerful. Type the highlighted code above into the Actions panel. On line 11 we create a new instance of the XMLList class and assign to it all of the item elements from the XML.
11 LOOP THROUGH THE ITEMS
Now that we have all of the items stored in the XMLList object, we can loop through them and add them to the DataGrid. Before we do that we need to store the number of items in a variable so we dont have to continually calculate that number as we go through the loop. This isnt required but its a highly recommended best practice. Type the highlighted code above into the Actions panel. Line 12 stores the number of items in a variable called len and line 13 creates a simple for loop structure.
12 ADD ITEMS INTO THE DATAGRID
The last thing we need to do is add the item data into the DataGrid so that users can see it. We do this by calling on the DataGrid.addItem method and passing in the data for that row. We pass in the data as an object where we tell it which piece of data goes into each column. We retrieve the actual data by accessing the current row number that is held in the i variable. For instance, to get the name of the product in the first row we could use itemList.name. Enter the highlighted code you see above.
13 VIEW THE FINISHED GRID
Test the movie and you should see the XML data displayed nicely in the DataGrid. There are many advanced options available like having the ability to sort columns, as well as completely restyling the data to make it look however you want. Look in the Flash help files to see the full capabilities of this and other components. As a side note, if you plan on using a lot of components in your application, you may want to look into using the Flex framework, which has a much richer set of components.
14 THE BENEFITS OF XML
At this point some of you may be wondering why any of this was necessary. I mean, we couldve just put in the item data directly into the DataGrid inside of our ActionScript code. While that is true, the real power of XML is that you can change the data in your application at any time simply by modifying the XML file. Imagine if you had to open Flash and modify ActionScript code every time your data changed. This is what makes XML such a powerful tool in your Flash toolkit.