Flash Internationalization and Flash Fonts (part1)

Posted At : April 1, 2007 9:20 PM | Posted By : Justin Mclean
Related Categories: Fonts, Internationalization, Flash, I18N, XML

Lets see how we can use the code in my previous article on internationalization and apply it to a flash fla.

Here's a flash file we want to convert: static fla(28K), static swf(12K), currently all of the text inside the fla is static text.

First we need to create some xml files containing the content in the languages we want English and French and Japanese.

If we take the fla and convert all of the text fields to be dynamic, give them instance names and add the following code to the action layer.

view plain print about

1#include "code/language.as"
2
3var txtClass:TextField;
4var txtSoftware:TextField;
5var txtName:TextField;
6var txtEmail:TextField;
7var txtSkype:TextField;
8var txtPhone:TextField;
9var txtMobile:TextField;
10var txtTech:TextField;
11
12function settext(textfield:TextField, text:String):Void{
13 //textfield.embedFonts = true;
14 textfield.text = text;
15}
16
17// function called when language XML is loaded
18function setUIStrings(resources:Object):Void {
19    // set text fields
20    settext(txtClass, resources.orgclass);
21    settext(txtSoftware, resources.orgsoftware);
22    settext(txtName, resources.name);
23    settext(txtTitle, resources.title);
24    settext(txtEmail, resources.email);
25    settext(txtSkype, resources.skype);
26    settext(txtPhone, resources.phone);
27    settext(txtMobile, resources.mobile);
28    settext(txtOffice, resources.office);
29    settext(txtTech, resources.webtech);
30}
31
32// load XML and call above function once XML is loaded
33loadResources();

Here are the new files; static fla(32K), static swf(8K).

The flash swf will then display in any language that an xml file exists for. For example English or French or Japanese.

Because the fonts are not embedded (notice the small size of the swf) when the swf is displayed it will use a font on the user's system. This is fine as long you don't mind the display not being pixel perfect. However text that is alphaed or rotated will not appear, also any italic or bold text will appear as normal.

If we look at the result there is one issue that needs to be fixed some of the text is cut off, often languages other than English take up more space so we'll need to make the text fields on the right bigger.

If we place all of the text fields inside a movie clip we can adjust the x position of them all with one line of code and store this offset in the XML file(s).

view plain print about

1// adjust spacing
2 this._x += Number(resources.offset);

Here are the final files; static fla(32K), static swf(8K), and results; English or French or Japanese.

Next time we'll look at embedding fonts in the fla.