Loading Multiple Arrays with XML Data

Loading Multiple Arrays with XML Data

Flash CS4 ActionScript 3.0 Tutorial

 

How to Add External XML Data into 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 multiple Dynamic text fields and an external XML file. The XML data from the external file will be loaded into multiple Array variables. We will then view the contents of the Arrays. If you wish to change the content 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 File with HTML Formatting and Loading a Single Array 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"?>

<ObjList>

<Object>

<Color>Red</Color>

<Shape>Circle</Shape>

</Object>

<Object>

<Color>Green</Color>

<Shape>Square</Shape>

</Object>

<Object>

<Color>Blue</Color>

<Shape>Triangle</Shape>

</Object>

</ObjList>

Step Eleven

If you are using Dreamweaver to create your xml text, choose Commands>Apply Source Formatting to format your code.

Step Twelve

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

Step Thirteen

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

Step Fourteen

Copy/Paste the following code in the ActionScript Panel:

var extLoader:URLLoader=new URLLoader();

var colorArray:Array=new Array;

var shapeArray:Array=new Array;

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

extLoader.addEventListener(Event.COMPLETE, onLoaded01);

function onLoaded01(e:Event):void {

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

for (var i=0; i<3; i++) {

colorArray[i]=colorData.Object[i].Color;

shapeArray[i]=colorData.Object[i].Shape;

}

textBox00_txt.text=colorArray[0] + " " + shapeArray[0];

textBox01_txt.text=colorArray[1] + " " + shapeArray[1];

textBox02_txt.text=colorArray[2] + " " + shapeArray[2];

}

Step Fifteen

Click the Auto Format icon to format the code.

Step Sixteen

Save your Main.fla file.

Step Seventeen

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 ObjList. For every opening tag there will be a closing tag in the document. In other words, <ObjList> opens and </ObjList> closes.

Inside the ObjList are the three Objects. Inside each of those objects is a Color and a Shape.

The code at Step Fourteen starts by establishing a new URLLoader variable named extLoader. Array variables named, colorArray and shapeArray are also added. Line four loads the external XML file into the loader.

At line five 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. A for statement is added to assign the XML data to the colorArray and shapeArray objects.

The final three lines display the colorArray and shapeArray values 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.

 

Royalty-Free Stock Video at Pond5