Displaying
Data from an External File
by
kirupa chinnathambi
Seems like everything recently has to do with
dynamically loaded this and dynamically loaded that. Of
course, this writer will ride this wave for all its worth.
After all, isn't that what Pop Culture Programming (PCP) is
all about.
This
tutorial will briefly explain how to load data from an
external file. More importantly, you will learn how to
display the data in your Flash animation. In the following
animation, the data for name, e-mail, and location comes
from an externally loaded text file.
You will create something similar to the
following animation in this tutorial.
[ the data is externally
loaded ]
Creating the Animation:
-
Since I would rather have you
learn how to load the data instead of creating the
interface, I have provided the interface as an FLA for you
to download and use.
Don't worry, the essential details have been left out;
you'll add them using information found in this tutorial.
-
Once you have opened the extvar.fla file you
downloaded from the above link, you will see a similar
interface as that shown in the example animation above.
-
You should see three dynamic text fields to the right of
name, e-mail, and location. Select the dynamic text field
to the right of name. In the Text properties panel, in the
< Instance Name > field, enter the text name:

[ give the
dynamic text the instance name 'name' ]
-
Two more dynamic text fields await! Select the second
dynamic text field, and in the < Instance Name > enter the
text email. Likewise, select the third dynamic text
field and enter the name location.
You have now given each of your three text fields the
following names: name, email,
location
-
Let's take a break from Flash and switch over to creating
the external data. So, we will create a text file that
will correspond to the instance names you gave to the text
fields.
Using an ASCII text editor such as Notepad, create a new
document and copy and paste the following line:
-
Save this file as data.txt into the same folder
containing the FLA you were working on a few moments ago.
-
Now, go back to the Flash animation you were working on
earlier. Right click on a keyframe in your timeline and
select Actions. Copy and paste the following code into the
Actions dialog box:
[ copy and
paste the above lines of code ]
-
Publish the animation and preview it in your browser. You
should see the exact data displayed on your screen that
you saw in the example animation above
Explanation
While you may have gotten the animation
to work and display the text as intended, I am sure you
would appreciate an explanation as to why the animation
worked the way it did. Let's start with the code:
loadText = new loadVars();
This line creates a new object called loadText. Making
something an object grants you access to functions such as
load that you would otherwise have to define separately.
loadText.load("data.txt");
The loadText object is told to load the data from the text
file, data.txt.
loadText.onLoad = function() {
I am defining a function that will take place when the
animation is loaded. Anything following this bracket ( { )
will be executed.
name.text = this.name;
If you remember, we named the first dynamic text field
name. I am telling Flash to assign the value of the name
value in the text file (this.name) to the text field
name.text.
I used name.text instead of simply name because the text
field's instance name was given the name...name. If
I had given the text field a variable name of name (as
opposed to an instance name), the .text portion can be
ignored.
email.text = this.email;
Same as above except I use the variable name email because
that's what this variable is called in both the text field
and data file.
location.text = this.location;
Same as name.text = this.name except I use the variable
name location because that's what this variable is called
in both the text field and data file.
The text file is fairly straightforward. I
simply set
name=Kirupa Chinnathambi,
[email protected]
and
location=Earth. Note that I did
not use spaces between the variable, the equal sign, and the
value following it. Unlike other programming languages, I
did not have to enter quotation marks around the text values
I set the variables equal to. Finally, note that each
variable and its value is separated from the other variables
and values by the use of the wonderful ampersand ( & ).
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

|