5ive™.blog

最近ビットマップフォントの常套モーションになっているランダムテキストを自作してみた。最初のモーションですべての文字を「アンダーバー」に変えてからランダムに1文字づつシャッフルしてます。TimerEventで動かしてるんだけど、シャッフルのスピードがブラウザで見るとやや遅い。デバッグプレイヤーだと思い通りのスピードなのに。ENTER_FRAMEで動かすほうが良いの？。誰か教えてください。

コードは以下参照。シャッフル時間を任意に調整できるようにしてます。

package info.five.filters
{
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.utils.Timer;
	import flash.events.TimerEvent;

	public class RandomText
	{
		const _replaceWord:String = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789=+-*/!?";
		private var _content:TextField;
		private var _word:String;
		private var _timer:Timer;
		private var _randomCnt:uint;
		private var _randomArr:Array = new Array();
		private var _shuffleArr:Array = new Array();
		private var _speed:Number = 1;
		private var _time:uint = 30;
		private var _cnt1:uint = 0;
		private var _cnt2:uint = 0;

		//------------------------------
		//   ランダムテキストクラス
		//------------------------------
		public function RandomText(content:TextField)
		{
			this._content = content;
			this._word = content.text;

			_timer = new Timer(_speed, 0);
			_timer.addEventListener(TimerEvent.TIMER, onTick, false, 0, true);
		}

		//------------------------------
		//   テキストの再設定
		//------------------------------
		public function setText(newText:String):void
		{
			this._word = newText;
		}

		//------------------------------
		//   モーションスタート
		//------------------------------
		public function start():void
		{
			//-----[変数の初期化]
			_content.text = "";
			_randomCnt = 0;
			_randomArr = [];
			_shuffleArr = [];
			_cnt1 = 0;
			_cnt2 = 0;

			_content.wordWrap = false;
			_content.autoSize = TextFieldAutoSize.LEFT;

			//-----[文字番号を配列に取得]
			for(var i:uint=0; i<_word .length; i++)
			{
				_randomArr.push(i);
				_content.appendText("_");
			}

			//-----[文字番号をシャッフル]
			_shuffleArr = shuffle(_randomArr);

			_timer.start();
		}

		//------------------------------
		//   配列のシャッフル
		//------------------------------
		private function shuffle(arr:Array):Array
		{
			var l = arr.length;
			var newArr = arr;

			while(l)
			{
				var m = Math.floor(Math.random()*l);
				var n = newArr[--l];
				newArr[l] = newArr[m];
				newArr[m] = n;
			}
			return newArr;
		}

		//------------------------------
		//   シャッフルモーション
		//------------------------------
		private function onTick(e:TimerEvent):void
		{
			if(_randomCnt < _time)
			{
				var randomNo:uint = Math.round(Math.random() * _replaceWord.length);

				var s1:uint = _shuffleArr[_cnt1];
				var s2:uint = _shuffleArr[_cnt1] + 1;
				var s3:String = _replaceWord.charAt(randomNo);

				_content.replaceText(s1, s2, s3);

				if(_cnt1 >= _word.length - 1) _cnt1 = 0;
				else _cnt1++;
			}
			else
			{
				var s4:uint = _shuffleArr[_cnt2];
				var s5:uint = _shuffleArr[_cnt2] + 1;
				var s6:String = _word.charAt(_shuffleArr[_cnt2]);

				_content.replaceText(s4, s5, s6);
				_cnt2++;

				if(_cnt2 >= _word.length)
				{
					_timer.stop();
				}
			}
			_randomCnt++;
		}

		//------------------------------
		//    getter
		//------------------------------
		public function get time():uint
		{
			return _time;
		}

		//------------------------------
		//    setter
		//------------------------------
		public function set time(t:uint):void
		{
			_time = t;
		}
	}
}

使い方はテキストフィールドを引数にインスタンスを作ってstart()メソッドを呼ぶだけ。

import info.five.filters.RandomText;

var randomText1:RandomText = new RandomText(myText1);
randomText1.start();

シャッフルスピードを変えるにはtimeプロパティを変える。（デフォルトは30）

randomText1.time = 100;

テキストを変更するには、setText()メソッドの引数に文字列を与える。

randomText1.setText("HOGE")
randomText1.start();