The Basics of ActionScript

Using LoadVars() to access external data

This Lesson has spent a lot of time explaining how to play with data inside the Flash movie. The problem with this approach is that putting a lot of data inside a SWF can result in a very large file size and very slow download times. The other issue is the very nature of “data”. It changes on a regular basis and you really don’t need to be constantly changing the FLA to reflect these changes.

One solution is to use an external file that can easily be edited by a text editor. When the file is saved and uploaded to the site, the changes made are instantly reflected in your SWF. The class that “pulls” the text from the text file into the SWF is the LoadVars() class.

There are three methods this class uses to communicate with a server:

• send(url, method): The data is sent to the server where it is subsequently added to a data base, an XML document or otherwise managed by a server using the POST or GET method. Here is an example:

//create the LoadVars instance
var someText = new LoadVars();
// create the data for the variable
someText.name = “Tom”;
someText.job = “Professor”;
// send the data to a ColdFusion page
someText.send (“http://www.anyserver.ca/receiveData.cfm”, GET);

• Load(url): The data from the text document is loaded into the SWF. Here is an example that would load the text of this Lesson into a SWF:

//create the LoadVars instance
var lessonTwo = new LoadVars();
// grab the text from the text file located in the same directory as the SWF
lessonTwo.load (“Lesson02.txt”);

• sendAndLoad(“url”,targetObject [, method]): Think of this as being two way communication between the server and the SWF. An example of this would be:

//create the LoadVars instance
var someText = new LoadVars();
// create the data for the variable
someText.name = “Tom”;
// send and load
someText.sendAndLoad (“http://www.anyserver.ca/receiveData.cfm”, someText_LV);

Now that you understand how it works, let’s put what you have learned into practice. You are going to create a small Flash movie that loads text from a text file into a Flash SWF.

1. Open the LoadVars.fla file located in your Lesson 2 Exercise folder.

The file is composed of two layers named “Actions” and “Text”. The “dotted box” on the stage tells you there is a dynamic text block on the stage. Click on the box and you will notice that the Property inspector will change to show you all of the Properties associated with a text box. These include everything from the dimensions of the text box to the style, size and even color of the text that will appear in the text box.

The “Text Type” is set to dynamic because the text will be coming into Flash and appearing in the Text Box. Any time text comes into Flash from an exernal source, it should go to a Dynamic Text box.

With the Text Box selected on the stage, click once in the Instance Name input area on the Property inspector and enter “ourTextField”. Press the Enter/return key to accept the change.
What you have just done is to “instantiate” the text box. The name can now be used by Flash to figure out where to put the text when the movie plays.

2. Select frame 1 in the Actions layer and press the F9 key (PC) or Option-F9 keys (Mac) to open the Actions panel.

The plan of attack for this code is going to be rather simple:

• Create a TextField object and add a loading message that will appear while the text loads. You probably won’t see it but it is a great habit to develop because it let’s the user know something is happening.

• Create a new LoadVars object that will be used to go get the text in the Lesson02 Exercise folder.

• Write a little function that checks to make sure the text was loaded and show a message if there was a problem

• Load the text from the text file in the Class02 file - “loadvarexample.txt”-into the text field.

That plan of attack is also one of the first steps taken when writing ActionScript. Pull out a piece of paper and, using plain English or your native language, write down the steps the code will take as it executes. This is sometimes called “pseudo-code”.

3) Click once in the Script pane and enter the following code:

var ourTextField:TextField;

ourTextField.text = "Please Wait... Loading...";

The first line creates the variable and sets its data type to TextField. The next line simply says, Put the text between the quotes, which has the text property used by the TextField class into the instance named outTextField which just happens to be the instance name of the dynamic text box on the stage.

4. Press the Return/Enter key twice and enter:

var ourLoadVar:LoadVars = new LoadVars();

This completes the second step of the plan. A new LoadVars() object is created and given the instance name of ourLoadVar.

By creating this object you are ready to deal with dynamic data.

5) Press the Return/Enter key twice and enter:

ourLoadVar.onLoad = function(successful) {

if(successful) {

ourTextField.text = ourLoadVar.exampleText;

} else {

ourTextField.text = "Error in loading data... "

}

}

This small function deals with the third step of the code.

When the LoadVars() object named ourLoadVar is loading the text a function named successful is running. By putting the conditional statement inside the function there are only two possible results for the function. If the text is successfully loaded into the text field named then show the text contained in the LoadVars object named ourLoadVar.

What about the “exampleText” property? It wasn’t a property of the LoadVar class to begin with because it wasn’t declared. However, the LoadVars object is flexible enough that it will create a new property for each one it receives when executing a load command. If you open the text file for this exercise you will see it actually starts with “exampleText = …” As soon as the LoadVars object sees a text block that starts with a word and an equal sign it creates the exampleText property within the LoadVars object and populates it with the text that follows the equals sign. Our textfield object (called ourTextField) is assigned to our exampleText property within the LoadVars object.

5. Press the Return/Enter key twice and enter:

ourLoadVar.load("loadvarexample.txt");

The Load() method is used to load the text file into the ourLoadVar object. The complete code is shown in the image below. Note the extensive use of comments to help you understand what each piece does.

7. Click the Check Syntax button to make sure you have no mistakes and, if there are none, close the Actions panel.

Save the file ,under a different name, to your Exercise folder. With the file saved, you can now test it. When you test a file, Flash will create a SWF file in the same folder as the FLA file.

8. Press the Control-Enter(PC) or Command-Return(Mac) keys.

The first thing you will see is an “Exporting Flash Movie” Alert box with a progress bar. When the movie has finished exporting the movie will open in the Flash Player and you will see the text from the text file in the dynamic text box.
When you test a file, Flash will create a SWF file in the same folder as the FLA file.

...Next