02
01
2010
トラックバック コメント

[Progression 4] TweenListとTweenerのトランジション

TweenList

下記内容は、Progression 4.0.1 Public Beta 1.3で修正されました。

年末年始でサイトの微修正をしていたのですが、ずっと何かひっかかるものがあったTweenListに関してです。
TweenListは、過去にエントリーしており、実はPORTFOLIOで利用しているのですが、どうも自分のイメージしたものと違うと感じていました。
そこで、ちょいと調べてみました。

気になっているのはトランジション。
そこでTweenerのTextShortcutsを利用して比較してみました。
_textプロパティを利用したときと同じようにTweenListでもテキストが1文字ずつ追加されるように指定。
そのサンプルSWFがこちら。

どちらもEquations.easeOutQuintと同じトランジションを指定しているのですが、まったく違う。
トランジション終了までの時間がずれてるのはとりあえず脳からgcするとして、Tweener的には最初早くて後ゆっくりなんですが、TweenListのほうだと最初ゆっくり後早くになってます。これはeaseInQuintを指定したときのトランジションにあたります。
要するにInとOutが逆になってる。ということで気をつけてください。

と、ここまで書いたものの、これはPublic Beta1.2時点でのコードやAPI Docの説明にある”duration”という記述のされ方（”time”でないことがずっと気になってる）をみるとこれで仕様なような気もする。
でも、同じトランジションを指定してInOut逆になるのはやっぱり気になる。

追記
修正されるようです。感謝！！

とりあえず以下、コード

//AS3///////////////////////////////////////////////////////////////////////////
// 
// Progression 4 Public Beta 1.2でのTweenListのtransition
// 
////////////////////////////////////////////////////////////////////////////////
 
package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.text.TextField;
	import flash.text.TextFieldType;
 
	import caurina.transitions.Equations;
	import caurina.transitions.properties.TextShortcuts;
 
	import jp.progression.commands.lists.ParallelList;
	import jp.progression.commands.lists.TweenList;
	import jp.progression.commands.Func;
	import jp.progression.commands.tweens.DoTweener;
 
 
	public class Main extends Sprite {
		private var listText:TextField;
		private var tweenerText:TextField;
		private const msg:String = "0123456789012345678901234567890123456789";
		private var parallelList:ParallelList;
		private var tweenList:TweenList;
 
 
		public function Main() {
			TextShortcuts.init();
 
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
 
			addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);
 
			var label1 = createTextField(12);
			label1.autoSize = TextFieldAutoSize.LEFT;
			label1.text = "TweenList";
			label1.x = 10;
			label1.y = 10;
			addChild(label1);
 
			listText = createTextField(12);
			listText.autoSize = TextFieldAutoSize.LEFT;
			listText.x = 10;
			listText.y = 25;
			addChild(listText);
 
			var label2 = createTextField(12);
			label2.autoSize = TextFieldAutoSize.LEFT;
			label2.text = "Tweener";
			label2.x = 10;
			label2.y = 50;
			addChild(label2);
 
			tweenerText = createTextField(12);
			tweenerText.autoSize = TextFieldAutoSize.LEFT;
			tweenerText.x = 10;
			tweenerText.y = 65;
			addChild(tweenerText);
 
			tweenList = new TweenList(5, Equations.easeOutQuint);
			//tweenList = new TweenList(5, Equations.easeInQuint);
 
			var len = msg.length;
			for(var i:int = 0; i < len; i++) {
				var addText:String = msg.substr(i, 1);
				tweenList.addCommand(new Func(listText.appendText, [addText]));
			}
 
			parallelList = new ParallelList();
			parallelList.addCommand(new DoTweener(tweenerText, {_text: msg, time: 5, transition: Equations.easeOutQuint}));
			parallelList.addCommand(tweenList);
			parallelList.execute();
		}
 
		//---------------------------------------
		// テキストフィールドの生成
		//---------------------------------------
		private function createTextField(s:Number):TextField {
			var tf:TextFormat = new TextFormat("_sans", s, 0x000000);
 
			var textField:TextField = new TextField();
			textField.selectable = false;
			textField.defaultTextFormat = tf;
 
			return textField;
		}
	}
}

トラックバック

http://blog.eternitydesign.net/archives/2010/01/progression-4-tweenlist-tweener-transition.html/trackback