USAGE OVERVIEW

Imagine the screen as a series of pixels. When you place a font on the stage, it must remain "on pixel" for it to remain sharp (aliased). Figure 4.6 shows an example of this.

Figure 4.6. The font needs to correspond to the screen, pixel per pixel..

Flash makes it easy for you to get lost in the movie, with multiple timelines in the form of movie clips. Because each movie clip has its own set of pixel coordinates, you must be aware of how the movies relate to one another (see Figure 4.7).

Figure 4.7. All movie clips need to stay consistent with the main timeline.

The following guidelines enable you to get the sharp, legible text that is so vital for small screens. Keep in mind that these rules only apply to fonts that you download from www.miniml.com. Other fonts will not work because they were not designed for Flash. Miniml fonts work equally well in Flash 4, 5, and MX (see the Note that follows). You can also use miniml fonts in most design applications.

Flash MX condenses all the Flash 5 type panels (Character, Paragraph, and Text Options) into one larger Type Inspector. Despite the visual reorientation, all the usage guidelines are unaffected by this new version.

The fonts will work the same whether the text you are using is static, dynamic, or input. Do not use the bold or italic style options to affect the appearance of the font. Using the superscript or subscript options will anti-alias the type.

• Font height. Miniml fonts must be used at the intended point size for optimal results. Set the Font height to 8 point or any multiple of 8 (16, 32, and so on), as you see in Figure 4.8.

  Figure 4.8. Set the font height to 8 (or any multiple of 8).

  

• Paragraph alignment. Use Left Justify paragraph alignment (see Figure 4.9). Although you can use the other settings, Left Justify is recommended for easier registration.

  Figure 4.9. Set paragraph alignment to Left Justify.

  

• Embedding the font. Embed the font when using it as dynamic or input text (see Figure 4.10). (Static text embeds it automatically.) If you don't embed the text, the font will not display properly on the end user's screen.

  Figure 4.10. Embed the font for proper display.

  

  

  To reduce exported file size, only embed the characters you need. You can also include single characters, which is useful in cases such as the @ symbol for email addresses, instead of including the entire font outline.

  
  

• Font placement. The font must be placed on a whole pixel. Use the Info panel in Flash to determine the font's _x and _y position (see Figure 4.11). The numbers must be set to a whole integer value (for example, 23.0, not 23.5). You must also set the point of registration to the upper-left corner (see Figure 4.12).

  Figure 4.11. Use the Info panel to determine coordinates.

  

  Figure 4.12. The point of registration needs to be set to the upper left.

  

  

  When you are using the fonts with motion, such as a scrollbar, it is easy to set the font off pixel. To fix this, you need to force the _x and _y values to return to whole integers. Use the following ActionScript code on each instance that will be in motion:

  
  

   _x = Math.floor(_x);  _y = Math.floor (_y); 

• Symbol registration. Flash centers the point of registration when you convert an object to a symbol, such as a movie clip. Go into the symbol and make the registration point the upper-left corner. Zero the _x and _y coordinates to reposition the clip for consistent stage placement (see Figure 4.13).

  Figure 4.13. You need to zero the coordinates to the upper-left registration point every time an object is converted into a symbol.

  

• Publishing. Always view the movie at its intended size (100% scale). Preview the movie in Flash Player 5. Click directly on the exported SWF to open the file in Flash Player 5. The original scale of the movie must be keep intact for the fonts to appear correctly. Any scaling introduces unwanted anti-aliasing. This is important to keep in mind when placing movies inside HTML documents. Match the movie dimensions (pixel width and height) of the source Flash movie exactly. If you are using the Pocket PCHTML template, use the Dimensions: Match Movie option under the Publish Settings (see Figure 4.14).

  Figure 4.14. Settings for the Pocket PC template.

  

These are the main guidelines to use the fonts. It is best to build with these guidelines in mind because it is often difficult to find the source of trouble if you are in too deep.

For your information (and to save you some future frustration), there is a known problem in Flash when dealing with bitmaps. I've noticed that when I copy paragraphs of text, sometimes there is an inexplicable blurring of the text. If you are experiencing unreasonable problems, try to copy the text into a new text block. After you get the hang of how to use the fonts, I think you'll find the payoff to be more than worth the trouble.

For your convenience, I've created a Pocket PC sized PDF mini guide that is available for download from the web site. It's perfect for a quick reference while you're working on your Flash movies. It's available at http://www.miniml.com/flash/fonts/guide.pdf.