Formatting with CSS in ActionScript

**chili5** · 08-29-2009 06:09 AM

CSS and Action Script

Earlier we looked at the text format object as a way of doing simple formatting. What if you need more control? This is where you can use CSS to get a lot more flexilibity over your formatting.

This is where it helps to have a basic understanding of HTML as well. You can use html in your flash program by setting the htmlText property instead of the text property.

For this tutorial, we are going to create a text field in code and add it to the stage. Use this code:

Code:

var txtCC:TextField = new TextField();
txtCC.selectable = false;
stage.addChild(txtCC);

This should all make more sense now, and it really isn't complicated. The text field will appear at the top left of the stage.

htmlText Property

The generic HTML for a link is:

Code:

<a href="path">text</a>

We would replace path with a URL that we want to link to. If you are familar with HTML you know that there are other properties such as target that you can use. Those you can use in AS as well.

Code:

txtCC.htmlText = '<a href="http://www.codecall.net">Code Call</a>';

When you run it, you will see codecall and if you move the mouse over the control the cursor will change. One thing to note is that there is no default settings in the Flash Player unlike in the web browser.

CSS for the link

When the user doesn't have the mouse over the link we want the text to be underlined and red. When the user moves the mouse over the link, we don't want the text to be underlined and the color will become blue.

Just the CSS for this is:

Code:

a {
	text-decoration: underline;
	color: red;
}

a:hover {
	text-decoration: none;
	color: blue;
}

If I was making an HTML page, that is what I would use. We might have to use hexadecimal in Action Script though. The :hover is a pseudo class which allows you to format things when the mouse moves over the element. In this case when the user hovers over a link.

Using a style sheet object

The first thing we have to do is create a new style sheet object.

Code:

var styles:StyleSheet = new StyleSheet();

Now, we can set the styles for the style sheet and then apply them to the label (actually a text field).

Example:

Code:

styles.setStyle("a",{color:"Red"});

The setStyle takes two parameters the HTML element to add the property to and the property to set. The properties to set should appear in brace brackets. The property is not in quotations and followed by a colon. Then in quotes is the value of the property.

If you are setting more than one property, they should be seperated by colons like this:

Code:

styles.setStyle("a",{color:"Red",backgroundColor: "green"});

Notice that backgroundColor is in camel case. In the web browser, we would write it like this:

Code:

background-color

However, in flash this doesn't work. You must use camel case.

The styles that we want to set for the link are:

Code:

styles.setStyle("a",{color: "#FF0033",textDecoration: "underline"});

You have to use hexadecimal for the colors. Applying the styles to the text field is as easy as this:

Code:

txtCC.styleSheet = styles;

Mouse Overs

Now, we are going to set the styles for a:hover. This isn't anything different.

The code is:

Code:

styles.setStyle("a:hover",{color: "#6666FF", textDecoration: "none"});

Add thatt line just about the txtCC.styleSheet line. Then run the program again.

Calling a function on click

You can also link to a function from a link. To demonstrate this we are going to add a second text field.

Code:

var txtLink:TextField = new TextField();
txtLink.x = 100;
txtLink.y = 50;
txtLink.htmlText = '<a href="event:output">Output</a>';

stage.addChild(txtLink);

We are going to apply the same style sheet above to this text field.

Code:

txtLink.styleSheet = styles;

Now, we can set up an event listener to listen for link clicks and a callback function to respond.

First the listener:

Code:

txtLink.addEventListener(TextEvent.LINK,output);

When the Link is clicked, we will call the output function which will count how many times you clicked the link. At the top of the file create a variable nCount = 0.

Code:

function output(e:TextEvent):void {
	nCount++;
	txtLink.htmlText = '<a href="event:output">' + String(nCount) + '</a>';
}

Everytime that you click the event, that function will be called and you will get a running total of how many times the link was clicked.

External Style Sheets

Later, we will assess if it is possible to use external CSS files to save us time. The beauty of this is, you could change the design without recompiling your flash movie.

You can view the result here: CSS.swf.