Using CSS in AS3

By Blue_Chi | Flash CS4 | ActionScript 3.0 | Beginner | Page 1, 2.

Cascading Style Sheets (CSS) are simple code sheets that are used to configure the visual look of pages and texts on the web. It could be used in Flash projects to format the way text fields look in Flash. Using CSS in Flash provides a number of advantages such as being able to customize your text in deeper ways (e.g. changing the the color of links) and to update the look of the text without having to go back to the source file.

This tutorial will teach you how to format some externally loaded text by using CSS.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

This tutorial assumes basic knowledge of CSS, it is recommended that you review our tutorial on this subject to catch up if you are unfamiliar with CSS. Other ActionScript tools used to make this work include the URLLoader Class, the TextField Class, and the basics of Event Handling.

Tutorial outline

We are going to learn how to use CSS in AS3 by using it to format some text which we have loaded externally. Our CSS will be stored in a standard CSS style sheet. We are going to start by creating all the backend files and then code our project.

Creating the Text and CSS files

The text which we will be using in this tutorial will be loaded externally. So we will create the file to host this text. Create a new folder for this project, and inside this folder create a blank text file using any simple text editor. Name this file myText.txt.

AS3 Text File

Inside this text file our text will be will HTML formatted so that we can manipulate it using CSS later. Simply paste the following inside your text file:

<p class='header'>Republic of Code</p>

<p>Republic of Code is the ultimate source for everything Flash and ActionScript. Check it out for the best AS3 tutorials on the internet.</p>

<p class='footer'>Click <a href='http://www.republicofcode.com' target='_blank'>here</a> for more info.</p>

Our text file is now ready, save and then close the file.

We will now create our CSS file, again use any simple text editor to create a blank text file and name it myStyle.css.

AS3 CSS

If you are familiar with CSS you would know that CSS can format the way any HTML tag looks. So we are going to start off by making it change the way the <p> tag is displayed:

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align:justify;
color:#666666;
margin-right:20px;
}
Not all regular CSS attributes are supported in Flash. The ones supported include text-align, font-size, text-decoration, margin-left, margin-right, font-weight, font-style, text-index, font-family, color, and display. You can learn more about these by checking Adobe's online reference.

In addition to the ability to mass-format all instances of any HTML tag, we can target specific tags by using the "class" attribute which we have implemented in certain instances earlier in our HTML code. A class name starts with a dot. We are going to create a specific style class for the header paragraph and another for the footer paragraph.

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align:justify;
color:#666666;
margin-right:20px;
}

.header {
font-size: 24px;
color:#E40018;
text-align:center;
}

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


Finally, we are going to configure the way links look by using the anchor <a> tag. The style code below will change the color of the link and make it underlined when a mouse is hovered over it.

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align:justify;
color:#666666;
margin-right:20px;
}

.header {
font-size: 24px;
color:#E40018;
text-align:center;
}

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

a {
color:#FF0000;
font-weight:bold;
}

a:hover {
text-decoration:underline;
}

Our style sheet is now ready, save your file and close.

Creating the Flash File

All of our external assets are now ready. Start up Flash, create a new FLA in AS3 format, save it in the same folder as your other assets, then right-click the only frame you have on your timeline and select Actions to open up the Actions panel and start coding your project.

Summary

In this page we create all the text file to be formatted and the style sheet that will do the actual job. In the next section we will start coding our project.

- Next Page.