Formatting your Adobe Flash8 website using CSS

In this tutorial it will be explained how to format an Adobe Flash 8 website text by using CSS.
Cascading Style Sheets (CSS) save a lot of time because a you can use an external .css file for formatting a large amount of .html, .xml and even Adobe Flash 8 documents. Another advantage is that you can use the same .css file for display data in your both html and Flash versions of your website.
Let’s start our example by creating a new Flash 8 document with 550x400 dimensions and Frame rate 12 fps.

Draw a text field on the stage using the Text tool from the Tools panel. In the Properties Inspector set the following formatting for the text field:
W:450, H:375, Arial, size 14, color #000000, from Text Type choose Dynamic Text and from Line Style drop down list select Multiline. Give to the text field the instance name css_txt.

Save the document as csstext.fla.

Now create a .css file in the same directory with your csstext.fla file, name it csstext.css, and put this code in:

AnaS {
color:#009900;
font-size: 25px;
font-family: Georgia , "Times New Roman", Times, serif;
font-weight:bold;
}

red {
color:#CC0099;
font-family:"Courier New", Courier, monospace;
font-size:20px;
text-align:center;
text-decoration:underline;
}

beautiful {
font-family:"Monotype Corsiva",Arial, Helvetica, sans-serif;
color:#333366;
font-size:40px;
text-align:right;
}

Great! Now go back to csstext.fla, open the Action Panel (F9) and write the following code:

//set the html property of the text field to true
news_txt.html = true;
//create a StyleSheet object
var myCSS:TextField.StyleSheet = new TextField.StyleSheet();
myCSS.onLoad = function(success){
if(success){
css_txt.styleSheet = myCSS;
css_txt.htmlText = "<AnaS>This is AnaS formatting!</AnaS><br><br><red>This is a red text.</red><br><br><beautiful>This is a beautiful text!</beautiful>";
}else{
trace("Sorry! There was an error!");
}
}
myCSS.load("csstext.css");

Now see the result:

You need to Register in order to download the FLA file.

Subscribe now via RSS feed and get all the new tutorials