Intro To Flex Typography 360|Flex
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Intro To Flex Typography 360|Flex

on

  • 4,323 views

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.

Statistics

Views

Total Views
4,323
Views on SlideShare
4,281
Embed Views
42

Actions

Likes
0
Downloads
32
Comments
0

2 Embeds 42

http://www.slideshare.net 41
http://www.docshut.com 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Intro To Flex Typography 360|Flex Presentation 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