:: WaxPraxis ::
Friday July 5, 2002
Shared Fonts Redux

I spent a good chunk of time during the holiday yesterday taking another look at shared fonts. That research has resulted in a lot of information on exactly how to make shared fonts work in the real world. Below is my full write up:

Creating Shared Fonts
The first thing you need to do is to create a FLA that will hold all of your shared assets. In this FLA create a new font symbol by selecting New Font... from the library's menu(that doohickey in it's upper right corner). You need to select the font and give your shared font a name. Do not name the symbol the same thing as the actual font, this will make things break. I tend to name my fonts Font-<font name>-<style> where style normal, bold, italic, or bolditalic depending on which checkboxes I checked when creating the font symbol.

Now you are done creating the font symbol, now you have to make it shared. To do this right-click on the new font symbol and select Linkage. Now, select Export for runtime sharing. Don't bother checking Export for ActionScript, it won't work - I'll cover this more in depth in a bit. Make sure you fill in the URL field; this is just the name of the SWF that this FLA will create. Now just click on OK, you now have a shared font.

Using a Shared Font
By far, the easiest way to use a shared font is to simply drag it from the shared assets FLAs library into the library of the FLA that will use it. This does all of the dirty work for you. If you have to do it by hand, follow the initial steps above for creating a font symbol, but when you bring up the new symbols linkage window check Import for runtime sharing and type in the URL of the SWF you want to import from. If the field is a dynamic or input textfield make sure that you click on the character button in the properties inspector and embed all outlines.

Issues
If you follow the directions above, your shared font will work properly for static textfields in all browsers. However, the shared font will only work in dynamic and input textfields properly in Internet Explorer on the PC platform. Also, the shared font won't work at all on any platform with the TextFormat object.

Fixing Dynamic/Input Textfields

Dynamic and input textfields that utilize shared fonts, when viewed any where other than IE/PC, will show any text that they originally had in them, but if you set their text property while the font was being loaded (i.e. in the first few frames) that text will not show up. However, anything done to the textfields after that point will show up properly. This is obviously a latency issue, and as such a preloader will solve the problem. The best way I have found to preload movies that utilize share assets is as follows:

Create a special loader movie and have it load your assets in this order:

By loading the SWFs in this manner you ensure that all of the assets are located in the users cache before you try to use them. I've tested this solution on both Netscape and IE on the PC and on IE and Mozilla under OS X and it works fine in all of them. If you run into a browser that this solution fails under, let me know.

Fixing TextFormat
As I mentioned earlier, if you follow the standard steps for using shared fonts, they simply won't work with the TextFormat object. However, I figured out why this is and came up with a solution. It turns out that since you can't check the Export for ActionScript checkbox on an imported asset, it doesn't matter what the assets export state is - the imported one takes precedence. What I discovered though is that if you don't explicitly import a font, but do explicitly import anything else from the shared library that includes the font, you can use it with the TextFormat object.

To do this you open your shared assets FLA and create an blank symbol of some sort(I tend to create an empty movieclip and name it ForceShared). Then you specify that it is to be exported for runtime sharing in it's linkage settings. Before you leave the FLA though, make sure all of the fonts you want to use with TextFormat have their Export for ActionScript checkbox checked.

Now, you open the FLA that is to use the fonts that are in the shared assets FLA and only drag the blank symbol you created from the shared assets FLA into your library. That's it. You can now use the fonts any of the fonts that are in your assets SWF, and have their Export for ActionScript checkbox checked. Note though, that these fonts will now no longer work with any static textfields or dynamic/input textfields unless you explicitly set their format with a TextFormat object that uses one of the fonts.

Over the next few days/weeks I'll be posting FLAs that display each of these techniques - most of them will probably be posted after Flash Forward.

Posted by Branden on July 5, 2002 at 01:35 PM
Comments

wonderful!

Posted by: fazal on July 5, 2002 02:39 PM
_________________________

Clear description - great work !

Posted by: Matthias Kannengiesser on July 6, 2002 12:04 AM
_________________________

I've taken to naming the exported font to be _fontname. The preceding underscore groups all your device and shared fonts together in the font picker! :)

Posted by: crashposition on July 8, 2002 08:54 AM
_________________________

flash mx is a freaking nightmare. i'm stunned at the level of work-arounds necessary to complete relatively basic tasks. cripes.

Posted by: david on July 8, 2002 08:21 PM
_________________________

There is defined font in the shared font swf - if we have to call the font through Actionscript, how do we do that. I hope this is clear. Please let me know this.

Posted by: Arya on July 9, 2002 09:50 AM
_________________________

It will be very useful for my Tamil editor project where I need to use diffrent font for each encoding.
Thanks,
-Arul

Posted by: R.Arul Kumaran on July 12, 2002 12:26 AM
_________________________

flashMX doesn't allow embed Korean fonts.

flashMX does shows a gray box on the screen during typing Korean Charactor in an input text box.

I havn't seen these bugs in Java, Mac & MS windows...and any others.

Why couldn't you make correct these bugs?

Posted by: Jinm on July 18, 2002 12:26 AM
_________________________

Hi, B! I didn't get it, so a source file would be great. A question for you:

I have 1000 files with dynamic text in them. I have a main movie which loads these into a target mc. This target lives under a mask.

I don't want to embed the font 1000 times... Any suggestions?
Thx!
Jenn

Posted by: neonwhiskey on July 22, 2002 05:19 PM
_________________________

Branden,

Does the TextFormat issue / workaround also apply to html text fields with tags?

If not - does TextFormat work in html text fields without this workaround?

----
Approach #1 works with Dynamic/Input TextFields. This means text fields that are placed on stage, and where the font is selected already and set to be embedded. Is this correct?

In summary, based on your findings, in order to use a shared font for both static text (plus. regular dynamic text fields), and modify-able text fields using TextFormat I have to embed the same font twice?

Cheers,
Andreas

Posted by: Andreas on July 22, 2002 08:37 PM
_________________________

great stuff :)

One point .... you have to fully preload your movie into an offstage clip first so you loose the ability to start streaming the content before it's fully loaded (could there possibly be a way around this??)
Just thinking about the sites I've worked on (fairly big modules)- the time taken to stream in an extra 15k or so per movie is negligible - certainly preferable to making the user wait whilst you fully load each module.

The fix is great. Just a shame they're still not working properly. SF's are obviously a tricky problem for MM. They had similar issues with F5 (http://www.macromedia.com/support/flash/ts/documents/dynamic_text.htm)

Posted by: mj on August 1, 2002 07:26 AM
_________________________

Note also that the new Flash player (6,0,40,0) does not break masks with system fonts. I've changed the project I'm working on to require this player (gotta love intranets!) so hopefully I no longer need to deal with the import weight and the whole pixel problem and the million other headaches. Does anyone know if there are still issues here with system fonts and masks? My project just got a whole lot easier and sharper.

Posted by: dylan on August 1, 2002 10:04 AM
_________________________

Has anyone here any experience with shared fonts stopping to work after a while?

I have now seen this happen a few times in my project, and I don't quite know yet how. I eventually got things working again after several attempts of removing shared symbols, re-exporting the library, and reimporting the symbols.

Yet I am still looking for a pattern of what makes things break, and what is fixing it again. I'm still using more or less brute force.

Posted by: Andreas on August 12, 2002 06:24 PM
_________________________

I just don't get it...Flash is this 'web killer' that creates 10/20kb for each file because of these rediculous workarounds which don't even work in all browsers!!!! - I thought the whole point of Flash was that it wasn't platform dependent!?!?!?

They say content's king, but if you've got such high overheads because the fonts got to download for each .swf instead of sharing one font across thew entire site it's crazy....

Please MM sort it out! Christ....9very sorry Branden...I've been trying to get this to work for days now and I keep getting little things bugging me out!...sorry

Posted by: confused on August 23, 2002 08:06 AM
_________________________

Useful info, thanks! Here are a couple of other quirks I've found:

- If a text field using a shared font was also set to load only some character outlines (eg. numbers only), this constraint will still apply. It's safest to choose Embed Font Outlines for "No Characters"

- Dynamic and input text fields using shared fonts won't appear in masked layers. What's up with that? (Sounds like this is sort of a known issue..)

Posted by: jimA on September 3, 2002 02:07 PM
_________________________

OK, here's what I've learned since that last post:

- If you apply masking using .setMask (as opposed to standard masking layers) the shared fonts will appear in dynamic text fields

- Re: Embed Font Outlines for shared fonts, I had it backwards. Choosing "All Characters" is best; it won't actually embed 'em in the local file, but will instead use the shared font as intended. (Otherwise, the text will appear aliased/jaggy, as if using system fonts.)

Fun fun fun...

Posted by: jimA on September 3, 2002 11:16 PM
_________________________

thanks! it would be more clear if u can send a source file having the detail

Posted by: arup on September 17, 2002 08:46 AM
_________________________

hey folks :)

is it possible to embed a font in an fla?

I have added one to my library via "new font"

I have set up the linkage and used it in a bunch of dynamic text boxes

but when my friend opened up the fla and tested it he saw a different font

Is there any way to do what I want?

TIA

Posted by: Billy T on September 24, 2002 09:27 AM
_________________________

Hi Brandon,

did anything according to shared fonts
change with the new beta ?

kind regards,
bokel

Posted by: bokel on November 9, 2002 06:15 AM
_________________________

I followed your "Fixing TextFormat" paragraph. It doesn't seems to be working.

here is the code:
showText.text = "hello";
showText.embedFonts = true;
showText.font = "ForceShared"
//showText.font = "myfont"

myTft = new TextFormat();
//myTft.font = "myfont";
myTft.size = 25
myTft.color = "0xff0000";
showText.setTextFormat(myTft);

Posted by: Asif Kilwani on November 20, 2002 02:02 AM
_________________________

Hi Brandon

hey, could you create world peace ?

thanks,

Tijmen

Posted by: Tijmen on November 22, 2002 09:33 AM
_________________________

hey Branden, you wouldnt by any chance have example files for this would you?

Posted by: travis rimel on December 2, 2002 11:18 AM
_________________________

sfdgefhtr ght

Posted by: Dang on December 3, 2002 10:36 PM
_________________________

Don't Work!!!!

Posted by: Giancarlo on December 4, 2002 09:13 PM
_________________________
Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?