Wwwebber's Blog

Using Actionscript to make Subscripts with Flash’s Text Layout Framework

Posted in actionscript 3 by wwwebber on June 5, 2010

Here’s a quick post on on some new Actionscript functionality that takes advantage of Flash’s new Text Layout FrameWork to create subscript and superscipt in the new types of text fields that you can create–These new things aren’t the TextField() that you are used to but rather are part of this whole new, much more sophisticated framework.. I used Flash CS5, but this should work with CS4 also. Apparently, the Text Layout Framework (which is just a component that you can install with the extension manager) will work with CS4.

This post will show you how to use Actionscript to perform this task. There are already lots of videos up on web showing designers how to use the Flash IDE to do this..so here’s how to code it.

What our code will produce:

I have made several math based flash programs, and it has always been a pain in the butt to deal with exponents and subscripts. It has definitely been a long time coming–the ability to create sub and superscripts in a Flash. Now with the new TextLayout Framework you can do all sorts of things including subscripts!. I needed to learn how to do this for a new maths game I was working on Rj The Robot-Since this was a math game, I needed to be able to write exponents in dynamic text fields…so let’s make some subscripts in Flash!

Just Tell me the Steps

Step 1) Download The Text Layout Component here (http://labs.adobe.com/downloads/textlayout.html) Note: do not install the ‘open source’ version, go down the page a bit to get the “text layout component

Step 2)
use the Flash Extension Manager to install the “Text Layout Flash Component.mxp” file…and then restart flash.

Step 3) Open up a Flash File , then open up the components panel (window-> components) and open up the “standard components” and drag an instance of the “textlayout” component onto the stage. (After you have done this you can actually delete the component from the stage…we just needed to make sure the component was in our library…I assume you could also just drag the component directly to the library to achieve this )

Ok, now you can use all of the cool text layout features that we will need to be able to make a Subscript in Flash.

Step 4) Now a bit of Actionscript. I am not going to go over all of the details of how the Text Frame Work works(the two links below explain the framework in greater detail).

Download the Source Code here

Good links on TextLayout
Adobe Docs
link 1
link 2

Here’s the code for Main

import flash.display.LineScaleMode;
import flash.display.Sprite;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.elements.SpanElement;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.formats.CharacterFormat;

import flash.display.DisplayObject;
import fl.controls.TextLayout;

/* textLayout_flash is the base class for the Text Layout component. If you bring up the properties on the TextLayout Component in the library, you will see this.*/

public class MainTxt extends Sprite

public function MainTxt()

var myTextComponent:TextLayout;
// Instantiate the textLayout_flash class to create a TextLayout Component.
myTextComponent = new TextLayout();

// Add the new component to the Stage.
var myTextComponentOnStage:DisplayObject = addChild(myTextComponent);
// Get the Text Flow from the TextLayout Component.
var textFlow:Object = myTextComponent.textFlow;
var span0:SpanElement = textFlow.getFirstLeaf();
span0.text = “E=MC”;

//get reference to ‘root’ ParagraphElement of the TextFlow
var rootParagraphElement:ParagraphElement = textFlow.getChildAtIndex(0);

var span2:SpanElement = new SpanElement();
span2.text =”2″;

var span3:SpanElement = new SpanElement();
span3.text =”\n\nLog”;
rootParagraphElement.addChild( span3 );

var span4:SpanElement = new SpanElement();
span4.text =”2″;
rootParagraphElement.addChild( span4);

var span5:SpanElement = new SpanElement();
span5.text =” = 3″;
rootParagraphElement.addChild( span5 );

var cf:CharacterFormat = new CharacterFormat(textFlow.characterFormat);
cf.fontSize = 20;
textFlow.characterFormat = cf;

var superScriptFormat:CharacterFormat = new CharacterFormat(textFlow.characterFormat);

superScriptFormat.baselineShift = flashx.textLayout.formats.BaselineShift.SUPERSCRIPT;
span2.characterFormat = superScriptFormat;

var subScript:CharacterFormat = new CharacterFormat(textFlow.characterFormat);
subScript.baselineShift = flashx.textLayout.formats.BaselineShift.SUBSCRIPT;
span4.characterFormat = subScript;



Comments Off on Using Actionscript to make Subscripts with Flash’s Text Layout Framework