Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Using Stylesheets in Flash CS3

Last updated Oct 17, 2003.

By Kris Hadlock

All Web designers know that stylesheets create a consistent look throughout your web site and keep your code clean at the same time. However, when it comes to Flash, these useful tools are often overlooked. With stylesheets, for example, you can deploy your Flash movie and later change styles without republishing the movie.

This article will teach you how to create a simple stylesheet, load it using ActionScript 3, and use it to style dynamic text in a Flash movie. The source code for this article can be downloaded here.

The sample requires that you create a CSS file called layout.css and add it to a css directory where you plan on publishing the final swf. If you want to name the file differently, or add it to a different directory, simply change the request.url, which we will set later in the ActionScript file. The CSS for this movie is going to handle setting styles for a body tag and a title class.

body
{
	font-size: 12px;
	color: #333;
}

.title
{
	font-weight: bold;
	color: #ff0000;
}

Once we apply the stylesheet to the text in our Flash movie, anything within a body tag will produce a gray font that is 12px in size and anything with the title class assigned to it will produce a bold, red font.

First, open Flash and start by creating a sample text field so that we can later apply our stylesheet to it. To do this, from the Tools menu, select the Text tool and use it to create a text field. Next, open the Property Inspector and make sure that the text field is set to Dynamic Text. Then, give it the name txtField so that we can target it through ActionScript to apply the CSS and embed the font of your choice.

In order to tie a stylesheet to the Flash movie, we are going to create a Document class, which is a best practice for writing object-oriented code.

package com.krishadlock
{
	public class Document extends MovieClip
	{
		public function Document()
		{
			this.loadCSS();
		}
	}
}

Once our class is created, we can either assign it to the movie in the Property Inspector or by using the Publish settings. Unlike linking classes in ActionScript 2, you can now assign the class to the movie rather than a specific symbol, but you must extend the MovieClip when doing so.

The package that you create is usually based on the project that you're working on; in this case, I created a sample package called com.krishadlock. In ActionScript 3, your class path must be true to the actual directory structure in which it resides.

In our Document class, we need to import the appropriate classes and packages. Since we are extending the MovieClip—and we have a text field in our movie to which we will be applying a stylesheet—we need to import the MovieClip, TextField, and Stylesheet classes. Of course, we will also need to load the CSS, which will require us to import the URLRequest, URLoader, and Event classes as well.

import flash.events.Event;
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.display.MovieClip;
import flash.text.StyleSheet;
import flash.text.TextField;

In our constructor, we will load the CSS file through a private method called loadCSS.

public function Document()
{
	this.loadCSS();
}

private function loadCSS()
{
	var loader:URLLoader = new URLLoader();
	var request:URLRequest = new URLRequest();
	request.url = "css/layout.css";
	loader.addEventListener(Event.COMPLETE, onCSSLoaded);
	loader.load(request);
}

The loadCSS method creates a URLLoader and URLRequest, which it uses to load the CSS file and set a complete event. When the CSS file has loaded and the complete event fires, we will catch the event with the private onCSSLoaded method. Within this method is where we will finally begin to apply our styles.

private function onCSSLoaded(evt:Event)
{
	var layout:StyleSheet = new StyleSheet();
	layout.parseCSS(evt.target.data);
	
	this.txtField.styleSheet = layout;
	this.txtField.htmlText = ’<body><p class="title">Using Stylesheets with Flash CS3</p><br/><p>My body text resides here.</p></body>’;
}

The first thing that we need to do is create a new StyleSheet object. This object is then used to parse the CSS into a format that we can use to apply the styles to the appropriate textfield. The parsing is made possible with the native parseCSS method, which takes the event.target.data, or in other words, the CSS, which was loaded. Once it is parsed, it can be used as the stylesheet for our text field by simply setting it to the text field's native stylesheet property.

Next, we need to set our dynamic text. In a real world situation, this text would probably be coming from an external source, such as an XML file, a database, and so on, but for the sake of this sample, we will set the text directly in the Document class.

Notice that the text includes a body tag, which encapsulates all of the text. This means that all of the text within it will receive the styles that we defined in the stylesheet for the body tag.

Next, you'll notice that we have used a paragraph tag to set a title class—everything within this tag will receive the title styles from the stylesheet.

Like I said earlier, the best part of using an external stylesheet with Flash is that anyone can change the styles at a later time without having to republish the movie. This means that we can have a stylesheet that styles an entire web site and the Flash movies within it, make a change to that stylesheet, and have it automatically applied to everything.