back

Create dynamic text fields using XML and Adobe Flash CS4

by Ruth Stryker

If you have a SWF-based file that contains frequently changing content, such as daily specials, upcoming events, hot tips, weekly menus, or a featured item area, you'll likely want to store the content outside your SWF file and include prewritten ActionScript code that reads the XML data into the SWF at runtime. The benefit of having the data in a separate XML file is that it enables someone who doesn't know or own Flash software to change the content without the help of a Flash designer or developer.

Why XML? XML has become the standard format for reading and writing data between applications. It's a relatively simple and straightforward markup language, as you'll see in this tutorial. To write an XML file, all you need is a simple text editor such as Notepad. Or you can use Adobe Dreamweaver software to easily write and validate XML files.

The scenario

We have a client who wants a SWF-based site created with Adobe Flash software that includes a section with weekly menu specials. The weekly menu specials need to be updated every week (see Figure 1). The client wants to be able to make the changes himself, without having to know, or even own, Flash.

The client’s site created with Flash CS4 Professional.

Figure 1. The client's site created with Flash CS4 Professional.

To follow along with this tutorial, download and unzip the file bbqstart.fla (103K) and put it in a new folder on your desktop named bbqsite.

Creating the XML file

To create the XML file that will contain the weekly specials data, you could use a simple text editor such as Windows Notepad or TextEdit on the Mac. I'm using Dreamweaver because it has some nice features for working with XML files.

Create a new XML file in Dreamweaver:

  1. Choose File > New.
  2. Select the Blank Page category.
  3. Select XML for the Page Type.
  4. Click Create.

As you can see in Figure 2, Dreamweaver creates a text file with a line of code that declares the content of this document to be XML code. If you're using a text editor, you'll likely need to type that declaration yourself.

The XML declaration in Dreamweaver.

Figure 2. The XML declaration in Dreamweaver.

Save the document in the bbqsite folder on your desktop (the same folder where the bbqstart.fla file is):

  1. Choose File > Save.
  2. Navigate to the bbqsite folder.
  3. Name your file weeklyspecials.xml.
  4. Click Save.

The next step is to create the XML code that contains the weekly specials content. As you write the code, keep a few XML rules in mind:

Type the following code to create a root element:

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



</specials>

Next, create the remaining elements by typing the following code:

<?xml version="1.0" encoding="utf-8"?>
<specials>
   <monday>Baby back ribs</monday>
   <tuesday>Pulled pork sandwiches</tuesday>
   <wednesday>Whole chickens</wednesday>
   <thursday>Boneless buffalo wings</thursday>
   <friday>Beef brisket </friday>
</specials>

Note: Elements can be named anything you like, as long as the opening and closing tag names match. I've named these elements after the days of the week because that's what they represent, and I want to ensure the element names are easy to remember when I need to write the ActionScript code in Flash.

Finally, to make sure that the XML document is well-formed (that it is following the rules of XML):

  1. Save your file.
  2. Choose Validate Current Document from the Validate markup menu in Dreamweaver (see Figure 3).
  3. Validate markup menu

    Figure 3. Validate markup menu in Dreamweaver.

  4. Fix any errors, save, and validate again. (Figure 4 shows an example of errors.) Repeat until there are no errors. When there are no errors, you will not see anything in the Validation panel.
  5. Document with validation errors caused by the closing tag not matching.

    Figure 4. Document with validation errors caused by the closing tag not matching.

Note: If you're not using Dreamweaver as your text editor, you can still validate your XML file by opening it in a browser. If there are any errors, the browser will tell you.

Creating dynamic text fields with Flash

Now that the XML file is complete, we can move on to the file our designer started in Flash CS4. Instead of using static text fields, we will need dynamic text fields with instance names to dynamically populate the weekly specials:

  1. Open bbqstart.fla in Flash CS4.
  2. Using your Selection tool, click the "Baby back ribs" text once and notice that it is static text (see Figure 5).
  3. Static text for the weekly specials.

    Figure 5. Static text for the weekly specials.

  4. In the Text Type drop-down menu, change the text type from Static Text to Dynamic Text.
  5. Give the text field object an instance name of m_txt (see Figure 6). Note: Instance names are your choice. I chose "m" for "Monday" and "_txt" because it is a text field object.
  6. instance name

    Figure 6. Setting up an instance name.

  7. Using the Text tool, delete the "Baby back ribs" text from inside the Dynamic Text field.
  8. Repeat Steps 2–5 for the four remaining text fields, giving them instance names of tu_txt, w_txt, th_txt, and f_txt.

Figure 7 shows the dynamic text fields. Now it's time to write the ActionScript code that populates them with the weekly specials data from the XML file.

Dynamic text fields with instance names.

Figure 7. Dynamic text fields with instance names.

Writing the ActionScript 3 code

To create the ActionScript code that's going to read in the data from the weeklyspecials.xml file and then populate the dynamic text fields, you need to work on the Actions layer with the Actions panel:

  1. Select the Actions layer in the Timeline panel.
  2. Open the Actions panel (Window > Actions).

The first line of code we'll write creates an XML object that will eventually contain the XML data from the weeklyspecials.xml file (see Figure 8). The name of the XML object can be anything you want. I chose to call it xmlData.

Creating the XML object in the keyframe of the Actions layer.

Figure 8. Creating the XML object in the keyframe of the Actions layer.

To bring in data from an outside file, ActionScript 3 requires a couple more things. To communicate with a file that's outside of the FLA file, you need to create a URLRequest object on line 2 that contains the name of the XML file you want to communicate with:

var theURL_ur:URLRequest = new URLRequest("weeklyspecials.xml");

Note: Because the FLA file and the weeklyspecials.xml file are in the same folder, you can refer to the weeklyspecials.xml file without having to put in a path.

Then add a URLLoader object (that is, a container) to load the data from the external file:

var loader_ul:URLLoader = new URLLoader(theURL_ur);

To make sure you don't try to use the data before it has had time to load into the loader_ul object (which would leave the dynamic text fields blank), you need to set up an event listener. This code will call on the fileloaded function (which we will write in the next step) once the contents of the weeklyspecials.xml file has finished loading into the loader_ul object:

loader_ul.addEventListener("complete", fileLoaded);

Finally, you need to set up the function that will take the data loaded into loader_ul and designate it as an XML object, put it into the xmlData object you created earlier, and then read from the xmlData object to populate the dynamic text fields with the appropriate weekly specials text:

function fileLoaded(e:Event):void
{
   xmlData = XML(loader_ul.data);

   m_txt.text = xmlData.monday;
   tu_txt.text = xmlData.tuesday;
   w_txt.text = xmlData.wednesday;
   th_txt.text = xmlData.thursday;
   f_txt.text = xmlData.friday;   
}

Figure 9 shows the complete ActionScript code. To test your code, choose Control > Test Movie.

The completed ActionScript code.

Figure 9. The completed ActionScript code.

If you have any errors, double-check your ActionScript code and make sure your FLA file and your XML file are in the same folder.

Updating the XML file

Now that everything is built, the FLA file can be published (File > Publish), and all the site files (bbqstart.html, bbqstart.swf, and weeklyspecials.xml) can be uploaded to the client's web server. Whenever the client needs to update the weekly specials, he can simply edit the weeklyspecials.xml file on the web server.

To edit the weeklyspecials.xml file:

  1. Open the weeklyspecials.xml file in a text editor (or Dreamweaver).
  2. Change Tuesday's special to Hot link sandwich.
  3. Save the weeklyspecials.xml file.
  4. Find the bbqstart.html file in the bbqsite folder on your desktop. (If you don't have one, go to Flash and choose File > Publish to generate it.)
  5. Double-click bbqstart.html to launch it in your browser and check your change. You may need to clear your browser's cache to see the change take effect.

Now you can create FLA files with dynamic text stored in an external XML file.

‹ Back


Ruth Stryker is an Adobe Certified Instructor who has been teaching web design and development for the past 14 years. She also designs and develops eLearning courses.