Flash Components      Flash Menu      Flash Gallery      Flash Slideshow      FLV Player      Flash Form      MP3 Player      PhotoFlow      Flash CMS      3D Wall      Flash Scroller

Flash / AS



ASP.net / PHP






  Design & Effects
  Audio & Video
  User Interface





Introduction to XML in Flash
       by senocular

Example: Load Security Text
As a first example, we'll start with something simple. Here, text will be loaded from XML and displayed in a text field. Nothing fancy or complex but, to keep from being completely mundane, an additional URL was included in the XML which will also be added and linked at the end of the text.

Here's the XML document:


It should consist of the following:

<?xml version="1.0"?>
<text url="http://www.kirupa.com/k2/Feb2004/security.htm">Hard drives are just as much your property as your house. We have laws in place to protect our homes and ourselves from intruders. Hopefully some day legislation will be passed to make Malware completely illegal. Enforcement would be tricky, but so is protecting our homes. Awareness and a commitment to &quot;smart-surfing&quot; on the internet are our first line defenses for now. I hope that you gain something useful from this article and that you take the practices it prescribes to heart.</text>

Very simple and straight-forward XML; you have a single document root node, text, which contains an attribute with a url and a child text node with text (from that url). Do notice that quotes within the text node use character entity references (&quot;smart-surfing&quot;). The Flash movie, when complete, will give you the following:

[ click the load button for text on security ]

Download ZIP


Preparing the Flash File
Not much to do here. There are two elements to this file not including the scripting. You got yourself a dynamic text field with the name output_txt and a button named load_btn. Each are placed directly on the main timeline in the layer of choice. Since we're dealing with a lot of text and HTML is being used to create a link in output_txt, you would need to make sure that the text field is set to be multi-lined and that HTML is enabled from the properties panel.

[ multi-lined and html enabled dynamic text field ]

Now to the scripting. Given the circumstance, XML to populate a text field as a result of a button click, you can pretty much divide what's needed into 3 parts.

  • The definition of an XML instance to handle the XML loaded
  • The button action to initiate the loading process of the XML document into the instance
  • Including the result within the available text field (this happening within the onLoad event of the XML instance)

Defining the XML instance is easy enough. This will include the commands we've covered before.

var output_xml = new XML();
output_xml.ignoreWhite = true;
output_xml.onLoad = function(success){
// actions for when XML is loaded

Even though, given the XML for this example, ignoreWhite is not needed (remember, it removes white space between elements and there are only one element, the document root, in this XML), it is still included. You can say this is to enforce habit or just incase, in the future, there may be a more complicated XML to deal with that might need the property set in order to work as expected. Too often will you kick yourself for having forgotten it.

Now that an XML instance exists, the load_btn action can be set to initiate the loading of an external XML document into that instance. This will require using the load() command. Once that XML has loaded, the onLoad function from above will be run for the instance and the desired text can be added into the text field.

load_btn.onRelease = function(){
output_txt.text = "Loading...";

Since it will take some time to load, even though minimal just being a text file, the output_txt's text is set to say "Loading..." to ensure the user that something has in fact happened and that the text requested will be displayed soon. It's just a matter of waiting for the XML to load and the onLoad function to be called.

That onLoad is what is needed to display the text from the XML. Two key bits of information need to be extracted: the main text and the url that is to go beneath it. The text itself resides in a text node within the document root element security while the url is stored in an attribute of that element. Here is the full onLoad.

output_xml.onLoad = function(success){
if (success){
var security = this.firstChild;
var url = security.attributes.url;
var textNode = security.firstChild;
output_txt.htmlText = textNode.nodeValue + "<br><br><a href='" + url + "'>" + url + "</a>";
}else output_txt.text = "Error loading XML";

You can see that most everything happens within an if statement. This if statement checks to see if the XML document was loaded successfully by checking the success argument passed into the onLoad method. If true, the bulk of the code dealing with the loaded XML is run. If not, then the phrase "Error loading XML" is given to the text field.

Notice that variables are used to help identify structures in the XML. Since the onLoad is defined within the XML instance, this within it references the XML instance itself. The security tag, being the first element in the XML (document root), is the firstChild of the XML instance. The url is an attribute of that and the main text is a child of the security element in the form of a text node.

<?xml version="1.0"?>
<firstChild firstChild.attributes.url="">firstChild.firstChild</firstChild>

After each are saved as their respective variables they are added to the htmlText of the output_txt text field. For the text node, its nodeValue is used to get the text stored in that node. The url is simply text (representing the value of the attribute) so it is added straight in and included in an HTML anchor tag (<a>) so that it will be a link.

Click, load, interpret, use. That's XML for you. Next we'll try something a little more involved.



kirupa.com's fast and reliable hosting provided by Media Temple. flash components
The Text Animation Component for Flash CS3
Check out the great, high-quality flash extensions. Buy or sell stock flash, video, audio and fonts for as little as 50 cents at FlashDen.
Check out our high quality vector-based design packs! Flash Effect Components
flash menus, buttons and components Digicrafts Components
The best flash components ever! Entheos Flash Website Templates
Upload, publish, deliver. Secure hosting for your professional or academic video, presentations & more. Screencast.com Purchase & Download Flash Components
flash components Free Website | Make a Website
Streamsolutions Content Delivery Networks Learn how to advertise on kirupa.com