Importing XML File with HTML Formatting

Importing XML File with HTML Formatting

Flash CS4 ActionScript 3.0 Tutorial

 

How to Add External XML Files with HTML into Flash

 

 

Text files have multiple uses in Flash. Flash uses the XML file information to fill a Dynamic text field. You can create an external XML files using most text editor programs or Dreamweaver (avoid Word). The advantage to external XML files is that they can be quickly easily updated, keeping your content current.

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 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 Data, Loading a Single Array with XML Data and Loading Multiple Arrays with XML Data.

Tutorial Elements

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

 

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 300. Behavior should be set to Multiline.

Step Six

Enter textBox01_txt for the instance name in the Properties panel.

Step Seven

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

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

<b>External Text File Concepts</b>

This text is loaded to the stage from an external txt file that <i>includes</i>:<li>Returns

Bold

Bullets

Italics

</li>

Step Eight

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

Step Nine

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

Step Ten

Copy/Paste the following code in the ActionScript Panel:

var extLoader:URLLoader=new URLLoader();

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

extLoader.addEventListener(Event.COMPLETE, onLoaded01);

function onLoaded01(e:Event):void {

textBox01_txt.htmlText=e.target.data;

}

Step Eleven

Save your Main.fla file.

Step Twelve

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

Dissecting the Code

The html text at Step Seven performs several formatting tasks. The first line of code defines the XML version. The second line displays as bold with the <b> and </b> tags. The word includes becomes italicized and the words Returns, Bold, Bullets and Italics display as a list.

The first line of code at Step Ten establishes a new URLoader variable named extLoader.

The second line loads the ExternalText01.xml file in the loader.

Line three adds an event listener to detect if the XML data has finished downloading. If complete, the onLoaded01 function is run.

Inside the function, extTextFile, the Dynamic text field is loaded with the external text and evaluated as html.

Creating an XML File in Dreamweaver

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