<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>cameronyule.com &#187; Flash</title>
	<atom:link href="http://cameronyule.com/tags/flash/feed" rel="self" type="application/rss+xml" />
	<link>http://cameronyule.com</link>
	<description>Glasgow based new media developer Cameron Yule.</description>
	<lastBuildDate>Fri, 22 Jan 2010 12:53:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Text Layout Framework API update</title>
		<link>http://cameronyule.com/2009/06/text-layout-framework-api-update</link>
		<comments>http://cameronyule.com/2009/06/text-layout-framework-api-update#comments</comments>
		<pubDate>Wed, 17 Jun 2009 09:41:59 +0000</pubDate>
		<dc:creator>Cameron</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[embedding]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[text layout framework]]></category>
		<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://cameronyule.com/?p=585</guid>
		<description><![CDATA[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&#8217;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 [...]]]></description>
			<content:encoded><![CDATA[<p>I’ve recently started working on another multi-lingual Flash project and noticed that Adobe have again changed the API for the <a href="http://labs.adobe.com/technologies/textlayout/">Text Layout Framework</a>. While this is to be expected given it&#8217;s a beta product and still in development, it can be frustrating having to re-learn what you already know.</p>
<p>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 <a href="http://cameronyule.com/2009/02/embedded-fonts-and-the-text-layout-framework">using embedded fonts with the text layout framework</a> previously.</p>
<p>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 <a href="http://labs.adobe.com/downloads/textlayout.html">Adobe Labs TLF downloads</a>.</p>
<h3>Selectable text using TextFlow</h3>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> textContainer:Sprite = addChild<span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> Sprite<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span> as Sprite;
&nbsp;
<span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">text</span>:<span style="color: #0066CC;">String</span> = <span style="color: #ff0000;">'&lt;TextFlow xmlns=&quot;http://ns.adobe.com/textLayout/2008&quot;&gt;'</span>;
<span style="color: #0066CC;">text</span> += <span style="color: #ff0000;">'&lt;p&gt;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.&lt;/p&gt;'</span>;
<span style="color: #0066CC;">text</span> += <span style="color: #ff0000;">'&lt;p&gt;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. &lt;/p&gt;'</span>;
<span style="color: #0066CC;">text</span> += <span style="color: #ff0000;">'&lt;/TextFlow&gt;'</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// some basic text formatting</span>
<span style="color: #000000; font-weight: bold;">var</span> format:TextLayoutFormat = <span style="color: #000000; font-weight: bold;">new</span> TextLayoutFormat<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
format.<span style="color: #006600;">fontFamily</span> = AvenirLight.<span style="color: #0066CC;">NAME</span>;
format.<span style="color: #006600;">fontSize</span> = <span style="color: #cc66cc;">18</span>;
format.<span style="color: #0066CC;">color</span> = 0x000000;
format.<span style="color: #006600;">kerning</span> = Kerning.<span style="color: #0066CC;">ON</span>;
format.<span style="color: #006600;">paragraphSpaceAfter</span> = <span style="color: #cc66cc;">15</span>;
format.<span style="color: #006600;">renderingMode</span> = RenderingMode.<span style="color: #006600;">CFF</span>;
format.<span style="color: #006600;">fontLookup</span> = FontLookup.<span style="color: #006600;">EMBEDDED_CFF</span>;
&nbsp;
<span style="color: #000000; font-weight: bold;">var</span> config:Configuration = <span style="color: #000000; font-weight: bold;">new</span> Configuration<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
config.<span style="color: #006600;">textFlowInitialFormat</span> = format;     
&nbsp;
<span style="color: #808080; font-style: italic;">// make the text selectable</span>
<span style="color: #000000; font-weight: bold;">var</span> textFlow:TextFlow = TextFilter.<span style="color: #006600;">importToFlow</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">text</span>, TextFilter.<span style="color: #006600;">TEXT_LAYOUT_FORMAT</span>, config<span style="color: #66cc66;">&#41;</span>;
textFlow.<span style="color: #006600;">interactionManager</span> = <span style="color: #000000; font-weight: bold;">new</span> SelectionManager<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;  
&nbsp;
<span style="color: #000000; font-weight: bold;">var</span> exampleContainerWidth:uint = <span style="color: #cc66cc;">700</span>;
&nbsp;
textFlow.<span style="color: #006600;">whiteSpaceCollapse</span> = flashx.<span style="color: #006600;">textLayout</span>.<span style="color: #006600;">formats</span>.<span style="color: #006600;">WhiteSpaceCollapse</span>.<span style="color: #006600;">PRESERVE</span>;
textFlow.<span style="color: #006600;">flowComposer</span>.<span style="color: #006600;">addController</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> ContainerController<span style="color: #66cc66;">&#40;</span>textContainer, exampleContainerWidth, <span style="color: #0066CC;">NaN</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
textFlow.<span style="color: #006600;">flowComposer</span>.<span style="color: #006600;">updateAllControllers</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</pre></div></div>

<h3>Static, non-selectable, text via StringTextLineFactory</h3>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> label:<span style="color: #0066CC;">String</span> = <span style="color: #ff0000;">'Some static text'</span>;
&nbsp;
<span style="color: #000000; font-weight: bold;">var</span> factory:StringTextLineFactory = <span style="color: #000000; font-weight: bold;">new</span> StringTextLineFactory<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
factory.<span style="color: #006600;">compositionBounds</span> = <span style="color: #000000; font-weight: bold;">new</span> Rectangle<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">0</span>, <span style="color: #0066CC;">NaN</span>, <span style="color: #0066CC;">NaN</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// basic text formatting</span>
<span style="color: #000000; font-weight: bold;">var</span> format:TextLayoutFormat = <span style="color: #000000; font-weight: bold;">new</span> TextLayoutFormat<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
format.<span style="color: #006600;">fontFamily</span> = AvenirLight.<span style="color: #0066CC;">NAME</span>
format.<span style="color: #006600;">fontSize</span> = <span style="color: #cc66cc;">18</span>;
format.<span style="color: #0066CC;">color</span> = 0x000000;
format.<span style="color: #006600;">renderingMode</span> = RenderingMode.<span style="color: #006600;">CFF</span>;
format.<span style="color: #006600;">fontLookup</span> = FontLookup.<span style="color: #006600;">EMBEDDED_CFF</span>;
&nbsp;
factory.<span style="color: #0066CC;">text</span> = label;
factory.<span style="color: #006600;">spanFormat</span> = format;
factory.<span style="color: #006600;">createTextLines</span><span style="color: #66cc66;">&#40;</span>addTextLineToContainer<span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> addTextLineToContainer<span style="color: #66cc66;">&#40;</span>textline:TextLine<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
<span style="color: #66cc66;">&#123;</span>
	addChild<span style="color: #66cc66;">&#40;</span>textline<span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://cameronyule.com/2009/06/text-layout-framework-api-update/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Text Layout Framework memory leak</title>
		<link>http://cameronyule.com/2009/04/text-layout-framework-memory-leak</link>
		<comments>http://cameronyule.com/2009/04/text-layout-framework-memory-leak#comments</comments>
		<pubDate>Mon, 27 Apr 2009 06:49:51 +0000</pubDate>
		<dc:creator>Cameron</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[bug]]></category>
		<category><![CDATA[memory leak]]></category>
		<category><![CDATA[text layout framework]]></category>

		<guid isPermaLink="false">http://cameronyule.com/?p=573</guid>
		<description><![CDATA[Shortly before I flew to Abu Dhabi for Cityscape, I found a memory leak in the AIR application I&#8217;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 [...]]]></description>
			<content:encoded><![CDATA[<p>Shortly before I flew to Abu Dhabi for <a href="http://www.cityscapeabudhabi.com/">Cityscape</a>, I found a memory leak in the AIR application I&#8217;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.</p>
<p>Thankfully, Flex Builder has a <a href="http://livedocs.adobe.com/flex/3/html/help.html?content=profiler_3.html">profiler</a> tool built-in, and leaving my application running for hours in the profiler revealed the rapid accumulation of instances of a mystery class <code>TextAccImpl</code>, which it&#8217;s package structure revealed was part of the new <a href="http://labs.adobe.com/technologies/textlayout/">Text Layout Framework</a>.</p>
<p>This was more problematic than you may imagine, as not only is the <acronym title="Text Layout Framework">TLF</acronym> still in beta, but was an integral part of my application as it gave us the ability to switch seamlessly between English and Arabic.</p>
<p>After spending time tweaking my code to check if I was using the API incorrectly, it became apparent it was a bug in <acronym title="Text Layout Framework">TLF</acronym> itself. Googling didn&#8217;t find anything, so I resorted to the official <acronym title="Text Layout Framework">TLF</acronym> blog, where I noticed a post announcing they were <a href="http://blogs.adobe.com/tlf/2009/04/weekly_tlf_builds_now_availabl.html">releasing weekly builds</a> to their <a href="http://labs.adobe.com/downloads/textlayout.html">Adobe Labs download</a> page.</p>
<p>As I was compiling against the version of <acronym title="Text Layout Framework">TLF</acronym> 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&#8217;d made, I left my application running in the profiler overnight and to my relief the bug had been fixed.</p>
<p>If anyone is experiencing dramatic degradation of performance over time after adding the <acronym title="Text Layout Framework">TLF</acronym> to your application, I&#8217;d recommend you upgrade to the latest weekly build.</p>
]]></content:encoded>
			<wfw:commentRss>http://cameronyule.com/2009/04/text-layout-framework-memory-leak/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Superscript and Subscript in Text Layout Framework</title>
		<link>http://cameronyule.com/2009/02/superscript-subscript-in-text-layout-framework</link>
		<comments>http://cameronyule.com/2009/02/superscript-subscript-in-text-layout-framework#comments</comments>
		<pubDate>Fri, 27 Feb 2009 11:17:39 +0000</pubDate>
		<dc:creator>Cameron</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[subscript]]></category>
		<category><![CDATA[superscript]]></category>
		<category><![CDATA[text layout framework]]></category>
		<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://cameronyule.com/?p=541</guid>
		<description><![CDATA[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; 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_typographytest_364918589"
			class="flashmovie"
			width="400"
			height="100">
	<param name="movie" value="/wp-content/uploads/2009/02/typographytest.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/wp-content/uploads/2009/02/typographytest.swf"
			name="fm_typographytest_364918589"
			width="400"
			height="100">
	<!--<![endif]-->
		 
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object> Here’s the AS3 I&#8217;ve used to implement this. For licensing [...]]]></description>
			<content:encoded><![CDATA[<p>On my last post on <a href="http://cameronyule.com/2009/02/embedded-fonts-and-the-text-layout-framework">using embedded fonts with the Text Layout Framework</a>, Anne Knoche left a <a href="http://cameronyule.com/2009/02/embedded-fonts-and-the-text-layout-framework#comment-324">comment</a> asking how to mark up input text to use subscript and superscripts.</p>
<p>Here’s a quick example showing exactly that;</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_typographytest_1867375416"
			class="flashmovie"
			width="400"
			height="100">
	<param name="movie" value="/wp-content/uploads/2009/02/typographytest.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/wp-content/uploads/2009/02/typographytest.swf"
			name="fm_typographytest_1867375416"
			width="400"
			height="100">
	<!--<![endif]-->
		
<p><a href="http://adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>

	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<p></p>
<p>Here’s the AS3 I&#8217;ve used to implement this. For licensing reasons I can’t provide the font I’ve used, so simply substitute the <code>embed</code> for a font of your own choosing. There’s also a zip of the <a href="http://cameronyule.com/wp-content/uploads/2009/02/typographytest.zip">Flex Builder project</a> to save you copying/pasting the code.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package 
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">Sprite</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #0066CC;">text</span>.<span style="color: #006600;">engine</span>.<span style="color: #006600;">Kerning</span>;
&nbsp;
	<span style="color: #0066CC;">import</span> flashx.<span style="color: #006600;">textLayout</span>.<span style="color: #006600;">container</span>.<span style="color: #006600;">DisplayObjectContainerController</span>;
	<span style="color: #0066CC;">import</span> flashx.<span style="color: #006600;">textLayout</span>.<span style="color: #006600;">container</span>.<span style="color: #006600;">IContainerController</span>;
	<span style="color: #0066CC;">import</span> flashx.<span style="color: #006600;">textLayout</span>.<span style="color: #006600;">conversion</span>.<span style="color: #006600;">ImportExportConfiguration</span>;
	<span style="color: #0066CC;">import</span> flashx.<span style="color: #006600;">textLayout</span>.<span style="color: #006600;">conversion</span>.<span style="color: #006600;">TextFilter</span>;
	<span style="color: #0066CC;">import</span> flashx.<span style="color: #006600;">textLayout</span>.<span style="color: #006600;">elements</span>.<span style="color: #006600;">Configuration</span>;
	<span style="color: #0066CC;">import</span> flashx.<span style="color: #006600;">textLayout</span>.<span style="color: #006600;">elements</span>.<span style="color: #006600;">TextFlow</span>;
	<span style="color: #0066CC;">import</span> flashx.<span style="color: #006600;">textLayout</span>.<span style="color: #006600;">formats</span>.<span style="color: #006600;">CharacterFormat</span>;
	<span style="color: #0066CC;">import</span> flashx.<span style="color: #006600;">textLayout</span>.<span style="color: #006600;">formats</span>.<span style="color: #006600;">ParagraphFormat</span>;
&nbsp;
	<span style="color: #66cc66;">&#91;</span>SWF<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">width</span>=<span style="color: #ff0000;">'400'</span>, <span style="color: #0066CC;">height</span>=<span style="color: #ff0000;">'100'</span>, <span style="color: #0066CC;">backgroundColor</span>=<span style="color: #ff0000;">'#000000'</span>, frameRate=<span style="color: #ff0000;">'30'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
&nbsp;
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> TypographyTest <span style="color: #0066CC;">extends</span> Sprite
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #66cc66;">&#91;</span>Embed<span style="color: #66cc66;">&#40;</span>source=<span style="color: #ff0000;">&quot;ASVCodarLTLight.ttf&quot;</span>, fontFamily=<span style="color: #ff0000;">&quot;ASVCodar LT&quot;</span>, cff=<span style="color: #ff0000;">&quot;true&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> _asv_codar_light:<span style="color: #0066CC;">String</span>;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> TypographyTest<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">text</span>:<span style="color: #0066CC;">String</span> = <span style="color: #66cc66;">&lt;</span>TextFlow xmlns=<span style="color: #ff0000;">&quot;http://ns.adobe.com/textLayout/2008&quot;</span><span style="color: #66cc66;">&gt;</span>
			<span style="color: #66cc66;">&lt;</span>div<span style="color: #66cc66;">&gt;</span>
			<span style="color: #66cc66;">&lt;</span>p<span style="color: #66cc66;">&gt;</span>
			<span style="color: #0066CC;">This</span> is a test showing <span style="color: #66cc66;">&lt;</span>span baselineShift=<span style="color: #ff0000;">&quot;superscript&quot;</span><span style="color: #66cc66;">&gt;</span><span style="color: #cc66cc;">2</span><span style="color: #66cc66;">&lt;/</span>span<span style="color: #66cc66;">&gt;</span> typographical<span style="color: #66cc66;">&lt;</span>span baselineShift=<span style="color: #ff0000;">&quot;subscript&quot;</span><span style="color: #66cc66;">&gt;</span><span style="color: #cc66cc;">3</span><span style="color: #66cc66;">&lt;/</span>span<span style="color: #66cc66;">&gt;</span> controls.
			<span style="color: #66cc66;">&lt;/</span>p<span style="color: #66cc66;">&gt;</span>
			<span style="color: #66cc66;">&lt;/</span>div<span style="color: #66cc66;">&gt;</span>
			<span style="color: #66cc66;">&lt;/</span>TextFlow<span style="color: #66cc66;">&gt;</span>;
&nbsp;
			<span style="color: #000000; font-weight: bold;">var</span> charFormat:CharacterFormat = <span style="color: #000000; font-weight: bold;">new</span> CharacterFormat<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			charFormat.<span style="color: #0066CC;">color</span> = 0xFFFFFF;
			charFormat.<span style="color: #006600;">fontFamily</span> = <span style="color: #ff0000;">&quot;ASVCodar LT&quot;</span>;
			charFormat.<span style="color: #006600;">fontSize</span> = <span style="color: #cc66cc;">20</span>;
			charFormat.<span style="color: #006600;">kerning</span> = Kerning.<span style="color: #0066CC;">ON</span>;
			charFormat.<span style="color: #006600;">fontLookup</span> = flash.<span style="color: #0066CC;">text</span>.<span style="color: #006600;">engine</span>.<span style="color: #006600;">FontLookup</span>.<span style="color: #006600;">EMBEDDED_CFF</span>;
			charFormat.<span style="color: #006600;">renderingMode</span> = flash.<span style="color: #0066CC;">text</span>.<span style="color: #006600;">engine</span>.<span style="color: #006600;">RenderingMode</span>.<span style="color: #006600;">CFF</span>;         
&nbsp;
			<span style="color: #000000; font-weight: bold;">var</span> textFlow:TextFlow = TextFilter.<span style="color: #006600;">importToFlow</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">text</span>, TextFilter.<span style="color: #006600;">TEXT_LAYOUT_FORMAT</span><span style="color: #66cc66;">&#41;</span>;
			textFlow.<span style="color: #006600;">characterFormat</span> = charFormat;
			textFlow.<span style="color: #006600;">paddingTop</span> = <span style="color: #cc66cc;">20</span>;
			textFlow.<span style="color: #006600;">whiteSpaceCollapse</span> = flashx.<span style="color: #006600;">textLayout</span>.<span style="color: #006600;">formats</span>.<span style="color: #006600;">WhiteSpaceCollapse</span>.<span style="color: #006600;">PRESERVE</span>;
&nbsp;
			<span style="color: #000000; font-weight: bold;">var</span> container:Sprite = addChild<span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> Sprite<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span> as Sprite;
&nbsp;
			textFlow.<span style="color: #006600;">flowComposer</span>.<span style="color: #006600;">addController</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> DisplayObjectContainerController<span style="color: #66cc66;">&#40;</span>container, <span style="color: #cc66cc;">400</span>, <span style="color: #cc66cc;">100</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			textFlow.<span style="color: #006600;">flowComposer</span>.<span style="color: #006600;">updateAllContainers</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://cameronyule.com/2009/02/superscript-subscript-in-text-layout-framework/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Embedded fonts and the Text Layout Framework</title>
		<link>http://cameronyule.com/2009/02/embedded-fonts-and-the-text-layout-framework</link>
		<comments>http://cameronyule.com/2009/02/embedded-fonts-and-the-text-layout-framework#comments</comments>
		<pubDate>Thu, 26 Feb 2009 10:27:27 +0000</pubDate>
		<dc:creator>Cameron</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[embedding]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[text layout framework]]></category>
		<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://cameronyule.com/?p=524</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>Adobe’s <a href="http://labs.adobe.com/technologies/textlayout/">Text Layout Framework</a>, 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.</p>
<p>While a few tutorials on it have been appearing in the last few days, notably <a href="http://www.adobe.com/devnet/flex/articles/text_layout_framework.html">Using the Text Layout Framework in Flex 3.2 and AIR 1.5</a>, 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.</p>
<h3>Flex 4 SDK / Flash Professional CS4</h3>
<p>From the Text Layout Framework <a href="http://labs.adobe.com/technologies/textlayout/releasenotes.html">release notes</a>;</p>
<blockquote><p>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.</p></blockquote>
<p>This means that to use embedded fonts with the <abbr title="Text Layout Framework">TLF</abbr>, you have to use either the Flex 4 (“Gumbo”) SDK, which is currently still in Beta, or Flash Professional CS4.</p>
<h3>Moving to Flex 4 SDK</h3>
<p>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, <a href="http://blog.flexexamples.com/2008/08/02/using-the-beta-gumbo-sdk-in-flex-builder-3/">Using the beta Gumbo in Flex Builder 3</a>.</p>
<p>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, <a href="http://richardleggett.co.uk/blog/index.php/2009/02/12/upgrading_flex_3_air_projects_to_gumbo_f_4">Upgrading Flex 3/AIR Projects to Gumbo/Flex 4</a>.</p>
<p>For the time being, I’m using the Adobe MAX preview (build 4.0.0.4021) version.</p>
<h3>Embedding fonts</h3>
<p>Here’s an example of how to embed a font in AS3, the important new part to notice is the <code>cff="true"</code>, which is a reference to the <a href="http://en.wikipedia.org/wiki/Compact_Font_Format#Compact_Font_Format">Compact Font Format</a> required by the new text engine.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package com.<span style="color: #006600;">cameronyule</span>.<span style="color: #006600;">fonts</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> flash.<span style="color: #0066CC;">text</span>.<span style="color: #0066CC;">Font</span>;
&nbsp;
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> AFont <span style="color: #0066CC;">extends</span> <span style="color: #0066CC;">Font</span> 
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #66cc66;">&#91;</span>Embed<span style="color: #66cc66;">&#40;</span>source=<span style="color: #ff0000;">&quot;/path/to/fonts/AFont.ttf&quot;</span>, fontFamily=<span style="color: #ff0000;">&quot;AFont&quot;</span>, cff=<span style="color: #ff0000;">&quot;true&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> _a_font:<span style="color: #0066CC;">String</span>;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> const <span style="color: #0066CC;">NAME</span>:<span style="color: #0066CC;">String</span> = <span style="color: #ff0000;">&quot;AFont&quot;</span>;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> AFont<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> 
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">super</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			_a_font;
		<span style="color: #66cc66;">&#125;</span>
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<h3>Using your embedded fonts</h3>
<p>There are two main ways to use the Text Layout Framework, <a href="http://livedocs.adobe.com/labs/textlayout/flashx/textLayout/elements/TextFlow.html">TextFlows</a> and <a href="http://livedocs.adobe.com/labs/textlayout/flash/text/engine/TextLine.html">TextLines</a>. TextFlows are better for larger blocks of text while TextLines are good for single lines of text.</p>
<p>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.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> createTextLine<span style="color: #66cc66;">&#40;</span>someText:<span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
<span style="color: #66cc66;">&#123;</span>	
	<span style="color: #000000; font-weight: bold;">var</span> bounds:Rectangle = <span style="color: #000000; font-weight: bold;">new</span> Rectangle<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">10</span>, <span style="color: #cc66cc;">10</span>, <span style="color: #0066CC;">this</span>.<span style="color: #0066CC;">width</span>, <span style="color: #0066CC;">this</span>.<span style="color: #0066CC;">height</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
	<span style="color: #000000; font-weight: bold;">var</span> paragraphFormat:ParagraphFormat = <span style="color: #000000; font-weight: bold;">new</span> ParagraphFormat<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	paragraphFormat.<span style="color: #006600;">direction</span> = Direction.<span style="color: #006600;">LTR</span>;
&nbsp;
	<span style="color: #000000; font-weight: bold;">var</span> characterFormat:CharacterFormat = <span style="color: #000000; font-weight: bold;">new</span> CharacterFormat<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	characterFormat.<span style="color: #006600;">fontSize</span> = <span style="color: #cc66cc;">18</span>;
	characterFormat.<span style="color: #006600;">fontFamily</span> = AFont.<span style="color: #0066CC;">NAME</span>;
	characterFormat.<span style="color: #006600;">fontLookup</span> = flash.<span style="color: #0066CC;">text</span>.<span style="color: #006600;">engine</span>.<span style="color: #006600;">FontLookup</span>.<span style="color: #006600;">EMBEDDED_CFF</span>;
	characterFormat.<span style="color: #006600;">renderingMode</span> = flash.<span style="color: #0066CC;">text</span>.<span style="color: #006600;">engine</span>.<span style="color: #006600;">RenderingMode</span>.<span style="color: #006600;">CFF</span>;
&nbsp;
	TextLineFactory.<span style="color: #006600;">createTextLinesFromString</span><span style="color: #66cc66;">&#40;</span>addTextLineToContainer, someText, bounds, characterFormat, paragraphFormat<span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
&nbsp;
<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> addTextLineToContainer<span style="color: #66cc66;">&#40;</span>textLine:flash.<span style="color: #0066CC;">text</span>.<span style="color: #006600;">engine</span>.<span style="color: #006600;">TextLine</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">this</span>.<span style="color: #006600;">addChild</span><span style="color: #66cc66;">&#40;</span>textLine<span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>And there you have it, embedded fonts using the new Text Layout Framework.</p>
]]></content:encoded>
			<wfw:commentRss>http://cameronyule.com/2009/02/embedded-fonts-and-the-text-layout-framework/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>Introducing SWF Lightbox</title>
		<link>http://cameronyule.com/2008/08/introducing-swf-lightbox</link>
		<comments>http://cameronyule.com/2008/08/introducing-swf-lightbox#comments</comments>
		<pubDate>Thu, 21 Aug 2008 10:05:35 +0000</pubDate>
		<dc:creator>Cameron</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[lightbox]]></category>
		<category><![CDATA[marque]]></category>
		<category><![CDATA[opensource]]></category>

		<guid isPermaLink="false">http://cameronyule.com/?p=206</guid>
		<description><![CDATA[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.
]]></description>
			<content:encoded><![CDATA[<p>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.</p>
<p>For the first of these releases, James has created a variation of the <a href="http://en.wikipedia.org/wiki/Lightbox_(JavaScript)">Lightbox</a> technique which is capable of true fullscreen display &#8211; particularly nifty if you&#8217;re displaying hi-resolution photography.</p>
<p>Check out <a href="http://digital.marquecreative.com/swf-lightbox/">SWF Lightbox</a> on the new <a href="http://digital.marquecreative.com/">Marque Digital blog</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://cameronyule.com/2008/08/introducing-swf-lightbox/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

