Flash MX 2004 - TextArea with External Text and CSS

Adobe Flash CS3 Professional
Flash CS3 introduces many new and exciting features and delivers an entirely new experience in Flash dev.
Adobe Flash CS3
Adobe Creative Suite 3
Streamline your web dev with a collection of Adobe software including the new Flash CS3 Pro.
Adobe Creative Suite 3
A nice ability in previous versions of Flash was that of being able to load in external text files. Loading in external text files saves valuable time which would otherwise be put towards constantly opening and editing the text in your Flash movie.

With the introduction of CSS support in MX 2004 you can now have your cake and eat it too. Uhm well, load your text and style it too.

This tutorial will teach you how to load an external text file into the TextArea component and style it with an external CSS stylesheet. This tutorial assumes you have a basic understanding of CSS.

If you haven't already done so, open Flash and start a new document. From the Components panel (Ctrl+F7 or Windows > Development Panels > Components), double click the TextArea component to add it to the stage. In the Properties Inspector (Ctrl+F3 or Windows > Properties) give the TextArea an Instance Name of TextHolder. Select the Parameters tab and set the width (W) to 405 and the height (H) to 170. There's nothing significant about those numbers, that's just what my end result turned out to be. Also make sure the editable, html and wordWrap parameters are set to true.

On the main timeline, create a new layer and name it Actions. Select the first frame, hit F9 to bring up the Actions panel and apply the following Actionscript:

myStyle = new TextField.StyleSheet();
myStyle.load("example.css");
TextHolder.styleSheet = myStyle;
thisText = new LoadVars();
thisText.load("example.txt");
thisText.onLoad = function(success) {
    if (success) {
        TextHolder.text = thisText.myText;
    }
};


The first line creates a new stylesheet called myStyle. The second line loads the external CSS file that will be myStyle. The third line applies the stylesheet to the TextArea. The fourth and fifth lines set up a function to download a file from a specified URL, parse the variable data in that file, and place the resulting variables into thisText. The remaining lines check that the loading was successful. If we had success loading the file then load the text into the TextArea. myText, which we'll set up in example.txt, is the parsed variable we want to use from thisText.

That pretty much handles all the work in Flash, the rest will be creating our external files.

Open up Notepad, or the text editor of your choice, and paste in the following and save the file as example.txt.



Now open up your text editor again and paste the following CSS in and save the file as example.css.



That should pretty much do it. If you're unsure of the CSS properties that Flash can recognize, check out the Supported CSS page.


Working Example