Text is an integral part of all design. It's not just the words that have power, but also their placement, movement, color, and shape of the letters. The study of text type is called typography.
Your computer system comes with a set of system fonts installed on your machine. These fonts are fine to use in Flash. However, we often want fonts that have more character (no pun intended - ) ok, more pizzazz than a standard Arial, Courier, Times, etc. We want fonts that have more meaning.
Adobe Font Manager allows you to organize the fonts in your system. There is also a free font management system for Windows called The Font Thing which allows you to view the fonts in assorted sizes. Some fonts come with ReadMe instructions which tell you how to use them. For example there are some small fonts that are created for Flash and require precise placement on a certain x, y coordinate. There are sites for Flash Fonts such as Fonts For Flash.
It's not advisable to have more than one font utility on your system. It's also not advisable to have too many fonts on your machine because fonts use up system resources. Some people keep their fonts on external media like a CD or Zip disk and load them as they need them.
Spend some time on the web searching and collecting interesting fonts. You might want to add some dingbats to your collection at the same time. Dingbats are graphics that replace letters when you use the keyboard. For example, I have a set of kitchenware dingbats (Ray Larabie's) that include strainers, dishes, cups, whisks, etc. All I do is type the keys on my keyboard and they'll show up as small icons instead of letters. I can use fonts and dingbats as design elements.
Flash uses Postscript Type1, TrueType, Bitmap fonts, and device fonts. Postscript Type1, TrueType, and Bitmap fonts are embedded into your published movie and increase the file size. But when you use device fonts, there is no guarantee that the font will display the same on the viewer's system as in your authoring environment or even in your published .swf file on your computer. Soon, you'll learn what you can do to have more control over the fonts that your viewer will see.
Text Properties
For now, select the Text tool in the Tools Panel and open the Properties Panel. You'll notice that there are some buttons and icons that are similar to a word processor toolbar (and very similar to Dreamweaver's Properties Inspector). Click here or roll your mouse over the image to display the PI for Static Text.
Flash allows you to select font attributes which will remain on the Properties Panel until you change them. This means that you can shut down Flash, relaunch it, and the last font, color, size, paragraph alignment, etc. you selected will be the settings when you open the program. This is a MAJOR improvement over Flash 5 where the Character Panel on my Windows system defaulted to Times, font size12, font color blue (#0066CC).
Click on the font drop-down menu following the A icon to see the display of fonts on your machine. Flash shows the font name and the selected font has the actual font style displayed. This is a great feature because few of us can remember what the font looks like from its name.
Before I scrolled through my font list drop-down menu, I changed the font size. The size was reflected in the display window which I think is another great feature! You can also access your fonts from the Text Menu - Text>Font. In order to use your selected font you have to grab the Text Tool that uses the keyboard command "A."
1. Select the text tool from the toolbox. The cursor changes to an A with a black plus sign in the upper left.
At this point, I can just click the cursor in place, or I can click-hold-and-drag the cursor to specify a fixed width:
Notice the difference in the upper right hand corner of the textbox. The one on the left (click only) has a circle. The one on the right (click, hold, drag) has a square. The left text block with circle will widen to accommodate the text as you add it. It will even expand to be larger than the stage if you keep typing without adding a line break by pressing enter or return on your keyboard.
The right text block with square in upper right is a fixed width text block. You can drag to a size you desire and then when you start typing, the text will automatically wrap when it gets to the right edge. You don't need to hit the enter key for a line break.
Of course you can modify both of them by dragging on the upper right corner to size your text block. When you modify the one on the left with a circle, the circle turns to a square.
The selected text has the blue outline. When the text is selected, you can change any of the character's attributes such as font, size, bold, ttalic, color, AV (tracking), kerning, baseline which is set to Normal and the URL. Play around with these sliders and drop-down menus to see how they affect your text. Here, I changed the font color to gray and the direction of the text to Left/Top justify and then clicked the rotation button. My cursor is below the Left/Top Justify button and to the right of the Rotation button.
You can also select a word or individual letters and change properties of those individual letters. Here, I just double-clicked on one word and changed the font color and size.
Notice the fields for font size and color. Three dashes appear in these fields: --- . These 3 dashes indicate that there are multiple colors and sizes being used in this text block. If I had used more than one font, the --- would appear in the font face drop-down menu as well.
You can enter a URL into the link field of the Text Properties and the text will function just like an HTML link. This is one way to link web pages from within your published Flash .swf movie. The text will have a dotted underline in the Flash authoring environment when you fill in the URL field. The underline does not show up in your published movie but the cursor will change to a hand indicating that the user can take action. Hey, this is your first bit of Flash interactivity!
INTERACTIVE Flash DEMO
Click on the selected text below to go to a website.
INTERACTIVE Flash DEMO
In the Text drop-down menu you have 3 options for text: static, dynamic, and input. Click here or roll over the image below to display the Flash Demo. When the demo displays, select each of the three arrows for static, dynamic and input options and view the text properties for each option.
Let's stay on the Static Text Options of the Properties Panel. In the bottom part of the panel above the Link URL field, there is a checkbox for Use Device Fonts. There are 3 device fonts that come with Flash. They are listed at the top of your font list on the PC and bottom on Macs (depends on your OS?) as Sans, Serif, and Typewriter. When you use the device fonts, the Sans defaults to a font similar to Arial, Helvetica, or Verdana. Sans mean Sans-Serif or without those little connectors at the ends of the letters. The serif font defaults to something similar to Times and a Typewriter font defaults to something similar to Courier or a mono-spaced font.
The advantage of using device fonts is smaller file size because Flash does not have to embed the device fonts. You will have to determine if a particular font is worth sacrificing to a smaller file size based on your target audience and manner of delivery. You can consider using the special font for emphasis and converting it to a bitmap for small areas of detail. When you convert text to a bitmap, you are assured that the font will display properly on the viewer's system. When you convert text to a bitmap, it is no longer editable text. When you embed the font or convert to bitmap, the file size will be larger than if you use the device fonts. A disadvantage of device fonts is that you may not be able to control the display. In other words, in your Flash authoring file on your computer, the text may appear right aligned to another elements. However, in a published .swf file on another user's computer, the text may appear to overlap in front of or hide behind other elements and the layout may not be the same as you intended. This might disturb the layout of your entire project. Device fonts don't mask. We'll discuss text masking in the masking lesson. Device fonts may appear different on different computers depending on the OS and fonts installed.
Converting text to a bitmap may be a good choice for display text rather than text used in paragraphs. In some vector programs such as Illustrator, converting text to bitmaps is called Create Outlines. This assures that your user does not have to have the font installed on their machine to view it because it is now a graphic and no longer text. When you break text apart, your file size increases. You will also be able to transform the letters into other shapes. Try breaking apart a 3-letter word created in a large font. Create the word. Select the text box. Modify>Break Apart. Now, move the arrow key close to the edge of a letter. You'll be able to click-hold-and-drag that part of the letter into a new shape. Click on the next button of this Flash movie to see how to convert text to shapes and reshape the letters. Click here or roll over the image below to display the Flash Demo.
INTERACTIVE Flash DEMO
When you break apart text in MX, each character of the word is placed in its own text box. That is why I had to break apart the dog text twice in the above Flash demo. This feature is helpful if you want to motion tween individual letters of a word. Try this:
Create a word. How about DOG?
Break it apart. Now you have each letter in its own text box.
Select each character on the stage.
Go to the Modify Menu - Modify>Distribute to Layers or Control+Shift+D.
Flash places each letter on its own layer and names the layers D O G
with D on the bottom layer and G on the top layer and O in the middle.
Now you can individually animate each letter using motion tweening.
If you want to change the shape of a letter, you'll have to break that particular letter apart again to create a shape. Once you do that, you can distort or reshape the letter because it's no longer text. You can also use shape tweening to create morph-like effects with letters.
The Paragraph Attributes are pretty intuitive. The Align: buttons allow you to select left-aligned, centered, right-aligned or justified paragraph settings. Make sure your text is selected or nothing esle will happen! Explore this Properties Panel with some selected text. You can align paragraphs, set margins, tracking, create vertical columns of text, set line spacing, superscript, subscript, etc. See if you can find all these properties with some of your selected text.
The Ab button in the image on the left makes the text selectable. This enables your text to be selected from your published Flash movie enabling your viewers to copy and paste text from your Flash movie into a document of theirs such as notepad, simple text, the body of an email, Dreamweaver, Microsoft Word, etc.
We won't be using dynamic or input text in the beginning of the course as these text options are for more intermediate and advanced users and provide powerful interactive options. For example, you can set up a functioning calculator and have a text field display the results of your calculation. Don't worry if this doesn't make sense. For now, just focus on basic text options that are available in the static text options. We'll learn some text tweening and text effects later in this lesson.
Please continue to the next section of this lesson.
