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

9,224 views

Published on

Overview of Adobe's Text Layout Framework for the Flash Player presentation given at FlashInTO (Toronto's Flash user group).

Published in: Education, Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
9,224
On SlideShare
0
From Embeds
0
Number of Embeds
218
Actions
Shares
0
Downloads
115
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • Overview of Adobe's Text Layout Framework for the Flash Player

    1. Overview of the Text Layout Framework By Mathew Fabb
    2. Who Am I <ul><li>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 </li></ul><ul><li>I recently left Questrade, and start work at DesignAxiom in December </li></ul><ul><li>I’ve been doing a technical edit of Wrox’s Professional Flex 3 </li></ul><ul><ul><li>Authored by: Joseph Balderson (aka JoeFlash), Andrew Trice , Peter Ent , Joe Berkovitz , Tom Sugden , Todd Prekaski , David Hassoun , and Jun Heider . </li></ul></ul>
    3. Text Layout Framework <ul><li>Flash got a new way to display text with version 10 called Flash Text Engine (FTE) </li></ul><ul><li>FTE was created by the InDesign team </li></ul><ul><li>API for FTE is very low-level </li></ul><ul><li>This means a high level API is needed to make it easy for most developers and designers to use </li></ul><ul><li>The Text Layout Framework (TLF) is Adobe’s take on this high level API </li></ul><ul><li>Because FTE is low-level any 3 rd party company, organization or developer can come up with their own framework or set of components for FTE </li></ul><ul><li>Low-level API, high level API done in ActionScript seems to be the future direction of the Flash Player </li></ul>
    4. Text Layout Framework <ul><li>So what does the TLF give us? </li></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>Text with inline graphics (images, SWFs or any DisplayObject) </li></ul></ul><ul><ul><li>Multiple columns of text with text flow and text selection through these columns </li></ul></ul><ul><ul><li>“ Print-quality typography for the web” meaning kerning, ligatures, typographic case, digit case, digit width and discretionary hyphens </li></ul></ul>
    5. Text Layout Framework <ul><li>Enough talk! Demo time! </li></ul><ul><li>Links: </li></ul><ul><ul><li>Pagination example </li></ul></ul><ul><ul><li>Highlight adornment example </li></ul></ul><ul><ul><li>Spell check adornment example </li></ul></ul><ul><ul><li>Editability example (demonstrating the TLF undo manager) </li></ul></ul><ul><li>Note: These the source for these examples are available with the TLF downloads on Adobe Labs </li></ul>
    6. Text Layout Framework <ul><li>TLF can be used in both Flash CS4 and the Flex Framework (version 3.2 and the upcoming Flex 4 “Gumbo”) </li></ul><ul><li>For Flash CS4 there is a new component called TextLayout that uses the TLF </li></ul><ul><li>For Flex 4 the FxTextArea component is built off of the TLF </li></ul><ul><li>Outside of these components, the TLF can be accessed in ActionScript code in Flex 3.2, Flex 4 and Flash CS4 </li></ul>
    7.  
    8. Text Layout Framework <ul><li>Flash CS4 Text Layout panel </li></ul>
    9. Text Layout Framework
    10. Text Layout Framework <ul><li>TLF consists of 3 SWC files: </li></ul><ul><ul><li>textLayout_core.swc </li></ul></ul><ul><ul><ul><li>Handles storage of text, the creation of text containers, and the display of text </li></ul></ul></ul><ul><ul><ul><li>Contains the majority of the framework code and TLF cannot be used without this component </li></ul></ul></ul><ul><ul><li>textLayout_conversion.swc </li></ul></ul><ul><ul><ul><li>Used to import and export text from the TLF </li></ul></ul></ul><ul><ul><ul><li>Not needed if the text is compiled directly into the SWF </li></ul></ul></ul><ul><ul><li>textLayout_edit.swc </li></ul></ul><ul><ul><ul><li>Used to make text selectable, editable and contains the undo manager code </li></ul></ul></ul>
    11. Text Layout Framework <ul><li>FTE classes can be found in the flash.text.engine.* namespace </li></ul><ul><ul><li>The old Flash text classes are found one level up in the flash.text.* namespace </li></ul></ul><ul><li>TLF classes can currently be found in the flashx.* namespace </li></ul><ul><li>TLF is based on the MVC pattern </li></ul>
    12. Text Layout Framework <ul><li>TLF markup </li></ul><ul><li><TextFlow xmlns=&quot;http://ns.adobe.com/textLayout/2008&quot; fontSize=&quot;14&quot;> <div><p>This is an example of Text Layout Framework Markup.</p> <p color=&quot;#0000ff&quot;> <span font Style='italic'>This is the first span of the second paragraph.</span> <span color=&quot;#ff0000&quot;>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>; </li></ul>
    13. Text Layout Framework
    14. Text Layout Framework <ul><li>TLF’s Text Flow Hierarchy </li></ul>
    15. Text Layout Framework <ul><li>Links </li></ul><ul><ul><li>Text Layout Framework on Adobe Labs </li></ul></ul><ul><ul><li>Text Layout Framework Team blog </li></ul></ul>

    ×