Displaying Data from an External File

by kirupa   | filed under Flash and ActionScript

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:

1. 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.
    

   Download Source

2. 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.
    
3. 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' ]
 

4. 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
    
5. 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:

                      name=Kirupa Chinnathambi&[email protected]&location=Earth

6. Save this file as data.txt into the same folder containing the FLA you were working on a few moments ago.
    
7. 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:

                      loadText = new LoadVars();

loadText.load("data.txt");

loadText.onLoad = function() {

 name.text = this.name;

 email.text = this.email;

 location.text = this.location;

};

[ copy and paste the above lines of code ]

8. 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. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇