Importing XML Data

Importing XML Data

Flash CS4 ActionScript 3.0 Tutorial

 

How to Add External XML Data for Use in Flash

 

 

XML files have multiple uses in Flash. Flash can evaluate the data and fill a text field. The information can be used to load an Array with multiple values. Another application is to provide access to an XML file so flash can retrieve specific information as necessary.

In this example we will create a Flash file with a Dynamic text field and an external XML file. The text from the external file that describes each member will appear in the text field. If you wish to change the content of the txt 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 File with HTML Formatting, Loading a Single Array with XML Data and Loading Multiple Arrays with XML Data.

Tutorial Elements

Text file with name ExternalData01.xml. File should be located at the same level as your fla file.

Three Dynamic text field with instance names of textBox00_txt, textBox01_txt and textBox02_txt.

 

Step One

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

Step Two

Add a new layer and name the top layer Actions and the lower layer Content.

Step Three

Click the first frame of the Content layer and add a Dynamic text field to the stage with the Text tool.

Step Four

Using the Selection tool, click the box and set the font Size to 12 in the Properties panel.

Step Five

With the Properties panel still open, set the width (w) and height (h) to 200 and 25. Behavior should be set to Single line.

Step Six

Duplicate the text box two times by choosing Edit>Duplicate (Cmd/d (PC - Ctrl/d)). Move the boxes so they form a single column with three rows.

Step Seven

For the top box, enter textBox00_txt for the instance name in the Properties panel.

Step Eight

Select the middle box and enter textBox01_txt for the instance name in the Properties panel.

Step Nine

Select the bottom box and enter textBox02_txt for the instance name in the Properties panel.

Step Ten

Open a new text document and copy paste the following text:

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

<MemberList>

<Member>

<Name>Bill</Name>

<Occupation>Carpenter</Occupation>

</Member>

<Member>

<Name>Wilma</Name>

<Occupation>Photographer</Occupation>

</Member>

<Member Name="Malcolm" Occupation="Consultant" />

</MemberList>

Step Eleven

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

Step Twelve

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

Step Thirteen

Copy/Paste the following code in the ActionScript Panel:

var extLoader:URLLoader=new URLLoader();

extLoader.load(new URLRequest("ExternalData01.xml"));

extLoader.addEventListener(Event.COMPLETE, onLoaded01);

function onLoaded01(e:Event):void {

var memberData:XML=new XML(extLoader.data);

var memberName00:String=memberData.Member[0].Name;

var memberName01:String=memberData.Member[1].Name;

var memberName02:String=memberData.Member[2].@Name;

var memberOcc00:String=memberData.Member[0].Occupation;

var memberOcc01:String=memberData.Member[1].Occupation;

var memberOcc02:String=memberData.Member[2].@Occupation;

textBox00_txt.text=memberName00 + " - " + memberOcc00;

textBox01_txt.text=memberName01 + " - " + memberOcc01;

textBox02_txt.text=memberName02 + " - " + memberOcc02;

}

Step Fourteen

Save your Main.fla file

Step Fifteen

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

Dissecting the Code

The XML text at Step Eleven organizes the data in a way that Flash understands. The first line of code defines the XML version. The second line starts the MemberList. For every opening tag there will be a closing tag in the document. In other words, <MemberList> opens and </MemberList> closes.

Inside the MemberList are the three members, Bill, Wilma and Malcolm. Each member has a Name and an Occupation. Notice that the third member is formatted different than the other two. You can format your XML either way and still access the data. You will see from the code in Step Fourteen, that to get Malcolm's data it requires a modified version of the code.

The code at Step Fourteen starts by establishing a new URLLoader variable named extLoader. Line two loads the external XML file into the loader.

At line three we add an event listener to extLoader. Once the external file is loaded, the onLoaded01 function is run.

The onLoaded01 function establishes a XML variable and six String variables to store the XML data.

The final three lines display the individual pieces of XML data in the three text fields on the stage.

Creating an XML File in Dreamweaver

To open a new XML file in Dreamweaver, choose File > New and select XML from the open screen.

Formatting Your XML Files

If you are creating your XML files in Dreamweaver, you can quickly format the file to make it easier to read by clicking the Format Source Code icon and choosing Apply Source Formatting.

 

Contribute Ad