Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
This chapter is from the book

Looking at Font Properties

In Flash, and in other programs in which you can edit text, there is a wealth of options available for formatting text to change its appearance. So far, we have used only the most basic and common of them. In this exercise, you will use some new properties that you didn’t use in earlier exercises and learn how they are used and what they do in Flash. You should still be using bookstore7.fla for this example.

  1. Add Static text to the map page and set the properties for the text in the Property inspector.

    The map page will contain some store information and a title, and load a map into a placeholder. Loading content into a SWF file is dealt with in Lesson 6, but the address and title are created here. Open the Property inspector so you can set properties for the store information that needs to be placed on the Stage.

    Change the Text Type drop-down list to Static. Select Arial as the font and then set the font size to 12 and the color to black. Click the Align Center button to set the alignment (justification), which centers the characters you will enter in the text field. Also, choose to anti-alias the text for readability.

    Kerning refers to the spacing between characters; however, it is not uniform like the Character Spacing setting. Kerning is built into the font and determines how two particular letters are spaced. For example, some letters might be spaced closer together based on the way they are shaped. The character W is usually placed closer to an A character than O is. Kerning helps the spacing look uniform based on the shape of each character by spacing two characters in varied amounts. Check the Auto Kern check box in the Property inspector to use the built-in kerning information for the font.

  2. Enter the store information and place it on the Stage.

    Select the graphics folder, insert a new layer, and rename it map. Click Frame 60, also labeled map on the labels layer, and insert a keyframe (F6). Select the Text tool and click and drag on the Stage to produce a fixed-width text box. Enter the text in the following figure into the text field, using the Enter key to create new lines.

  3. Format parts of the address text in the Property inspector.

    If you need to resize your text field, click and drag the drag handles around the text box. To edit the field, double-click on it with the Selection tool or click once on it with the Text tool. Highlight the first line. With the line highlighted and the Property inspector maximized, click the Bold button and then select a dark grey swatch from the color control palette for Text (fill). Repeat this step for all headings in the text field.

    It is also a good idea to make the address selectable. For example, some of the website visitors might want to copy and paste this information into an e-mail, send it to a portable device, or save the text. Select the text field with the Selection tool, and then click the Selectable button in the Property inspector so visitors can highlight and copy all the text in the text box at runtime.

  4. Select the Bitmap Text option in the Property inspector.

    An aliased image has a hard and definitive edge, and curves tend to appear jagged. Anti-aliasing creates the illusion that lines are smoothed or curved by using blending and shading to smooth the image or lines. Anti-aliasing reduces the jaggedness of aliased text or graphics. Although anti-aliasing is often a good choice for web graphics, it does not work well with very small text because blending and smoothing usually make small text appear fuzzy and unclear. When you select the Bitmap Text options from the Font Rendering Method drop-down list, anti-aliasing is shut off.

    Select the text field you just created in Step 3. Expand the Property inspector and then switch to Bitmap Text in the Font Rendering menu. Notice the change in appearance for your text. Return the text field to Anti-alias for readability.

  5. Change the properties for the map title using the Property inspector.

    Maximize the Property inspector to change the font properties again. You will use some large text this time.

    You will still use a black Arial font, so don’t change those properties. However, change the font size to 26 by typing into the field or using the numerical slider next to it. Make sure that the Bold and Italic buttons are selected. You can leave Auto Kern checked, or deselect the check box. Because you are increasing the Character Spacing in the next step, it doesn’t particularly matter.

  6. Enter the text for the map title and position it on the Stage.

    Create a static text field on the Stage, and enter the following text: How to find us.

    You might need to edit the exact placement later on when you add the map to this page. For now, change the values of the x, y coordinates in the Property inspector to 70 (x) and 470 (y).

  7. Change the Character Spacing value to 2.

    When you change the character spacing for a text field, a uniform amount of space is set between each character. You can enter a positive value to space the characters further from one another, or enter negative values so they are closer. Select the text field you just created and enter 2 into the Character Spacing field. Take note of the way the characters change in the text field and adjust the amount as desired.

  8. Save your work.

    Timeline Effects are used to add certain effects to assets in Flash. Flash installs with several Timeline Effects made by Macromedia, but you can also find many more on the web for download to install into Flash, in places like Macromedia Exchange.

  • + Share This
  • 🔖 Save To Your Account