My presentation on the Flash Text Engine and Text Layout Framework from 360|Flex San Jose March 8, 2010.

1. Intro to Flex Typography
Matt Guest
360|Flex San Jose
March 8, 2010

2. About me
Matt Guest
Lead Flex developer for Nxtbook Media, Lancaster PA
• Programming and working in the web for around 12 years
• Flash developer since Flash 3
• Flex developer since Flex 2

3. What we will be covering
New text features built into the Flash 10 player
Flash Text Engine (FTE)
Text Layout Framework (TLF)

4. What we won’t be covering
Eastern, bidi, TCY text
This is an introduction to FTE and FTL. There is always
more to learn

5. Text in previous Flash players
Previous versions of Flash used TextField to render text
Still available in Flash 10 player and used by MX
controls
Very limited use of Font data
Fairly primitive text formatting capabilities
Changing the alpha or rotation of text required
embedded fonts
Difficult to meet designers’ needs, especially in Flex

6. Text in Flash player 10
Vasty improved OpenType font support for embedded
and device fonts

7. Text in Flash player 10
Vasty improved OpenType font support for embedded
and device fonts
Real Kerning

8. Kerning
Flash 9, TextBox Flash 10, FTE

9. Text in Flash player 10
Vasty improved OpenType font support for embedded
and device fonts
Real Kerning
Improved antialiasing and pixel snapping with CFF

10. Compact Font Format
Fonts are converted to CFF when embedded in a swf
using the embedAsCFF option
@font-face {
src:url("/fonts/Baskerville.otf");
fontFamily: BaskervilleCFF;
advancedAntiAliasing: true;
embedAsCFF: true;
}
[Embed(source="/fonts/Baskerville.otf",
fontFamily="FranklinGothicStdBook",
mimeType="application/x-font",
embedAsCFF="true")]

11. Text in Flash player 10
Vasty improved OpenType font support for embedded
and device fonts
Real Kerning
Improved antialiasing and pixel snapping with CFF
Baseline snapping

12. Baselines
Ideographic top Ascent
Ideographic center
Roman
Ideographic bottom
Descent
Dominant baseline
baseline to use as the “y=0” of the text.
Alignment baseline
baseline to snap the dominant baseline to.

13. Text in Flash player 10
Vasty improved OpenType font support for embedded
and device fonts
Real Kerning
Improved antialiasing and pixel snapping with CFF
Baseline snapping
Digit case and width

14. Digit case and width
Old Style, Proportional Lining, Tabular
1234567890 1234567890
4958372639 4958372639
9384750128 9384750128
0987654321 0987654321

15. Text in Flash player 10
Vasty improved OpenType font support for embedded
and device fonts
Real Kerning
Improved antialiasing and pixel snapping with CFF
Baseline snapping
Digit case and width
Ligatures

16. Ligatures
Æ æ fr

17. Text in Flash player 10
Vasty improved OpenType font support for embedded
and device fonts
Real Kerning
Improved antialiasing and pixel snapping with CFF
Baseline snapping
Digit case and width
Ligatures

18. Great!
So, how do we use it?
FTE TLF
Flash Text Engine Text Layout Framework

19. Flash Text Engine (FTE)
Built into Flash player 10
Provides low level text layout and rendering
Meant to be extended with higher level frameworks, like
the Text Layout Framework
Provides low-level access to text metrics used to
position character glyphs
Spark Label component is based on FTE
All classes located in the flash.text.engine package

20. FTE - Important classes
ContentElement
Defines the content to be displayed.
Text, Graphic, or a Group containing a
FontDescription
mix of ContentElements.
TextBlock
Defines font to be used. TextElement Factory class that creates TextLine
objects of a given width using its
Family, weight, posture, etc. Defines text. assigned ContentElement.
GraphicElement
ElementFormat Defines a DisplayObject. TextLine
Defines the text format. The DisplayObject containing the
Color, Font Size, etc. rendered text.
GroupElement
Defines a collection of Text,
Graphic and other Group
elements.

21. FTE - Usage
ElementFormat
TextElement
GraphicElement FontDescription
GroupElement Stage
TextElement
GraphicElement Sprite
GroupElement
createTextLine() TextLine
createTextLine() TextLine
TextBlock createTextLine() TextLine

22. Flash Text Engine (FTE)
Demo
Using the Flash Text Engine

23. Text Layout Framework (TLF)
High level framework for rendering structured,
formatted text
Open source, 100% Actionscript 3
Spark RichText and RichEditableText components
based on TLF
All classes located in the flashx.textlayout package

24. Text Layout Format
Hierarchical data model for storing structured text
Can be defined in MXML or imported from other
formats
Importers provided for XML, FXG, HTML and Plain text
Can be used directly within a RichText or
RichEditableText component to display and edit.

25. Text Layout Format
‣TextFlow ‣SpanElement
base element for TLF text. defines a run of text for styling.
‣DivElement ‣InlineGraphicElement
groups paragraphs for style display object (image, Sprite,
inheritance. UIComponet, etc)
‣ParagraphElement ‣LinkElement
groups elements together display object (image, Sprite,
into a single block.
‣TCYElement
Represents Tate-Chu-Yoko
text run.

26. Text Layout Format
Demo
Using a TextFlow with the RichText component

27. Multicolumn TextFlows
TextFlows support multicolumn text, which RichText
and RichEditable components can display
It’s as simple as setting the columnCount or
columnWidth property
Demo
Multicolumn TextFlow with the RichText component

28. Breaking out of the box
Sometimes a RichText component won’t do and you
need more control over the containers that text is
flowing over
FlowComposer
Uses ContainerController objects to fill Sprites with
TextLines, allowing you much more control over how
the text is displayed

29. Flow composer
TextFlow
IFlowComposer Stage
Sprite
IContainerController
(Takes a Sprite & fills it with TextLines) TextLine TextLine
Sprite
IContainerController
(Takes a Sprite & fills it with TextLines)
TextLine TextLine

30. Flow composer
Demo
Using FlowCompser to display multi-column text
text text text
column column column
text text text
column column column

31. Interacting with TextFlows
Interaction Managers
SelectionManager
EditManager
RichText component does not support Interaction
managers
RichEditableText uses its own managers, depending on
the setting of its selectable and editable properties.

32. Interacting with TextFlows
Demo
Using Interaction Managers with a TextFlow

33. Thanks for attending!

34. More Information
Adobe TLF Blog
http://blogs.adobe.com/tlf
TLF Text Editor Demo
http://labs.adobe.com/technologies/textlayout/demos
Official OpenSource Adobe TLF Site
http://opensource.adobe.com/wiki/display/tlf
Matt Guest
mattguest.com mattguest@gmail.com @mguest