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

Intro To Flex Typography 360|Flex

on

  • 4,118 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,118
Slideshare-icon Views on SlideShare
4,076
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