external text

source: http://www.thegoldenmean.com

Dear Reader;

The content of this tutorial is out of date. Flash (and the underlying ActionScript language) has moved on. I have, regrettably, not moved on with it.

Flash is currently a great deal more capable, but also much more complex, than it was when I wrote this tutorial.

I have kept this content online because I still get mail from readers who have found it useful. While I am very pleased by this, I want to make it clear that this material can no longer be considered “best practice,” and I can no longer offer support.

If you can use it, you are welcome to it. The code has been tested and refined thanks to input of many generous readers. I offer it as is.

Load External Text into Flash MX, Page 1

originally written for the GurusNetwork.com

Why?

Let’s consider why one would wish to import content from an external text source in the first place. I can think of three reasons right off the bat:

  1. The first reason is ease of maintainance and flexibility. Anyone who has worked with Flash for any length of time knows it’s a pain to open the movie, make changes, re–save the movie and upload the modified swf to the server. This is time consuming and a waste of effort if you have text that changes frequently, such as a news box, bio or blog–style diary.
  2. The second reason is integration with server–side scripting. As web sites become more technical, it is increasingly common to have content generated on the fly by server–side scripts. Any script that can generate a .txt file can serve content to a Flash MX movie, which introduces tremendously powerful and exciting possibilities for dynamic content.
  3. Furthermore, because Flash understands rudimentary html tags, it’s possible to introduce a level of formatting that would be difficult to do by hand in the editing environment. And, since Flash MX now understands unicode, developers who require characters other than those found in the standard English set have reason to rejoice! (Your text editor must be capable of saving a file in the unicode UTF–8 format. I use BBEdit for the Macintosh. I understand that NotePad offers this capability to Windows users.)

So, if you are convinced now that you could use this good stuff, let’s look at how to do it. In spite of the seemingly simplistic tutorial title, we will consider much more than simply getting external text into a Flash movie. In fact, the tutorial will unfold as follows:

As a personal aside, after having achieved some degree of proficiency with Flash 5, I struggled for what seemed like the longest time to re–learn how to do even the simplest things with the new features and new syntax of Flash MX. This tutorial is therefore presented both for migrating Flash 5 coders and for those who have never coded in ActionScript prior to Flash MX.

Onward to the first topic which is…

How?

The Text File

This really couldn’t be simpler. Use any text editor that will save a file as plain text and start typing! There is only one thing to keep in mind: the file must begin with a variable assignment (we’ll see how this works in a moment). My example file is going to be named “example1.txt”, and will consist of the following:

content=This text has been brought to you courtesy of the LoadVars() object!

Note that it begins “content=” — that’s the variable assignment. Of course it doesn’t have to be “content” — yours could begin “news=”, or “aboutme=”. You just have to start the text file with a variable name and the equals sign.

I got a question from a baffled reader who couldn't get the text to display. Even more confusing, the output window informed him the variable was “undefined”. Turns out he had a space character between the variable name, the equals sign and the variable value, like this:
content = This text has been brought to you…
instead of
content=This text has been brought to you…
Flash is generally tolerant of whitespace but not in this case. Run the variable, the equals sign and the first character of the variable value all together with no white space.

For the sake of simplicity, save this .txt file in the same directory as the Flash .swf will be saved in. Later we will see how to fashion a path to another directory, but for now keep the .txt file and the .swf file in the same location.

The Flash Movie

We’re starting slowly. This won’t be a very interesting Flash movie, but let’s keep things simple until we understand what’s going on. Create a new Flash movie, name it “example1.fla”, and save it to the same directory as the example1.txt file. Select the type tool and drag a type box somewhere on the stage. With the new text field active (selected), switch your attention to the properties palette, and give the text field the appropriate properties. Font, size and color all all entirely up to you. Setting the field to multiple line (word wrap) will help us later when we have more text. The critical settings are highlighted in the screen capture below. (If you are uncertain about the other settings in the properties palette, consult the excellent Flash documentation.)

set text field properties

Note the entry on the “instance name” field. In Flash 5 it was critical to include a variable name. If Flash MX the variable name will get in the way — but an instance name is absolutely critical. In Flash MX, text fields are objects (just like movie clips), and thus need to be named in order to be addressed.

I used just a simple, generic name: “myText_txt”. You can name it anything you want in your project; just remember what it is so you can use it later. Our ActionScript (coming soon) can now address this field by name. (Note the “_txt” suffix. Flash MX has a code hinting feature which is triggered by specific suffixes. This is a real handy feature for those of us that need a little coaching as we go along!) That’s all we need for the moment. On to the code.

The ActionScript

Select the first keyframe of the movie’s main timeline, open the ActionScript editor, and type the following code (this tutorial will assume you have the editor set to “Expert” mode):

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

stop();

If you test your movie at this point, you should find your text field populated with the contents of the text file as in Example 1 above. How did this happen? Page two goes into detail. The source file for this project is available for download here.

1 | 2 | 3 | 4

divider ornament

--top--

Thanks for visiting.