Advanced Techniques for Text Localization in Flash CS3

hihatcloverΛογισμικό & κατασκευή λογ/κού

4 Ιουλ 2012 (πριν από 4 χρόνια και 11 μήνες)

248 εμφανίσεις

WWW.eLearningGuild.com
205
Advanced Techniques
for Text Localization
in Flash CS3

Dan Carr
President, Dan Carr Design






WWW.eLearningGuild.com
Session 304 – Flash for Desktop Deployment, ActionScript 3.0, & Adobe AIR – Dan
Carr, Dan Carr Design
Advanced Techniques for Text Localization in Flash CS3
Tuesday, November 6, 2007, 1:30pm
Session 205

Presented by Dan Carr
Overview
Text localization is the process of splitting text content from an application and supplying
it from an external source. This allows you to supply different text for different languages
without having to change the application. In general, the process consists of dynamically
importing text content at runtime and then formatting it appropriately based on which
language is displayed.

This session will explore advanced techniques for handling text localization.

Session topics:

• Introduction
• The basics of text localization in Flash
• Using XML as a data source
• Using CSS and HTML as formatting tools
• Demo: Setting up a prototype application

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

http://www.adobe.com/devnet/flash/articles/text_localization.html

More information and examples can be downloaded from my Adobe article. In addition,
these handouts provide a quick reference containing useful information not available in
the article.

Working with XML to import text

The basics of XML are discussed in the article and during the course of the session, but
one key point to emphasize is the use of CDATA tags. CDATA tags mark sections of
content in the XML string as a literal series of characters. That is, characters such as <
and > are not intended to represent parts of the XML. Instead they are part of the data
source. You must use a CDATA tag when you want to include HTML markup in your
HTML text nodes.
The following example shows an XML node using HTML markup within a CDATA tag.
<description><![CDATA[<b>bold text</b>]]></description>
Session 304 – Flash for Desktop Deployment, ActionScript 3.0, & Adobe AIR – Dan
Carr, Dan Carr Design
Working with HTML markup
Flash supports a subset of HTML tags for text formatting. HTML tags can be an easy
way for you to format your text by adding tags directly to the data source. You can
accomplish a handful of customizations including formatting the text style, adding
images in the text, and adding clickable links.
Tag Description
Anchor tag
The
<a>
tag creates a hypertext link and supports the following attributes:
• href
:
• event
:
• target
:
Bold tag
The
<b>
tag renders text as bold.
Break tag
The
<br>
tag creates a line break in the text field.
Font tag
The
<font>
tag specifies a font or list of fonts to display the text.

The font tag supports the following attributes:
• color
:
• face
:
• size
:
Image tag
The
<img>
tag lets you embed external image files (JPEG, GIF, PNG),
SWF files, and movie clips inside text fields.
The
<img>
tag supports the following attributes:
• src
:
• width
:
• height
:
• align
:
• hspace
:
• vspace
:
• id
:
• checkPolicyFile
:
Italic tag
The
<i>
tag displays the tagged text in italics.
List item tag
The
<li>
tag places a bullet in front of the text that it encloses.
Paragraph
tag
The
<p>
tag creates a new paragraph. You must set the text field to be a
multiline text field to use this tag.

Session 304 – Flash for Desktop Deployment, ActionScript 3.0, & Adobe AIR – Dan
Carr, Dan Carr Design
The
<p>
tag supports the following attributes:

align:

class:
Span tag
The
<span>
tag is available only for use with CSS text styles.
The
<span>
tag supports the following attributes:

class:
Text format
tag
The
<textformat>
tag lets you use a subset of paragraph formatting
properties of the TextFormat class within text fields.
The
<textformat>
tag has the following attributes:
• blockindent
:
• indent
:
• leading
:
• leftmargin
:
• rightmargin
:
• tabstops
:
Underline
tag
The
<u>
tag underlines the tagged text.
The following example shows HTML formatted text applied to a text field in
ActionScript 3.0.
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
// Create a text field
var label:TextField = new TextField();
label.autoSize = TextFieldAutoSize.LEFT;
label.htmlText = "<font size='21'><b><u>Hello</u></b> World...</font>";
// Show field
addChild(label);
Working with CSS (Cascading Style Sheets)
Flash supports a subset of properties in the original CSS1 specification
(www.w3.org/TR/REC-CSS1
) for formatting text fields. The following table shows the
supported Cascading Style Sheet properties and their corresponding ActionScript
property names.
Session 304 – Flash for Desktop Deployment, ActionScript 3.0, & Adobe AIR – Dan
Carr, Dan Carr Design
CSS property
ActionScript
property
Description
color

color

Color of the font. Colors are written in the
following format:
#FF0000
.
display

display

inline
,
block
, and
none
.
font-family

fontFamily

A comma-separated list of fonts to use, in
descending order of desirability.
font-size

fontSize

Size of the font.
font-style

fontStyle

normal
and
italic
.
font-weight

fontWeight

normal
and
bold
.
kerning

kerning

true
and
false
. Kerning is only supported while
using embedded fonts.
leading

leading

The amount of space that is uniformly distributed
between lines.
letter-
spacing

letterSpacing

The amount of space that is uniformly distributed
between characters.
margin-left

marginLeft

Space on left of text.
margin-right

marginRight

Space on right of text.
text-align

textAlign

left
,
center
,
right
, and
justify
.
text-
decoration

textDecoration

none
and
underline
.
text-indent

textIndent

Indent size in paragraphs.

The following example shows a style sheet built in ActionScript 3.0 and applied to a text
field on the stage.

import flash.text.StyleSheet;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;

// Create styles in ActionScript
var heading:Object = {fontWeight:"bold",fontSize:36,color:"#FF00CC"};
var body:Object = {fontStyle:"italic",fontSize:21};

// Assign styles to a StyleSheet
var style:StyleSheet = new StyleSheet();
style.setStyle(".heading", heading); // add style class (note the ‘.’)
style.setStyle("p", body); // redefine the HTML <p> tag

// Create a text field
var label:TextField = new TextField();
label.styleSheet = style;
label.autoSize = TextFieldAutoSize.LEFT;
label.text = "<p><span class='heading'>Hello</span> World...</p>";

// Show field
addChild(label);
Session 304 – Flash for Desktop Deployment, ActionScript 3.0, & Adobe AIR – Dan
Carr, Dan Carr Design
This is a great approach for prototyping and working within Flash, but you may
ultimately want to import external style sheets from the server.

The next example shows the same idea using an external style sheet as a resource.

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.text.StyleSheet;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;

// Create assets
var css_file:String = "Text_sample3.css";
var loader:URLLoader = new URLLoader();
var style:StyleSheet = new StyleSheet();
var label:TextField = new TextField();

// Handle CSS file when it loads
function onCSSFileLoaded(event:Event):void
{
style.parseCSS(loader.data);

label.styleSheet = style;
label.autoSize = TextFieldAutoSize.LEFT;
label.htmlText = "<p><span class='heading'>Hello</span></p>";

// Show field
addChild(label);
}
// Load the CSS file...
loader.addEventListener(Event.COMPLETE, onCSSFileLoaded);
loader.load(new URLRequest(css_file));

Going further
For more detailed information on using XML, CSS, and HTML text formatting, see the
Flash Help pages or the Flash LiveDocs site on Adobe.com.