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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro To Flex Typography 360|Flex

3,019

Published 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.

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,019
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
34
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

×