Flash Article

Formatting text for localized Flash projects using CSS, HTML, and ActionScript

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 could be 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.

Text in localized applications

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.

Here are the common characteristics of a localized Flash application:

• All text and text formatting is externalized
• Text content is supplied through an external XML data source
• Text formatting is supplied through CSS files and HTML markup 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 CSS file
• Fonts may be embedded and managed for special needs

These are the range of topics addressed in this article. Take a moment to review the sample files included with this article to see an implementation of these characteristics.

Using the Strings panel in Flash

Before diving into more detailed topics, it's a good idea to first take a look at the Flash author-time solution to text localization: the Strings panel—a visual interface that allows you to manage multiple languages for any given string (text) in the Flash environment. The gist is that each string is assigned an ID which can have multiple translations associated with it for different languages. The string ID is associated with a text field so the language can be switched manually at author time, automatically at runtime, or dynamically at runtime using ActionScript (see Figure 1).

Figure 1. Main interface of the Strings panel as a localized text string is entered

To get started using the Strings panel, follow these steps:

1. Create a new FLA file and add a dynamic text field to the Stage.
2. Open the Strings panel (Window > Other Panels > Strings).
3. Click the Settings button to open the Settings dialog box. Choose the desired languages and Replace Strings options (see Figure 2). Click OK when finished.
4. Type some text into the text field on the Stage and leave it selected. You should see the text appear in the Strings panel's String field simultaneously.
5. Type an ID for the string into the ID field of the Strings panel and click Apply. You should see the ID and text added to the strings list.
6. Experiment with entering text for the different language fields. Also, change the Stage Language settings to swap out the languages.

Figure 2. Settings dialog box with English, Greek, and Chinese Simplified defined as the configured languages

Tip: If you're interested in the easiest localization solution, your best bet may be to not embed fonts, choose a generic setting for text formatting, and use the Strings panel to manage languages associated with each text field in your application.

For more information on using the Strings panel, please see the following Flash CS3 Help pages section (or Flash LiveDocs): Using Flash > Creating multilanguage text > Authoring multilanguage text > Add strings to the Strings panel.

Customized approaches to localization

The Strings panel is a great option for working with most localization needs. However, its design is based around an author-time interface feature, which makes it limited for more complex localization needs. For example, in the online tutor project I worked on, I needed to be able to dynamically change languages, font formatting, and font embedding of each text field on the fly. Since I didn't know what the formatting and languages were at the time of authoring, I had to devise a way to allow the server to have complete control over the text fields.

The solution is to work with ActionScript 3.0 and CSS/HTML formatting to create a runtime-based localization routine. By externalizing the font formatting to CSS, the server can easily supply formatting references along with the localized data source. Whenever there's a server call, the application formatting can change.

The remainder of this article discusses the details involved with working with this type of solution.

Page 2 of 5

Previous Page

Next Page