As well as images we can load text dynamically into a Flash document from a plain text file. This means that the contents of a document can be altered by changing only the external text file and not the Flash document itself. This can be useful if you wish to create templates that can be used for a number of different purposes such as news or adverts or if you need to create foreign language versions of the text.
To load text dynamically into a Flash document while it is running you need to use a dynamic text field rather than static text. To choose dynamic text draw a text item on screen and then change its type in the Properties panel.
One way to load text is to create it in a text editor as a series of variables that can be loaded in as distinct entities and used in different frames of a movie. As an example here is a text document with three variables created from a html file:
&htmlTagText=html&
&headTagText=head&
&linkTagText=link rel=STYLESHEET HREF=" " type="text/css"&
Notice that each line begins and ends with an ampersand and a variable name, followed by '=', the text and a closing ampersand. The '<' and '>' characters are problematical here and must be omitted as they will cause confusion when they are combined with real html tags later. You might replace the variable names with something like 'line01', 'line02', etc, and set the text to 'Shall I compare thee...', and so on.
The movie in this case will consist of three pieces of text played on the screen in sequence. To achieve this we need to set up a new layer, called 'actions', in which we place, at frame 1, the following code:
var my_lv:LoadVars = new LoadVars();
my_lv.onLoad=function(success){
if (success){
gotoAndPlay("start");
}
};
my_lv.load("html.txt");
This declares a new variable of the LoadVars type and provides a function that checks that the loading was successful. It then proceeds to a keyframe labelled 'start'. The text file created earlier is then loaded.
Name Layer 1 'text_disp' and add a dynamic text field at frame 1. Add a new keyframe at frame 5 and assign the name 'start' to the frame.
Click in frame 10 of the text_disp layer and press F6 to add a keyframe. Select the text field and give it a name such as 'html_txt' (as the first field to be displayed shows the html tag). Find the 'Var:' field in the Properties panel and enter the name of the html field from the text file - 'my_lv.htmlTagText' (see above).
Click in frame 20 of the text_disp layer and press F6 to add a keyframe. Select the text field and give it a name such as 'head_txt' (as the second field to be displayed shows the head tag). Find the 'Var:' field in the Properties panel and enter the name of the head field from the text file - 'my_lv.headTagText' (see above).
Repeat the previous operations in frame 30 for the link text field. Insert a keyframe at frame 31 and enter 'stop();'.
The movie should now display each of the three pieces of text in sequence.
The timeline developed here is quite simple but the principles can be extended to more complex situations.
You can use CSS files in Flash so all text can be styled consistently from a single central file, which is very useful if you create a number of related pages or templates. You need to have a CSS file ready, for example:
mystyle {color:#ff0000; font-family:Verdana; font-size:x-small;}
You could type this out in a text editor such as Notepad or FrontPage and save it as, for example, 'flash01.css' (saving as a text file removes the WYSIWYG options).
Now you need to add code to frame 1 of the actions layer to load the style sheet:
var my_ss:TextField.StyleSheet=new TextField.StyleSheet();
my_ss.onLoad=function(success){
if (success){
trace("css file loaded");
}
else {
trace("css file not loaded");
}
};
my_ss.load("flash01.css");
This defines a StyleSheet variable and loads it into the document. The function is used in developing and testing the code.
You now need to write some code in the actions layer in the frames that correspond with the dynamic text boxes.
html_txt.styleSheet=my_ss;
html_txt.wordWrap=true;
html_txt.html=true;
html_txt.htmlText = "<mystyle>" + my_lv.htmlTagText + "</mystyle>"
'html_txt' is the name of the dynamic text box on the stage. Its styleSheet property is set to the variable that was linked to the CSS file in the earlier code. Its 'Var:' property should still be set to point to the variable source. (Note how property names begin with a lower case letter while the variable name property - var my_ss:TextField.StyleSheet - began with an upper case letter.)
The wordWrap and html properties of the text box are set and the htmlText property is set to the combination of style tags and the contents of the text variable.
The other frames of the movie can also be linked to the CSS file in the same way, with changes in variable names as appropriate.
headtag_txt.styleSheet=my_ss;
headtag_txt.WordWrap=true;
headtag_txt.html=true;
headtag_txt.htmlText = "<myStyle>" + my_lv.headTagText + "</myStlye>";
linktag_txt.styleSheet=my_ss;
linktag_txt.WordWrap=true;
linktag_txt.html=true;
linktag_txt.htmlText = "<myStyle>" + my_lv.linkTagText + "</myStlye>";
In this case the dynamic text boxes at frames 20 and 30 have been renamed, but this is not strictly necessary as the last line will overwrite the contents of the text box with the specified text.