ActionScript3.0アニメーション

なんだか全くFlashを触っていなくて不安になったので、途中になっていたActionScript 3.0 アニメーションをやっています。
まだまだ途中ですが、この本のChapter8でこういうのが出来ました。本では3つのボールをバネで繋いでますが、何個でも増やせるようにしました。増やしすぎると訳が分からなくなりますが…。
黒いボールはドラッグ出来ます。

バネ運動をやっているのですが、綾取りみたいになって面白い。
やっぱこの本凄い。基本的なところから徐々にレベルアップしていって、無理なく覚えられる。
全部一気に詰め込むのでなくて、細かい部品の作り方を徹底的に教えてくれて、あとでそれを組み立てて大きい面白い物を作ろう、ってかんじ。

欠点は大きくて分厚くて持ち運びに向かないこと。結構余白が残っている印象で、文字も小さくすればかなりコンパクトになると思うけど、見やすさの為しょうがないですね。

ここから先が楽しみ。

今までFlashDevelopでやっていけど、今回はFlexを使った。補完はFlashDevelopの方が使いやすいな。ガンガン補完してくれるんだもん。でもFlexは逐一文法エラーだとかを教えてくれる。
かなりうっかり者の僕にはありがたい。つまらないミスに気付かず何時間もハマルってのが減るかも？
それとリファクタリング機能がやはり便利。これはFlashDevelopには無い。そのうち実装される予定らしい？

一応コードを載せます。
まず、本の至る所で使うBall.as。サンプルのまんま。

package {
	import flash.display.Sprite;

	public class Ball extends Sprite {
		public var radius:Number;
		private var color:uint;
		public var vx:Number = 0;
		public var vy:Number = 0;

		public function Ball(radius:Number=40, color:uint=0xff0000) {
			this.radius = radius;
			this.color = color;
			init();
		}
		public function init():void {
			graphics.beginFill(color);
			graphics.drawCircle(0, 0, radius);
			graphics.endFill();
		}
	}
}

次に、今回用に拡張したBallクラス。

package
{
	public class CustomBall extends Ball
	{
		public function CustomBall(radius:Number=40, color:uint=0x000000)
		{
			super(radius, color);
		}

		private var _isDragging:Boolean = false;
		private var _id:uint;

		public function get isDragging():Boolean{return _isDragging;}
		public function set isDragging(value:Boolean):void
		{
			_isDragging = value;
		}

		public function get id():uint{return _id;}
		public function set id(value:uint):void
		{
			_id = value;
		}
	}
}

最後にメインとなるクラス。
コメントにも書いたけど、macのfirefoxだとstage.stageWidth、stage.stageHeightが0になる。
なんでだ。それとmacのブラウザで見るとCPUを喰ってる。parallels上のwinows版Firefoxは全然CPUを喰わないし、ローカルでの速さとほぼ同じ。なんでなんだ。

package
{
	import flash.display.Sprite;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class SpringTest extends Sprite
	{
		public function SpringTest()
		{
			init();
		}

		private var balls:Array/* of CustumBall */;
		private var ballNum:int = 5;
		private var friction:Number = 0.95;
		private var spring:Number = 0.05;
		private var springLength:Number = 100;

		private function init():void
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			balls = [];
			for(var i:uint = 0; i < ballNum; i++)
			{
				var ball:CustomBall = new CustomBall(20);
				ball.id = i;//動作確認用

				//trueにすると多少軽くなる？が、エッジが欠ける
				//ball.cacheAsBitmap = true;
				ball.addEventListener(MouseEvent.MOUSE_DOWN, onBallMouseDown);
				ball.addEventListener(MouseEvent.MOUSE_UP, onBallMouseUp);

				//mac firefoxだとstage.stageWidth、stage.stageHeightが0になる
				//ball.x = Math.random() * stage.stageWidth;
				//ball.y = Math.random() * stage.stageHeight;

				var STAGE_SIZE:uint = 600;
				ball.x = Math.random() * STAGE_SIZE;
				ball.y = Math.random() * STAGE_SIZE;
				balls.push(ball);
				addChild(ball);
			}
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}

		private function onEnterFrame(e:Event):void
		{
			for(var i:uint = 0; i < ballNum; i++)
			{
				var ball:CustomBall = CustomBall(balls[i]);
				if(!ball.isDragging)
				{
					for(var j:uint = 0; j < ballNum; j++)
					{
						var objectivePointBall:CustomBall = CustomBall(balls[j]);
						//自分以外のボールに対して位置を調整する
						if( objectivePointBall != ball)
							springTo(ball, objectivePointBall);
					}
				}
			}

			//ラインを引く
			graphics.clear();
			graphics.lineStyle(1, 0x000000);
			graphics.moveTo(CustomBall(balls[0]).x, CustomBall(balls[0]).y);
			for(var i:uint = 1; i < ballNum; i++)
			{
				graphics.lineTo(CustomBall(balls[i]).x, CustomBall(balls[i]).y);
			}
			graphics.lineTo(CustomBall(balls[0]).x, CustomBall(balls[0]).y);
		}

		private function onBallMouseDown(e:MouseEvent):void
		{
			var ball:CustomBall = CustomBall(e.target);
			ball.startDrag();
			ball.isDragging = true;
		}

		private function onBallMouseUp(e:MouseEvent):void
		{
			var ball:CustomBall = CustomBall(e.target);
			ball.stopDrag();
			ball.isDragging = false;
		}

		/**
		 * バネ運動の処理
		 * @param ball 動かす対象のボール
		 * @param objectivePointBall 目標位置とするボール
		 *
		 */
		private function springTo(ball:CustomBall, objectivePointBall:CustomBall):void
		{
			var angle:Number = Math.atan2(objectivePointBall.y - ball.y, objectivePointBall.x - ball.x);
			var targetX:Number = objectivePointBall.x - Math.cos(angle) * springLength;
			var targetY:Number = objectivePointBall.y - Math.sin(angle) * springLength;
			ball.vx += (targetX - ball.x) * spring;
			ball.vy += (targetY - ball.y) * spring;
			ball.x += (ball.vx *= friction);
			ball.y += (ball.vy *= friction);
		}
	}
}