Flash10:ActionScript2:Importing XML into Dynamic Text Boxes

Introduction
Using XML allows you to keep you data separate from the flash file to facilitate easy updates. Use XML to house the text and contain references to other files, eg images.

Setting Up
Create an XML file. For the purpose of this exercise, copy the one below, or copy and paste into a text editor. Mac users - do not use TextEdit, it wont work!

Save in a folder as people.xml.

Create the FLA
Open Flash, create a new Actionscript 2 File. Create a new layer. On this layer add two text fields, one with the word Name in it, the other with about. Create a new layer. Add two dynamic Text boxes, multiline. Give one the instance name - name_txt, and the other comment_txt. Create a new layer. Add a button. The button is going to have the actionscript attached to populate your textboxes with the data parsed from the xml file. Save in the same folder as the xml file you just created.

It should look something like this:



The Actionscript
Click on your newly made button. Control-Click(Mac) or right-click(PC) and choose actions to bring up the actions panel. Insert the following actionscript, just cut and paste at this stage and then we can go through each section with an explanation.

All Actionscript available from the Adobe Flash Support Center.

Test your movie. Click on the button, the output should look something like this:



Display all Nodes in a Dynamic Text Box
You can use Actionscript to loop through all the nodes in your XML file and display them in a text box. Using the previous example, re-save your FLA with a different file name. Delete the dynamic Text Box name_txt and the text box with the word name in it. Add a UIScrollbar to the text box. Open the Actionscript panel. We are just going to add a for-loop and change the way the results are displayed. Follow the code below and note the small changes.

Test your movie, click on the button and now all the nodeValues show appear in the text box.



Loop through an XML document and display the contents with a forward and back button
Open your original FLA file. Delete the actionscript attached to the button. Delete the button. Add two new buttons from the components library. Give them an instance name of next_btn and back_btn, alter the label on the buttons to reflect the changes.



Create an actions layer and attach the following actionscript to the layer on frame 1.

Some of this stuff is looking very familiar about now!! You wont need to add any ActionScript2 to the buttons. The button action is called by the addEventListener function. Test your movie. If all going well, you should now be able to click through the entire XML file! Make things interesting: Add some more people and comments to your XML file. The ActionScript2 wont need changing - you should still be able to click through to the last entry.

The Result
Added into this working example is a picture to accompany each person and their information!

The Actionscript Explained
The actionscript is divided into distinct sections which perform various tasks. The first four lines are common to any situation when an XML document needs to be accessed regardless of its purpose.

Firstly you create an instance of the XML object.

Setting ignoreWhite to true, excludes all white-space from the XML file when it is parsed. This only includes the white spaces between the nodes. Any white-space within a text node, including leading or trailing whitespace, is preserved. (Webb, 2005).

Then, use the XML object to load the XML file. The XML file needs to be in the same directory as your FLA file.

The next line is basically saying on a successful load of the XML file, create a success function and then stuff can happen.

After a successful load of the XML file, an array is created that holds all the information contained within the root element including all the childNodes.

Alternatively an array can be created as follows:

The next two lines create variables that hold the nodeValue or content of a particular childNode in whatever position in the array. In this case, we are looking at the second placed item in the myPeople array - (remembering that the first position in an array is numbered 0), the childNode of 0, which is the first childNode of the 2nd item, and the value of the firstChild node and assigning that to the variable personName. The second variable holds the value of the second childNode of the second item as loaded into the array.

The next two lines assign the variables to the text field of the textboxes.

Trace is a useful action that places output into the output panel, and is often used during the development stage to indicate either success or failure of certain actions, so is really useful for debugging purposes.

In the second example, a loop is used to cycle through the array and as each nodeValue is added to the variable, accumulate each concantenated string and return to the text field of the text box. Give the text some new lines for display purposes and layout.

The third example introduces buttons to move through the array entries and display the entry currentPerson. The currentPerson variable is initially set to the first person (position 0 in the array), this value is then either incremented or decremented and the result displayed in the text box depending on which button is clicked.

Resources
A good resource for understanding arrays and how to manipulate the array contents can be found at Kirupa.com - Arrays

Importing XML and using CSS to Format (For Flash MX but works the same in CS4 - Actionscript 2) Loading External XML formatted Content

About the basics of loading the XML file Foundation Flash - XML in Flash