Flash and Type - Layouts as you want them

by Joe Gillespie — Feb 1, 2001

In Flash, fonts can be embedded, stored as symbols in a library or converted to outlines. When you export your .SWF file from Flash, static text is always embedded by default so you can always be sure that the reader sees 'exactly' what you intend, not an approximation. With TrueType fonts, there will be few surprises, although I have noticed that certain typefaces don't convert to outlines correctly in Flash, their counters fill-in. In such instances, creating the outline in Freehand or Illustrator and importing it into Flash usually works just fine.

Saving a font as a 'font symbol' in a shared library makes that font's outlines available to all your Flash pages/movies and reduces your bandwidth overhead because it has only to be downloaded once.

Another way to reduce download time is to use 'device fonts'. These pick-up standard font types from the computer but are restricted to one serif (Times), one sans-serif (Helvetica or Arial) and a monospaced (Courier), so only use these if bandwidth is a big issue and you don't care about typestyles!

For comparison purposes, I've chosen a difficult subject, one with both subtle gradations and flat color. It's from an optical illusion typeface I designed quite some time ago called 4D. All these images were produced in Adobe Illustrator 9.

4D - Gif - 4370 bytes

This is a 64-color GIF version. GIFs aren't usually too good at gradations but this is just about acceptable - 4370 bytes.

4D - JPEG - 9754 bytes

JPEGs can handle gradations, but there is a hefty price to pay to avoid artefacts in the solid color areas - 9754 bytes.

Incidently, the 4D font was originally published as a conventional headline photosetting font but is not available in any format whatsoever at present.

The possibilities for static layouts are much greater using Flash than with HTML/CSS. The ability to create a page in, say Illustrator or FreeHand and export it as a .SWF instead of fighting with browser and platform peculiarities has a lot to be commended. Certain types of Web pages benefit from complete or partial Flash usage, indeed, Dreamweaver 4 allows the placement of Flash text and buttons anywhere on the page without even having the Flash program itself.

Where Flash really scores is for creating pages where the text content is minimal or of secondary importance. When you get down to small font sizes, or lots of reading matter, Flash can create problems. Text below about 12 px should not be anti-aliased as the blurring becomes a significant proportion of the overall characters' shapes. You can put regular non-anti-aliased text into 'dynamic text' boxes but then the fonts are not embedded and become dependent on what is available on the user's system, just like a HTML page.

Another point here, Flash's anti-aliasing quality is not as good as you get with some other programs. Photoshop, for instance, lets you choose from four different levels of anti-aliasing - crisp, strong, smooth and none. You have more control over the appearance of small type.

Anti-aliasing text requires a significant amount of processing by your computer. Because Flash has to do its anti-aliasing in real time, speed takes precidence over quality. The results with small or thin type will probably be a little fuzzier than with a good, optimised GIF. So why not just embed the GIF text in a Flash file? Well, apart from losing the bandwidth and scalability benefits, Flash has a nasty habit of changing the size of embedded GIF files by a pixel or two when they are displayed. With some kinds of images this goes unnoticed, but with type, it can show up as inexplicable extra or missing strokes.

For pages made totally with Flash, it is best to keep to headline/subhead type sizes. If you need to put body text in, use a dynamic text box and specify the type as you would for a HTML page using common, predictable fonts that everybody will have.

With Flash's multiple layers, there is no problem with overlapping images and type. Yes, you can do that with DHTML and Cascading Style Sheets, but such techniques are more likely to break in pre-version 4 browsers than through using Flash.

Flash's vector format is good for certain types of illustrations, but not for photographic images, so you may need to resort to importing conventional GIFs and JPEGs into your Flash movies. Where most Flash content will rescale quite happily, imported bitmap images do not, so you need to be careful to lock the scale of your Flash movies to 100% if they contain bitmaps and pay some consideration to the visible browser area.

Although great claims are make about the bandwidth advantages of vector graphics, you need to use some common sense. It's true that simple graphic shapes can be drawn in vector format with just a few coordinates. When you start using complex shapes with gradated fills, file sizes grow dramatically.

A page full of type converted to outlines means a lot of vector coordinates. Where one regular text character only requires one byte, even a simple vector character like an "O" needs eight or more pairs of coordinates – 16 bytes. It makes little sense to use Flash for layout purposes if the final file size is greater than if you did it conventionally.

Flash doesn't magically remove all bandwidth restrictions, but because it 'streams', it does allow you to manage it. By using preloading techniques and layer order, you can make some parts of a page appear before others, or all at once. Designing a page that 'builds' in the way that you want it is better than letting it happen at random – the priority of the information should dictate the order that elements appear, not the data paths through the internet!

Now, I hear you ask, if Flash is so great for layouts, why don't you use it more on WPDFD? Believe me, I would, except for the poor support for transparency in Flash. With Flash movies, or just blocks of type in .SWF format, some browsers always give a solid color background. On some sites that's not a problem, but it is on this one!

Next time, I will look at two other aspects of Flash that are often overlooked.

Flash can deliver superb streamed audio that can be used for music, narration or sound effects and with ActionScript, you can now get much of the functionality of CGI scripts to password protect parts of Web sites and keep your source code from prying eyes.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float