Skip to Content

Stick to 100%
When you publish a Flash movie, it converts type into vector shapes, just as it does with any other rectangle or curved shape. Unlike print or Web publishing, you don't have to worry about the user not having the font installed. They will see exactly what you want them to see. The downside is that you have to publish the movie at a fixed size that can't be scaled. In the 'File' menu 'Publish Settings...' dialog 'HTML' tab, select 'Dimensions: Pixels' and 'Scale: No Scale'. This means that the user can't scale your Flash, movie within a Web page.

Animating Pixel Fonts
For small static text in a Flash movie, pixel fonts provide crisp type that stands out in just in the same way that a photographer uses depth of focus to make a subject prominent from its surroundings. They eye will immediately go to the flower in the bunch that is sharp. If you are animating the text however, this same sharpness can be a drawback. Instead of gliding smoothly across the screen, it will seem to move in a series of staccato jumps. The solution is to add some blurring by deliberately shifting the text off the pixel grid - until it comes to rest. This means that you have to make some delicate adjustments when tweening and works best when the burring is in the same direction as the movement - just like Photoshop's 'Motion blur' filter. Ideally, the amount of blurring should increase with the animation speed. See the tip near the end of this article for making very fine adjustments.

Larger Blocks of Text
Although there are few difficulties in setting short lines of text with pixel fonts, some Flash designers want to set larger blocks of text and find they have problems. As the lines of text become longer, it becomes increasingly difficult to make sure that every pixel in the type lands exactly where it should. When you string a long line of characters together, the cumulative effect of very small errors in the character widths means that they move progressively further off the pixel grid, maybe coming back onto it again further along.

The errors could be in the font design or in the computer's translation from its idea of points into pixels. Points and pixels are the same on Macs - 72 to the inch, so there's less chance of problems there. On Windows, there are 96 pixels per inch, so point-to-pixel conversion calculations are required and rounding errors can creep in.

To make matters worse, Flash's line spacing is specified in points even when everything else is working in pixels. Points and pixels don't mix on Windows! If you find that multi-line text is becoming blurred, you can try breaking it up into individual lines. If some text is sharp and some blurred on the same line, the only workaround is to publish the .SWF file at 'Low Quality'. I have seen the same line of text look fine on one PC and going in and out of focus on another - probably down to the fact that there were different video cards.

Dynamic and Input Text
As Flash converts static text into outlines, large amounts of text can lead to large file sizes and slow downloading times. Embedding a font (or just the characters used) into the movie can help keep the files to manageable sizes.

When you embed a font into a Flash movie, it's converted into Flash's own internal format. In doing so, the font size can be changed. It doesn't matter if you change the size of a regular printer font, which is going to anti-alias anyway, but changing the size of a pixel font usually means that it will blur. Some freebie fonts get round this problem by making the font the same size as Flash's internal format. Commercial font developers, however, are wise to the fact that being able to set text with their fonts on a Web page and screen grab it means nobody will pay for them. If you want to use dynamic or input text in Flash, consider using a 'Device Font' like Verdana or Georgia to minimise file sizes.

Sub Pixel Adjustments
Finally, a tip to see how your font pixels are hitting the screens pixel grid.

Flash's magnification popup only goes to 800% but the field beside it allows you to type whatever you like up to 2000%. At 1600%, and with 'Snap to Pixels' switched on, you can actually see the page's pixel grid and how the font pixels relate to it.

Some people don't realise that an objects X, Y position can relate to its top left corner or to its centre. A tiny icon on the 'Info' palette consists of three rows of three squares. The black square represents the point from which measurements are made to any selected object. The black square should be in the top left corner for pixel fonts because measurements made to the centre won't lock to the grid. The top left of the text's bounding box should be on the pixel grid lines, as should every pixel of each character.

You can adjust individual character positions using 'Break Apart', in the 'Modify' menu. By typing values into the X, Y coordinates in the 'Properties' or 'Info' palettes; you can move characters by a tenth of a pixel in any direction.

Using 'Break Apart' a second time turns the characters into shapes and they can no longer be edited as type, but can be edited as shapes. Flash does this anyway when the movie is published. Unless you want to modify a character for some reason, you don't need to go this far.

Rate this tutorial

  • 1
    Poor

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
    Great

Add a comment | Read comments