XML Files

XML Files

Flash CS4 ActionScript 3.0 Tutorial

 

How to Add External Text Files for Use with Flash ActionScript

 

 

XML files have multiple uses in Flash. A XML file is a text file with information that can be utilized by Flash to data that can be used to populate text grids and define images and their descriptions. You can create an external XML file using a text editor program (avoid Word), Dreamweaver or a xml editor application.

In this example we will create a Flash file with a DataGrid component and an external XML file. The contents from the external file will appear in the DataGrid component. If you wish to change the contents of the XML file, simply replace the current file with an updated file on the server.

For additional information on XML files, see topics, Commenting XML Files, Importing XML Data, Importing XML Data with HTML Formatting, Loading a Single Array with XML Data and Loading Multiple Arrays with XML Data.

 

Step One

Open a new Flash document and save the file as Main.fla in a folder called Project.

Step Two

Name the default layer Actions.

Step Three

Open the Components panel (Window > Components) and double-click the DataGrid icon to add a DataGrid to the center of the stage. The DataGrid and it's assets are also added to the Library.

Step Four

Using the Selection tool (v key), click the DataGrid. Delete the DataGrid from the stage. Since it is in the Library, we will introduce it to the stage with ActionScript.

Step Five

Open a new text or XML document and Copy/Paste the following text:

<?xml version="1.0" encoding="utf-8"?>

<MemberInfo>

<Member Name="John" Occupation="Designer" City="Seattle" />

<Member Name="Mary" Occupation="Doctor" City="New York" />

<Member Name="Sally" Occupation="Architect" City="Denver" />

</MemberInfo>

Step Six

Save your xml file next to the Main.fla file inside the Project folder. Name the file, ExternalData01.xml.

Step Seven

Open the ActionScript panel for the only keyframe in the Actions layer by Option double-clicking (PC - Alt double-clicking) the keyframe.

Step Eight

Copy/Paste the following code in the ActionScript Panel:

import fl.controls.DataGrid;

import fl.data.DataProvider;

var request01:URLRequest = new URLRequest("ExternalData01.xml");

var loader01:URLLoader = new URLLoader();

var grid01:DataGrid = new DataGrid();

grid01.addColumn("Name");

grid01.addColumn("Occupation");

grid01.addColumn("City");

grid01.width=300;

grid01.height=85;

grid01.move(110, 50);

addChild(grid01);

loader01.load(request01);

loader01.addEventListener(Event.COMPLETE, onComplete);

function onComplete(e:Event):void {

loader01=e.currentTarget as URLLoader;

var externalData:XML=new XML(loader01.data);

var provider01:DataProvider=new DataProvider(externalData);

grid01.dataProvider=provider01;

}

Step Nine

Click the Auto Format button to format the code.

Step Ten

Save your Main.fla file.

Step Eleven

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The DataGrid appears on the stage with the contents of the external XML file.

Dissecting the Code

The code at Step Five sets the values for each member. This includes their Name, Occupation and City. Since it is an external xml file, you can quickly update any changes to your member list.

The first two lines of the code at Step Eight import the necessary code to talk to the DataGrid and DataProvider classes. The next three lines establish three new variables, one for the URLRequest, the second for the URLLoader and finally the DataGrid. The variables are named request01, loader01 and grid01 respectively.

The next block of code assigns names to the columns, sets the grid size and location, then adds it to the stage.

The external data is then loaded into the loader01 variable.

An event listener is added to loader01 to make sure the external XML file is completely loaded. If loaded, the onComplete function is run.

Inside the function, grid01 is connected to the data in the external XML file.