robskelly.com » Localization

On-the-fly Localization

Rob — Mon, 18 Aug 2008 20:10:09 +0000

So, what if you want your users to be able to change locales on-the-fly? I’ve put together a simple component that loads and manages translations via XML.

Here’s how it works…

Somewhere in your code, you must set up your languages:

import com.robskelly.text.LocalTextField;

LocalTextField.addLanguage('en_us','lang/en_us.xml');
LocalTextField.addLanguage('es','lang/es.xml');

Now you can set a language:

LocalTextField.setLanguage('en_us');

LocalTextField won’t load the language file until you call setLanguage.

LocalTextField itself is a component that wraps a flash.text.TextField instance. You can drag an instance of LocalTextField onto the stage, set its ID parameter, and off you go!

The language files are XML and look like this:


	This is a string.
	This is also a string.
	This is a string with HTML

Download a sample here.

Changing Character Set Embedding in a Flash Document

Rob — Fri, 15 Aug 2008 17:35:07 +0000

Here’s a little JSFL script that you can use to change the character-set embedding in all the input and dynamic TextFields in an entire Flash document. When you run it, it’ll pick the active document and pop up a prompt asking for the character-set IDs.

This is a pipe-delimited string of integers, so for one character set, say, “Basic Latin,” enter:

For more than one character set, say, “Basic Latin,” plus “Armenian,” enter:

This script uses the IDs from the UnicodeTable.xml file in C:\Documents and Settings\[username]\Local Settings\Application Data\Adobe\Flash CS3\en\Configuration\FontEmbedding. You can create your own character sets by copying or adding glyphRange elements.

For example, I wanted to extend the Basic Latin character set with some European characters. I simply copied the Basic Latin glyphRange element and gave it a new name and ID. Then I opened the charmap utility in Windows (C:\WINDOWS\system32\charmap.exe) and found the Unicode codes for the characters I wanted. The codes in charmap are in the format “0+0000.” Just change the “+” to an “x.” Since the characters in charmap are listed in order of their Unicode codes, you can use the first and last IDs of a range of characters and all those in between will be included. Here’s my “Basic Latin plus European” glyphRange:

Download the script here.
Place the file in C:\Documents and Settings\[username]\Local Settings\Application Data\Adobe\Flash CS3\en\Configuration\Commands and run it from the “Commands” menu in Flash.

Update: If you get an error like this:

At line 1 of file "/Users/dan/Downloads/ReplaceTextFormat.jsfl": TypeError: fl.findObjectInDocByType is not a function

there’s a quick fix. Find the file ObjectFindAndSelect.jsfl in en/Configuration/Javascript and edit the function FlashUtils_findObjectInTimeline, adding this in the first line of the body (around line 29):

if(!objTimeline)return;

This method performs a bunch of operations on that object but fails to check if it’s null first. According to a user in the comments on the livedoc entry for fl.findObjectInDocByType(), pngs in the fla timeline will cause objTimeline to be null. I tested it with a png and, by golly, it’s true. Thanks Dan!

Dynamic Font Loading in Flash 9

Rob — Thu, 19 Jun 2008 01:22:15 +0000

One of the biggest headaches in localizing Flash sites is setting up to dynamically load and easily use embedded fonts. Recently, in order to build a site that will need localization for an as-yet-undecided number of countries, I finally decided to dive in and solve this problem once and for all.

There are several problems with creating loadable font modules for Flash:

If you embed fonts in a TextField, there’s no way to access the Font instance or class from the swf.

If you create a font library symbol, there’s no way to alter the character set, other than changing your machine’s locale.

If you set the same font in a library symbol and a TextField, the charset in the symbol will actually override that in the TextField, and an incomplete charset will be baked into the swf (whaa?)

So, how do you create an accessible font in an swf? FLEX!

Flex allows you to specify specific charsets for embedded fonts, and requires that you define a class for the embedded font. The font can easily be retrieved from the swf after loading. Here’s a usage example.

// load an swf that has a font embedded in it (see below)
function loadFont(fontURL:String):void{
var loader : Loader = new Loader();
loader .contentLoaderInfo.addEventListener(Event.INIT,fontLoaded);
loader .load(new URLRequest(fontURL));
}

// when the swf is loaded…
function fontLoaded(evt:Event):void{
// get the loader
var loader : Loader = (evt.target as LoaderInfo).loader;
// remove events
loader .contentLoaderInfo.removeEventListener(Event.INIT,fontLoaded);
// cast the loader content to the IFontSource type. IFontSource defines a getFont() method that
// we can use to retrieve the font. DO NOT use the swf’s actual main class here. if the main class
// is referenced anywhere in the current swf, things will break down (a subject for another lecture…)
var fontSource : IFontSource = (loader.content as IFontSource);
// retrieve the font class from the swf.
var font : Class = fontSource.getFont();
// register the loaded font with the fonts list.
Font.registerFont(font);
}

The font is now registered in the current swf and ready for use.

Now you can do this:

// create and populate a text field using the given text and font (which we loaded in the previous listing)
function fillTextField(text:String,font:String):void{
// prepare a new text field
var textField : TextField = new TextField();
textField.width = 200;
textField.height = 25;
// create and assign a TextFormat using the submitted font name
textField.defaultTextFormat = new TextFormat(font,12,0);
// embed the font
textField.embedFonts = true;
// etc…
textField.text = text;
addChild(textField);
}

There’s only one catch here. You have to be careful what font name you use. It must be the font’s internal name. Fortunately, there’s an easy way to retrieve it:

// instantiate the font
var font : Font = new MySpecialFont();
// retrieve the font’s internal name
var fontName : String = font.fontName;

You can use fontName in the TextFormat object.

Now, some code:

Create an interface that your target movie will use to retrieve fonts.

public interface IFontSource{

function getFont():Class;

}

Now make an abstract class for the font swfs. This will be a base class for the MXML application. You can use an interface in the application’s default declaration, but if you inherit from Sprite, you can drop some baggage.

public class FontSource extends Sprite implements IFontSource{

public function getFont():Class{
// not implemented yet…
return null;
}

}

Now, create an mxml file that implements everything. The application inherits from FontSource.

version="1.0" encoding="utf-8"?>

xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:font="*">

>

[Embed(systemFont="Bwhebb",fontName="hebrew",mimeType="application/x-font",unicodeRange="Hebrew")]
public var hebrew : Class;

public override function getFont():Class{
return hebrew;
}

]]>
>

>

The new swf contains the font class (with glyphs) and a mechanism to retrieve it.

In order to publish the font swf, you have to edit your [flex sdk]/frameworks/flex-config.xml file so that it contains the appropriate character ranges. Some charsets are already provided in the [flex sdk]/frameworks/flash-unicode-table.xml file. You simply copy and paste elements from this file (or create your own) and paste them into flex-config.xml.

In flash-unicode-table.xml, you’ll copy the language-range element (in this case, all uppercase latin characters):

>
>
>Uppercase>
>U+0020,U+0041-U+005A>
>
>

Paste the copied element into flex-config.xml:

>
>
>
>Uppercase>
>U+0020,U+0041-U+005A>
>
>
>