FlashLabWeb Experiments by Brian Wiltshire

In this tutorial I will show you how to load dynamic text into your flash document and then format it with CSS. This is really useful for a news section or text that regularly needs updating.

Overview

We will create a dynamic text field in Flash. Then load a normal text document formated with HTML tags. Finally we will apply the CSS to the dynamic text field.

The text document

1. Create a new text document with notepad or any text editor of your choice.
2. Paste the following text as is in the new document.

3. As you can see we start the document with myVariable= . This will be used by flash to determine that the following text will be loaded into our dynamic text field. The rest of the document has got standard HTML tags embedded.

4. Save the text document as myText.txt

Flash

1. Create a new flash document with a dynamic text field. Give the text field an instance name of myText_txt and select the Render text as HTML tab. Remember to allow enough space for the text so draw out a big enough text area for as much text as you want to load.

2. Create a new layer and name it Actions.

3. On the first frame of the Actions layer place the following code.
var myStyle = new TextField.StyleSheet();
myStyle.load("myStyle.css");
myStyle.onLoad = function() {
myText_txt.styleSheet = myStyle;
};

As you can see we first load the stylesheet before we load the dynamic text. If you do it the other way around not all styles gets loaded correctly.

4. Next we create a function to load the dynamic text into flash. Add the following code beneath the previous block.
function textLoader() {
myData = new LoadVars();
myData.onLoad = function() {
myText_txt.html = true;
myText_txt.htmlText = this.myVariable;
};
myData.load("myText.txt");
}

5. Now we can load the text document we created earlier on by calling the textLoader() function. Add the following code.

textLoader();

The CSS file

I will not go into depth about creating the CSS file as this tutorial is not aimed at that. There are loads of tutorials about CSS with a simple search in google.

1. You can paste the following CSS code into a normal text document as is.

p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#999999;
}

.header{
font-size: 24px;
color:#FF9933;
}

.footer{
font-family:Geneva, Arial, Helvetica, sans-serif;
text-align:right;
}

a{
color:#FF0000;
text-decoration:underline;
font-weight:bold;
font-size: 10px;
}

2. Save the file as myStyle.css in the same folder as the myText.txt and the csstext.swf file.

That should do it. Back in flash, Compile the document and your text should load dynamically and be formatted accordingly.
You can view an example here

Source available on request.