CSS in Flash the return of crisp and legible fonts. by David
Collado
A typical challenge faced by Flash developers like me is getting fonts to look
like you want then to. For any project choosing the right font face and size is
a process that requires both you and ultimately the client to see eye to eye.
In Flash MX and earlier versions fonts were by default anti-aliased, meaning
that the edges of the text are smoothed. This is good when dealing with large
type but it causes small text to appear blurry. Earlier versions of Flash also
had other issues. For instance if one were to realign textfields around other
objects fonts might come out of focus (because of positioning), and getting it
right could take several tries.
More recently with the advent of Flash MX 2004 came the "alias text" option
but, more importantly the TextField.StyleSheet() class. What is the
TexFiled.StyleSheet() class? I'll get to that but first let me tell you about
this new "alias text" feature. The latter hides the anti-aliasing to make small
text sharper and more legible yada, yada, yada. However, most often than not,
fonts appear overly pixilated and cracked. In my opinion "alias text " is
nothing more than a little ransom note generator making every character appear
as if it had been cut out of a magazine. Adding insult to injury if you are
publishing for the Flash 6 player or earlier versions on Flash MX 2004 the
"alias text" feature does not work on dynamic and or input textfields.
Moving forward with stylesheets. If you don't already know something about CSS
don't fret the small stuff. Get to your favorite search engine and key in CSS
(short for Cascading Style Sheets), and in seconds flat you will find hundreds
of articles on CSS benefits, syntax, usage and whatnots. Very quickly, CSS is
the language of style on the web and as opposed to other languages CSS is much
easier to read and write. One of the reasons for this is you can pretty much
read everything just as you would plain English, another is the ability to
write everything in lowercase, something you could never getaway with in
JavaScript.
CSS in ActionScript is relatively simple. The first thing we want to do is open
the Action panel and create an empty style sheet object. Basically the idea is
to load our style sheet information in there (font size, weigh, color etc.),
and then assign that information to some text. Not only will you have more
crisp and legible fonts but more importantly, this mean you can change details
about your font in an entire Flash site by simply editing one file. Pretty
powerful stuff huh? Very handy when clients decided they don't like red anymore
or call to tell you that the font is too small. In the past such changes could
be very time consuming, requiring developers to go through the whole movie
editing textfield after texfield one at a time; providing that the client was
happy with the changes you'd might get lucky and only need to run around that
track once.
In my line of work I convert pre-designed web sites (web templates) into a
unique Internet project (web sites), in other words I work with pre-made
website templates. The whole basis for using a website template is to develop
fast and high-quality website in half the time that it would normally take a
regular design studio to do the same. Utilizing style sheets with my Flash
templates enables me to keep my production time at a minimum and ultimately the
time I save will benefit my clients. For detail instruction on how to create a
style sheet object in Flash MX 2004 simply open the help panel and search under
the keywords "cascading style sheets". In all fairness I must mention something
about Pixel fonts. Pixel what? Pixel fonts are fonts specially designed so that
every part of every character falls exactly on the monitor's pixel. Pixel fonts
are incredible at getting fonts at small sizes looking crisp and legible at any
resolution. If you are wondering if Pixel fonts would display correctly on the
end user's computer or some other platforms that does not have these fonts
already installed. The answer is yes, but Pixel fonts must be embedded to
ensure they are displayed correctly on every computer. The downside here is
that embedding these fonts means an increase in file size which in turn causes
an increase in bandwidth needless to say bandwidth determines the rate at which
information is sent.
Nevertheless if you want to use fonts that look crisp even at small sizes
without the use of CSS, Pixel fonts are right for you. To buy and or read more
about Pixel fonts checkout these website www.FontsForFlash.com and
www.ductype.com.
In sum the choice is your, on smaller projects I would actually prefer Pixel
fonts over cascading style sheets, I mean why bring a gun to the snipe hunt
when all you need is my gunnysack. On the other hand you can do without a lot
of unnecessary frustration going with CSS when working on larger projects.
About the Author
Dave Collado is a senior design consultant at www.Foamers.net.
Foamers.net offers quality website templates, template customization, flash
templates, phpnuke themes, phpbb themes, osCommerce templates, SWiSH templates,
icon sets, web design tutorials, and many other web design and web hosting
services.
|
