Author: Neil Webb, neil AT nwebb DOT co DOT uk, http://www.nwebb.co.uk
Difficulty Level: Beginner
Requirements: Flash MX 2004
Assumed Knowledge: Basic HTML (some CSS an advantage)
File(s) to Download: css1.zip
Online Example: None

Flash MX 2004 introduces Cascading Style Sheets

A style sheet is simply a collection of rules that specify how HTML (or XML) elements within your Flash movie or web page should be formatted. Styles for Flash can be loaded from an external CSS file or created in Flash itself using ActionScript. So what does this mean for you?

Well, suppose you have created a website, with many different textboxes, on many different frames and/or loaded movies, and then your employer decides that they don't like the font you've used, or that they want it to be a different colour. Previously this would have meant going back through the entire site and manually changing all the text boxes to reflect their wishes. A tedious job indeed. Well, not any more?

For the purpose of this tutorial we can say that Cascading Style Sheets allow you to control the look and layout of elements from within one core file*.

We're going to cover most of what you need to know in order to create an external style sheet and apply it to a Flash movie. If you are unfamiliar with CSS I recommend that you follow some of the great tutorials that are already out there on the web, at places such as http://www.westciv.com/style_master/academy/hands_on_tutorial/
However, be aware that only certain style-options are supported in Flash, so if you only plan to use CSS in the context of Flash, then you don't need to delve too deeply into these HTML-based tutorials. You'll also be glad to know that Style sheets are not rocket science, and you'll be able to pick up the gist of what's going on quite easily?

There are three ways to create styles:

• redefining built-in HTML formatting tags supported by flash (such as <p> and <li>)
• create style "classes" that can be applied to specific HTML elements using the <p> or <span> tag's class attribute
• define new tags

If those bullet points didn't make a whole lot of sense to you, don't worry, we'll be covering how to redefine HTML tags and create style "classes" in just a moment, and as for defining new tags, you'll find that information in the accompanying tutorial I have written: CSS/HTML/XML in Flash.

So let's start by looking at the CSS properties that the flash player does support. You don't need to memorize the information in the following tables, but you can come back to them at a later stage for reference.

The main thing to note, if you later plan to create your CSS file in Flash using ActionScript, is that each ActionScript property name is derived from the corresponding CSS property name, but the hyphen is omitted and the subsequent character is capitalized (often referred to as camel notation), but as we plan to create an external sheet, this is currently of no concern to us.

CSS property	ActionScript property	Usage and supported values
text-align	textAlign	Recognized values are left, center, and right.
font-size	fontSize	Only the numeric part of the value is used; units (px, pt) are not parsed; pixels and points are equivalent.
text-decoration	textDecoration	Recognized values are none and underline.
margin-left	marginLeft	Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
margin-right	marginRight	Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
font-weight	fontWeight	Recognized values are normal and bold.
font-style	fontStyle	Recognized values are normal and italic.
text-indent	textIndent	Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
font-family	fontFamily	A comma-separated list of fonts to use, in descending order of desirability. Any font family name can be used. If you specify a generic font name, it will be converted to an appropriate device font. The following font conversions are available: mono is converted to _typewriter, sans-serif is converted to _sans, and serif is converted to _serif.
color	color	Only hexadecimal color values are supported. Named colors (like blue) are not supported.
display	display	Supported values are inline, block, and none.

Let's assume we want to create a style. The style will consist of one or more properties. For instance, we may want our style to have a color property of blue, and a size property of 11 pixels. If so, then our code would look something like this:

font-size: 11px;
color: #0000FF;

Okay, so what we need is a way of telling our textbox to format a portion of our text according to these rules; but how do we tell our textbox what text to select? Well, CSS properties are no good on their own. We need to use them in conjunction with HTML tags, and luckily for us, Flash MX 2004 supports more HTML tags than its predecessor...

Let's have a look at another extract from the Flash dictionary that tells us which HTML tags are supported and then we'll be ready to roll:

Style name	How the style is applied
p	Affects all <p> tags.
body	Affects all <body> tags. The p style, if specified, takes precedence over the body style.
li	Affects all <li> bullet tags.
a	Affects all <a> anchor tags.
a:link	Affects all <a> anchor tags. This style is applied after any a style.
a:hover	Applied to an <a> anchor tag when the mouse is hovering over the link. This style is applied after any a and a:link style. Once the mouse moves off the link, the a:hover style is removed from the link.
a:active	Applied to an <a> anchor tag when the user clicks the link. This style is applied after any a and a:link style. Once the mouse button is released, the a:active style is removed from the link.

Creating Our Own Cascading Style Sheet For Use With Flash

Open up your favourite text editor. Fingers at the ready, but don't start typing just yet. We're going to cover those two ways of defining our styles.

CSS styles can be assigned to every instance of a built-in HTML tag that appears in a text field. So, for example we can define a style for the p (paragraph) tag that will mean all text enclosed within any p tag in your textbox will share the same font, font-size and colour.

Using a color property of blue, and a size property of 11 pixels (as we mentioned above), and an additional "font-family" property, our CSS definition for the p tag would look like this:

[as]p {
  font-family: Arial,Helvetica,sans-serif;
  font-size: 11px;
  color: #0000FF;
}
[/as]

Notice how the above example looks like a function. In essence that's what it is. Every time a "<p>" tag is encountered, the code inside the curly brackets would 'run' and be applied to all the text within the opening and closing p tags on the page.

Using our previous example, if I were to write <p>Hello World</p> the text inside the p tags would be formatted according to the properties we specified above and the properties native to the p tag itself. Therefore it would appear as a paragraph, but would also be blue, 11px and written using the Arial, Helvetica, sans-serif font-family.

We can also create style "classes" that can be applied to specific HTML elements using the <p> or <span> tag's class attribute (don't get CSS classes confused with classes in actionscript2 - as they're not the same thing).

CSS classes start with a period, followed by a class name. We can choose our own suitable name like so:

[as].alert {
  font-family: Arial,Helvetica,sans-serif;
  font-size: 14px;
  color: #FF0000;
}
[/as]

Before I show you an example of how this can be applied, we should quickly cover the purpose of the <span> tag. Simply put, span is a tag that doesn't do anything in itself (unlike the p tag which, on its own, would apply some formatting to the text inside it), but can be used in conjunction with a CSS class to format text, and this will become apparent in the following examples:

To use a span tag we need to learn about the class attribute?

Infact, both p and span tags can accept an attribute called 'class'. First I'll show you how to use it in conjunction with the span tag:

<span class='alert'>Goodbye cruel world!</span>

Notice that we didn't write <span class='.alert'> (the period is only needed when we first define the class).

As I said, span in itself does nothing, but now we have given it a class-attribute of 'alert' and so any text inside our opening and closing tags will be 14px, red and use the Arial, Helvetica, sans-serif font-family.

Finally, a demonstration of using class attributes with the p tag is needed:

<p class='alert'>Two pints of lager and a packet of crisps please</p>

What would happen in this scenario is that the text would be formatted as a paragraph, and according to the attributes specified in the CSS paragraph-definition, but then it would inherit the properties of our alert class. Because these are exactly the same properties as defined for p (but with different values) the alert class's properties would over-ride those defined for the p tag. Therefore our text would be 14px, red, use the Arial, Helvetica, sans-serif font-family, and be formatted as a paragraph.

Okay enough of that. Let's create our style sheet

We're going to create an external Cascading Style Sheet for use in Flash. This involves three main stages as listed below:

• Create a style sheet object
• Add styles to the style sheet object
• Assign the style sheet object to a text field that contains XML- or HTML-formatted text

Note: When you assign a style sheet object to a TextField object, the following changes occur to the text field's normal behaviour: The text field becomes read-only and cannot be edited by the user.The setTextFormat() and replaceSel() methods of the TextField class no longer function with the text field. The only way to change the field is by altering the text field's text or htmlText properties, or by changing the text field's associated variable. Creating the stylesheetMost of what follows is now only a slight variation of the example in the actionscript dictionary
For those of you who are avoiding the dictionary due to past experiences, I would suggest you to take a look. The example for this was quite clear and concise (so, if it ain't broken? as the saying goes):

Copy and paste the styles below in to your text editor and save it as "example.css":

[as]p {
  color: #000000;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 12px;
  display: inline;
}

a:link {
  color: #FF00FF;
  text-decoration: underline;
}

a:hover{
  color: #999999;
  text-decoration: none;
}

.headline {
  color: #0000FF;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 18px;
  font-weight: bold;
  display: block;
}

.byline {
  color: #666600;
  font-style: italic;
  font-weight: bold;
  display: inline;
}
[/as]

------------------------------------------------------------------------------

Creating the flash movie

1. Open a new flash (fla) file.
2. Create a dynamic textbox on stage, approximately 400px*120px
3. Make the box multiline and turn the "render text as HTML" option on but do not include font-outlines for your textbox
4. Give the textbox an instance name of myText

Now, in the first frame of the timeline, add the following code to the actions panel:

[as]//Create a new style sheet object
var myCSS = new TextField.StyleSheet();

//Specify the location of the CSS file that you created earlier
var cssURL = "example.css";

//Hard code some HTML text to display (for example purposes)
exampleText = "<p class='headline'>Tutorial Takes Forever To Write</p>";
exampleText += "<p><span class='byline'>Bath, UK</span>";
exampleText += "--Flash developer NWebb seemed to take ";
exampleText += "forever to finish his CSS-Flash tutorial, ";
exampleText += "but it is finished now and you can find it ";
exampleText += "<a href='http://www.nwebb.co.uk'>here</a> ";
exampleText += "along with a few others.</p>";

//Load CSS file
myCSS.load(cssURL);
//define onLoad handler
myCSS.onLoad = function(success) {
        if (success) {
                /* If the style sheet loaded without error,
                assign it to the text object, and assign the HTML text to the
                text field*/
                myText.styleSheet = myCSS;
                myText.text = exampleText; //this should be ".htmlText", 
                // but Flash seems to recognise that the textbox needs to display html anyway
        }
};
[/as]

In the above code we created a new StyleSheet object (an important thing to note is that StyleSheet is a class whilst styleSheet (first 's' is lowercase) is a property, so don't get them confused!)
Once we did that, we used the available 'load' method to load in our example.css, and used the 'onLoad' method to check it had loaded in properly. We then associated the style sheet with the textbox before assigning our text to the textbox.

Save your flash movie as example.fla in the same location as your stylesheet.
Run the movie to test that everything works.
To see the change, alter one of the colours or other properties in your stylesheet and re-test!
That's it. You may be interested to read the follow up tutorial to this "XML/HTML/CSS in Flash", which covers loading in XML formatted content dynamically, and also covers defining new CSS tags, which I decided not to cover in this tutorial.

---

If you have any suggestions or comments about this or any of my tutorials you can email me at [email:neil@nwebb.co.uk]and I will do my best to answer them. Please note that due to the volume of Flash-related emails I get, I now prioritize emails related directly to the tutorials themselves. You may find answers to your questions already posted on Flash forums such as actionscript.org

This, and other tutorials can be found on nwebb.co.uk