AS: External Style Sheets

**chili5** · 09-01-2009 03:38 AM

External Style Sheets with Flash

It is great that we can add CSS to our movie clips as we need them, but if you want to reuse the styles? You would have to copy and paste the code where you need it.

An external CSS file allows you to store your style definitions outside of the code. This has a few benefits:

1. You can reuse the style definitions
2. You can change them without recompiling your movie.

For this tutorial, we are going to apply a style sheet to several links. First, we need to create a new text file called styles.css. Open this file in whatever editor you like to use. Whether it be Notepad, or wordpad or whatever. It doesn't matter as long as you can save as plain text.

For now, let us go back to the flash environment. We are going to use the text tool to add two links to the stage. One of them will link to Code Call. The other one will link to Question Bin. In the properties window, change the instance name of the code call text field to txtCC. Similarly, change the instance name of the QuestionBin to txtQB. Under the field to change the instance name, is a field to change the type of the text field. Make sure that it is set to Dynamic Text.

The properties for txtCC should look like this:

Likewise, the properties for txtQB should look like this:

The last thing we need to do in the properties window is set the link.

The properties window looks like this:

What we are interested in is, the the section "Options". It is circled in the above screen shot.

In the link text box for txtCC type:

http://www.codecall.net

Now, on the stage select the question bin text box. In a similar manner to the above type this:

http://www.questionbin.com

When you run the movie clip, you will notice that you can click on the links and a browser will open taking you to that web site.

This is what it looks like when you run it.

Resize the text fields so they cover most of the stage. This will allow us to view the content when we use bigger font sizes.

Notice, how there is no styles on the links? This is what we are going to change next. This is where we need the file styles.css. This isn't the point of the tutorial so I will put some CSS code (it will be simple and easy to understand).

You can do so much more by using the htmlText property to set the values. However, I am just going to look at what we can do using the toolbox.

Here is some CSS to copy to styles.css:

Code:

a {
	color: #FF3366; /** A slightly red color. */
	text-decoration: none;
	font-size: 38px;
}

a:hover {
	color: #00F44D; /* A green-ish color.*/
	text-decoration: underline;
}

When the user puts the mouse over, the link the color is going to change to a green-ish color.

Loading the CSS file

Now the rest of what we need to do is in the ActionScript code.

We have to load the style sheet using a URLLoader object. Then we need to parse the CSS into a format that we can use with a style sheet object. Then all we need to do is apply the style sheet to the text fields.

First the URLloader.

Code:

var cssLoader:URLLoader = new URLLoader();

Now we can use the load method, to load in the CSS file. This requires a URL Request object.

Code:

cssLoader.load(new URLRequest("styles.css"));

That line loads all the CSS from the file styles.css.

What we want to do now is apply it to the text fields. First though, we are going to add a method that checks when the file is done loading. We don't want to apply the styles when they haven't finished being loaded yet.

The event for this is Event.COMPLETE. So we will add an event listener to cssLoader listening for this event. We will then call the callback function: loadCSS.

Code:

cssLoader.addEventListener(Event.COMPLETE,loadedCSS);

The call back function is simply:

Code:

function loadedCSS(e:Event):void {
	styles = new StyleSheet();
	
	styles.parseCSS(cssLoader.data);
	txtCC.styleSheet = styles;
	txtQB.styleSheet = styles;
}

The parseCSS method converts the loaded data into a format that we can use with the style sheet object. Now all that we have to do is apply it to the text fields. You can modify your styles without actually recompiling the movie clip.

You can view the final result here. When you FTP your swf file make sure that you also FTP the CSS file.