By Defination – The TextLineMetrics class contains information about the text position and measurements of a line of text within a text field. All measurements are in pixels. Objects of this class are returned by the flash.text.TextField.getLineMetrics() method.

While creating a text animation part for a application I faced the problem with the size of the individual characters in the TextField. The width and the height of the text characters inside the textfield differed from that of the actual size of the font as shown below :

text-metrics

One can see the final output of the demo part here

The code for the part is as below:

<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="play()" fontSize="{size}" fontFamily="Arial"
text="7" textAlign="center" color="#F1E912" fontWeight="bold"
resizeEffect="{uResize}">

<mx:Script>
<![CDATA[
[Bindable]
public var size:int = 12;

[Bindable]
public var duration:int = 800;

public var initialSize:Number = 2;

public var rotateEnabled:Boolean = true;
public var fadeEnabled:Boolean = true;
public var scaleEnabled:Boolean = true;
public var delayCount:int = 0;

public function play():void
{
//setTextSize();
if(rotateEnabled){
uRotate.end();
uRotate.angleFrom = 0;
uRotate.angleTo = 360;
uRotate.play();
}
if(fadeEnabled){
uFade.end();
uFade.alphaFrom = 0;
uFade.alphaTo = 1;
uFade.play();
}
if(scaleEnabled){
uZoom.end();
uZoom.zoomHeightFrom = initialSize;
uZoom.zoomWidthFrom = initialSize;
uZoom.zoomHeightTo = 1;
uZoom.zoomWidthTo = 1;
uZoom.play();
}
}

public function setTextSize():void
{
var txtLineMetrics:TextLineMetrics = this.getLineMetrics(0);
if(text == ' '){
width = txtLineMetrics.width+size;
height = txtLineMetrics.height+size;
}
else{
width = txtLineMetrics.width+size/2;
height = txtLineMetrics.height+size/2;
}
}

public function stop():void
{
uRotate.stop();
uFade.stop();
}

]]>
</mx:Script>
<mx:Fade id="uFade" duration="{duration}" target="{this}" effectEnd="setTextSize()"/>
<mx:Rotate id="uRotate" duration="{duration}" target="{this}"
originX="{width/2}" originY="{height/2}" effectEnd="setTextSize()"/>
<mx:Resize id="uResize" duration="{duration}" target="{this}"/>
<mx:Zoom id="uZoom" duration="{duration}" target="{this}" effectEnd="setTextSize()"/>
</mx:Label>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="init()" xmlns:comp="comp.*">

<mx:Script>
<![CDATA[
import comp.RotateText;
import mx.effects.Tween;

[Bindable]
private var mText:String = 'Hello World';
private var mTimer:Timer = new Timer(200);
private var count:int = 0;
private var mIsRotate:Boolean = true;
private var mIsScale:Boolean = true;
private var mIsFade:Boolean = true;

private function init():void
{
mTimer.addEventListener(TimerEvent.TIMER, onTimerStart);
}

private function onTextChange(e:Event):void
{
mText = e.target.text;
}

private function startAnimation(e:MouseEvent):void
{
mTimer.stop();
count = 0;
hb.removeAllChildren();
mTimer.start();
}

private function onTimerStart(e:TimerEvent):void
{
if(count < mText.length){
var rTxt:RotateText = new RotateText();
rTxt.duration = hsDur.value;
rTxt.text = mText.charAt(count);
rTxt.fadeEnabled = mIsFade;
rTxt.scaleEnabled = mIsScale;
rTxt.rotateEnabled = mIsRotate;
rTxt.size = hsSize.value;
rTxt.delayCount = count;
rTxt.initialSize = hsZoom.value;
hb.addChild(rTxt);
count++;
}
else{ mTimer.stop(); }
}

private function onDoubleClick(e:Event):void
{
txtInp.visible = !txtInp.visible;
hb.visible = !hb.visible;
}
]]>
</mx:Script>

<mx:Style>

@font-face {
src:url("assets/arial.ttf");
font-weight: normal;
font-style: normal;
font-family: Arial;
}

@font-face {
src:url("assets/arialbd.ttf");
font-weight: bold;
font-style: normal;
font-family: Arial;
}

</mx:Style>
<mx:Canvas y="177" x="441">
<mx:HBox id="hb" horizontalGap="{hs.value}" doubleClickEnabled="true"
doubleClick="onDoubleClick(event)"/>
<mx:TextInput id="txtInp" text="{mText}" fontSize="20" visible="false"
enter="onDoubleClick(event)"/>
</mx:Canvas>

<mx:Text text="{mText}" fontFamily="Arial" x="26" y="45"/>
<mx:TextInput text="{mText}" change="onTextChange(event)" x="26" y="71"/>
<mx:Button label="Animate" click="startAnimation(event)" x="26" y="101"/>
<mx:Rotate id="uRotate"/>
<mx:VBox x="26" y="149" width="171" height="279">
<mx:Label text="Horizontal Gap"/>
<mx:HSlider id="hs" minimum="-40" maximum="40"
snapInterval="5" liveDragging="true" enabled="true" showTrackHighlight="true"
showDataTip="false" value="0" tickInterval="5"/>
<mx:Label text="Font Size"/>
<mx:HSlider id="hsSize" minimum="8" maximum="76"
liveDragging="true" enabled="true" showTrackHighlight="true"
showDataTip="false" value="16" snapInterval="1"/>
<mx:Label text="Duration"/>
<mx:HSlider id="hsDur" minimum="100" maximum="2000" snapInterval="100" liveDragging="true" value="500" showTrackHighlight="true"/>
<mx:Label text="Initial Size"/>
<mx:HSlider id="hsZoom" minimum="0.1" maximum="4" snapInterval="0.1" liveDragging="true" showTrackHighlight="true"/>
<mx:HRule width="100%"/>
<mx:CheckBox label="Rotate" selected="true" change="{mIsRotate = !mIsRotate}"/>
<mx:CheckBox label="Scale" selected="true" change="{mIsScale = !mIsScale}"/>
<mx:CheckBox label="Fade" selected="true" change="{mIsFade = !mIsFade}"/>
</mx:VBox>
</mx:Application>

You will need to add the fonts arial.ttf and arailbd.ttf to the assets folder to make it work.

Hope this would be helpful :)

Related posts:

Share