Intro to Flex Typography <ul><li>Matt Guest </li></ul><ul><li>360|Flex San Jose </li></ul><ul><li>March 8, 2010 </li></ul>
About me <ul><li>Matt Guest </li></ul><ul><li>Lead Flex developer for Nxtbook Media, Lancaster PA </li></ul><ul><ul><ul><l...
What we will be covering <ul><li>New text features built into the Flash 10 player </li></ul><ul><li>Flash Text Engine (FTE...
What we won’t be covering <ul><li>Eastern, bidi, TCY text </li></ul><ul><li>This is an introduction to FTE and FTL. There ...
Text in previous Flash players <ul><li>Previous versions of Flash used TextField to render text </li></ul><ul><li>Still av...
Text in Flash player 10 <ul><li>Vasty improved OpenType font support for embedded and device fonts </li></ul>
<ul><li>Vasty improved OpenType font support for embedded and device fonts  </li></ul><ul><li>Real Kerning </li></ul>Text ...
Kerning Flash 9, TextBox Flash 10, FTE
<ul><li>Vasty improved OpenType font support for embedded and device fonts  </li></ul><ul><li>Real Kerning </li></ul><ul><...
Compact Font Format <ul><li>Fonts are converted to CFF when embedded in a swf using the embedAsCFF option </li></ul>@font-...
<ul><li>Vasty improved OpenType font support for embedded and device fonts  </li></ul><ul><li>Real Kerning </li></ul><ul><...
Baselines Ideographic top Ideographic center Ideographic bottom Ascent Roman Descent Dominant baseline baseline to use as ...
<ul><li>Vasty improved OpenType font support for embedded and device fonts  </li></ul><ul><li>Real Kerning </li></ul><ul><...
Digit case and width 1234567890 4958372639 9384750128 0987654321 1234567890 4958372639 9384750128 0987654321 Old Style, Pr...
<ul><li>Vasty improved OpenType font support for embedded and device fonts  </li></ul><ul><li>Real Kerning </li></ul><ul><...
Ligatures AE ae fr
<ul><li>Vasty improved OpenType font support for embedded and device fonts  </li></ul><ul><li>Real Kerning </li></ul><ul><...
Great! So, how do we use it? So, how do we use it? FTE TLF Flash Text Engine Text Layout Framework
Flash Text Engine (FTE) <ul><li>Built into Flash player 10 </li></ul><ul><li>Provides low level text layout and rendering ...
FTE - Important classes FontDescription Defines font to be used. Family, weight, posture, etc. ElementFormat Defines the t...
FTE - Usage FontDescription ElementFormat TextElement GraphicElement GroupElement TextBlock Stage Sprite TextLine TextLine...
Flash Text Engine (FTE) Demo Using the Flash Text Engine
Text Layout Framework (TLF) <ul><li>High level framework for rendering structured, formatted text </li></ul><ul><li>Open s...
Text Layout Format <ul><li>Hierarchical data model for storing structured text  </li></ul><ul><li>Can be defined in MXML o...
Text Layout Format <ul><li>TextFlow </li></ul><ul><ul><li>base element for TLF text. </li></ul></ul><ul><li>DivElement </l...
Text Layout Format Demo Using a TextFlow with the RichText component
Multicolumn TextFlows <ul><li>TextFlows support multicolumn text, which RichText and RichEditable components can display <...
Breaking out of the box <ul><li>Sometimes a RichText component won’t do and you need more control over the containers that...
Flow composer TextFlow IFlowComposer IContainerController (Takes a Sprite & fills it with TextLines) IContainerController ...
Flow composer Demo Using FlowCompser to display multi-column text text column text column text column text column text col...
Interacting with TextFlows <ul><li>Interaction Managers </li></ul><ul><ul><li>SelectionManager </li></ul></ul><ul><ul><li>...
Demo Using Interaction Managers with a TextFlow Interacting with TextFlows
Thanks for attending!
More Information <ul><li>Adobe TLF Blog http://blogs.adobe.com/tlf </li></ul><ul><li>TLF Text Editor Demo http://labs.adob...
Upcoming SlideShare
Loading in...5
×

Intro To Flex Typography 360|Flex

3,047

Published on

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

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,047
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Intro To Flex Typography 360|Flex"

  1. 1. Intro to Flex Typography <ul><li>Matt Guest </li></ul><ul><li>360|Flex San Jose </li></ul><ul><li>March 8, 2010 </li></ul>
  2. 2. About me <ul><li>Matt Guest </li></ul><ul><li>Lead Flex developer for Nxtbook Media, Lancaster PA </li></ul><ul><ul><ul><li>Programming and working in the web for around 12 years </li></ul></ul></ul><ul><ul><ul><li>Flash developer since Flash 3 </li></ul></ul></ul><ul><ul><ul><li>Flex developer since Flex 2 </li></ul></ul></ul>
  3. 3. What we will be covering <ul><li>New text features built into the Flash 10 player </li></ul><ul><li>Flash Text Engine (FTE) </li></ul><ul><li>Text Layout Framework (TLF) </li></ul>
  4. 4. What we won’t be covering <ul><li>Eastern, bidi, TCY text </li></ul><ul><li>This is an introduction to FTE and FTL. There is always more to learn </li></ul>
  5. 5. Text in previous Flash players <ul><li>Previous versions of Flash used TextField to render text </li></ul><ul><li>Still available in Flash 10 player and used by MX controls </li></ul><ul><li>Very limited use of Font data </li></ul><ul><li>Fairly primitive text formatting capabilities </li></ul><ul><li>Changing the alpha or rotation of text required embedded fonts </li></ul><ul><li>Difficult to meet designers’ needs, especially in Flex </li></ul>
  6. 6. Text in Flash player 10 <ul><li>Vasty improved OpenType font support for embedded and device fonts </li></ul>
  7. 7. <ul><li>Vasty improved OpenType font support for embedded and device fonts </li></ul><ul><li>Real Kerning </li></ul>Text in Flash player 10
  8. 8. Kerning Flash 9, TextBox Flash 10, FTE
  9. 9. <ul><li>Vasty improved OpenType font support for embedded and device fonts </li></ul><ul><li>Real Kerning </li></ul><ul><li>Improved antialiasing and pixel snapping with CFF </li></ul>Text in Flash player 10
  10. 10. Compact Font Format <ul><li>Fonts are converted to CFF when embedded in a swf using the embedAsCFF option </li></ul>@font-face { src:url(&quot; /fonts/Baskerville.otf &quot;); fontFamily: BaskervilleCFF; advancedAntiAliasing: true ; embedAsCFF: true ; } [ Embed (source=&quot; /fonts/Baskerville.otf &quot;, fontFamily=&quot; FranklinGothicStdBook &quot;, mimeType=&quot; application/x-font &quot;, embedAsCFF=&quot; true &quot;)]
  11. 11. <ul><li>Vasty improved OpenType font support for embedded and device fonts </li></ul><ul><li>Real Kerning </li></ul><ul><li>Improved antialiasing and pixel snapping with CFF </li></ul><ul><li>Baseline snapping </li></ul>Text in Flash player 10
  12. 12. Baselines Ideographic top Ideographic center Ideographic bottom Ascent Roman Descent Dominant baseline baseline to use as the “y=0” of the text. Alignment baseline baseline to snap the dominant baseline to.
  13. 13. <ul><li>Vasty improved OpenType font support for embedded and device fonts </li></ul><ul><li>Real Kerning </li></ul><ul><li>Improved antialiasing and pixel snapping with CFF </li></ul><ul><li>Baseline snapping </li></ul><ul><li>Digit case and width </li></ul>Text in Flash player 10
  14. 14. Digit case and width 1234567890 4958372639 9384750128 0987654321 1234567890 4958372639 9384750128 0987654321 Old Style, Proportional Lining, Tabular
  15. 15. <ul><li>Vasty improved OpenType font support for embedded and device fonts </li></ul><ul><li>Real Kerning </li></ul><ul><li>Improved antialiasing and pixel snapping with CFF </li></ul><ul><li>Baseline snapping </li></ul><ul><li>Digit case and width </li></ul><ul><li>Ligatures </li></ul>Text in Flash player 10
  16. 16. Ligatures AE ae fr
  17. 17. <ul><li>Vasty improved OpenType font support for embedded and device fonts </li></ul><ul><li>Real Kerning </li></ul><ul><li>Improved antialiasing and pixel snapping with CFF </li></ul><ul><li>Baseline snapping </li></ul><ul><li>Digit case and width </li></ul><ul><li>Ligatures </li></ul>Text in Flash player 10
  18. 18. Great! So, how do we use it? So, how do we use it? FTE TLF Flash Text Engine Text Layout Framework
  19. 19. Flash Text Engine (FTE) <ul><li>Built into Flash player 10 </li></ul><ul><li>Provides low level text layout and rendering </li></ul><ul><li>Meant to be extended with higher level frameworks, like the Text Layout Framework </li></ul><ul><li>Provides low-level access to text metrics used to position character glyphs </li></ul><ul><li>Spark Label component is based on FTE </li></ul><ul><li>All classes located in the flash.text.engine package </li></ul>
  20. 20. FTE - Important classes FontDescription Defines font to be used. Family, weight, posture, etc. ElementFormat Defines the text format. Color, Font Size, etc. TextBlock Factory class that creates TextLine objects of a given width using its assigned ContentElement. TextLine The DisplayObject containing the rendered text. ContentElement Defines the content to be displayed. Text, Graphic, or a Group containing a mix of ContentElements. TextElement Defines text. GraphicElement Defines a DisplayObject. GroupElement Defines a collection of Text, Graphic and other Group elements.
  21. 21. FTE - Usage FontDescription ElementFormat TextElement GraphicElement GroupElement TextBlock Stage Sprite TextLine TextLine TextLine GraphicElement TextElement createTextLine() createTextLine() createTextLine() GroupElement
  22. 22. Flash Text Engine (FTE) Demo Using the Flash Text Engine
  23. 23. Text Layout Framework (TLF) <ul><li>High level framework for rendering structured, formatted text </li></ul><ul><li>Open source, 100% Actionscript 3 </li></ul><ul><li>Spark RichText and RichEditableText components based on TLF </li></ul><ul><li>All classes located in the flashx.textlayout package </li></ul>
  24. 24. Text Layout Format <ul><li>Hierarchical data model for storing structured text </li></ul><ul><li>Can be defined in MXML or imported from other formats </li></ul><ul><li>Importers provided for XML, FXG, HTML and Plain text </li></ul><ul><li>Can be used directly within a RichText or RichEditableText component to display and edit. </li></ul>
  25. 25. Text Layout Format <ul><li>TextFlow </li></ul><ul><ul><li>base element for TLF text. </li></ul></ul><ul><li>DivElement </li></ul><ul><ul><li>groups paragraphs for style inheritance. </li></ul></ul><ul><li>ParagraphElement </li></ul><ul><ul><li>groups elements together into a single block. </li></ul></ul><ul><li>SpanElement </li></ul><ul><ul><li>defines a run of text for styling. </li></ul></ul><ul><li>InlineGraphicElement </li></ul><ul><ul><li>display object (image, Sprite, UIComponet, etc) </li></ul></ul><ul><li>LinkElement </li></ul><ul><ul><li>display object (image, Sprite, </li></ul></ul><ul><li>TCYElement </li></ul><ul><ul><li>Represents Tate-Chu-Yoko text run. </li></ul></ul>
  26. 26. Text Layout Format Demo Using a TextFlow with the RichText component
  27. 27. Multicolumn TextFlows <ul><li>TextFlows support multicolumn text, which RichText and RichEditable components can display </li></ul><ul><li>It’s as simple as setting the columnCount or columnWidth property </li></ul>Demo Multicolumn TextFlow with the RichText component
  28. 28. Breaking out of the box <ul><li>Sometimes a RichText component won’t do and you need more control over the containers that text is flowing over </li></ul><ul><li>FlowComposer </li></ul><ul><ul><li>Uses ContainerController objects to fill Sprites with TextLines, allowing you much more control over how the text is displayed </li></ul></ul>
  29. 29. Flow composer TextFlow IFlowComposer IContainerController (Takes a Sprite & fills it with TextLines) IContainerController (Takes a Sprite & fills it with TextLines) Sprite TextLine TextLine Sprite TextLine TextLine
  30. 30. Flow composer Demo Using FlowCompser to display multi-column text text column text column text column text column text column text column
  31. 31. Interacting with TextFlows <ul><li>Interaction Managers </li></ul><ul><ul><li>SelectionManager </li></ul></ul><ul><ul><li>EditManager </li></ul></ul><ul><li>RichText component does not support Interaction managers </li></ul><ul><li>RichEditableText uses its own managers, depending on the setting of its selectable and editable properties. </li></ul>
  32. 32. Demo Using Interaction Managers with a TextFlow Interacting with TextFlows
  33. 33. Thanks for attending!
  34. 34. More Information <ul><li>Adobe TLF Blog http://blogs.adobe.com/tlf </li></ul><ul><li>TLF Text Editor Demo http://labs.adobe.com/tech nologies/textlayout/demos </li></ul><ul><li>Official OpenSource Adobe TLF Site http://opensource.adobe.com/wiki/display/tlf </li></ul>Matt Guest mattguest.com [email_address] @mguest
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×