Flash Text Layout Framework - Getting Started
I finally got some time to play with Flash 10 and the new text functionality including the Text Layout Framework Beta
It gives very powerful control of the text layout but with this power come a few gotcha's which can trip you up.
The basic process for using the TextFlow for advanced text rendering is as follows:
- Create a sprite container to hold the text
- Import the text into a TextFlow object
- Attach the container to the textflow object
- Call updateAllContainers() on the textflow object
- We also need to add event handlers for resize and graphics loading if we are using these features.
Create a sprite
this.textArea.rawChildren.addChild(_container);
this.textArea.addEventListener(ResizeEvent.RESIZE,resizeEvent);
Import the text into a TextFlow object
var markup:XML = <TextFlow fontSize="30" fontFamily="Arial" whiteSpaceCollapse="preserve">
<p fontSize="50" textAlign="center">Text Layout Framework Demo</p>
<p>Text is now easy to control in Flash</p>
<p><span>It can be formatted easily to do</span><span fontWeight="bold" whiteSpaceCollapse="preserve"> Bold</span><span>, </span><span fontStyle="italic">Italic</span><span>, </span><span textDecoration="underline">Underline</span><span> and </span><span lineThrough="true"> Strikethrough</span></p>
<p>It can also finally do <span fontSize="20" alignmentBaseline="ideographicTop">Superscript</span> and <span fontSize="20" alignmentBaseline="ideographicBottom">Subscript</span></p>
<p><a href='http://www.learnosity.com/techblog/'>Links</a> and inline images <img align="right" source="http://www.adobe.com/shockwave/download/images/flashplayer_100x100.jpg" /> are also available</p>
</TextFlow>;
_textFlow = TextFilter.importToFlow(markup,TextFilter.TEXT_LAYOUT_FORMAT);
This loads the XML and stores it in the _textFlow object.
Note: the XML.ignoreWhitespace is important otherwise it all the whitespace between tags will get stripped out and any formatted text will lose it's spacing.
Attach the container to the textflow object
Call updateAllContainers() on the textflow object
That's it.
For bonus points you can add the event handlers to handle graphics loading and resize etc.
_textFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGED,graphicStatusChangeEvent);
{
// the graphic has loaded (or failed to load) update the display _textFlow.flowComposer.updateAllContainers();
}
public function resizeEvent(evt:Event):void
{
//Resize event - recreate the flowcompser with the correct width and height _textFlow.flowComposer.removeAllControllers();
_textFlow.flowComposer.addController(new DisplayObjectContainerController(_container,textArea.width,textArea.height));
_textFlow.flowComposer.updateAllContainers();
}
Make it selectable
To make the text selectable we just need to add an interaction manager. As easy as this:_textFlow.interactionManager = new SelectionManager();
I'm looking forward to implementing the rest of this in our projects that use flash text. It's so much simpler and cleaner.
Cheers, Mark
