ActionScript Learning 110702

7.2.2011

変形しながら回転する2次ベジェ曲線の円。

ActionScript Learning 110630で制作した円の座標をアニメーションさせて、ふにゃふにゃと変形しながら回転させる。

ステージをクリックすると円が表示されます。
制御点の数やイージングを調整するとことでいろいろな表現ができそう。

SAMPLE VIEW CODE

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.*;
	
	import frocessing.color.*;
	

	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;		
			_stage.quality = "low";
			
			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 {
			
			var _softcircle = softcircle();
			_softcircle.x = _main.mouseX;
			_softcircle.y = _main.mouseY;
			
			_main.addChild(_softcircle);
			
			//if(_main.numChildren > 12) _main.removeChildAt(0);
		}

		/**
		 * 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);
		}
		
		/**
		 * softcircle
		 */		
		private function softcircle():MovieClip {
			
			var _softcircle = new MovieClip;
			
			_softcircle.pntsarr = new Vector.< Object >();
			
			var pntsleng = 4;
			
			var radius = 200 + 100 * Math.random();
			var grawval = radius / pntsleng;
			var repeat = 1;
			var angle = 360 * repeat / pntsleng;			

			for(var i = 0; i < pntsleng; i ++) {
				
				//var pnt = dot(4);//new Object();
				var pnt = new Object();
				
				pnt.id = i + 1;
				
				pnt.x = 0;
				pnt.y = 0;
				
				pnt.tgtangle = i * angle;
				
				pnt.radius = radius;
				
				pnt.tgtrandx = 0;
				pnt.tgtrandy = 0;
				pnt.goalrandx = 0;//200 * Math.random();
				pnt.goalrandy = 0;//200 * Math.random();
				
				//_softcircle.addChild(pnt);
				
				_softcircle.pntsarr.push(pnt);
			}
			
			_softcircle.animcnt = 0;
			
			_softcircle.circlelength = 10;
			
			
			var colorhsl = new ColorHSL();
			colorhsl.s = .8;
			colorhsl.l = .8;			
			
			var colorhsl_h = 100 * Math.random() + 100;

			for(var j = 0; j < _softcircle.circlelength; j ++) {
				
				var _circle = new MovieClip();
				_circle.name = "circle_" + (j + 1);
				_circle.pntsarr = new Vector.< Point >();
				
				colorhsl.h = 12 * j + colorhsl_h;
				
				_circle.colorval = colorhsl.value;
				
				for(var k = 0; k < pntsleng; k ++) {
					
					_circle.pntsarr.push(new Point());
				}
				
				_softcircle.addChild(_circle);
			}
			
			_softcircle.addEventListener(Event.ENTER_FRAME, softcircle_enterframe);

			return _softcircle;
		}
		//
		private function softcircle_enterframe(eo:* = null):void {
			
			var _softcircle = eo.currentTarget;
			
			drawaction(_softcircle);
		}
		//
		private var cnt:Number = 0;
		
		private function drawaction(_softcircle:MovieClip):void {
			
			var scpntsarr = _softcircle.pntsarr;
			
			for(var i = 0; i < scpntsarr.length; i ++) {
				
				var pnt = scpntsarr[i];
				
				pnt.tgtrandx += (pnt.goalrandx - pnt.tgtrandx) * .04;
				pnt.tgtrandy += (pnt.goalrandy - pnt.tgtrandy) * .04;
				

				pnt.tgtangle += 2;// + Math.abs(Math.sin(cnt * 2 * (Math.PI / 180)) * 1);
				
				if(pnt.tgtangle > 360) pnt.tgtangle -= 360;
				
				if(_softcircle.animcnt % 200 == 0 || _softcircle.animcnt == 0) {
					
					pnt.goalrandx = 400 * Math.random() - 200;
					pnt.goalrandy = 200 * Math.random() - 100;
				}
				
				_softcircle.animcnt += 1;
				
				var grawx = pnt.radius + pnt.tgtrandx;
				var grawy = pnt.radius + pnt.tgtrandy;
				
				pnt.x = grawx * Math.cos(pnt.tgtangle * (Math.PI / 180)); 
				pnt.y = grawy * Math.sin(pnt.tgtangle * (Math.PI / 180)); 
			}
			
			
			var firstcircle = _softcircle.getChildByName("circle_1");
			
			var fcpntsarr = firstcircle.pntsarr;

			for(i = 0; i < scpntsarr.length; i ++) {
				
				var scpnt = scpntsarr[i];
				
				var fcpnt = fcpntsarr[i];
				
				fcpnt.x = scpnt.x;
				fcpnt.y = scpnt.y;
			}
			
			drawcircle(firstcircle);
			
			for(var j = 1; j < _softcircle.circlelength; j ++) {
				
				var _lastcircle = _softcircle.getChildByName("circle_" + (j + 1 - 1));
				var _circle = _softcircle.getChildByName("circle_" + (j + 1));
				
				var circlepntsarr = _circle.pntsarr;
				var lastcirclepntsarr = _lastcircle.pntsarr;
				
				for(var k = 0; k < circlepntsarr.length; k ++) {
					
					var circlepnt = circlepntsarr[k];					
					var lastepnt = lastcirclepntsarr[k];

					circlepnt.x += (lastepnt.x - circlepnt.x) * .2;
					circlepnt.y += (lastepnt.y - circlepnt.y) * .2;
				}
				
				drawcircle(_circle);
			}
		}
		
		/**
		 * draw action
		 */		
		private function drawcircle(tgtcircle:MovieClip):void {
			
			var pntsarr = tgtcircle.pntsarr;
			
			//trace(pntsarr);

			var g = tgtcircle.graphics;
			g.clear();			
			g.lineStyle(1, tgtcircle.colorval, .5);

			g.moveTo((pntsarr[0].x + pntsarr[1].x) / 2, (pntsarr[0].y + pntsarr[1].y) / 2);
			
			for (var i = 1; i < pntsarr.length + 2; i++){
				
				var pnum = i;
				if(pnum > pntsarr.length - 1) pnum -= pntsarr.length;				

				var nextpnum = pnum + 1;
				if(nextpnum > pntsarr.length - 1) nextpnum -= pntsarr.length;				
				
				var cntx = pntsarr[pnum].x;
				var cnty = pntsarr[pnum].y;				
				
				var ancx = (pntsarr[pnum].x + pntsarr[nextpnum].x) / 2;
				var ancy = (pntsarr[pnum].y + pntsarr[nextpnum].y) / 2;				
				
				g.curveTo(cntx, cnty, ancx, ancy);
			}
		}
		
		/**
		 * dot
		 */
		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);
			
			return _dot;
		}
    }
}





category : ActionScript / Flash

Demonstrations

Feature Samples

Author

虹村 マキオウ (nizimura makiou)

猫と太極拳を愛する横浜在住のフリーランスクリエイターです。

logo

Demo and Sample

Category