AS3 TextField メモ

まずは、文字を指定してフォントを埋め込み、外部ASファイル内で作った TextField に埋め込みフォントを適用する方法から。

とりあえず準備段階としてフォントを埋め込みます。

1. Flash IDE 上で、適当にダイナミックテキストを作り、任意のフォントを埋め込む。
2. [1] のテキストフィールドを任意の名前でシンボル化する。
3. ライブラリ内の [2] を右クリックし、コンテキストメニューから「コンパイルされたクリップへ変換」。

これで文字を指定したフォントの埋め込み、および ASファイルから埋め込みフォントを使う準備が整いました。
（コンパイル後は、ステージやライブラリから [2] を削除しても問題ありません）

あとは、TextField インスタンスを作り、TextFormat.font にフォント名を指定すればOKです。このとき、TextField.embedFonts を true にするのを忘れずに。

package  
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	
	/**
	 * 埋め込みフォント テスト
	 * @author NLOC - http://www.nloc-web.com/
	 */
	public class EmbedFont extends Sprite
	{
		// デバイスフォント
		private var deviceTF:TextField;
		private var deviceFmt:TextFormat;
		
		// 埋め込みフォント
		private var embedTF:TextField;
		private var embedFmt:TextFormat;
		
		/**
		 * コンストラクタ
		 */
		public function EmbedFont() 
		{
			// ステージ設定
			stage.frameRate = 30;
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.quality = StageQuality.MEDIUM;
			
			init();
		}
		
		/**
		 * Initialize
		 */
		private function init():void
		{
			// デバイスフォント
			deviceFmt = new TextFormat();
			deviceFmt.font = "_ゴシック";
			deviceFmt.size = 30;
			deviceFmt.color = 0xffffff;
			
			deviceTF = new TextField();
			deviceTF.autoSize = TextFieldAutoSize.LEFT;
			deviceTF.defaultTextFormat = deviceFmt;
			deviceTF.text = "device font";
			
			// 埋め込みフォント
			embedFmt = new TextFormat();
			embedFmt.font = "A-OTF 新ゴ Pro B";
			embedFmt.size = 30;
			embedFmt.color = 0xffffff;
			
			embedTF = new TextField();
			embedTF.autoSize = TextFieldAutoSize.LEFT;
			embedTF.defaultTextFormat = embedFmt;
			embedTF.embedFonts = true;
			embedTF.text = "embed font";
			
			addChild( deviceTF );
			deviceTF.x = 20;
			deviceTF.y = 15;
			
			addChild( embedTF );
			embedTF.x = 250;
			embedTF.y = 5;
		}
	}
}

これをベースに、ふたつの TextField にフェード処理を加えるとこんな感じになります。

		/**
		 * Initialize
		 */
		private function init():void
		{
			// ～～～ 省略 ～～～
			
			// フェード
			fadeText();
		}
		
		/**
		 * テキストフィールドのフェード処理
		 */
		private function fadeText():void
		{
			deviceTF.alpha = 1;
			embedTF.alpha = 1;
			
			Tweener.addTween( deviceTF,
			{
				time		: 1,
				delay		: 0.5,
				alpha		: 0,
				transition	: "linear"
			} );
			Tweener.addTween( embedTF,
			{
				time		: 1,
				delay		: 0.5,
				alpha		: 0,
				transition	: "linear",
				onComplete	: fadeText
			} );
		}

Flash をやっていらっしゃる方はご存知かと思いますが、デバイスフォントにはアルファ等が効きません。
サンプルのように英数字程度の埋め込みなら容量的にも気になりませんが、XMLやDBから取得した情報を TextField に流し込みフェードさせようと思うと、全てとは言わなくてもかなりの量の文字を埋め込まなくてはならず、とても現実的とは言えません。
このあたりは2バイトコード言語圏の悲しいトコロです・・・

ということで、デバイスフォントで表示している TextField を Bitmap 化してしまいましょう。
下記のように、textField を Bitmap 化するメソッドを用意します。

/**
 * テキストフィールドのBitmap化
 * 
 * @param	_tf:TextField
 * @return	Bitmap
 */
private function convertTextToBitmap( _tf:TextField ):Bitmap {
	var _bmd:BitmapData = new BitmapData( _tf.width, _tf.height, true, 0x00ffffff );
	_bmd.draw( _tf );
	return new Bitmap( _bmd );
}

中身は単純に、受け取った TextField を BitmapData に draw し、Bitmap に渡しているだけです。
サンプルでは、ドキュメントクラス内に private なメソッドとして記述していますが、外部のクラスに public static なメソッドとして登録しておけば、より汎用性は広がると思います。

で、Bitmap化したものがこちら。アルファ処理も問題なく適用されます。

ただし、画面に表示されているのはTextField ではないので、当然ながら選択や編集はできません。テキストとしての機能が必要な場合、適宜 TextField と Bitmap を切り替える必要があります。

最終的なソースはこちら。

package  
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	
	import caurina.transitions.Tweener;
	
	/**
	 * デバイスフォント Bitmap化 テスト
	 * @author NLOC - http://www.nloc-web.com/
	 */
	public class ConvertBitmap extends Sprite
	{
		// デバイスフォント
		private var deviceTF:TextField;
		private var deviceFmt:TextFormat;
		private var deviceBMP:Bitmap;
		
		// 埋め込みフォント
		private var embedTF:TextField;
		private var embedFmt:TextFormat;
		
		/**
		 * コンストラクタ
		 */
		public function ConvertBitmap() 
		{
			// ステージ設定
			stage.frameRate = 30;
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.quality = StageQuality.MEDIUM;
			
			init();
		}
		
		/**
		 * Initialize
		 */
		private function init():void
		{
			// デバイスフォント
			deviceFmt = new TextFormat();
			deviceFmt.font = "_ゴシック";
			deviceFmt.size = 30;
			deviceFmt.color = 0xffffff;
			
			deviceTF = new TextField();
			deviceTF.autoSize = TextFieldAutoSize.LEFT;
			deviceTF.defaultTextFormat = deviceFmt;
			deviceTF.text = "device font";
			
			// デバイスフォント -> Bitmap
			deviceBMP = convertTextToBitmap( deviceTF );
			
			// 埋め込みフォント
			embedFmt = new TextFormat();
			embedFmt.font = "A-OTF 新ゴ Pro B";
			embedFmt.size = 30;
			embedFmt.color = 0xffffff;
			
			embedTF = new TextField();
			embedTF.autoSize = TextFieldAutoSize.LEFT;
			embedTF.defaultTextFormat = embedFmt;
			embedTF.embedFonts = true;
			embedTF.text = "embed font";
			
			addChild( deviceBMP );
			deviceBMP.x = 20;
			deviceBMP.y = 15;
			
			addChild( embedTF );
			embedTF.x = 250;
			embedTF.y = 5;
			
			// フェード
			fadeText();
		}
		
		/**
		 * テキストフィールドのBitmap化
		 * 
		 * @param	_tf:TextField
		 * @return	Bitmap
		 */
		private function convertTextToBitmap( _tf:TextField ):Bitmap {
			var _bmd:BitmapData = new BitmapData( _tf.width, _tf.height, true, 0x00ffffff );
			_bmd.draw( _tf );
			return new Bitmap( _bmd );
		}
		
		/**
		 * テキストフィールドのフェード処理
		 */
		private function fadeText():void
		{
			deviceBMP.alpha = 1;
			embedTF.alpha = 1;
			
			Tweener.addTween( deviceBMP,
			{
				time		: 1,
				delay		: 0.5,
				alpha		: 0,
				transition	: "linear"
			} );
			Tweener.addTween( embedTF,
			{
				time		: 1,
				delay		: 0.5,
				alpha		: 0,
				transition	: "linear",
				onComplete	: fadeText
			} );
		}
	}
}