Tutorial details: Cascading Style Sheets in Flash MX 2004
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. View the next page for the
first table...
|
