Intro To Flex Typography 360|Flex

  • 2,938 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,938
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
32
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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.
    • Vasty improved OpenType font support for embedded and device fonts
    • Real Kerning
    Text in Flash player 10
  • 8. Kerning Flash 9, TextBox Flash 10, FTE
  • 9.
    • Vasty improved OpenType font support for embedded and device fonts
    • Real Kerning
    • Improved antialiasing and pixel snapping with CFF
    Text in Flash player 10
  • 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.
    • Vasty improved OpenType font support for embedded and device fonts
    • Real Kerning
    • Improved antialiasing and pixel snapping with CFF
    • Baseline snapping
    Text in Flash player 10
  • 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.
    • 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
    Text in Flash player 10
  • 14. Digit case and width 1234567890 4958372639 9384750128 0987654321 1234567890 4958372639 9384750128 0987654321 Old Style, Proportional Lining, Tabular
  • 15.
    • 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
    Text in Flash player 10
  • 16. Ligatures AE ae fr
  • 17.
    • 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
    Text in Flash player 10
  • 18. Great! So, how do we use it? 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 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. FTE - Usage FontDescription ElementFormat TextElement GraphicElement GroupElement TextBlock Stage Sprite TextLine TextLine TextLine GraphicElement TextElement createTextLine() createTextLine() createTextLine() GroupElement
  • 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
      • base element for TLF text.
    • DivElement
      • groups paragraphs for style inheritance.
    • ParagraphElement
      • groups elements together into a single block.
    • SpanElement
      • defines a run of text for styling.
    • InlineGraphicElement
      • display object (image, Sprite, UIComponet, etc)
    • LinkElement
      • display object (image, Sprite,
    • 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 IContainerController (Takes a Sprite & fills it with TextLines) IContainerController (Takes a Sprite & fills it with TextLines) Sprite TextLine TextLine Sprite TextLine TextLine
  • 30. Flow composer Demo Using FlowCompser to display multi-column text text column text column text column text column text column text 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. Demo Using Interaction Managers with a TextFlow Interacting with TextFlows
  • 33. Thanks for attending!
  • 34. More Information
    • Adobe TLF Blog http://blogs.adobe.com/tlf
    • TLF Text Editor Demo http://labs.adobe.com/tech nologies/textlayout/demos
    • Official OpenSource Adobe TLF Site http://opensource.adobe.com/wiki/display/tlf
    Matt Guest mattguest.com [email_address] @mguest