Displaying

A common problem I face when using new programming languages inside a familiar programming environment such as Flash is that I am overwhelmed by the new syntax and creative workarounds that help both languages communicate with each other. Flash and XML are no exceptions. If you are in the same category as me, this tutorial was designed with you in mind. If you aren't in the same category...well, you will probably still like this tutorial!

This tutorial will help you to create a simple, straightforward example that does not deviate into extraneous functions, efficient coding methods, etc. If this is your first time trying to create something using XML in Flash, I believe it is better for you to build your confidence and create a simple, working example and then modify that example with increasingly complex features that make your work more presentable.

The following is an example of something that you will create:

[ the above data about the inventor was loaded from a XML file ]

Let's get Started
Let's first create the XML file. I will cover the basics of an XML file later on in this tutorial, but you can also see senocular's great tutorial on XML Basics.

Creating the XML File
The following steps will explain how to create the XML file for this tutorial:

1. Launch a program capable of editing plain-text, ASCII formatted text such as Notepad.

2. In Notepad (or equivalent program) copy and paste the following code:

<?xml version="1.0"?> <inventors> <person> <name>Thomas Edison</name> <comment>Inventor of many things such as the incandescent lightbulb.</comment> </person> <person> <name>Doug Engelbart</name> <comment>Invented the mouse at the Stanford Research Institute</comment> </person> </inventors>

[ copy and paste the above code in Notepad ]

3. The stuff you pasted may look a little odd, but don't worry about it right now. Just make sure you copy and paste the above into your text editor (Notepad, etc.)

4. Save this file as inventors.xml into a location on your hard drive. Don't forget where you saved this file, for you will need to save your Flash file in this location also.

Creating the Flash File
The following steps will explain how to create the Flash file:

1. First, if you don't feel like re-creating my above Flash interface, I strongly encourage you to download the partial FLA that only contains the colored boxes and the text labels.

2. If you don't feel like downloading an FLA and would like to recreate the file from scratch, make sure all of your drawing and writing ends up creating something like the following image:

[ make your interface look similar to the above ]

3. Now, everyone should have something similar to the above image on your screen. If you used my FLA, you will have the exact image as above in your screen.
   
   Let's add the text fields. Click on your Text Tool icon from the toolbox.

4. After clicking on the Text Tool, ensure that dynamic text is selected from your Properties panel.

[ select Dynamic Text ]

5. Now, draw two text fields. Draw on text field to the right of the Name text and draw another text field to the right of the Comment text.
   
   Make the text fields wide enough so that you can you can comfortably display the text. Try to make your text field next to the Comment text a little taller, for it will contain more text than the Name text field:

[ make your text fields large enough ]

6. So, we have our text fields drawn. But we have not named our text fields! Let's do that now. Select the name text field. In the Properties Panel, give it the name (instance name): name_txt

[ give your name text field the instance name name_txt ]
 

7. Likewise, select the Comment text field and give it the name: comment_txt
   
   For your Comment text field, you should set the line-type to Multiline. That allows longer pieces of text to wrap around and display on several lines:

[ enable Multiline for the Comment text field ]

8. Ok - now that you have your text fields formatted and named, it's time to move on. Save this file into the same location that you saved your XML file.

Ok, the easy part is now finished. In the next page you will add the code that allows Flash to display the text from the XML file. You will also learn some of the theory behind the code, so that you can hopefully creating something a LOT cooler than what I created for this tutorial.

Onwards to the next page!

---

page 1 of 5

---