Overview of Adobe's Text Layout Framework for the Flash Player

Overview of theText Layout Framework

By Mathew Fabb

Who Am I

I’m a Flash/Flex developer that has been doing Flash work from the tail-end of Flash 4 and the beginning of Flash 5

I recently left Questrade, and start work at DesignAxiom in December

I’ve been doing a technical edit of Wrox’s Professional Flex 3 Authored by: Joseph Balderson (aka

JoeFlash), Andrew Trice, Peter Ent,Joe Berkovitz, Tom Sugden,Todd Prekaski, David Hassoun, andJun Heider.

Text Layout Framework

Flash got a new way to display text with version 10 called Flash Text Engine (FTE)

FTE was created by the InDesign team API for FTE is very low-level This means a high level API is needed to make it

easy for most developers and designers to use The Text Layout Framework (TLF) is Adobe’s take on

this high level API Because FTE is low-level any 3rd party company,

organization or developer can come up with their own framework or set of components for FTE

Low-level API, high level API done in ActionScript seems to be the future direction of the Flash Player


So what does the TLF give us? Bidirectional text, vertical text and over 30

writing systems including Arabic, Hebrew, Chinese, Japanese, Korean, Thai, Lao, the major writing systems of India, Tate-Chu-Yoko (horizontal within vertical text) and more.

Text with inline graphics (images, SWFs or any DisplayObject)

Multiple columns of text with text flow and text selection through these columns

“Print-quality typography for the web” meaning kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens


Enough talk! Demo time! Links:

Pagination example Highlight adornment example Spell check adornment example Editability example (demonstrating the

TLF undo manager) Note: These the source for these

examples are available with the TLF downloads on Adobe Labs


TLF can be used in both Flash CS4 and the Flex Framework (version 3.2 and the upcoming Flex 4 “Gumbo”)

For Flash CS4 there is a new component called TextLayout that uses the TLF

For Flex 4 the FxTextArea component is built off of the TLF

Outside of these components, the TLF can be accessed in ActionScript code in Flex 3.2, Flex 4 and Flash CS4


Flash CS4 Text Layout panel



TLF consists of 3 SWC files: textLayout_core.swc

Handles storage of text, the creation of text containers, and the display of text

Contains the majority of the framework code and TLF cannot be used without this component

textLayout_conversion.swc Used to import and export text from the TLF Not needed if the text is compiled directly into the

SWF textLayout_edit.swc

Used to make text selectable, editable and contains the undo manager code


FTE classes can be found in the flash.text.engine.* namespace The old Flash text classes are found one

level up in the flash.text.* namespace

TLF classes can currently be found in the flashx.* namespace

TLF is based on the MVC pattern


TLF markup <TextFlow xmlns="http://ns.adobe.com/textLayout/2008" fontSize="14">

<div><p>This is an example of Text Layout Framework Markup.</p> <p color="#0000ff">

<span font Style='italic'>This is the first span of the second paragraph.</span>

<span color="#ff0000">This is the second span of the second paragraph.</span>

</p></div><div><p>This is the second div in the markup example.</p></div>

</TextFlow>;



TLF’s Text Flow Hierarchy


Links Text Layout Framework on Adobe

Labs Text Layout Framework Team blog

Education

Overview of Adobe's Text Layout Framework for the Flash Player