Displaying
XML Data in Flash
by
kirupa | 24 July 2004
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:
-
Launch a program capable of editing
plain-text, ASCII formatted text such as Notepad.
-
In Notepad (or equivalent program) copy and
paste the following code:
[ copy and paste
the above code in Notepad ]
-
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.)
-
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:
-
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.
-
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 ]
-
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.
-
After clicking on the Text Tool, ensure that
dynamic text is selected from your Properties panel.
[ select Dynamic
Text ]
-
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 ]
-
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 ]
-
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 ]
-
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 |
|
|