Loading External Texts into Flash Using the LoadVars() Class

By Blue_Chi | Flash

This tutorial will teach you how to load content from an external text file dynamically into a Flash movie. The Flash Player is capable of dynamically loading various forms of external data such as texts, images, and many other forms at run time. Viewing your content this way makes the updating process of your website much easier as you do not have to generate new SWF files using your source FLA each time you want to update the content and instead simply edit those small text files that should have all the written content of your website. The text in the following example is being loaded at real time from a separate text file located on the server.


This Flash movie loads the flowing two files
when you click on each of the buttons.
(You can view the files here: File 1 - File 2
)

This is a beginner tutorial and you will only be required to know your way around the Flash authoring tool and to have some very basic knowledge about variables. The example that we will make in this tutorial will load a single text file only. You should experiment on your own to create more advanced movies once you learn the basic concept from this tutorial.

As stated previously, our movie will involve the loading of an external text file into our SWF file at run time. Our project will involve three files, the source FLA, the output SWF, and the content text file.

FLA, SWF, and TXT

The whole point of this effect is that you can later on update the text file only to update your content without going to the FLA to create a new SWF each time you want to update the content of your movie.

Setting up the files

In an empty folder, save your new FLA file and your text file. The name of your FLA does not matter, however, the name of your text file is essential to the loading process, for the sake of this tutorial name your text file myText1.

Both files in the same folder

Preparing the Text File

Open your text file using the notepad or any other text editor that you use. We will now write the content that we will load into our flash movie by the end of this tutorial. Type this in the text file:

myVariable=How are you today?

Our text content must be identified by Flash using a variable name, or an identifier. We will use "myVariable" as the identifier for our variable. The content that we want to load into the text file is "How are you today?". The equal sign is used to assign the value to our variable.

myVariable=How are you today?

This is all the work required to do in our text file, it is now time to set up the FLA.

Setting up the FLA

Open up your FLA and start off by grabbing the Text tool and changing the Text Type in the Properties Inspector (Window>Properties>Properties) from Static to Dynamic. More options should be available once you set your field type as Dynamic, set the line type to "Multiline" if it has not already been selected. You will then have to draw your text field on the stage.

Text Tool > Dynamic > Draw The Text Field

While your text field is still selected, access the Properties Inspector once again and give your text field an instance name of myText_txt. An object's instance name is used as a reference for an object in ActionScript, we can only control something by ActionScript if we can refer to it via an instance name.

Give your text field an instance name.

Our text field is now ready. We are now going to add a scroll bar in case we decided to add a large amount of text - which is clearly not the case in this tutorial, but it is essential to know how to add a scroll bar! -. It is possible to build a scroll bar from scratch and program it to control our text, but that is not necessary as Flash comes with many helpful readymade components that serve various purposes, the one of interest in our tutorial is the UIScroll Bar. Open the Component Panel by going through Window>Components. Look for the User Interface category and find the UIScroll Bar component. Drag this component onto your text field on the stage and it should snap to fit its size vertically. This should magically make it work, we are not required to do any extra work to make our scroll bar work with our text field.

Add the scroll bar component

Writing the ActionScript Code

We will assign all of our code to the Timeline, right-click the only frame on the timeline and click on "Actions". Write the following code to load our external text file into your movie:

myData = new LoadVars();
myData.onLoad = function() {
myText_txt.text = this.myVariable;
};
myData.load("myText1.txt");

Before we explain our code, test your movie to see your text file loaded into your output SWF.

Explanation of the ActionScript Code

LoadVars is an ActionScript class that is required to be instantiated into an object that we can refer to and control, myData is the name we have chosen for our instance of the LoadVars class.

The second line of the code uses the onLoad property handler to tell the movie to do something once the file is loaded. The command to do once the file is loaded is in the next line. The third line sets the value of the variable we saved (myVariable) in the text of our text field (myText_txt), this command will be executed once the file is loaded.

The final line of our code simply loads our specified text file to start the process, make sure that you put the full URL of your file including the file extension.

In addition to loading plain text, it is possible to load HTML formatted text, not all HTML tags are supported, but most of the common ones are. To load an HTML formatted text file it is necessary to activate HTML for the specific tag and then assign our HTML codes to the .htmlText property of our text field instead of the regular .text property this way:

myData = new LoadVars();
myData.onLoad = function() {
myText_txt.html=true;
myText_txt.htmlText = this.myVariable;
};
myData.load("myText1.txt");

Note: When loading HTML text, you will have to assign your variable to the .htmlText property and not the usual .text property as illustrated in the example above.

This concludes our tutorial. The LoadVars class lets us have many other controls over the way our text is loaded and you should examine these through the ActionScript reference that comes with Flash. Here is the source file for this tutorial, and if you need any more help feel free to post at the Forum.

-End of Tutorial.