Using
CSS
Styles: Page 3
by
kirupa
If you stumbled upon this page without having
completed the previous page, do take a few moments to catch-up
with us.
Click here
to return to the previous page. For everyone else, let's
continue to learn about CSS in Flash.
As much as I would like to, I am not good
enough with CSS to explain how to use it. Instead, the
following site should help you out tremendously:
http://www.htmlgoodies.com/beyond/css.html I will
explain how to use CSS within Flash and any extra tricks you
may like.
The CSS File
In the ActionScript, no doubt I'm sure you noticed
that a file called
flash.css was being loaded from a location on the
server. Well, without further delay, here is the content of
the flash.css file:
.one {
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
font-weight: bold;
color: #396780;
}
.two {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #2D5164;
}
.three {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #1D3441;
}
.four {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
color: #000000;
}
[ CSS file created in
DreamWeaver MX 2004 ]
If you were the further analyze the HTML
text in the variable quick, you will see a sentence that
starts and ends like this:
<p class='one'>The quick
Kirupa jumps over the lazy dog.</p>
Notice that the above sentence is
formatted with the style "one" taken from the CSS file. If
you were to replace the text one with something like
four, you will notice that the text in your animation
absorbs the characteristics defined by the four style
in the CSS file. Also, if you were to remove the <p> tags
altogether, the format of the text will be what you manually
define in the Properties Panel for the text panel.
While CSS has numerous properties that it
can modify for various elements beyond text, the current
implementation of CSS in Flash is quite limited. The
following table, copied from the Flash MX 2004 ActionScript
dictionary, shows the tags Flash MX 2004 supports and
interprets:
CSS
ActionScript
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.
While the above list contains many of the
tags you would probably use, you should be aware that when
using a third-party program like DreamWeaver to create the
CSS tags, several of the tags will simply be ignored by
Flash. So, if your CSS file includes a line for text
background-color, Flash will simply skip that line and apply
the above properties that it does understand.
With that table, you have reached the end
of this tutorial for now. As new updates and revisions
occur, I will be sure to drop a line on the home page to
inform you of that festive occasion. CSS is really useful
for Flash sites that want to convey a lot of information,
and now you have the ability to easily implement CSS styles
using nothing more than a simple style sheet.
If you want to take a look at how I
created my version of the animation, download the source
file from the following link:
Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.
Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.
This is a companion discussion topic for the original entry at https://www.kirupa.com/developer/mx2004/css3.htm
