Flash

I love oxymorons - phrases whose words, when placed beside each other, don't make much sense because they contradict each other. One classic, "military intelligence" got a lot of play in M*A*S*H and Catch 22. My all-time Web development favorite is "Web Typography." Typography simply does not exist on the Web. Type? Yes. Typography? No.

Flash developers, for example, seem to have embraced 6-point for everything. What you see, in this instance, are Web sites that look more like the fine print at the bottom of used-car financing ads than digital media communications vehicles. Many who develop in the HTML universe still haven't figured out that line length increases with a corresponding increase in point size. Both groups have developed an unnatural fixation on using light grey type on a dark grey background. To use a Web dev buzz phrase: "What's with that?"

The answer lies in the fact that typography, in the print universe, is fundamentally different from typography in the Web universe. Typography is the official name for the design and use of text on a printed or digital page. The problem is just that: the digital page.

As Dave Berlow of the Font Bureau says in the article "Type On The Web," found in a book named Websights: The future of business and design, "You have control of print and no control of the Web. In fact, there is no typography on the Web at all. There is only type." This is an important distinction. Print is a "control" medium where all aspects of the printed word, from font choice to line length, are controlled by the designer in order to make the words on the page legible and understandable. In the Web paradigm, this simply does not exist. HTML is a markup language, and CSS is more a presentation tool than a design tool. Typographic nuances don't exist on the Web. There is only type. Don't believe me? Design an entire Dreamweaver MX 2004 page using only Optima or Garamond and see what happens in the browser of a viewer who doesn't own those fonts. Does that occur in the magazine you're holding in your hands?

Thus you have to change your thinking and look at the text on the Web page as being either words or art. Once you make that distinction a whole world of design possibilities opens. Those possibilities will become real when you discover the serious type tools Macromedia Studio MX 2004 has put in your hands.

The tools are FreeHand MX, Fireworks MX 2004, Dreamweaver MX 2004, and Flash MX 2004. Your tool choice will depend upon what you need to do. If the text is words, Dreamweaver and Flash will fit the bill. If the text is art, FreeHand MX, Flash, and Fireworks will satisfy that need.

In this article I demonstrate three examples that allow you to take many of the typographic techniques used by our print brethren and apply them to the Web.

Typographic Logo
The first project is the creation of a typographic logo using two intertwined letters. This logo, based on an idea from Dmitry Kirsanov, will sit over a gradient background, and the direction of the gradient will follow the slope of the italic letters. The plan is to use the "t" in my first name and the "g" in my last name.

To accomplish this, my tool choices are essentially made for me: FreeHand MX or Fireworks MX 2004. Fonts use vectors, and both applications permit me to convert the lettering used to vectors. This allows me to subsequently move the design into a Web page without concerning myself with whether the font chosen is resident on the user's machine.

In this example I use FreeHand MX to create the artwork. Though the art can just as easily be created in Fireworks MX 2004, I prefer to do much of my type work in FreeHand MX. I find that the typographic tools included with the application permit me a finer degree of control over such things as kerning, tracking, and leading than the sliders used in Fireworks MX 2004. I'll also convert the letters to their postscript outlines, and I prefer to use a vector tool for that task.

My font choice is a modern classic from the Old Style school - Adobe Garamond. Old Style lettering, especially the italic, tends to have a calligraphic look, and Adobe Garamond, drawn by Roger Slimbach, is a faithful reproduction of the original drawn by Claude Garamond in the 1500s.

In this project I use AGaramond Italic. This is important because fonts are traditionally drawn as a collection known as a family. Each member of the family is designed to stand on its own or work together with the other members of the family. For instance the italic I am using is not simply a slanted version of the Roman, and the bold is not just a thick version of the Roman. As you can see in Image I, the various fonts in the AGaramond family are quite distinct from each other. For example, in addition to looking completely different from each other, the major differences between the Roman and italic versions of the font are in the shape of the ear, the decorative handle at the top of each letter shown. In the Roman version the ear is rectangular; in the italic it has been rounded and lengthened. The other major difference is the loop at the bottom of the letter, which wraps around the hole, or counter, in the letter. Note how the loop and the counter change shape in each version of the letter shown. These nuances of type, which have been around for more than 500 years, are usually overlooked by Web designers and have contributed to the state of the typographic art on the Web today.

(Though the Web is littered with sites promoting fonts, discussing typography, and even teaching it, one of the best is http://counterspace.motivo.com/. This Flash-based site gives a great overview of the nuances and history of typography.)

I start by opening FreeHand and adding three layers to the document, named "Gradient," "T," and "G." I then lock the T and the G layers.

I also want to add the colors I use in my site to the FreeHand MX color palette. To do this I select Window>Swatches to open the Swatches panel. One of the great secrets of FreeHand MX is that it contains a palette of Web-safe colors. To open it, click the Swatch tab, click on the Panel Options menu in the Assets panel, and select Web Safe Color Library at the bottom of the list. This library is a bit different from what you may be used to. Instead of the traditional cubes and swatches used by the Macromedia MX products, this library treats the Web colors like a swatch book. What I particularly like about it is that the colors chosen are shown as Hexadecimal and RGB color. I entered the hex values for my colors - #333300, #666633, and #999966 - and they were added to the Swatch list for the document (see Image II).

Having prepared the work space, I get right to work. I select the T layer and lock the Gradient and G layers. Locking layers is a good habit to develop in FreeHand; if you select an object on the FreeHand page and select a layer, the selected object automatically moves to the selected layer. Not a good thing.

I then select the type tool, click once on the page, and enter a lowercase "t". The new FreeHand MX Object panel immediately changes to the Text properties. I select AGaramondItalic from the font list, set the point size to 200 points, and set the fill color of the letter to #333300 by clicking the Fill icon in the Object palette and selecting the color from the list. Another neat technique is to select the text object, drag the swatch from the Swatches panel, and drop it onto the selected object. I then lock the T layer, unlock the G layer, and add a 200-point AGaramondItalic lowercase "g" filled with #999966. I lock this layer.

To create the gradient in the background, I unlock the Gradient layer, select the Rectangle tool, and draw a rectangle behind the letters. This results in a solid-color rectangle filled with whatever background color is shown at the bottom of the toolbar. If the rectangle has a stroke, remove it by selecting the Stroke Color chip in the toolbar and clicking the "No Stroke" icon.

To apply the gradient, I select the rectangle and click once on the Fill icon in the Object panel. When the Object properties open, I click the Fill strip in Properties to open the Fill properties panel. I then click on and hold the Basic Fill button to open a drop-down menu of available fill options. Select Gradient to open the Gradient Fill panel - the rectangle fills with a black-to-white gradient. This is easily fixed. I select the #999966 color chip on my Swatches panel and drag and drop it onto the black chip in the Gradient Fill panel. I then replace the white chip with #333300 and my gradient is complete. The final step is to get the gradient to follow the angle of the italic text.

This step is where, as I tell my students, we separate the pros from the rest of the dreck out there. The gradient angle will approximate that of the stem in the letter "t." With a gradient as fine as the one chosen, I use the dark end of the gradient to set the gradient angle.

If the rectangle is selected there will be two handles joined by a dotted line running across the rectangle. The circular handle establishes the start of the gradient and the square one establishes the end and the angle of the gradient. I drag the round handle upward to a point just below the upper-left corner of the rectangle. I then drag the square handle to about the midpoint of the "g." I can now distinguish the vertical divide between the light and dark areas of the gradient. From there it's a simple matter of moving the square handle up and down to have the dark vertical match the angle of the stem. Once that's accomplished I move the square handle in and out to see how the lettering contrasts with the gradient. Once finished, I click on the page to deselect the rectangle and then lock the Gradient layer (see Image III).

As it currently stands the image is somewhat complete. What I don't have is the "t" and the "g" intertwined. The "g" is simply sitting in front of the "t". The plan is to have the "g" cover the cross stroke of the "t" and to have the serif of the "t" cross through the bowl of the "g".

First I unlock the T layer, select it, and select Duplicate from the Layer drop-down menu. This places a copy of the lowercase "t" in front of the "g". I then lock the T layer and select the "t" on the page. Next I select Text>Convert To Paths (Command-Shift-P if you use a Mac or Control-Shift-P if you use a PC). This converts the letter to art by using the postscript outline for the letter in the AgaramondItalic font.

I then select the Subselect tool in the FreeHand toolbox. I click on each point above the serif and press the Delete key (see Image IV). When I finish I have exactly the effect I'm looking for (see Image V).

Having completed the design, getting it onto the Web is not terribly difficult. There are a number of options available:

1. Save the image as a .jpg image for use in Fireworks MX 2004 or Dreamweaver MX 2004.
2. Save the objects as Symbols in FreeHand and export those Symbols into Flash MX 2004 or Fireworks MX 2004 for subsequent manipulation or animation.
3. Animate the lettering in FreeHand MX (use Release to Layers) and output a .swf file for use in Flash MX or Dreamweaver MX. All this does is to convert the page to a Flash .swf file with an accompanying HTML document.
4. Build a page around the image and select File>Publish as HTML.

Typographic Treatment of a Page
The next example, based on one from my book Building Web Sites with Macromedia Studio MX, addresses a question I have whenever I hit a page that has a Shockwave or Flash detector on the page. The text is usually set in whatever Web fonts happen to be hanging around the browser. The question is, why? If you have the space, why not use it for typographic treatment of the page?

The page uses two fonts: Helvetica Inserat for the branding and Albertus MT for the body copy. I have always liked Helvetica Inserat because it is a powerful font that should be used sparingly. In fact, "Inserat" is German for advertising; when released by the Stempel Foundry in 1966 its primary use was for ads, billboards, and newspaper headlines. Albertus is another display type that should be used sparingly on a page. This font was released by the Monotype Foundry in the 1930s and its first iteration was for use as a titling font. In 1940 a lowercase alphabet was added. I like Albertus because it isn't overpowered by Helvetica Inserat and for its sharp serifs. I find it to be elegant, aesthetically pleasing, and a good companion font to the Inserat.

In creating the "sniffer" page I open Fireworks MX 2004, set the background color to the mid-green I use on my site - #663333 - and set the page dimensions to 600 pixels wide by 400 pixels deep. Page size is immaterial at this stage of the process. The plan is to use the new Fit Page button on the Property Inspector to trim the canvas when I am finished.

The first step is to select the Branding text and set it in 60-point Helvetica Inserat, center align the text, and fill it with the red I use in my site's logo: #660000. The result, shown in Image VI, is okay but not what I want. I want the two lines closer to each other, and the words on the second line need to be spaced out a bit more.

The words are placed, formatted, and colored in Fireworks MX 2004 but still need some work.

I select both lines and reduce the leading between them in the Fireworks MX 2004 Property Inspector to 85%. This brings the second line up closer to the first one and avoids having the ascenders in the "t" and the "h" touching the letters in the line above (called a crash). The next step is to select the bottom line and to set the range kerning slider to a value of 7. This increases the spacing between the letters of "ontheweb". The line above it, being in uppercase letters, looks a bit more spaced out, which makes the line under it appear to have lettering that is squeezed together. The "th" and "we" letter pairs are still too close to each other, so I click once between the letters and add 3% kerning. The before and after results are shown in Image VII.

To complete the design, I use a variety of techniques to draw the user's eye to the important parts. For example, I use negative leading values to pull lines together and positive values to push them apart. I make the point size of the important lines larger than that of less important ones, and use the space bar to move them around on the page to avoid the straight lines you see when text is set as Flush Left. I also set the site's name in Albertus MT IT, track the letters out a bit more than the rest of the text, and give it the same color as the head to establish the relationship between the two elements.

With the element completed I can use the Fireworks MX 2004 slicing tool to slice it up for placement in Dreamweaver MX 2004.

Image VIII shows a Fireworks-produced typographic treatment of a "Flash Sniffer" page.

New to Fireworks MX 2004 is a beefed-up anti-aliasing feature. Macromedia kept its existing four options (None, Crisp, Strong, and Smooth) but added "System" (Quartz if you are on a Mac) and "Custom" to its anti-aliasing lineup.

Here's a brief description of what each anti-aliasing option, available through the Property Inspector, does:

• No Anti-Alias: Disables text smoothing
• Crisp Anti-Alias: Creates a sharp transition between the edges of the text and the background
• Strong Anti-Alias: Creates a very abrupt transition between the edges of the text and the background, preserving the shapes of the text characters and enhancing detailed areas of the characters
• Smooth Anti-Alias: Creates a soft transition between the edges of the text and the background
• System Anti-Alias: Uses the text smoothing method provided by Windows XP or Mac OS X
• Custom Anti-Alias: Opens a dialog box with the following input areas:
  - Oversampling determines the amount of detail used for creating the transition between the text edges and the background.
  - Sharpness determines the smoothness of the transition between the text edges and the background.
  - Strength determines how much the text edges blend into the background.

Image IX shows the various anti-aliasing options applied to a 200-point Albertus MT "a" on a Macintosh.

Alternative States
The final example shows how the type tools in FreeHand MX can be used to create a rather interesting effect in Flash MX 2004. This example is inspired by the movie Altered States. The title of the movie uses the font Avant Garde Demi, letters that are tightly kerned, and a rather interesting use of the uppercase A. The plan is to create the lettering for the word "ALTERNATIVES" in FreeHand MX and then use the word, as it was used in the movie's title, as the mask for an animation.

Image X shows the final Flash movie using the title created in FreeHand MX.

1. Open FreeHand MX, select the text tool, click once on the page, and enter the word "ALTERNATIVES".
2. When the Object Properties open (Window>Object), set the font to Avant Garde Demi and the point size to 90 points. If you don't have the font being used, feel free to use a Bold Helvetica, Arial, or Avant Garde (see Image XI).
    

3. The next step is to create the stylized "A". Select the first "A" in the word and cut it. Lock the layer the word is in and select the background layer.
4. Paste the "A" on the clipboard in the background layer. Add a new layer, select the magnifying glass, and zoom in on the letter in the background layer. The original title created stylized "A"s by removing the right stem of the "A" and placing the letter form up against the stem of the next letter. The interesting aspect of this design is that the letterform remains intact because the human eye will still see the "A".
5. Select the pen tool and trace the letter without the right stem. When finished, the shape should resemble the one shown in Image XII.
    

   The parts of the letter needed for the title are drawn over a copy of the letter in the background layer.

6. Unlock the letters layer. Select the text tool and delete each "A" in the word. Click once in the location of the second "A" and press the space bar. This will leave a space for the object. Drag the A-piece to the start of the word. Line up the top of the shape with the top of the "L". Use your arrow keys to move the shape closer or further away from the "L".
7. Select the "LTERN TIVES" letters and set the tracking value to about -3%. This will reduce the spacing between the letters.
8. Select the A piece, press the Option/Alt key, and drag a copy of the object into the space between the "N" and the "T". The object should overlap the "T". For now just ensure that the tops of the "T" and the object are aligned.
9. Click once between the "N" and the object. Add a value of about 13% to the kerning area of the Object Inspector. If the space between the object and the "T" is too large, click between the object and the "T" and enter a small, negative kerning value such as -3. Finally, click on the text block and select Text> Convert to Paths.
10. Select everything, group it, and convert it to symbol in the library. (If you have a Brushes folder in the library, feel free to delete it. The folder isn't needed in Flash.) Save the image and quit FreeHand MX. The title as shown in Image XIII is complete and ready for placement into Flash MX 2004.

Before I complete the piece in Flash, I should explain why I use FreeHand MX and not Flash MX 2004 for the typesetting. The decision essentially comes down to one of control. The kerning feature of FreeHand MX has its roots in print and is, therefore, a bit more precise than its counterpart on the Flash MX 2004 Property Inspector. I also find tracing to be easier to accomplish in FreeHand than in Flash.

By converting the letters to paths, I avoid a potential font substitution issue if the font is not available to whoever does the Flash work. I also plan to use the words as a mask in Flash. This would require me to vectorize the text in Flash, meaning the text would eventually be converted to paths. Whether it is done in Flash or FreeHand MX is immaterial.

One final point before I move on. The choice of font really is a non-issue because Flash embeds fonts into the .swf when the movie is compiled. This essentially frees you from "Font Substitution Hell" if you use a font the user doesn't have on his or her machine. Still, treat this one judiciously as well. An embedded font adds weight to the file and all embedded text is anti-aliased, especially at the larger point sizes. In the case of our title, I use only 10 characters from the font. It seems silly to embed the font into a .swf if I'm using only a small percentage of the character set. Thus, the other reason for converting the text to paths.

1. Open a new Flash MX 2004 movie. Set the stage to 85 high by 550 wide. When the stage appears in the screen select File>Import> Import to Library.
2. When the import dialog box opens, navigate to the FreeHand MX file just created , select it, and click the "Import to Library" button. You will now see a FreeHand Import dialog box. Click OK. If you open the Library Panel you will see that the symbol from FreeHand MX is in the library.

   One of the quirks of Flash MX is using text or other artwork as a mask. Unlike Fireworks MX 2004 and other vector apps, you can't simply select an object and denote it as being a mask. It must be broken apart in Flash MX 2004.

3. Double-click the symbol in the Flash MX 2004 library. Select the object and keep pressing Control-B (PC) or Command-B (Mac) until the object looks pixelated.
4. Return to the main timeline and import an image into the library or create some sort of wild, color-filled graphic symbol.
5. Add a new layer to the timeline. Name the bottom layer "Image" and the top layer "Alternatives".
6. Drag the image symbol into the "Image" layer. Drag the FreeHand symbol into the "Alternatives" layer. Add a key frame at Frames 30 and 60 of the "Image" layer.
7. Select frame 60 of the "Alternatives" layer, right click the mouse (Control-Click …Mac) and select Add frame from the Context drop-down menu.
8. Place the mouse over the name of the "Alternatives" layer and right click. Select "mask" from the Context menu. The image in the "image" layer will appear as the fill for the words created in FreeHand MX. Image XIV shows the final Flash movie including timeline, masks, and library items.

Conclusion
In this article I have just scratched the surface of the possibilities available to you. As I said in my New Riders book, Building Web Sites with Macromedia Studio MX: "typographic art is a powerful communications vehicle. The choice of font, layout, and effect can instantly communicate a mood or message that is far more powerful than a series of photos or images."

Text is simply more than the grey stuff that goes around the pictures and animations on a Web page, and Macromedia Studio MX offers you a full set of tools that range from the rudimentary (Dreamweaver MX 2004) to sophisticated (FreeHand MX).

For example, if your reference size for text is 12 points and line height is set to 2 ems, that is the same as setting the leading to 24 points. In essence you have added double spacing between your lines of text.

That "Em" Thing
When my students and I get talking about CSS the question that is inevitably raised is: How big is an em? The answer, on the surface, may appear to be a bit facetious because the real answer is, "As big as you make it."

Type is traditionally measured in two directions. If the measurement is vertical, the industry uses points and picas. Horizontal measurements are used for spacing between letters. That horizontal spacing is measured in ems and the em value is a moving target. One em equals the type size. In the exercise in this article I use 60-point type. Thus, one em equals 60 points. If I were to change it to 48-point type, the em would also change to 48 points. Thus an em is proportionately the same in any point size regardless of the font chosen.

By adding 7% range kerning between the letters, I was, in very simplistic terms, adding a further 4.2 points of space to the sides of the letters selected.

It gets a bit weirder when, in Fireworks MX 2004, you select a few words in a sentence with the intention of adding a bit of space between the letters and the words. This is called "range tracking" in Fireworks MX 2004.

Traditional typesetting divides a line of text into units - usually a percentage of the em value. Fireworks MX 2004 comes at this from a different angle. The unit used is a pixel. Thus a 72-point letter will be divided into 72 units. Applying a range kerning value of 10% would, again in very simplistic terms, spread out the letters and the spaces between the words by 7.2 pixels. This is a double-edged sword. It’s great because the value is consistent. It’s bad because an inch on my computer monitor may be different from an inch on yours.

In CSS ems are also used and, in many respects, are the only constant type value available to you. In Dreamweaver MX 2004 ems are used for:

Font size	All positioning values
Line height	Border width
Horizontal position	Word spacing
Vertical position	Letter spacing
All Box values except for Float and clear	Text indent

All are determined by the point size used for the default font set by the browser. If it is 12-point Times, then an em is 12 points. The problem is points. They aren’t used on the Web. Pixels are used instead. If you do assign a value in CSS use percentages. This removes a potential IE bug and allows the browser to scale the font size in Internet Explorer (PC). Just remember that the em value set will ripple through the entire design and could have a profound effect on page layout.

For example, if your reference size for text is 12 points and line height is set to 2 ems, that is the same as setting the leading to 24 points. In essence you have added double spacing between your lines of text.