Have been working on a new project for a Japanese client.
We are building a system to create and edit personal and professional logos. The tricky part of this application is the fonts. Usually , in English, a font weighs anywhere from 10k to 60k. In Japanese you are looking at about 3mb to 9mb per font. This creates some major loading issues in the application.
Here is a page dedicated to Flash Runtime Font Sharing.
We all know the most important thing to do when building this type of application is to use Shared font libraries. Seeing as 100 fonts in my case would cost us almost 1GB, I needed to separate the fonts into individual shared libraries that can be loaded when needed.
The problem that arises when dealing with the loading of the fonts is this; they don’t register with the preloader! The SWF file that imports the font outlines is about 4k and preloads instantly into the application. If we are not careful, we would just preload that 4k and let the application go on to build the interface and all would be lost. The fonts wouldn’t be loaded when the textFields are created and we wouldn’t see anything.
So, how do we deal with this? The solution I used was an internal callback. Trigger a callback function from inside the Shared Library that lets the main movie know the font actually loaded. This keeps our application from moving forward until that callback is called.
Inside the main movie we see:
[code lang="actionscript"]var myCallback:Function;
setCallback(callback);
function setCallback( f ):Void
{
myCallback = f;
}
function getCallback():Function
{
return myCallback;
}
function callback():Void
{
triggerNextFontToLoad();
}[/code]
Inside the Shared Library SWF:
[code lang="actionscript"]//be sure this file is loaded into a nested movie clip
//and reference the main movie using a relative path
this._parent.getCallback()();[/code]
With this approach we save ourselves loads of headaches when dealing with huge shared libraries but we create other problems for the preloading process. Such as; having to monitor the load progress from the main movie and not the preloader, having to attach and remove the preloader from the main movie instead of having it monitor itself.
The problems are not that bad and not too hard to deal with. They don’t allow for the most OOP structured code but alas, we need these fonts and at 9mb per file, we will do anything to make the process as painless as possible.
edit:
One big issue I forgot to mention! The fonts that are being imported and exported from the shared libraries need to be escaped! When used locally the fonts will load without an issue. The local machine knows the charset and can read the font names even in japanese. When you upload to a server is when the problems start. The HTTP reads a Japanese fonts like
‘_______w5.swf’ instead of seeing the kanji. So, when you import, export, and load the font’s SWF files you need to escape the characters…. so a file like
DCP愛W5
should look like
DCP2%4%6%24%7%2%2%W5
Otherwise the Flash movie can’t export the font, it can’t import the font, and it cant load the SWFs via HTTP! very huge and frustrating discovery but thanks to the guys at Flash-db I was able to trouble shoot down to the bare minimum and eventually ( it took weeks! what a waste. makes me feel stupid i didnt see it sooner ) I got it worked out! So a big up to them and Jorge Solis for running an awesome flash forum!
This is an update:
I wanted to point out that when you load the font files into Flash it is very important to load both the files! The SWF file that imports the shared font will only weigh about 4kb. This shows nothing about how long the loading process will take. In order to monitor the load accurately we have to load the shared font SWF as well. If you don’t need to monitor the loading process then don’t worry about it but when working with Japanese fonts it will be important to inform the user of the download time. Seeing as it can take upwards of 5 minutes to load an entire font face.
Another Update:
Turns out, in order to properly use and preload shared font libraries we need to utilize both methods above.
- Preload the shared library that imports the font face and triggers a callback
- Preload the shared library that exports the font face
- Wait for the callback before exiting the loading sequence
I will be writing a more in depth tutorial on using Shared Libraries once my current project has finished.
