nmLog

２次ベジェ曲線のう渦巻きをアニメーションさせる。

ActionScript Learning 110630-2で制作したうずまきをアニメーションさせる。

ステージをクリックすると渦巻きがアニメーションしながら描かれます。始点か終点をクリックすると巻き戻しのアニメーションをします。

package {
	
	import flash.display.*;
	import flash.geom.*;
	import flash.events.*;
	
	
	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.events.TweenEvent;
	import org.libspark.betweenas3.tweens.*;
	import org.libspark.betweenas3.easing.*;
	

	public class NMain extends MovieClip {
		
		//-------------------------------------------------------------------------------- Properties
		
		private var _this:*;
		private var _stage:Stage;
		

		
		
		//-------------------------------------------------------------------------------- Constractor
		
		public function NMain() {
			
			_this = this;
			_stage = stage;
			
			_stage.scaleMode = StageScaleMode.NO_SCALE;
			_stage.align = StageAlign.TOP_LEFT;		
			
			Init();
		}
		
		
		//-------------------------------------------------------------------------------- Function
		 
		 
		/**
		 * initialize
		 */
		public function Init():void {
			
			setup();
		}
		
		/**
		 * setup
		 */
		private function setup():void {
			
			setup_main();
			
			_stage.addEventListener(MouseEvent.MOUSE_DOWN, _mousedown);
		}
		//
		private function _mousedown(eo:* = null):void {
			
			if(dotover) return;
			
			var _convolution = convolution();
			_convolution.x = _main.mouseX;
			_convolution.y = _main.mouseY;
			
			_main.addChild(_convolution);
		}

		/**
		 * setup
		 */
		private var _main:MovieClip;
		
		private function setup_main():void {
			
			_main = new MovieClip();
			_main.x = Math.round(_stage.stageWidth / 2);
			_main.y = Math.round(_stage.stageHeight / 2);			
			_this.addChild(_main);
		}

		
		/**
		 * convolution
		 */		
		private function convolution():MovieClip {
			
			var _convolution = new MovieClip;
			_convolution.pntsarr = [];
			
			var pntsleng = 24 * 3;
			
			var radius = 200;
			var grawval = radius / pntsleng;
			var repeat = 4;
			var angle = 360 * repeat / pntsleng;			

			for (var i:int = 0; i < pntsleng; i++) {
				
				var pnt = dot(4);//new Object();
				pnt.id = i + 1;
				pnt.x = 0;
				pnt.y = 0;
				pnt.tgtangle = 0;
				pnt.tgtgrawx = 0;
				pnt.tgtgrawy = 0;
				pnt.goalangle = i * angle;
				pnt.goalgrawx = i * grawval;
				pnt.goalgrawy = i * grawval;
				pnt.convolution = _convolution;
				
				//_convolution.addChild(pnt);
				
				_convolution.pntsarr.push(pnt);
			}
			
			//_convolution.goalgraw_ri = grawval * (pntsleng - 1.5);
			_convolution.goalangle_ri = angle * (pntsleng - 1.5);
			
			
			var _dot_s = dot();
			_dot_s.convolution = _convolution;
			_dot_s.addEventListener(MouseEvent.CLICK, dot_s_click);
			
			_convolution.dot_s = _dot_s;
			_convolution.addChild(_dot_s);
			
			var _dot_e = dot(6, 0xAAFFFF);
			_dot_e.convolution = _convolution;
			_dot_e.addEventListener(MouseEvent.CLICK, dot_e_click);
			
			_convolution.dot_e = _dot_e;
			_convolution.addChild(_dot_e);
			
			forward_in(_convolution);

			return _convolution;
		}
		//
		private function pnt_update(eo:* = null):void {
			
			var pnt = eo.currentTarget.target;

			pnt.x = pnt.tgtgrawx * Math.cos(pnt.tgtangle * (Math.PI / 180));
			pnt.y = pnt.tgtgrawy * Math.sin(pnt.tgtangle * (Math.PI / 180));
			
			if(pnt.id == 1) drawaction(pnt.convolution);
		}
		//
		private function dot_s_click(eo:* = null):void {
			
			var _dot_s = eo.currentTarget;
			
			var _convolution = _dot_s.convolution;
			
			var currentstate = _convolution.currentstate;
			
			if(currentstate == "forward_out"|| currentstate == "reverse_in") return;
			
			var pntsarr = _convolution.pntsarr;
			
			for (var i = 0; i < pntsarr.length; i++) {
				
				pntsarr[i].bt.stop();
			}

			if(currentstate == "stop" || currentstate == "forward_in") reverse_out(_convolution);
			else if(currentstate == "reverse_out") forward_in(_convolution);
		}
		//
		private function dot_e_click(eo:* = null):void {			
			
			var _dot_e = eo.currentTarget;
			
			var _convolution = _dot_e.convolution;
			
			var currentstate = _convolution.currentstate;
			
			if(currentstate == "forward_in"|| currentstate == "reverse_out") return;
			
			var pntsarr = _convolution.pntsarr;
			
			for (var i = 0; i < pntsarr.length; i++) {
				
				pntsarr[i].bt.stop();
			}
			
			if(currentstate == "stop" ||currentstate == "forward_out") reverse_in(_convolution);
			else if(currentstate == "reverse_in") forward_out(_convolution);
		}
		/** */
		private function forward_out(tgtmc:MovieClip):void {
			
			forward_in(tgtmc);
			
			tgtmc.currentstate = "forward_out";
		}
		/** */
		private function forward_in(tgtmc:MovieClip):void {
			
			tgtmc.currentstate = "forward_in";
			
			var pntsarr = tgtmc.pntsarr;
			
			for (var i = 0; i < pntsarr.length; i++) {
				
				var pnt = pntsarr[i];
				pnt.bt = BetweenAS3.tween(pnt, {tgtgrawx:pnt.goalgrawx, tgtgrawy:pnt.goalgrawy, tgtangle:pnt.goalangle}, null, 2, Sine.easeOut);
				if(i == 1) pnt.bt.addEventListener(TweenEvent.COMPLETE, forward_complete);	
				pnt.bt.addEventListener(TweenEvent.UPDATE, pnt_update);
				pnt.bt.play();
			}
		}
		/** */
		private function reverse_in(tgtmc:MovieClip):void {
			
			tgtmc.currentstate = "reverse_in";
			
			var pntsarr = tgtmc.pntsarr;
			
			var goalgrawx_ri = Point.distance(new Point(tgtmc.dot_e.x, tgtmc.dot_e.y),  new Point(0, 0));
			var goalgrawy_ri = goalgrawx_ri;
			
			for (var i = 0; i < pntsarr.length; i++) {
				
				var pnt = pntsarr[i];
				pnt.bt = BetweenAS3.tween(pnt, {tgtgrawx:goalgrawx_ri, tgtgrawy:goalgrawy_ri,  tgtangle:tgtmc.goalangle_ri}, null, 1.2, Sine.easeOut);				
				pnt.bt.addEventListener(TweenEvent.UPDATE, pnt_update);	
				if(i == 0) pnt.bt.addEventListener(TweenEvent.COMPLETE, reverse_complete);	
				pnt.bt.play();
			}
			
			pntsarr[pntsarr.length - 1].x = tgtmc.dot_e.x;
			pntsarr[pntsarr.length - 1].y = tgtmc.dot_e.y;
		}
		/** */
		private function reverse_out(tgtmc:MovieClip):void {
			
			tgtmc.currentstate = "reverse_out";
			
			var pntsarr = tgtmc.pntsarr;
			
			for (var i = 0; i < pntsarr.length; i++) {
				
				var pnt = pntsarr[i];				
				pnt.bt = BetweenAS3.tween(pnt, {tgtgrawx:0, tgtgrawy:0, tgtangle:0}, null, 1.2, Sine.easeOut);				
				pnt.bt.addEventListener(TweenEvent.UPDATE, pnt_update);	
				if(i == pntsarr.length - 1) pnt.bt.addEventListener(TweenEvent.COMPLETE, reverse_complete);	
				pnt.bt.play();
			}
		}
		//
		private function reverse_complete(eo:* = null):void {
			
			var pnt = eo.currentTarget.target;
			
			var _convolution = pnt.convolution;
			
			_main.removeChild(_convolution);
		}
		//
		private function forward_complete(eo:* = null):void {
			
			var pnt = eo.currentTarget.target;
			
			var _convolution = pnt.convolution;
			
			_convolution.currentstate = "stop";
		}

		
		/**
		 * draw action
		 */		
		private function drawaction(tgtmc:MovieClip):void {
			
			var pntsarr = tgtmc.pntsarr;
			var currentstate = tgtmc.currentstate;
			
			var _dot_s = tgtmc.dot_s;
			var _dot_e = tgtmc.dot_e;

			var g = tgtmc.graphics;
			g.clear();			
			g.lineStyle(4, 0xEEEEEE, .6);
			
			var stax:Number;
			var stay:Number;
			var ancx:Number;
			var ancy:Number;
			
			if(currentstate == "forward_in" || currentstate == "reverse_out") {
				
				stax = pntsarr[0].x;
				stay = pntsarr[0].y;
				g.moveTo(stax, stay);
				
				_dot_s.x = pntsarr[0].x;
				_dot_s.y = pntsarr[0].y;
				
				for(var i = 1; i < pntsarr.length - 1; i ++) {				
						
					ancx = (pntsarr[i].x + pntsarr[i + 1].x) / 2;
					ancy = (pntsarr[i].y + pntsarr[i + 1].y) / 2;
					
					g.curveTo(pntsarr[i].x, pntsarr[i].y, ancx, ancy);
				}

				_dot_e.x = ancx;
				_dot_e.y = ancy;
			}
			else {
				
				stax = (pntsarr[pntsarr.length - 1].x + pntsarr[pntsarr.length - 2].x) / 2;
				stay = (pntsarr[pntsarr.length - 1].y + pntsarr[pntsarr.length - 2].y) / 2;
				
				g.moveTo(stax, stay)
				
				for(var j = 1; j < pntsarr.length - 1; j++) {				
						
					ancx = (pntsarr[pntsarr.length - 1 - j].x + pntsarr[pntsarr.length - 1 - j - 1].x) / 2;
					ancy = (pntsarr[pntsarr.length - 1 - j].y + pntsarr[pntsarr.length - 1 - j - 1].y) / 2;
					
					g.curveTo(pntsarr[pntsarr.length - 1 - j].x, pntsarr[pntsarr.length - 1 - j].y, ancx, ancy);
				}

				_dot_s.x = ancx;
				_dot_s.y = ancy;
			}
		}
		
		/**
		 * dot
		 */
		private var dotover:Boolean;
		
		private function dot(rad:Number = 6, col:Number = 0xFFAAFF):MovieClip {
		
			var _dot = new MovieClip();
			
			var g = _dot.graphics;
			g.beginFill(col, 1);
			g.drawCircle(0, 0, rad);
			
			_dot.buttonMode = true;
			
			_dot.addEventListener(MouseEvent.MOUSE_OVER, function(){dotover = true});
			_dot.addEventListener(MouseEvent.MOUSE_OUT, function(){dotover = false});
			
			return _dot;
		}
    }
}