By Adobe
 
Created
26 July 2010
 

Requirements

 
Prerequisite knowledge

General experience working with Flash Professional and some experience programming with ActionScript is required to follow the details of the samples, but this article will benefit anyone interested in an overview of localization and text formatting techniques in Flash Professional CS5.
 

 
User level

Intermediate
 

 
Required products

 
Sample files

Adobe Flash Professional CS5 offers new levels of support for displaying multicultural text using the Text Layout Framework (TLF). The Text Layout Framework provides the functionality for a new type of text field in Flash Professional. TLF text can display languages with greater formatting control and includes full support for complex scripts using right-to-left and vertical text. The Text Layout Framework—combined with the Strings panel and the range of options available in ActionScript—enable Flash developers to build content that can be localized to different languages.
 
This article provides an overview of the process of preparing files for localization in Flash Professional and the things you need to know to work with Flash text fields, font embedding, and localized text content.
 
Note: If you are using Flash CS3 or CS4, refer to the previous version of this article.
 

 
Basics of text localization

The Internet is, by its nature, globally connected—so the idea of different cultures developing content for one another has become a common scenario. Localization is the process of translating content from one language to another; a localized application displays more than one language. Some applications are developed in a default language and then localized to other regions, while others are built to target multiple languages from the start.
 
In general, it is considered a best practice to develop your Flash applications ready for localization even if you're currently only targeting one language. To do this, you'll need to understand how text works in Flash and the range of formatting options available.
 
Please see Basics of internationalizing applications in the ActionScript 3.0 Developer's Guide for a breakdown of terminology related to localization.
 
 
Strategy and workflow
While this may seem obvious, you should externalize the text of any application that is bound for localization. That is, the text should be supplied to the text field from an outside source—usually a text file or an XML file. This allows the text to be changed externally without having to edit the Flash source file.
 
There are several scenarios you might follow when localizing your project:
 
  • Use the Strings panel in Flash Professional to manually assign localized text to your layout (no ActionScript is required)
  • Use the Strings panel in combination with ActionScript to create dynamic variations on the simple Strings panel scenario
  • Use ActionScript, XML, and FlashVars (along with other code) to create a custom localization routine separate from the Strings panel
This article focuses on the first two scenarios, as they are most accessible in the Flash Professional.
 
 
Using the Strings panel (without ActionScript)
The first and easiest scenario involves manually formatting text fields in Flash Professional and using the Strings panel to assign text from different languages to the fields. This approach allows you to see the text in the default language at authortime and generate an XML representation that can be localized by translators.
 
Here are the common characteristics of a project localized using the Strings panel:
 
  • Text fields are manually formatted in Flash Professional.
  • Text content is entered into the Strings panel and associated with a text field on the Stage using a string ID.
  • The Strings panel automatically generates an XML file when the FLA file is saved.
  • Alternate languages are added through the Strings panel or by importing translated XML files into the Strings panel.
  • The language displayed at runtime matches the locale of the computer, if it's available, or the default language is shown. The developer can also manually choose the Stage language using the Strings panel.
Check out the Working with the Strings panel section of this article for an overview of the process.
 
 
Using the Strings panel and ActionScript
The second scenario involves using ActionScript to manipulate the content generated by the Strings panel. This approach allows you to access text content for multiple languages as the same time. It's necessary to use ActionScript any time you want to switch between languages at runtime or show text from multiple languages side by side. For example, let's say that you're creating a linguistics training application that needs to display English, Spanish, and French at the same time in the user interface. In this case, you could load the text from localized XML files and display language comparisons on the fly. You could also use ActionScript to format the text field(s) so that the unique characteristics of each language display properly.
 
Here are the common characteristics of a project localized using the Strings panel and ActionScript:
 
  • Shares the basic characteristics of using the Strings panel (described above).
  • ActionScript code is added to the main Timeline of the FLA file or an ActionScript class is associated with the FLA file.
  • The ActionScript code uses the Locale class's programming interface to manipulate the localized Strings panel content. You can load the localized XML files by locale and retrieve text by locale on the fly.
  • The ActionScript code is used to assign localized text strings to text fields, format the text fields, and load font libraries as needed.
Check out the Working with ActionScript for custom functionality section of this article for an overview of the process.
 
 
Using ActionScript to create custom solutions
The third scenario combines ActionScript, XML, FlashVars, and any other resource available in Flash Player to create a custom localization solution. The Strings panel is your best option if your localization needs are straight forward, but if you need to use a custom data format to represent the text and formatting information, then this approach is worth considering.
 
Here are the common characteristics of a custom localized solution:
 
  • All text and text formatting is externalized.
  • Text content is supplied through an external XML data source or FlashVars HTML parameters.
  • Text formatting is supplied through CSS files in the XML data.
  • A call to the server, a FlashVars parameter, or an XML settings file routes the SWF file to the correct text and formatting data.
  • Fonts may be embedded and managed for special needs.
If you choose to create a custom solution, you'll need to get up to speed with your options in ActionScript. Get started by taking a look at the XML object and the LoaderInfo object (for FlashVars handling). Both options are simple ways to import text data.
 
The available options for formatting localized text vary depending on the type of text field you use. Check out the Text Layout Framework and classic text section of this article for an overview of formatting options.
 
 
Text encoding, Unicode, and Flash Player
It's important to understand how text works on your computer and in Flash Player before you can move forward. At a base level, your computer includes a code page that defines the character encoding supported for displaying languages. Code pages are operating system specific: CP1252 on Western Windows, MacRoman on Western Mac, and so on…
 
While the code page supplied with an operating system should be able to support the locale of the computer configuration, it generally cannot support a full range of languages consistently. This is where Unicode steps in. Unicode is the computer industry standard for representing text developed by the Unicode Consortium. It consists of more than 100,000 character encodings and character properties designed to consistently display text for most of the world's languages. This includes extended language support for complex script rendering with East Asian languages and bi-directional languages, such as Arabic and Hebrew.
 
Flash Player 6 and later includes Unicode support. By default, Flash Player assumes that all external text is Unicode encoded unless configured otherwise using the System.useCodePage property in ActionScript. It's important to understand that while Flash Player supports the display of any characters in Unicode, you will only be able to author content using characters supported in your computer's code page. For example, at the moment I don't have Chinese language support installed on my computer. Even though I can see Chinese text displayed in online Flash content, I can't actually type Chinese text into Flash Professional. If I wanted to type Chinese characters I would first need to activate Asian language support in my operating system and install the necessary fonts and keyboard support on my computer.
 
Tip: Classic text fields in Flash support Unicode, but do not support right-to-left or bi-directional text, among other types of complex script formatting. Be sure to use TLF text and set the publish settings to Flash Player 10 or later if you need to use these advanced features.
 
For more information on Unicode support and text encoding, see the About multilanguage text section of the online Flash documentation. Also, check out this Flash MX TechNote about the introduction of Unicode support in Flash Player.
 
In the next section, you'll take a look at the available text field options in Flash Professional CS5.
 

 
Text Layout Framework and classic text

Before you can display text from any language, it's essential to understand how text fields work in Flash Professional CS5. Flash Professional now supports two kinds of text fields: classic text and Text Layout Framework (TLF) text (see Figure 1). TLF text is the new default text field type in Flash Professional, allowing for a wider range of formatting options and effects.
 
Use the Properties panel to choose between Classic Text and TLF Text.
Figure 1. Use the Properties panel to choose between Classic Text and TLF Text.
This section provides an overview of each type of text field and the basic information you'll need to know when working with localized text content.
 
 
Working with classic text
Classic text refers to the original text engine in Flash Professional. The classic text option is still available in Flash Professional CS5; however it's recommended that you use the newer TLF text option in most cases.
 
There are two scenarios where you'll want to use classic text in Flash Professional CS5:
 
  • If you need to publish content that targets Flash Player 9 or earlier
  • If you need to publish content to the iPhone OS format (due to performance related factors)
Classic text is backward compatible with older FLA files and Flash Player versions earlier than Flash Player 10. This allows you to open older FLA files in Flash Professional CS5 and continue to work with them. You can work with both classic text and TLF text in the same FLA file, but in terms of localization you'll find that converting your classic text to TLF text is advantageous.
 
When working with classic text you have three options when setting the behavior of the text field: Static Text, Dynamic Text, or Input Text (see Figure 2). If you plan on localizing a classic text field, you'll usually be working with the dynamic text type—which can be manipulated with ActionScript and the Strings panel.
 
The Properties panel showing the classic text attributes.
Figure 2. The Properties panel showing the classic text attributes.
While you can do a lot with classic text, it has limitations in regards to localization support and formatting support. The biggest limitations are related to the lack of support for low-level formatting of complex script languages and large file sizes while using embedded fonts for Unicode support.
 
Note: Classic text fields do not support right-to-left, or bi-directional, text formatting.
 
For more information on classic text fields, please see the Working with classic text section of the online Flash documentation.
 
 
Working with TLF text
The Text Layout Framework is an ActionScript 3 library used to power the new TLF text field option. The TLF uses the Flash Text Engine (FTE) APIs in Flash Player 10 and later to create a highly configurable text field based on an extensible ActionScript framework. The TLF adds functionality over the top of the FTE including multicolumn support, text flow support between containers, and graphical and interactive user-interface features.
 
TLF text fields are important from a localization perspective because they open up the possibility of correctly formatting complex scripts, such as Asian languages, Arabic and Hebrew. The TLF also provides low-level formatting for manipulating typographic features such as ligatures, leading, tracking, justification, and baseline shift.
 
The following languages are supported in the Text Layout Framework:
 
  • Latin (English, Spanish, French, Vietnamese, and so on)
  • Greek, Cyrillic, Armenian, Georgian, Ethiopic
  • Arabic, Hebrew
  • Han ideographs and Kana (Chinese, Japanese & Korean) & Hangul Johab (Korean)
  • Thai, Lao, Khmer
  • Devanagari, Bengali, Gurmukhi, Malayalam, Telugu, Tamil, Gujarati, Oriya, Kannada, Tibetan
  • Tifinagh, Yi, Cherokee, Canadian Syllabics, Deseret, Shavian, Vai, Tagalog, Hanunoo, Buhid, Tagbanwa
When working with TLF text, you have three options for the behavior of the text field: Read Only, Selectable, and Editable. When localizing a TLF text field you'll usually use the Read Only or Selectable type.
 
You can easily experiment with the range of TLF text attributes by setting the text properties in the Properties panel. To see all the Asian and right-to-left options, make sure to enable the Show Asian Options setting in the Properties panel menu (see Figure 3).
 
Display the Asian options for TLF text attributes in the Properties panel.
Figure 3. Display the Asian options for TLF text attributes in the Properties panel.
Note: TLF text fields require Flash Player 10 or later.
 
For an overview of TLF text field attributes, see the Working with Text Layout Framework (TLF) text section of the online Flash documentation.
 
 
Formatting text fields in Flash Professional
Flash text fields are configurable in two ways: manually while authoring the FLA file in the Flash authoring environment and dynamically at runtime. The Text tool and the Properties panel are used to edit text content directly in Flash Professional. ActionScript code is used to dynamically manipulate text at runtime.
 
If you work with languages that are fairly similar (such as English and Spanish), you can manually set the styles for your text and they will most likely display correctly across languages. If you need to display many languages that are potentially different in terms of layout (English, Chinese, and Arabic for example), you can use ActionScript to dynamically modify the text field attributes when languages are selected or changed.
 
Classic text fields can be formatted in a number of ways. Options related to classic text are limited in comparison to TLF text, but if you need to support Flash Player 9 or earlier you can use standard markup languages (HTML and CSS) to import styles from external resources. You can also develop custom formatting routines using ActionScript.
 
Options for formatting a classic text field include:
 
  • Use the Properties panel to visually style selected text while authoring the FLA file in the Flash workspace.
  • Use the text field's properties (where available) to set individual attributes. See the TextField class for more information.
  • Use a TextFormat instance in ActionScript. See the TextFormat class for more information and code samples.
  • Import a cascading style sheet (CSS) using ActionScript. See the StyleSheet class for more information and code samples.
  • Use HTML formatting with the text field's htmlText property. See the htmlText property in the TextField class for more information.
The Flash Text Framework was designed with configurability and formatting in mind. One of the purposes of the TLF is to overcome limitations with formatting text and displaying globalized content. You can use simple or elaborate features within the framework to create a wide range of text layouts.
 
Options for formatting a TLF text field include:
 
  • Use the Properties panel to visually style selected text while authoring the FLA file in the Flash workspace.
  • Use the text field's properties to set individual attributes. See the TLFTextField class for more information.
  • Use a TextFormat instance in ActionScript.
  • Use HTML formatting with the text field's htmlText property.
  • Use the setStyle method in ActionScript to set individual attributes on any type of flow element. See the FlowElement class for more information.
  • Use a TextLayoutFormat object in ActionScript to set collections of attributes. See the TextLayoutFormat class for more information and code samples.
  • Import a cascading style sheet (CSS) using ActionScript. See this Text Layout Framework Team blog entry for more information and code samples.
  • Use the Text Layout Framework Markup language to define text and formatting. See Text Layout Framework Markup for an overview of the XML-based markup language.
Note: The TLF does not directly support CSS the way classic text does, but you can use the formatResolver property of the TextFlow class to assign a user-defined function capable of parsing a CSS formatted file.
 
Notice that TLF text fields support most of the formatting features available in Classic text fields. This allows developers to use familiar formatting options and to update Classic text to TLF text relatively easily. TLF text fields also include a range of additional formatting options available in the Properties panel while authoring in Flash or in ActionScript while creating TLF text dynamically at runtime.
 
Note: Some TLF formatting options are not accessible at runtime for TLF text created while authoring. For best results, you should create TLF text fields dynamically in ActionScript if you need to change advanced formatting features such as bidirectional text on the fly.
 
 
When to use ActionScript
The approach of visually configuring text fields in the FLA file can be an easy way to combine your graphic layouts with the Strings panel. This approach will work for most projects that require swapping languages in the application based on the computer's configuration or the Stage language settings in the Strings panel. In this scenario ActionScript isn't necessary and all the text fields update at the same time to show the selected language.
 
If you need to handle language changes and formatting changes on the fly, or if you need to use a mixture of languages simultaneously, you can develop a custom ActionScript solution. Check out the Working with ActionScript for custom functionality section to learn more about using runtime text related features.
 
For more information on manipulating classic text at runtime, see the Using the TextField class section of the ActionScript 3.0 Developer's Guide. For more information on manipulating TLF text at runtime, see the Using the Text Layout Framework section of the ActionScript 3.0 Developer's Guide.
 
Next, you'll take a look at the new Font embedding features in Flash Professional CS5.
 

 
Font embedding for multiple languages

You can embed font libraries by assigning certain fonts and characters within those fonts to be published and contained within the SWF file. Doing so allows the viewer to see the text displayed in a specific font—whether they have the font installed on their machine or not.
 
This section provides an overview of the new font embedding features in Flash Professional CS5 and highlights best practices for working with font embedding.
 
 
To embed or not to embed
Flash Professional CS5 embeds all text created at authortime by default. You can also specify embedded font ranges for dynamic text using the Font Embedding panel. The up side to font embedding is the ability to render smooth text in Flash Player (and the ability to use animation effects on classic text). The downside is that you increase the file size of the SWF with each font that you embed.
 
Font embedding has improved in Flash Professional CS5. The TLF outline format uses CFF compression to create embedded fonts that retain their fidelity while being compressed to a smaller size than classic text. You must use a TLF text field to display a font embedded with TLF font outlines.
 
If you use classic text, you may find embedding a large Unicode font library produces an excessive file size. In this case using a generic system font (also called a device font) is the way to go. Device fonts are pulled from the user's computer and therefore do not increase the file size of the SWF file. Using a device font bypasses font embedding and instructs the computer to choose the closest font available, based on the font family. You can use the device font settings for both classic text and TLF text (if needed).
 
To choose a device font, scroll to the top of the font list and choose _sans, _serif, or _typewriter (see Figure 4).
 
Set the device font options in the Properties panel while a dynamic text field is selected.
Figure 4. Set the device font options in the Properties panel while a dynamic text field is selected.
 
OpenType and Unicode support
Adobe recommends using OpenType fonts with Flash Professional. OpenType fonts support advanced typographic elements, extended language support through Unicode, and complex scripts, such as Arabic. The OpenType format was built on its predecessor, the TrueType format, which is also supported in Flash text fields (see Table 1).
 
  OpenType TrueType Post Script Type 1 Bitmap (Mac)
Classic text × × × ×
TLF text × ×    
Table 1. Supported font formats for each text type in Flash text fields.
 
In addition to choosing a font format, make sure that you choose a font that contains the range of Unicode characters your project requires. Not all fonts contain all characters. You can check the Unicode range of fonts on your computer using software like BabelPad (Windows) or UnicodeChecker (Mac). Even Apple's TextEdit works fine in Unicode, and you can select whether it is UTF-8 or UTF-16.
 
Tip: In general, East Asian and right-to-left language support has to be installed for use on North American computers. Check your operating system's documentation for more information on how to enable East Asian and right-to-left fonts on your computer.
 
 
Using the Font Embedding panel
Flash Professional CS5 includes the new Font Embedding panel, which enables you to create and manage embedded fonts in the FLA file (see Figure 5). The Font Embedding panel can be used to manage classic text font embedding and TLF font embedding.
 
The Flash Professional CS5 Font Embedding panel.
Figure 5. The Flash Professional CS5 Font Embedding panel.
The Font Embedding panel provides a simple way to create Font symbols in the Library and manage their properties in a central location. Font symbols are a special type of symbol that stores font outlines inside the SWF file.
 
The Font Embedding panel includes two tabs: Options and ActionScript. The Options tab allows you to name the font symbol, choose the font style, and choose the range of characters to embed. The ActionScript tab allows you to activate the symbol linkage for the font symbol. Use the ActionScript tab if you want to work with the font dynamically or create a shared font library.
 
Launch the Font Embedding panel from the Text menu and return to it as needed to manage your embedded fonts.
 
 
Embedding fonts by character range
The Options tab in the Font Embedding panel allows you to choose the font and character range for the embedded font. To activate embedding, check one or more of the options in the Character range menu. Be sure to only embed the range of fonts that are needed for your locale or use case. For example, choose the Basic Latin option if you're displaying content in English.
 
You can embed as many languages as you like by checking the options in the Character range list. Be sure to test the file size of the SWF file as you go and check to make sure the characters that you're targeting appear in the text fields after the font is embedded.
 
Tip: If you embed a font, and then see unexpected results when you format text with the font, it's possible that you attempted to embed characters that don't exist in the font.
 
 
Managing embedded fonts and file size
One of the challenging factors of building user interfaces for localized text is the file size incurred by embedding fonts for different locales. If you target more than two or three languages, the combined size of the embedded characters may make the application slow to download. At that point you should consider splitting the font libraries into separate SWF files with each Font symbol's Export for ActionScript option selected (see Figure 6).
 
Use the Font Embedding panel to select the Export for ActionScript option.
Figure 6. Use the Font Embedding panel to select the Export for ActionScript option.
By creating SWF files that only contain Font symbols, you can reuse font libraries across projects and manage the overall file size of the content loaded in Flash Player. Also, since the font library SWF is separate from any project, it gets cached on the user's computer and is already available for other Flash content loading in a browser.
 
You have two options for loading an external font library; you can setup the Font symbols as a runtime shared library (RSL), or you can load the font library SWF into another SWF using the Loader object in ActionScript. See the section titled Working with ActionScript for custom functionality for an overview of loading a font library using ActionScript.
 
For more information on font embedding, see the Embed fonts for consistent text appearance section of the online Flash documentation.
 
In the next section, you'll take a look at using the Strings panel.
 

 
Working with the Strings panel

The Strings panel is provided in Flash Professional as a simple way to manage multiple languages for any given string (text) in the Flash environment. A string can be a word, phrase, sentence, paragraph, or group of paragraphs. The gist is that each string is assigned an ID which can have multiple translations associated with it for different languages. The Strings panel provides a visual metaphor to use while assigning IDs to text fields (see Figure 7).
 
Use the Strings panel to assign an ID to the selected text.
Figure 7. Use the Strings panel to assign an ID to the selected text.
A common workflow includes assigning text and related IDs in the Strings panel in a default language and then assigning the text (string IDs) to text fields in the FLA file. Behind the scenes, the Strings panel saves the text and IDs to an XML file that can be sent to a translator for localization. Each language is represented in an XML file. Additional XML files can be imported at any time to add more languages. In the end, the language appearing in the text fields updates based on the user's computer locale, by the selected Stage language in the Strings panel, or by settings supplied through ActionScript.
 
This section will guide you through the basics of using the Strings panel with a short example.
 
 
Getting started
The following sections outline the main points of the Strings panel workflow. To demonstrate the process, you'll create a "hello world" example in a FLA file with a TLF text field on the Stage. You'll use the Strings panel to assign text to the text field in two different languages and then switch the Stage language back and forth.
 
Follow these steps to setup your FLA file:
 
  1. Open Flash Professional CS5 and create a new ActionScript 3.0 FLA file (File > New > ActionScript 3.0).
  2. Select the Text tool in the Toolbar and make sure the Properties panel is set to the TLF Text type. If not, use the menu to switch from Classic Text to TLF Text.
  3. Click-drag in the upper left corner of the Stage toward the lower right corner of the Stage to draw a text area.
  4. While the text field is selected, click the Embed button in the Properties panel. The Font Embedding panel appears.
  5. Start by naming the font. I usually use the name of the font I'm embedding plus the suffix "Font" (for example, enter ArialFont when embedding Arial).
  6. Choose the font and font style, and a font range that suites your language (for example, Basic Latin for English).
  7. Click OK to close the panel. Notice that a Font symbol was added to the Library panel. If needed, you can return to the Font Embedding panel by double-clicking the Font symbol.
  8. Save the file as sample1.fla to a folder on your desktop.
That's it for the setup. At this point, the TLF text field ready to be manipulated by the Strings panel.
 
 
Setting the default language
Using the Strings panel is easy to do. The first step is to setup a default language. You can do this using the Strings panel Settings dialog box (see Figure 8).
 
Select the default runtime language in the Settings dialog box of the Strings panel; In this example, choose en (English).
Figure 8. Select the default runtime language in the Settings dialog box of the Strings panel; In this example, choose en (English).
Defining the default runtime language is a necessary step because it defines the language displayed in place of unavailable languages. For example, if you choose the option to replace strings automatically at runtime, Flash Player will attempt to load the locale of the user's computer if it's available in the Active languages list. If the locale is unavailable, the default language is displayed.
 
Follow these steps to open the Strings panel and set the default language:
 
  1. Open the Strings panel (Window > Other Panels > Strings).
  2. Click the Settings button to launch the Settings dialog box.
  3. Select the default language in the Languages list. Click the Add >> button to add it to the Active languages list. If you don't see the desired language in the Languages list on the left, enter the two locale descriptions in the Custom language field.
  4. Use the Default runtime language menu to select the language. You can use the URL field to specify the runtime location of the default language XML file (in XLIFF format).
  5. Click OK to close the panel. Notice that default language was added to the language table in the Strings panel.
Once you've defined your default language you can proceed to the next step, which involves entering strings to start the localization process.
 
 
Assigning strings to text fields
Use the Apply button in the Strings panel user interface to assign a string ID to a text field. Doing so binds the text field to the Strings panel, enabling the text field to update with the desired language whenever localization settings change.
 
Follow these steps to add a string to the TLF text field:
 
  1. Select the text field on the Stage.
  2. Return to the Strings panel.
  3. Enter a value in the ID field (for example, 001).
  4. Enter a value in the String field (for example, Hello World!).
  5. Click the Apply button. Notice that the text and ID are added the language table (see Figure 9) and the text appears in the text field on the Stage.
Enter the ID and string (the English localization) for the selected text field.
Figure 9. Enter the ID and string (the English localization) for the selected text field.
It's a common practice to enter the strings for one language and then send the resulting Strings panel XML file to a translator for localization into other languages. After it is translated, the localized XML file is imported into the Strings panel.
 
 
Adding languages
There are two ways to add languages to the default language: using the language table in the Strings panel to enter content manually, or by importing a localized XML (XLIFF) file into the Strings panel.
 
Follow these steps to add a language:
 
  1. Return to the Strings panel and click the Settings button.
  2. Select the new language from the Languages list and click the Add >> button to add the language to the Active languages list. Repeat this step for each language you want to add.
  3. Click OK when you're finished. Notice that the languages now appear in the language table.
    Note: If you want to import an XML file that has been localized by a translator, you can do so at this point. Click the Import XML button in the Strings panel, choose the locale from the list you created in the Settings dialog box, and then browse to select the new file.
     
  4. To finish out the sample file, double-click the es field in the IDS_001 row and enter the Spanish translation for the string: Hola a todos! (see Figure 10).
Enter the Spanish localization for the text field in the es field.
Figure 10. Enter the Spanish localization for the text field in the es field.
 
Switching the Stage language
The Stage language is a reference to whichever language is currently being displayed in the text fields on the Stage. You can switch the Stage language using the Stage language menu at the top of the Strings panel.
 
Follow these steps to switch the Stage language:
 
  1. Return to the Strings panel and select the Stage language menu.
  2. Choose the es (Spanish) option from the menu (see Figure 11). Notice that the text field on the Stage updates to display the Spanish localization for the text.
Switch the Stage language from English to Spanish while authoring.
Figure 11. Switch the Stage language from English to Spanish while authoring.
 
Setting the language for runtime
The Strings panel allows you to set the runtime language in one of three ways:
 
  • Automatically based on the computer's locale configuration
  • Manually based on the Stage language setting in the Strings panel
  • Dynamically using ActionScript at runtime
Basic localization scenarios simply call for choosing the right language to display at startup. More complex scenarios will require ActionScript code to switch languages during runtime or perform other tasks, such as text formatting.
 
Follow these steps to choose the replace strings option:
 
  1. Return to the Strings panel and click the Settings button.
  2. In the Settings dialog box, choose one of the desired Replace strings options:
    1. Automatically at runtime
    2. Manually using Stage language
    3. Via ActionScript at runtime
In most cases, you'll leave the Replace strings setting on the default option (automatically at runtime) unless you explicitly want to set the language through the Strings panel or ActionScript.
 
Tip: It's considered a best practice to allow the user to change the language in addition to choosing the initial language from the computer's locale. In this scenario, you would use option c (via ActionScript at runtime) to allow the user to choose the language from a menu or UI control.
 
 
Where to find the XML files
The Strings panel automatically generates an XML file for each language and saves the files when the FLA file is saved. Each XML file is saved using a naming convention including the FLA file's name and the name of the locale for the language. The XML file is stored in a folder also sharing the same name as the locale. The locale folders are saved next to your FLA file.
 
For more information on using the Strings panel, see Creating Multilanguage text in the online Flash documentation.
 
Now that you've seen a complete overview of the Strings panel, check out the next section to see how ActionScript can be used to create custom features.
 

 
Working with ActionScript for custom functionality

Localization needs can be simple or complex. You may find yourself needing more control over the localization features in your application. For example, if you're building linguistics training applications, it's likely your projects require handling multiple languages at any given time and possibly multiple font libraries at any given time.
 
The ActionScript 3 language provides low-level access to most of the features in Flash Player. In regards to localization, you can work with the Locale class to manipulate Strings panel content at runtime, work with the globalization classes to format text values such as dates and currency, and work with the TextField and TLFTextField classes to format text fields on the fly. In addition, you can leverage the range of ActionScript APIs available for manipulating XML, CSS, and font formatting.
 
This section provides an introduction to more advanced topics related to customized localization features.
 
 
Getting started
This sample builds on the previous sample by adding the ability for the user to switch the language at runtime. You'll also experiment with updating text field attributes on the fly.
 
Follow these steps to set up your FLA file:
 
  1. Return to the sample1.fla file and choose File > Save As to save the file as sample2.fla.
  2. Reduce the size of the TLF text field and position it so that you can place a menu component above it on the Stage.
  3. Open the Components panel (Window > Components) and drag a ComboBox component to the Stage from the User Interface folder. Position the component above the text field.
  4. While the ComboBox is still selected, enter the instance name locales_cb in the field in the Properties panel.
  5. Select the TLF text field instance and name it field_001 in the Properties panel.
  6. Open the Strings panel and click the Settings button to open the Settings dialog box. Change the Replace string option to via ActionScript at runtime. Click OK to close the dialog box.
  7. Save the file.
You just accomplished two main things: first, you named the instances of the objects on the Stage to control them with ActionScript, and then you configured the Strings panel to defer control to ActionScript. At this point, your FLA file is ready to add the custom code.
 
 
Using ActionScript with Strings panel content
There are several advantages to using ActionScript in addition to the Strings panel:
 
  • You can allow the user to switch languages based on their preference, rather than the computer's locale
  • You can view multiple localizations for a string ID at the same time
  • You can apply locale specific formatting to text fields as the language changes
In this series of steps you'll expand the example by allowing the user to control the Stage language at runtime using the ComboBox interface.
 
  1. Rename Layer 1 to assets.
  2. Add a new layer above the assets layer and name it actions. It's a best practice to create a layer named "actions" when you place ActionScript code on a Flash timeline.
  3. Select the keyframe in Frame 1 of the actions layer and open the Actions panel (F9). Copy and paste the following code into the Script window of the Actions panel:
//------------------ // SETUP LOCALE OBJECT: var languages:Object = new Object(); // Flag loaded languages var localeDefault:String = "en"; // Default language var locale:String = "en"; // Current language selected // Event handler for Locale object function localeLoadedHandler(success:Boolean):void { if( success ) { // Mark language as loaded and show localized string languages[locale] = true; field_001.text = Locale.loadStringEx("IDS_001", locale); } } // Load the default language... Locale.setDefaultLang(localeDefault); Locale.setLoadCallback(localeLoadedHandler); Locale.loadLanguageXML(Locale.getDefaultLang());
  1. Take a moment to examine the code. The Locale object is used to set the default language and load the related XML file. When the language XML files load, the string id "001" text is loaded into the text field on the Stage.
  2. Set up the data source for the ComboBox control to change the language when the ComboBox selection changes. Copy and paste the following code at the bottom of the script:
//------------------ // SETUP COMBOBOX: // Event handler for combobox changes function langListener(event:Event):void { // Set locale from combobox locale = event.target.selectedItem.data; // Load language XML if(!languages[locale]){ Locale.loadLanguageXML(locale); } // Or show text if it's already loaded else{ field_001.text = Locale.loadStringEx("IDS_001", locale); } } // Get list of Locales from Strings panel var locales:Array = Locale.languageCodeArray.sort(); var len:uint = locales.length; var dp:Array = new Array(); // Format combobox labels for(var n:uint=0; n<len; n++) { var lang:String = locales[n]; var descr:Object = new Object(); switch( lang ) { case "en": descr.label = "en (English)"; descr.data = "en"; break; case "es": descr.label = "es (Spanish)"; descr.data = "es"; break; } dp.push(descr); } // Setup combobox locales_cb.addEventListener(Event.CHANGE, langListener); locales_cb.dataProvider = new DataProvider(dp);
  1. Take a moment to examine the new code. The langListener event handler function changes the language displayed whenever the ComboBox selection changes. If the locale's XML file is already loaded, the localized text is displayed. If not, then the Locale object loads the XML and populates the text field when ready. The remaining code retrieves the list of Strings panel locales and formats them for the ComboBox's data provider.
  2. Select Control > Test Movie to view the sample. You should be able to switch the language displayed in the text field by selecting a language in the ComboBox menu. Check your work against the completed sample2.fla in the provided files if you run into problems.
  3. Save the file when you're finished.
For more information on the Locale class, see the section on fl.lang.Locale in the ActionScript 3.0 Reference for the Adobe Flash Platform.
 
Check out sample2_dynamic.fla in the provided sample files for an expanded version of the file you just built. The sample2_dynamic.fla generates the TLF text field dynamically at runtime and adds formatting changes to the text field each time a language is selected. The sample adds the Arabic language to demonstrate switching between standard Latin text and bi-directional text.
 
 
Using external font libraries
Publishing your embedded fonts to different SWF files can be a good way to control file size and font caching across projects. Using an external SWF as a font library is a two-step process; first, you create the SWF containing the fonts, and then you load the SWF into the movie containing the text fields.
 
You can load the font SWF using the Loader class in ActionScript or by using the runtime shared library features available in the ActionScript tab for each Font symbol. The following example illustrates the process of using the Loader class.
 
Follow these steps to create font library SWF file:
 
  1. Create a new ActionScript 3.0 FLA file in Flash Professional CS5.
  2. Save the file next to your other FLA files with the name SampleFontPack.fla.
  3. Choose Text > Font Embedding to launch the Font Embedding panel.
  4. Click the Add new font button (plus icon) to add a new font to the Font list.
  5. Enter the following properties for the font:
    1. Name: SansFont
    2. Family: Arial (or Helvetica)
    3. Style: Regular
    4. Character ranges: Basic Latin
  6. Click the ActionScript tab and select the Export for ActionScript option. This step instructs the FLA to compile the font into the SWF file and make it available to ActionScript via the name in the Class field.
  7. Double-check that the TLF (DF4) Outline Format option is selected, and then press OK to create the Font symbol. Notice that the Font symbol appears in the Library.
  8. Select File > Publish to publish the SWF file.
The SampleFontPack.swf file can now be used as an external font library. The process is very simple; load the font SWF using the Loader object, and then configure a text field to use the embedded font. This process is easy because the Font symbol becomes available in the embedded font list for Flash Player as soon as it loads.
 
Follow these steps to create a text field that uses an external font library:
 
  1. Create a new ActionScript 3.0 FLA file in Flash Professional CS5.
  2. Save the file next to your other FLA files, and name it sample3.fla.
  3. Rename Layer 1 to actions. Select Frame 1 of the actions layer and open the Actions panel (F9).
  4. Copy and paste the following code in the Script window of the Actions panel:
import fl.text.TLFTextField; import flash.events.Event; import flash.display.Loader; import flash.net.URLRequest; import flash.text.Font; import flashx.textLayout.elements.*; import flashx.textLayout.formats.*; //------------------ // LOAD FONT LIBRARY function onFontsLoaded(event:Event):void { // Check embedded fonts... trace(Font.enumerateFonts(false)); // Create text field var field_001:TLFTextField = new TLFTextField(); addChild(field_001); field_001.autoSize = TextFieldAutoSize.LEFT; field_001.text = "This is my text"; field_001.embedFonts = true; // Create text format var format:TextLayoutFormat = new TextLayoutFormat(); format.fontFamily = Font.enumerateFonts(false)[0].fontName;//"Arial"; format.fontSize = 36; format.color = 0x333333; // Apply format var textFlow:TextFlow = field_001.textFlow; textFlow.hostFormat = format; // Position text (after formatting) field_001.x = (stage.stageWidth - field_001.width)/2; field_001.y = (stage.stageHeight - field_001.height)/2; } var loader:Loader = new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onFontsLoaded); loader.load(new URLRequest("SampleFontPack.swf"));
  1. Take a moment to review the code. There are two things happening here. At the bottom of the script, notice that a Loader object is instantiated and then loads the font SWF. When the SWF has loaded, the onFontsLoaded event handler creates a text field and formats it in the correct timing.
  2. Select Control > Test Movie to view the sample. You should see the text appear in the center of the Stage rendered using the embedded font. Check your work against the sample3.fla in the provided sample files if you run into problems.
  3. Save the file.
When using external font files, it is common practice to use a FlashVars parameter to determine which SWF to load. You could also add code to check the default language in the Locale object or use the Capabilities.language property.
 
 
Using the globalization classes to format text values
The flash.globalization classes are a collection of utilities designed to help you format number and string data in the cultural conventions of a given locale. The globalization package leverages the cultural support capabilities of the user's operating system to render formatting for numbers, dates, currency, and more.
 
The globalization package contains the following classes:
 
  • NumberFormatter: represents generic numeric values
  • CurrencyFormatter: represents monetary values
  • DateTimeFormatter: represents calendar values
  • Collator: compares words or sentences (typically used to sort them)
  • StringTools: provides text transformation services, such as capitalization
  • LocaleID: provides utility methods for parsing and processing strings containing a locale identifier
In many cases, your Strings panel content will already contain the cultural conventions expected for any given string. However, you may also need to format general data supplied from a database. Dates and retail prices are examples of data that might be generalized apart from other localization efforts. Check out Hervé Amblar's article, The flash.globalization package in Flash Player: Cultural diversity without complexity, for a detailed overview.
 
Note: The globalization classes are supported in Flash Player 10.1 and later.
 
For more information on the globalization classes, see flash.globalization in the ActionScript 3.0 Reference for the Adobe Flash Platform.
 

 
Where to go from here

Hopefully this information has given you a better understanding of the localization features available in Flash Professional CS5. The next step involves determining your project's specific requirements and the best strategy to leverage the available options.
 
To learn more about the Text Layout Framework, spend some time exploring its core, the Flash Text Engine. Check out the following resources for more information:
 
Also be sure to check out the Text Layout Framework Team's blog page for the latest developments with the TLF.