Tài liệu Formatting Text Fields with Cascading Style Sheets pdf

< Day Day Up >

Formatting Text Fields with Cascading Style Sheets
Cascading Style Sheets (CSS) have become an essential tool in the creation of modern
Web pages because of the extensive formatting capabilities they provide. With Flash MX
2004, text fields now have access (albeit somewhat limited) to that same power.
NOTE
This lesson is not intended to be an extensive overview of Cascading Style Sheets, but
rather a simple introduction.

A Cascading Style Sheet is a set of rules that describe how various elements are styled
and formatted in a tag-based document. Although this might sound complicated, it's
actually very simple. As always, the best learning tool is an example.
Imagine you have an HTML document structured like this:

<greeting>Hello!</greeting>

<message>I hope to see you soon.</message>

<signature>Derek</signature>


This document doesn't contain any of the normal HTML tags. Instead, it contains text
placed between custom tags that we made up. This is the first part of the Cascading Style
Sheet equation; next, we create our style sheet to describe the formatting that each of
these tags represents:

//this is our cascading style sheet

greeting {

color: #663399;

font-family: Arial, Helvetica, sans-serif;

font-size: 16px;

font-weight: bold;

display: block;

}

message {

color: #FF3300;

font-size: 12px;

font-weight: normal;

display: block;

}

signature {

color: #990000;

font-size: 14px;

font-weight: italic;

display: block;

}


This style sheet contains three rules: greeting, message, and signature. The formatting of
each rule is defined within the curly
braces. Each line within the curly braces represents a
formatting property (color, font-family, font-size, and so on) followed by a colon (:),
followed by the value of the property, followed by a semicolon (;).
When this style sheet is applied to our HTML document, text between specific tags takes
on the formatting of that tag as defined in the style sheet; therefore, the text "Hello!"
appears in a purple, bold, 16-pixel, sans-serif font.

There are major benefits to using style sheets. Formatting your document is a breeze
because the styling of elements requires the use of a single tag, as opposed to a bunch of
nested tags. Another benefit is that if you have several hundred or even thousand HTML
documents that get their styling via a style sheet, updating the rules in that single style
sheet automatically updates the formatting of all those documents.
Although the standard that defines modern Cascading Style Sheet usage allows for some
extensive formatting capabilities, Flash's implementation of Cascading Style Sheet
functionality is somewhat limited. We'll discuss this in a moment, but now let's look at
how Cascading Style Sheets are used in Flash.
Cascading Style Sheets can be used in Flash to define how text displayed in a dynamic
text field should be formatted. The CSS can be defined internally within a movie using
ActionScript, or can exist externally from Flash in a text document with a .css file
extension. Creating and using Cascading Style Sheets within Flash requires use of the

StyleSheet object. The syntax used to define the rules in the style sheet varies depending
on whether the style sheet is internal or external. To help bring this all together, let's look
at an example:

var myStyleSheet:TextField.StyleSheet = new TextField.StyleSheet();


This line creates a StyleSheet object named myStyleSheet. The setStyle() method is used
to define rules for this object within Flash:

myStyleSheet.setStyle("greeting", {

color: '#663399',

fontFamily: 'Arial, Helvetica, sans-serif',

fontSize: '16',

fontWeight: 'bold',

display: 'block'

});


This syntax creates a greeting rule (similar to the one discussed earlier) within the
myStyleSheet object. However, there are some syntactical differences between this
definition and the one shown earlier. The syntax shown earlier represents the standard
syntactical structure of a Cascading Style Sheet (including external style sheets that
would be loaded into Flash). The syntax shown above for defining a style is unique to

ActionScript, and should only be used when defining rules using the setStyle() method.
The main differences to note here are that the style is defined within parentheses; the
style's name is within quotes, followed by a comma; property values are between single
quotes (''), property settings are terminated by commas instead of semicolons; and the last
property definition (in this case, display) is not terminated by anything. Another subtle
difference is the fact that standard style sheet syntax defines property names using
hyphens (font-family, font-weight, and so on), but internally these same properties are
defined by removing the hyphen and using an uppercase character instead (fontFamily,
fontWeight, and so on).

To apply this style sheet to a text field, you simply set that text field's styleSheet property
like this:

myTextField_txt.styleSheet = myStyleSheet;


Now, whenever any text loaded into that field makes use of the <greeting> tag, that text
is styled according to the greeting rule:

myTextField_txt.htmlText = "<greeting>Hello!</greeting>";


NOTE
Although it should be obvious, a text field must be set to render HTML for style sheets to
work in that field.

Using external .css files is a bit different, yet still requires the use of a StyleSheet object.
Let's look at another example (which assumes that there is an external .css file named
myCSS.css containing style rules):

var myStyleSheet:TextField.StyleSheet = new TextField.StyleSheet();

myStyleSheet.onLoad = function(){

myTextField_txt.styleSheet = myStyleSheet;

}

myStyleSheet.load("myCSS.css");


The first line of this script creates a StyleSheet object for holding the external style sheet
rules. The next several lines assign that object an onLoad event handler so that when the
external style sheet has completely loaded into it, that object is set as the styleSheet
property of the myTextField_txt text field. The last line begins the loading of the external
CSS file.
As mentioned earlier, Flash's implementation of Cascading Style Sheets is somewhat
limited. It offers support for the following style properties (shown using their standard
HTML names followed by their ActionScript names):
•
color (color)
•
display (display)
•
font-family (fontFamily)
•
font-size (fontSize)
•
font-style (fontStyle)
•

font-weight (fontWeight)
•
margin-left (marginLeft)
•
margin-right (marginRight)
•
text-align (textAlign)
•
text-decoration (textDecoration)
•
text-indent (textIndent)
NOTE
For a complete listing of acceptable values for these properties, consult the ActionScript
dictionary.

In the following exercise, we set up our Flash browser so the user can change the
formatting of the loaded HTML pages via submenu choices on the Style menu. The
exercise uses both internally and externally defined style rules. The externally defined
rules are contained in an external .css file that will be loaded as needed.
1. Open flashBrowser2.fla.
Because this exercise is a continuation of the preceding one, you should be
familiar with the elements within the project, including the MenuBar component
instance and the text field named window_txt where the external HTML files are
loaded. In this exercise, we'll simply add ActionScript to Frame 1 of the Actions
layer.
2. Using your operating system's directory-exploring application, navigate to the
Lesson14/Assets directory and locate the following files:
o
home.htm
o

science.htm
o
external.css
The first two files are the HTML documents that our browser is already set up to
load. The other file is an external .css file, which our application will load and use.
3. Using your favorite HTML editor, open home.htm.
We opened and looked at this document in the preceding exercise, but with a
different purpose. This time, notice how various portions of text are placed