Tweensy - onUpdate/onComplete

onUpdate/onCompleteイベントをTweensyで設定してみる。

Tweenerと大きく違う部分は、Tweensy.to()/Tweensy.from()/Tweensy.fromTo()の戻り値のTweensyTimelineオブジェクトに対して、onUpdate/onCompleteをFunction型で設定すること。 また、TweensyTimelineオブジェクトに対して、onUpdateParams/onCompleteParamsをArray型で設定することができ、onUpdate/onCompleteで設定したfunctionに引数として渡される。

今回は円を描いたSpriteをランダムな座標に動かし、scaleX/scaleYもランダムに変化させる。
onUpdateParams/onCompleteParamsにスタート時と現在と目標の座標とscaleを引数として設定し、onUpdate時とonComplete時にスタート時と現在と目標の座標とscaleをTextFieldに表示することにする。onComplete時に再度Tweensy.to()を設定しているので、再帰的に動き続ける。

TestTweensy_5.swf

  • ActionScript
  • TestTweensy_5.as
  • Source
package  {
	import com.flashdynamix.motion.Tweensy;
	import com.flashdynamix.motion.TweensyTimeline;
	import fl.motion.easing.Quadratic;
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	[SWF(backgroundColor = 0x000000, width = 600, height = 400, frameRate = 30)]
	public class TestTweensy_5 extends Sprite {

		private var _circle:Sprite;
		private var _textField:TextField;

		public function TestTweensy_5() {
			initTextField();
			initCircle();

			startCircleTweensy();
		}

		private function initTextField():void {
			_textField = new TextField();

			var textField:TextField = _textField;
			var textFormat:TextFormat = new TextFormat('_等幅', 10, 0xffffff);

			textField.defaultTextFormat = textFormat;
			textField.autoSize = TextFieldAutoSize.LEFT;

			addChild(textField);
		}

		private function initCircle():void {
			_circle = new Sprite();

			var circle:Sprite = _circle;
			var graphics:Graphics = circle.graphics;

			graphics.beginFill(0x0099cc);
			graphics.drawCircle(0, 0, 10);
			graphics.endFill();
			circle.x = Math.random() * stage.stageWidth;
			circle.y = Math.random() * stage.stageHeight;

			addChildAt(circle, 0);
		}

		private function startCircleTweensy():void {
			var circle:Sprite = _circle;
			var targetX:Number = Math.random() * stage.stageWidth;
			var targetY:Number = Math.random() * stage.stageHeight;
			var targetScaleX:Number = 1 + Math.random() * 3;
			var targetScaleY:Number = 1 + Math.random() * 3;

			var timeline:TweensyTimeline = Tweensy.to(circle, { x: targetX, y: targetY, scaleX: targetScaleX, scaleY: targetScaleY }, 3, Quadratic.easeOut, 1);
			timeline.onUpdate = onCircleUpdate;
			timeline.onUpdateParams = [circle.x, circle.y, circle.scaleX, circle.scaleY, targetX, targetY, targetScaleX, targetScaleY];
			timeline.onComplete = onCircleComplete;
			timeline.onCompleteParams = [circle.x, circle.y, circle.scaleX, circle.scaleY, targetX, targetY, targetScaleX, targetScaleY];
		}

		private function onCircleUpdate(startX:Number, startY:Number, startScaleX:Number, startScaleY:Number, targetX:Number, targetY:Number, targetScaleX:Number, targetScaleY:Number):void {
			updateTextField('onCircleUpdate\n', startX, startY, startScaleX, startScaleY, targetX, targetY, targetScaleX, targetScaleY);
		}

		private function onCircleComplete(startX:Number, startY:Number, startScaleX:Number, startScaleY:Number, targetX:Number, targetY:Number, targetScaleX:Number, targetScaleY:Number):void {
			updateTextField('onCircleComplete\n', startX, startY, startScaleX, startScaleY, targetX, targetY, targetScaleX, targetScaleY);
			startCircleTweensy();
		}

		private function updateTextField(text:String, startX:Number, startY:Number, startScaleX:Number, startScaleY:Number, targetX:Number, targetY:Number, targetScaleX:Number, targetScaleY:Number):void {
			var circle:Sprite = _circle;

			text += 'START   x = ' + startX.toString() + '\n';
			text += '        y = ' + startY.toString() + '\n';
			text += '        scaleX = ' + startScaleX.toString() + '\n';
			text += '        scaleY = ' + startScaleY.toString() + '\n';
			text += 'CURRENT x = ' + circle.x.toString() + '\n';
			text += '        y = ' + circle.y.toString() + '\n';
			text += '        scaleX = ' + circle.scaleX.toString() + '\n';
			text += '        scaleY = ' + circle.scaleY.toString() + '\n';
			text += 'TARGET  x = ' + targetX.toString() + '\n';
			text += '        y = ' + targetY.toString() + '\n';
			text += '        scaleX = ' + targetScaleX.toString() + '\n';
			text += '        scaleY = ' + targetScaleY.toString();

			_textField.text = text;
		}


	}

}
  1. package  {
  2.     import com.flashdynamix.motion.Tweensy;
  3.     import com.flashdynamix.motion.TweensyTimeline;
  4.     import fl.motion.easing.Quadratic;
  5.     import flash.display.Graphics;
  6.     import flash.display.Sprite;
  7.     import flash.text.TextField;
  8.     import flash.text.TextFieldAutoSize;
  9.     import flash.text.TextFormat;
  10.  
  11.     [SWF(backgroundColor = 0x000000, width = 600, height = 400, frameRate = 30)]
  12.     public class TestTweensy_5 extends Sprite {
  13.  
  14.         private var _circle:Sprite;
  15.         private var _textField:TextField;
  16.  
  17.         public function TestTweensy_5() {
  18.             initTextField();
  19.             initCircle();
  20.  
  21.             startCircleTweensy();
  22.         }
  23.  
  24.         private function initTextField():void {
  25.             _textField = new TextField();
  26.  
  27.             var textField:TextField = _textField;
  28.             var textFormat:TextFormat = new TextFormat('_等幅', 10, 0xffffff);
  29.  
  30.             textField.defaultTextFormat = textFormat;
  31.             textField.autoSize = TextFieldAutoSize.LEFT;
  32.  
  33.             addChild(textField);
  34.         }
  35.  
  36.         private function initCircle():void {
  37.             _circle = new Sprite();
  38.  
  39.             var circle:Sprite = _circle;
  40.             var graphics:Graphics = circle.graphics;
  41.  
  42.             graphics.beginFill(0x0099cc);
  43.             graphics.drawCircle(0, 0, 10);
  44.             graphics.endFill();
  45.             circle.x = Math.random() * stage.stageWidth;
  46.             circle.y = Math.random() * stage.stageHeight;
  47.  
  48.             addChildAt(circle, 0);
  49.         }
  50.  
  51.         private function startCircleTweensy():void {
  52.             var circle:Sprite = _circle;
  53.             var targetX:Number = Math.random() * stage.stageWidth;
  54.             var targetY:Number = Math.random() * stage.stageHeight;
  55.             var targetScaleX:Number = 1 + Math.random() * 3;
  56.             var targetScaleY:Number = 1 + Math.random() * 3;
  57.  
  58.             var timeline:TweensyTimeline = Tweensy.to(circle, { x: targetX, y: targetY, scaleX: targetScaleX, scaleY: targetScaleY }, 3, Quadratic.easeOut, 1);
  59.             timeline.onUpdate = onCircleUpdate;
  60.             timeline.onUpdateParams = [circle.x, circle.y, circle.scaleX, circle.scaleY, targetX, targetY, targetScaleX, targetScaleY];
  61.             timeline.onComplete = onCircleComplete;
  62.             timeline.onCompleteParams = [circle.x, circle.y, circle.scaleX, circle.scaleY, targetX, targetY, targetScaleX, targetScaleY];
  63.         }
  64.  
  65.         private function onCircleUpdate(startX:Number, startY:Number, startScaleX:Number, startScaleY:Number, targetX:Number, targetY:Number, targetScaleX:Number, targetScaleY:Number):void {
  66.             updateTextField('onCircleUpdate\n', startX, startY, startScaleX, startScaleY, targetX, targetY, targetScaleX, targetScaleY);
  67.         }
  68.  
  69.         private function onCircleComplete(startX:Number, startY:Number, startScaleX:Number, startScaleY:Number, targetX:Number, targetY:Number, targetScaleX:Number, targetScaleY:Number):void {
  70.             updateTextField('onCircleComplete\n', startX, startY, startScaleX, startScaleY, targetX, targetY, targetScaleX, targetScaleY);
  71.             startCircleTweensy();
  72.         }
  73.  
  74.         private function updateTextField(text:String, startX:Number, startY:Number, startScaleX:Number, startScaleY:Number, targetX:Number, targetY:Number, targetScaleX:Number, targetScaleY:Number):void {
  75.             var circle:Sprite = _circle;
  76.  
  77.             text += 'START   x = ' + startX.toString() + '\n';
  78.             text += '        y = ' + startY.toString() + '\n';
  79.             text += '        scaleX = ' + startScaleX.toString() + '\n';
  80.             text += '        scaleY = ' + startScaleY.toString() + '\n';
  81.             text += 'CURRENT x = ' + circle.x.toString() + '\n';
  82.             text += '        y = ' + circle.y.toString() + '\n';
  83.             text += '        scaleX = ' + circle.scaleX.toString() + '\n';
  84.             text += '        scaleY = ' + circle.scaleY.toString() + '\n';
  85.             text += 'TARGET  x = ' + targetX.toString() + '\n';
  86.             text += '        y = ' + targetY.toString() + '\n';
  87.             text += '        scaleX = ' + targetScaleX.toString() + '\n';
  88.             text += '        scaleY = ' + targetScaleY.toString();
  89.  
  90.             _textField.text = text;
  91.         }
  92.  
  93.  
  94.     }
  95.  
  96. }


About this entry