Screen fonts

Aliased text

Ok here's a quick tutorial for making aliased text in Flash. The are a few ways of doing this (use device fonts etc etc) but this is the one I use the most. It's a bit of a slow process but once you've started doing it you will never be able to go back to using crappy anti-aliased text that flash makes (well I can't anyway). This is only really a problem for small fonts...

OK I will start by opening Flash 5 and typing some text with a screen font. Here's how it looked when I published it.



Ugly!

OK open photoshop and make a 400px X 400px (72 dpi) file that has the same background colour as your flash movie. Now type the text you want using the same font and pt size. Make sure that anti-alias is set to "none".



OK now with the text layer selected use the Rectangular marquee tool to drag a selection over your text. This doesn't have to be even around it or anything - just as long as it is all selected. Now go "Copy" and make a new file - the size of this new file will default to the size of the text you just copied - you need to adjust this by increasing the width and height by about 5 pixels each. Make sure the new file has a transparent background.



OK with the new file at the front go "paste" and you should see your text right in the middle of your transparent background. Now go to the File menu and choose "Save for Web". Use these settings -



Click "OK" and save the file with an appropriate name. The file that gets produced looks like this -

Hmmm much nicer.

You can now bring that gif into flash and enjoy the funky goodness of aliased text in Flash. Just in case you don't believe here's a screen grab of that gif in a flash swf



I highly recommend that you put this FS command in the first frame of your flash movie.

fscommand("allowscale",false);

Otherwise your movie will scale up and your text will look blurry again.  In more recent versions of Flash, Adobe have been adding more and more control over the way Flash anti-alias' your text.  In CS3, this can be controlled via the anti-alias dropdown menu that appears in the Property Inspector when you have a text box selected.

For a more dynamic solution make sure you check out the guide to fonts in flash.

Other relevant sites to check out -
www.miniml.com
www.gmf.as/tips/tipfonts3.html
www.fontsforflash.com