Styling Flash Text Fields Using CSS
By Blue_Chi | Flash 8 | ActionScript | IntermediateCascading Style Sheets (CSS) is the standard technology used to format the presentation of web pages. It could also be used to style HTML formatted text in Flash so that you could update the formatting dynamically by editing your CSS file without going back to the source FLA. CSS also gives us greater control over the way our text is formatted and allows us to customize our styling in ways that are not possible using HTML on its own (eg. changing the color of text links). The text displayed in the following Flash movie is loaded from an external text file and its formatting is configured by an external CSS file. This tutorial shall teach you how to create this sort of movie.
We will start our tutorial by creating the text file, creating the CSS file and then creating a Flash movie that makes use of both of them.
Creating The Text File
We will start off by creating the text file that will contain our HTML content. You can learn how to load external text in Flash by viewing our previous tutorial on this subject. For this tutorial, all you have to do is create a text file named myText.txt and paste the following content in it.
<p>Oman3D is an online publication that covers various forms of digital arts</p>
<p class='footer'>Click <a href='http://www.republicofcode.com'>here</a> for more info.</p>
You should note that Flash does not support all HTML tags. It is only capable of displaying simple tags such as <p>, <a>, <b>, <i>, <u>, <img> and <span>. The property class='header' and other similar ones are used to identify and apply specific styles to these tags - we will get back to this in a while.
Creating the CSS File
We will now create the CSS file that will contain our style information, use your notepad to create a file named myStyle.css. CSS is capable of changing the way an HTML tag behaves, so the first section of code we add will alter the way the <p> tag is displayed, we are going to set the font, the size and the color.
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#0000FF;
}
In addition to being able to change the way all instances of a certain tag are displayed, we can create specific classes that we could implement at certain instances only in the code. A class name is started with a dot. We are going to create a specific style class for the header and footer paragraphs. The following goes below what we have already written.
font-size: 24px;
color:#FF9933
}
.footer {
font-family:Geneva, Arial, Helvetica, sans-serif;
text-align:right;
}
The last thing to style is the anchor links, we are going to redefine the behaviour of the tag directly without the use of a class, although that is possible.
color:#FF0000;
text-decoration:underline;
font-weight:bold;
}
Similar to the situation of HTML, not all CSS properties are supported by Flash. The only ones supported are text-align, font-size, text-decoration, margin-left, margin-right, font-weight, font-style, text-index, font-family, color, and display. The majority of these properties are self-explanatory, you can refer to the Flash help files to learn more about the allowed properties for each of them.
Setting Up the Stage
Both our text and CSS files are now ready, it is time to play with Flash. Start off by creating a new flash movie, set the dimensions to 400x400 pixels, use white background, and set the speed of the playback to 12 frames per second. Using the Text Tool, create a big text field that fills up the stage. Access the Properties Inspector and set the Text Type to Dynamic. Set the Line Type to Multiline and check the Render As HTML option. Finally, assign the instance name myText_txt to the text field.
Add the ActionScript
Right-click the only frame on the timeline and select Actions to open the Actions Panel, our code will be divided into two parts, the first will be a function containing the code to load the text and the second part will load the CSS file and apply the style to the text field that we have on the stage. We are not going to dwell over the first part as the loading of external text has been covered in the tutorial mentioned earlier, you can learn about functions by reading our Introduction to Functions tutorial.
myData = new LoadVars();
myData.onLoad = function() {
myText_txt.html = true;
myText_txt.htmlText = this.myVariable;
};
myData.load("myText.txt");
}
The second part will load the CSS file and apply the style to the text field.
myCSS.load("myStyle.css");
myCSS.onLoad = function() {
myText_txt.styleSheet = myCSS;
textLoader();
};
The TextField.StyleSheet() is an ActionScript class that is required to be instantiated into an object in ordered to be controlled and referred to, myCSS is the name we have chosen for our instance of the Text.Field.StyleSheet class. The second line of the code simply loads the CSS file, you will have to provide the full URL to your CSS file here. The last part of the code uses the .onLoad property event handler to command the movie to take an action when the CSS file is loaded. The action we chose to take is to apply the style sheet to our text field and then call the textLoader function which we have defined in the previous step.
That's it, you can test your movie to see your styled text!
This concludes our tutorial, please feel free to post at the Oman3D Forum if you have any questions, you can view our tutorial collection at this link.
- End of Tutorial