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:
[ 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:
Need Help?
If you have questions, need some assistance on this topic, or just want to
chat - please drop by our friendly forums
and post your question. There are a lot of knowledgeable and witty people who
would be happy to help you out. Plus, we have a
large collection of smileys
you can use
Share
Did you enjoy reading this and found it useful? If so, please share it with
your friends:
If you didn't like it, I always like to hear how I can do better next time.
Please feel free to contact me directly at kirupa[at]kirupa.com.
Cheers!
|
