Custom Fonts CS5

From Showit Manual

Back to Custom Fonts

The following tutorial will walk you through the process of creating a custom font file for Showit.

Click on any thumbnail to see a bigger version of the image.
If there are problems when adding the font, remember to restart Showit after each attempt.

Inside Adobe Flash CS5

To begin with the tutorial open Adobe Flash CS5.

Open a new Actionscript 3.0 project from the startup menu.

1. Add Font To Library

In the Library panel on the right side of Flash, right click in the open area of the Library to show the context menu pictured. From the context menu that appears, select New Font...

In the Font Embedding window that appears begin by selecting the font family and font style that you want to use. In the Character Ranges, we suggest using Uppercase, Lowercase, Numerals, Punctuation, and Basic Latin. This helps keep the file size smaller than if you select All.

You will now need to choose a name for the font you are embedding. We suggest starting with an underscore and then naming both the font and style. Do NOT use spaces. In the example we chose _GeorgiaRegular.

Now select the ActionScript tab in the Font Embedding window. Check the box labeled Export for ActionScript. When you check this box, you should see the Class input populate itself with the name you selected on the previous tab.

Repeat the two steps above for each style that you want to use from the font family. It is important to note that only one font family can be used per file that you add to Showit.

In the example, you can see the unique names that we used to add the 4 different font styles in the Georgia font family.

_GeorgiaBold

_GeorgiaBoldItalic

_GeorgiaItalic

_GeorgiaRegular

2. Test Font Name

Once you have added all the font styles that you want to use, we will begin the process of finding how Flash labels these fonts.

Open the Windows menu and select Actions. If the Actions panel is already open then this option will already have a check next to it.

In the Actions panel paste the following code:

import flash.text.Font;

var array:Array = Font.enumerateFonts();
for each(var font:Font in array)
{
	trace(font.fontName);
}

The next step is to change the Publish Settings for the font file we are creating. Go to the File menu and choose Publish Settings...

In the Publish Settings window, make sure that only the Flash version is checked. Now select the Flash tab at the top of the window.

In the Flash tab, select the Player drop down and change the value to Flash Player 9.

When you have made this change, select OK.

Now it's time to save the file to a location that we can remember. From the File menu, choose Save As...

Give the file a name that will let you know what font you've put into it.

Once the file is saved, we will now learn from Flash how the fonts are being embedded.

From the File menu, select Publish Preview - Default.

The Publish Preview should open a new window which is actually a representation of a test font file. You can close this window and return to the main Flash CS5 interface.

Another panel that should now be open is the Output window. You will need the EXACT name that appears in this panel in the next step.

IMPORTANT: If you see more than one font family or name in the Output panel, you are trying to put two font types into one file. Even if they seem close or a part of the same font family, you can not put these two fonts in the same file. You will need to remove fonts from the Library panel until only one name shows in the Output panel after a Publish Preview.

Now we return to the Actions panel to finish our font file.

3. Add Showit Font Code

In the Actions panel REPLACE the code we pasted into the Actions panel with the following code:

import flash.text.Font;

// fontName is displayed in Showit
var fontName:String = "REPLACE";

// cssName is from output panel
var cssName:String = "REPLACE_OutputName";

// Names in parantheses are from library panel
Font.registerFont(REPLACE_LibraryFontName1);
Font.registerFont(REPLACE_LibraryFontName2);
Font.registerFont(REPLACE_LibraryFontName3);
Font.registerFont(REPLACE_LibraryFontName4);

Where it says REPLACE, type a name that will appear in Showit.

Where it says REPLACE_OutputName, type the exact name displayed in the Output panel from the steps above.

Where it says REPLACE_LibraryFontName, type the names of each font listed in the Library panel.

REMOVE any extra Font.registerFont lines of code that are not necessary.

When all the code is pasted and properly updated with the names you are using for your font, you now need to Publish.

From the File menu, choose Publish.

You can also choose to Save as well. We are now ready to jump over to Showit.

Adding Font Inside Showit

Now back in Showit, with our site open. From the Site menu, choose Custom Fonts...

From the Custom Fonts window that appears, choose Add Font.

In the file browser that opens, select the newly created font file with a SWF file type.

If the font file was created successfully, you should now see the font listed in the Custom Fonts window.

If there was an error adding the font file or the font does not appear the way that you would expect, immediately delete the font file from the Custom Fonts window and restart Showit. This is necessary to remove any references to the font that may have only been partially added to Showit.

After removing and restarting Showit, you can try to add the font again. Make sure to follow all the steps above and only add one font per file.