ETERNITY DESIGN BLOG

TextAnimイメージ

TextAnim

すでにwonderflでも使用できるのでご存じの方も多いかと思います、TextAnimライブラリ

テキストフィールドの文字を1文字ずつ(またはワード単位、行単位)、モーションさせるときに便利なライブラリです。1文字ずつモーションさせるのは自分で実装するには地味に面倒なんですが、それを簡単にしてくれます。
ただ、ちょっと癖が強いライブラリな感じなので少し注意点などをまとめてみました。

TextFieldにはデバイスフォントは使用できません。
埋め込みフォントを利用する必要があります。
なぜかというとTextAnimがブロックごとにTextFieldを用意するのですが、そのときにtextField.embedFonts = true;しちゃってるからです。
デバイスフォント使いたいって方はTextAnimBlock.asの127行目を削除しちゃうといいんじゃないでしょうか。(たぶん)

対象となるTextFieldはaddChildされた状態でTextAnimインスタンスに指定しなければなりません。
その際にTextField.textにテキストが指定されている必要はありませんが、TextField.multiline = trueにしている場合は
正常にテキスト位置が取得できないことがあるようなので指定しておいた方がいいです。
(これはTextAnimの仕様ではなく、TextField.getCharBoundaries()で取得できる値がおかしい)

TextAnimに渡されたTextFieldはデフォルトではremoveChildされ、同じ場所にTextAnimインスタンスが配置されます。
(TextAnimはSpriteを継承しています。)

また、TextAnimBlockのモーションに下記のサンプルではTweenerを利用していますが、他のライブラリでも全然OKです。

それほど、大きなライブラリでもないので、コードをのぞいてみると理解が深まりますよ。

サンプルコード

package {
	import caurina.transitions.Tweener;
	
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	
	import flupie.textanim.TextAnim;
	import flupie.textanim.TextAnimBlock;
	import flupie.textanim.TextAnimMode;
	
	
	[SWF(backgroundColor="#2e3036", frameRate=30)]

	public class TextAnimSample extends Sprite {

		public function TextAnimSample() {
			addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event):void {
			trace("init");
			removeEventListener(Event.ADDED_TO_STAGE, init);

			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;

			var tf:TextFormat = new TextFormat("Myriad Pro", 24, 0xffffff);
			
			var field:TextField = new TextField();
			// 埋め込みフォントじゃないとダメ。
			field.embedFonts = true;
			field.autoSize = TextFieldAutoSize.LEFT;
			field.defaultTextFormat = tf;

			// この時点でテキストフィールドのテキストは空
			//field.text = "The TextAnim is an open source code for dynamic text animation in Flash - ActionScript 3, it's events based and tween engine independent.";

			// TextAnimインスタンス用意の前に、対象となるTextFieldはaddChildしておく必要がある。
			addChild(field);

			// TextAnimの出番
			var textAnim:TextAnim = new TextAnim(field);
			textAnim.blocksVisible = false;
			textAnim.effects = myEffect;
			textAnim.text = "The TextAnim is an open source code for dynamic text animation in Flash - ActionScript 3, it's events based and tween engine independent.";
			textAnim.start();
		}

		/**
		 * 一つ一つのブロック(デフォルトでは1文字)に使うモーション
		 * @param block
		 * 
		 */		
		private function myEffect(block:TextAnimBlock):void {
			block.scaleX = block.scaleY = 0;
			block.y = block.y + 30;
			block.alpha = 0;
			
			// Tweener以外も使えるよ!
			Tweener.addTween(block, {alpha: 1, y: block.y - 30, scaleX:1, scaleY:1, time:1, transition:"easeoutelastic"});
		}
	}
}

最後に、Progression 4用のTextAnimコマンドクラス置いておきます。
面倒だったのでTextAnimインスタンスに直接アクセスできるようになっていたりと少々手抜きです。

DoTextAnimのダウンロード

ABOUT ME

名古屋を中心に、フリーランスでホームページ制作してます。 デザイン・サイト制作・WordPress案件・Flash制作、JavaScript(jQuery)と幅広く対応可能です。 案件のご依頼・ご相談はCONTACTよりご連絡ください。

CATEGORIES

ARCHIVES

TAGS