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

Intro To Flex Typography 360|Flex

on

  • 4,192 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,192
Views on SlideShare
4,150
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 Intro To Flex Typography 360|Flex Presentation Transcript

  • Intro to Flex Typography
    • Matt Guest
    • 360|Flex San Jose
    • March 8, 2010
  • 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
  • What we will be covering
    • New text features built into the Flash 10 player
    • Flash Text Engine (FTE)
    • Text Layout Framework (TLF)
  • What we won’t be covering
    • Eastern, bidi, TCY text
    • This is an introduction to FTE and FTL. There is always more to learn
  • 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
  • Text in Flash player 10
    • Vasty improved OpenType font support for embedded and device fonts
    • Vasty improved OpenType font support for embedded and device fonts
    • Real Kerning
    Text in Flash player 10
  • Kerning Flash 9, TextBox Flash 10, FTE
    • Vasty improved OpenType font support for embedded and device fonts
    • Real Kerning
    • Improved antialiasing and pixel snapping with CFF
    Text in Flash player 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 ")]
    • 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
  • 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.
    • 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
  • Digit case and width 1234567890 4958372639 9384750128 0987654321 1234567890 4958372639 9384750128 0987654321 Old Style, Proportional Lining, Tabular
    • 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
  • Ligatures AE ae fr
    • 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
  • 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)
    • 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
  • 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.
  • FTE - Usage FontDescription ElementFormat TextElement GraphicElement GroupElement TextBlock Stage Sprite TextLine TextLine TextLine GraphicElement TextElement createTextLine() createTextLine() createTextLine() GroupElement
  • Flash Text Engine (FTE) Demo Using the Flash Text Engine
  • 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
  • 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.
  • 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.
  • Text Layout Format Demo Using a TextFlow with the RichText component
  • 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
  • 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
  • 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
  • Flow composer Demo Using FlowCompser to display multi-column text text column text column text column text column text column text column
  • 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.
  • Demo Using Interaction Managers with a TextFlow Interacting with TextFlows
  • Thanks for attending!
  • 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