ActionScript3:Importing XML into Dynamic Textboxes
|Flash10 (CS4) | Flash11 (CS5) <|
|Table of contents|
Use ActionScript 3 to import external data and display in dynamic Textboxes, using the same XML file used in the ActionScript 2 example of the same name.
By the end of this exercise you should:
Creating the XML file
Create an XML file. For the purpose of this exercise, copy the one below, or copy and paste into a text editor.
Save in a folder as people.xml.
Load the XML
The first thing to do is to check that the XML file that you have created is accessible and can be loaded. The easiest way to do this is to have a message display in the output panel confirming all is well. Create a new ActionScript 3 FLA. Save it. Change the
XML_URL string path to
people.xml if necessary to reflect your own filing system. At this point, nothing needs to be added to the stage, so create an actions layer, click into frame One, open the Actions panel and add the following ActionScript:
Test the movie, you should get the trace statement in the output window. At this stage we have only imported the data, we haven't set up any variables or used the information in any way. We also ensure that all the data is loaded before any further action takes place.
Return each XML elements contents to the output panel
The next stage involves setting up a variable to hold the information and trace back to the output panel all the information contained in the XML file. Once we can see its all there, we can build our stage with some textboxes and display the information. Remove the previous trace statement and replace with a for each statement that will display each of the XML entries into the output panel:
The output panel should now show something like this:
Return the contents of a XML node to a Text Box
Now comes the fun part...showing this data on stage in some text boxes. Create a dynamic multiline text box on stage and call in myTextBox. Remove all the "trace" statements from the above example as we have verified that the XML data is accessible (or comment them out if you want to keep them for reference). Replace with the following:
Accessing the information in AS3 is fairly straightforward. We have created a new function
xmlLoaded function has changed to call the
fnPeople method with our
myXML XML object sent as the argument. Now all that is left to do is to return the information to
myTextBox. Following the XML documents hierarchy; PeopleList > person > name, we can access the information of the XML element. Use the
text() functions to return only the contents (not the element itself) and specify the index position of the element contents you wish to access, in this case
, or the first element.
Add a component button to the stage, Change the label and name it showBtn. Change the
myLoader.addEventListener("complete", xmlLoaded); line to read
showBtn.addEventListener(MouseEvent.CLICK, xmlLoaded); and you will now be able to display the data by clicking the button.
Next up: Looping through the entries.
With a small alteration to the existing code, you can keep track of the number of entries in your XML file, and advance through the entries and display consecutively in the text box up to the number of entries determined by the total number of person entries.
Like everything, there is more than one way to achieve an end! So, after much research, trial and error, the following code forms a basis to using buttons to move through your XML file and display the contents in text boxes. Set up the stage as shown in the screenshot below, name your buttons
prev_btn. There are several ways to set up your variables at the start too, note the slight changes in this example. (Results are the same).
This ActionScript 3 example performs in exactly the same way as the ActionScript 2 Example of the same name, but is achieved with less lines of code.