ActionScript.com The Flash/Flex ActionScript Developer Community

Sunday, May 11, 2008

You are here : Article

Home

Tutorials

Forum

Consulting Services

Archives

About Us

Using Shared Fonts

Created By Benjamin Mace, at 11/21/2005 - 28 comments.

Benjamin is seasoned Flash designer & developer. He has done work for AOL, EASports & Firstborn Multimedia.

Click to view this author's website.

In keeping with my optimization theme over the last few articles I thought I would focus on fonts. Fonts are the hidden killers to otherwise small file sized projects and can add on extra weight fast. By using Flash's Shared Font Symbols we can share a font outline across multiple SWFs reducing file size. Once a shared resource is cached on user's machine, they no longer need to download that asset. This means that something that is used over and over again can just be pulled from the cache and not the server.

Designers love Flash because SWF files can include fonts outlines allowing the designer to use any font without the fear of the end user not having that font installed on their machine as with HTML. Flash is great for this reason but, it's not great in the sense that every font you use and every weight you use it in (bold/italic/regular) can add anywhere to 20kb to 40kb a pop.

If you use 2 fonts and 2 weights you can easily tack on 100kb to any project. Most of the time, it's something we have to live with, yet there are times where we can reduce the repeated size increase. Repeated font use can occur across large sites or in something like training material over the web. For example, say an e-learning lesson on conduct in the work place has 10 lessons. Each lesson uses CorporateCaps Regular as their callout font for bullets. Let's say this fictional font with all its characters weighs 35kb. Over 10 lessons we've added on 350kb of file size. Using shared fonts within Flash we can reduce that 350kb of loading down to 35kb again.

Shared fonts are easy to create and easy to deploy but they aren't used often because there isn't a lot of documentation on them and there is a misconception that it's more trouble than it's worth. Like other runtime sharing symbols in Flash, all you need to do is create a symbol and export it to a SWF that can be linked to by other SWF files. I have included 2 files for you to take a look at and see how this is setup. You can download them here.

To start out you need to open a new file and then open the library panel (F11). From the drop down button in the library panel's top bar, select "New Font.". Here you will enter a name and select the font you want to use across your files. In the example provided I have named my font "_ArialRegular". There are 2 things to note here.

Over the years I have had trouble with the font names when they include special characters, spaces or numbers. There is no rhyme or reason to it. It seems to be totally random. The "_" simply makes my font available in the properties box at the top of the list. I'm lazy and I know where all my fonts will be. Plus, you don't want to name it something like Arial and not know which Arial in the font list is your shared font or the machine font. Name the new font something different to distiguish it.

Last, I tack on Regular, Bold or Italic to the name so I know the style. There are several options for the font you wish to export below that. Choose the weight you want and if it should be italic or aliased etc. The size field is used in conjunction with the alias feature because pixel fonts are mormally created to be displayed a specific height.

After setting the specifics up, right click on the new symbol in the library and select "Linkage". Here you will need to check off "Export for ActionScript" if you intend on using it with AS (in a CSS or TextFormat Object for example), "Export for runtime sharing" which is what we are describing here, and "Export in the first from" since we won't be using it on the timeline. Last, enter the name of the SWF the symbol will reside in. After that we can export our SWF file with the same name we entered in the URL field.

Now in a new file, all we have to do is drag the font symbol from our original file's library to the new one's library. Right click on it in the new library and view the linkage. You'll notice that the options have changed and only "Import for runtime sharing" is checked.

It's checked because this file will load in the font symbol from the other library at runtime. Here we assume that both the source library SWF and the SWF using the fonts from that library are in the same directory. If not, you would need to specify the location of the SWF in the URL field. Our libraries are all set now to use the font on the stage.

In our new file create a textfield. In your properties box, choose the new font ie: "_ArialRegular" in the drop down for that field. You'll notice that there is an asterisk by the name noting the font symbol. Now export your file. It's 0kb because we are pulling the font information form the other file. That's it! You can do this with other symbols as well. Something like a company logo at 10kb can add up over multiple files. As with the shared font, sharing the logo can shed extra weight as well. Font symbols and shared assets are best when use in large, multi-file projects. For smaller projects with single files shared assets offer no real savings in file size so use this technique accordingly.

del.icio.us || Digg It || Technorati