Cameron Yule

Text Layout Framework API update

I’ve recently started working on another multi-lingual Flash project and noticed that Adobe have again changed the API for the Text Layout Framework. While this is to be expected given it’s a beta product and still in development, it can be frustrating having to re-learn what you already know.

With that in mind, here’s examples of both selectable and static text. It’s worth point out these examples are using embedded fonts. I’ve posted an example of using embedded fonts with the text layout framework previously.

These examples were built using TLF build 447, but should also work with build 452 which was released a few days ago. Both those builds are available from Adobe Labs TLF downloads.

Selectable text using TextFlow

var textContainer:Sprite = addChild(new Sprite()) as Sprite;
 
var text:String = '<TextFlow xmlns="http://ns.adobe.com/textLayout/2008">';
text += '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>';
text += '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>';
text += '</TextFlow>';
 
// some basic text formatting
var format:TextLayoutFormat = new TextLayoutFormat();
format.fontFamily = AvenirLight.NAME;
format.fontSize = 18;
format.color = 0x000000;
format.kerning = Kerning.ON;
format.paragraphSpaceAfter = 15;
format.renderingMode = RenderingMode.CFF;
format.fontLookup = FontLookup.EMBEDDED_CFF;
 
var config:Configuration = new Configuration();
config.textFlowInitialFormat = format;     
 
// make the text selectable
var textFlow:TextFlow = TextFilter.importToFlow(text, TextFilter.TEXT_LAYOUT_FORMAT, config);
textFlow.interactionManager = new SelectionManager();  
 
var exampleContainerWidth:uint = 700;
 
textFlow.whiteSpaceCollapse = flashx.textLayout.formats.WhiteSpaceCollapse.PRESERVE;
textFlow.flowComposer.addController(new ContainerController(textContainer, exampleContainerWidth, NaN));
textFlow.flowComposer.updateAllControllers();

Static, non-selectable, text via StringTextLineFactory

var label:String = 'Some static text';
 
var factory:StringTextLineFactory = new StringTextLineFactory();
factory.compositionBounds = new Rectangle(0, 0, NaN, NaN);
 
// basic text formatting
var format:TextLayoutFormat = new TextLayoutFormat();
format.fontFamily = AvenirLight.NAME
format.fontSize = 18;
format.color = 0x000000;
format.renderingMode = RenderingMode.CFF;
format.fontLookup = FontLookup.EMBEDDED_CFF;
 
factory.text = label;
factory.spanFormat = format;
factory.createTextLines(addTextLineToContainer);
 
private function addTextLineToContainer(textline:TextLine):void
{
	addChild(textline);
}

Text Layout Framework memory leak

Shortly before I flew to Abu Dhabi for Cityscape, I found a memory leak in the AIR application I’d been developing for the past few months. As with most memory leaks it only became apparent after several hours of usage, and given the application had to run at least 10 hours a day, was a serious problem.

Thankfully, Flex Builder has a profiler tool built-in, and leaving my application running for hours in the profiler revealed the rapid accumulation of instances of a mystery class TextAccImpl, which it’s package structure revealed was part of the new Text Layout Framework.

This was more problematic than you may imagine, as not only is the TLF still in beta, but was an integral part of my application as it gave us the ability to switch seamlessly between English and Arabic.

After spending time tweaking my code to check if I was using the API incorrectly, it became apparent it was a bug in TLF itself. Googling didn’t find anything, so I resorted to the official TLF blog, where I noticed a post announcing they were releasing weekly builds to their Adobe Labs download page.

As I was compiling against the version of TLF that came with the Flex 4 MAX Preview, I decided to upgrade by adding the latest weekly build (411 at that time) as an external library to my project. After making the necessary changes to my code to reflect the API changes they’d made, I left my application running in the profiler overnight and to my relief the bug had been fixed.

If anyone is experiencing dramatic degradation of performance over time after adding the TLF to your application, I’d recommend you upgrade to the latest weekly build.

Superscript and Subscript in Text Layout Framework

On my last post on using embedded fonts with the Text Layout Framework, Anne Knoche left a comment asking how to mark up input text to use subscript and superscripts.

Here’s a quick example showing exactly that;

Here’s the AS3 I’ve used to implement this. For licensing reasons I can’t provide the font I’ve used, so simply substitute the embed for a font of your own choosing. There’s also a zip of the Flex Builder project to save you copying/pasting the code.

package 
{
	import flash.display.Sprite;
	import flash.text.engine.Kerning;
 
	import flashx.textLayout.container.DisplayObjectContainerController;
	import flashx.textLayout.container.IContainerController;
	import flashx.textLayout.conversion.ImportExportConfiguration;
	import flashx.textLayout.conversion.TextFilter;
	import flashx.textLayout.elements.Configuration;
	import flashx.textLayout.elements.TextFlow;
	import flashx.textLayout.formats.CharacterFormat;
	import flashx.textLayout.formats.ParagraphFormat;
 
	[SWF(width='400', height='100', backgroundColor='#000000', frameRate='30')]
 
	public class TypographyTest extends Sprite
	{
		[Embed(source="ASVCodarLTLight.ttf", fontFamily="ASVCodar LT", cff="true")]
		private var _asv_codar_light:String;
 
		public function TypographyTest()
		{
			var text:String = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
			<div>
			<p>
			This is a test showing <span baselineShift="superscript">2</span> typographical<span baselineShift="subscript">3</span> controls.
			</p>
			</div>
			</TextFlow>;
 
			var charFormat:CharacterFormat = new CharacterFormat();
			charFormat.color = 0xFFFFFF;
			charFormat.fontFamily = "ASVCodar LT";
			charFormat.fontSize = 20;
			charFormat.kerning = Kerning.ON;
			charFormat.fontLookup = flash.text.engine.FontLookup.EMBEDDED_CFF;
			charFormat.renderingMode = flash.text.engine.RenderingMode.CFF;         
 
			var textFlow:TextFlow = TextFilter.importToFlow(text, TextFilter.TEXT_LAYOUT_FORMAT);
			textFlow.characterFormat = charFormat;
			textFlow.paddingTop = 20;
			textFlow.whiteSpaceCollapse = flashx.textLayout.formats.WhiteSpaceCollapse.PRESERVE;
 
			var container:Sprite = addChild(new Sprite()) as Sprite;
 
			textFlow.flowComposer.addController(new DisplayObjectContainerController(container, 400, 100));
 
			textFlow.flowComposer.updateAllContainers();
		}
	}
}

Embedded fonts and the Text Layout Framework

Adobe’s Text Layout Framework, in combination with the new text engine in Flash Player 10, is finally giving Flash developers the kind of typographic control we’ve needed for years. Feature highlights include bi—directional and vertical text, support for over 30 writing systems, flowing text across multiple columns and vastly improved character formatting including kerning, ligatures and typographic case.

While a few tutorials on it have been appearing in the last few days, notably Using the Text Layout Framework in Flex 3.2 and AIR 1.5, there’s still a lack of information on how to use embedded fonts which as we all know is necessary if you want to use non-standard fonts or tween the alpha property of your text.

Flex 4 SDK / Flash Professional CS4

From the Text Layout Framework release notes;

DefineFont4 is a new embedded font format used by the new text engine in Flash Player 10 providing improved typography, international support and reduced font size. The new text engine does not support any of the previous SWF embedded formats such as DefineFont3 generated by Flash CS3 Professional or Flex 3. You will have to use Flash CS4 Professional or Flex Gumbo to embed fonts using the DefineFont4 format.

This means that to use embedded fonts with the TLF, you have to use either the Flex 4 (“Gumbo”) SDK, which is currently still in Beta, or Flash Professional CS4.

Moving to Flex 4 SDK

If you’re currently using the Flex 3 SDK and want to move to Flex 4, there’s a handy tutorial on the Flex Examples blog, Using the beta Gumbo in Flex Builder 3.

A word of warning is that several of the nightly builds and the latest stable build refuse to run on OS X. I wasn’t alone with this problem, both Richard Leggett and Aral Balkan have been bitten too as you’ll see in the comments on Richard’s blog post, Upgrading Flex 3/AIR Projects to Gumbo/Flex 4.

For the time being, I’m using the Adobe MAX preview (build 4.0.0.4021) version.

Embedding fonts

Here’s an example of how to embed a font in AS3, the important new part to notice is the cff="true", which is a reference to the Compact Font Format required by the new text engine.

package com.cameronyule.fonts
{
	import flash.text.Font;
 
	public class AFont extends Font 
	{
		[Embed(source="/path/to/fonts/AFont.ttf", fontFamily="AFont", cff="true")]
		private var _a_font:String;
 
		public static const NAME:String = "AFont";
 
		public function AFont() 
		{
			super();
			_a_font;
		}
	}
}

Using your embedded fonts

There are two main ways to use the Text Layout Framework, TextFlows and TextLines. TextFlows are better for larger blocks of text while TextLines are good for single lines of text.

The most important part is actually the character formatting, so while this example uses TextLines you’ll be able to easily transfer it to TextFlows as well.

private function createTextLine(someText:String):void
{	
	var bounds:Rectangle = new Rectangle(10, 10, this.width, this.height);
 
	var paragraphFormat:ParagraphFormat = new ParagraphFormat();
	paragraphFormat.direction = Direction.LTR;
 
	var characterFormat:CharacterFormat = new CharacterFormat();
	characterFormat.fontSize = 18;
	characterFormat.fontFamily = AFont.NAME;
	characterFormat.fontLookup = flash.text.engine.FontLookup.EMBEDDED_CFF;
	characterFormat.renderingMode = flash.text.engine.RenderingMode.CFF;
 
	TextLineFactory.createTextLinesFromString(addTextLineToContainer, someText, bounds, characterFormat, paragraphFormat);
}
 
private function addTextLineToContainer(textLine:flash.text.engine.TextLine):void
{
	this.addChild(textLine);
}

And there you have it, embedded fonts using the new Text Layout Framework.

Introducing SWF Lightbox

The digital team at Marque have been trying to get into the habit of releasing some of the nice code we write, as our way of giving something back to the community.

For the first of these releases, James has created a variation of the Lightbox technique which is capable of true fullscreen display – particularly nifty if you’re displaying hi-resolution photography.

Check out SWF Lightbox on the new Marque Digital blog.