Box2DFlashAS3 を使ってみる[Box2D-1]ではBox2Dの物理エンジンを体験しましたが、今回は落下物を掴む動きを追加したいと思います。
ちょっと訳がわからくなって気がちですが、自分の作業メモ的に説明していきます。

Box2Dにはマウス処理をするにあたりマウスジョイントと言うプログラムが初めから使えるようになっています。
マウスジョイントとは物体とマウスをジョイント（付ける）処理と考えると分かりやすいかもしれません･･･
Box2DFlashAS3 を使ってみる[Box2D-1]をベースにまずはマウスジョントを宣言します。

private var mouseJointDef:b2MouseJointDef; // マウスジョイントの定義
private var mouseJoint:b2MouseJoint; // マウスジョイント

あとインポートにマウスイベントを指定も忘れずにお願いします。

次にマウス操作のイベントリスナーとそのメソッドを追加します。

stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

マウスが押された時

private function mouseDownHandler(event:MouseEvent):void {
	var body : b2Body = GetBodyAtMouse(event.stageX, event.stageY);
	if (body) {
		var md : b2MouseJointDef = new b2MouseJointDef();
		md.body1 = world.m_groundBody;
		md.body2 = body;
		md.target.Set(event.stageX / SCALE, event.stageY / SCALE);
		md.maxForce = 500.0 * body.m_mass;
		md.timeStep = 1 / 24;
		mouseJoint = world.CreateJoint(md) as b2MouseJoint;
		body.WakeUp();
	}
}

ここで重要になるのが、GetBodyAtMouseです。
マウスダウンした時に該当する物体があるかを判定していますが詳しく説明ができないので、もっと理解してからと言うことでお願いします。

//該当オブジェクトがあるかの判定
private function GetBodyAtMouse(stageX : Number, stageY : Number) : b2Body {
	// Make a small box.
	var mousePVec : b2Vec2 = new b2Vec2();
	var mouseXWorldPhys : Number = stageX / SCALE;
	var mouseYWorldPhys : Number = stageY / SCALE;

	mousePVec.Set(mouseXWorldPhys, mouseYWorldPhys);
	var aabb : b2AABB = new b2AABB();
	aabb.lowerBound.Set(mouseXWorldPhys - 0.001, mouseYWorldPhys - 0.001);
	aabb.upperBound.Set(mouseXWorldPhys + 0.001, mouseYWorldPhys + 0.001);

	// Query the world for overlapping shapes.
	var k_maxCount : int = 10;
	var shapes : Array = new Array();
	var count : int = world.Query(aabb, shapes, k_maxCount);
	var body : b2Body = null;
	for (var i : int = 0;i < count; ++i) {
		if (shapes[i].m_body.IsStatic() == false) {
			var tShape : b2Shape = shapes[i] as b2Shape;
			var inside : Boolean = tShape.TestPoint(tShape.m_body.GetXForm(), mousePVec);
			if (inside) {
				body = tShape.m_body;
				break;
			}
		}
	}
}

あとはマウスを動かした時とマウスを離した時の処理を追加するだけです。

//mouseUphandler
private function mouseUpHandler(event:MouseEvent):void {
	if(mouseJoint){
		world.DestroyJoint(mouseJoint);
		mouseJoint = null;
	}
}
//mouseMoveHandler
private function mouseMoveHandler(event:MouseEvent):void {
	if (mouseJoint) {
		var p2 : b2Vec2 = new b2Vec2(event.stageX / SCALE, event.stageY / SCALE);
		mouseJoint.SetTarget(p2);
	}
}

マウス操作を追加しただけですが、何か色々とイメージが膨らみ遊び心を感じると思います。
こうやって物理エンジンBox2Dを体験して、ちょこっとプログラムを追加しすだけで遊び心がわきますね！
どんどんプログラムを追加して自分なりに色々と遊びたいと思います。

package {
	//インポート
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	import Box2D.Dynamics.*;
	import Box2D.Dynamics.Joints.*;
	import General.*;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;

	/**************************
	 * ADD CHILD = AS3
	 * http://www.addchild.net/
	 * Tatsuya Nishino
	***************************/
	//コンスラクタ
	public class Box2D2 extends Sprite {
		//インスタンスプロパティー
		private const SCALE:Number = 100; // 物理エンジン内の1mを表すためのピクセル数
		private var world:b2World; // 物理エンジンの管理クラス
		private var body:b2Body; // 本体
		private var mouseJointDef:b2MouseJointDef; // マウスジョイントの定義
		private var mouseJoint:b2MouseJoint; // マウスジョイント

		// メソッド
		public function Box2D2() {
			// 初期化
			init();
			createObject();

			// 毎フレームの処理
			addEventListener(Event.ENTER_FRAME, enterFrameHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
            stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
            stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
		}
		// init
		private function init():void {
			/*************************
			 *物理エンジンのセットアップ
			**************************/
			//外枠の定義
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.lowerBound.Set(-100, -100);
			worldAABB.upperBound.Set(100, 100);

			//重力の定義
			var gravity:b2Vec2 = new b2Vec2(0, 10);

			//エンジンのセットアップ
			world = new b2World(worldAABB, gravity, true);

			/*************************
			 *床を作る
			**************************/
			//物体の定義
			var floorBodyDef:b2BodyDef = new b2BodyDef();
			floorBodyDef.position.Set(2.5, 3); // 床の位置
			floorBodyDef.angle = Math.PI / 24; //角度を指定

			//物体の形の定義
			var floorShapeDef:b2PolygonDef = new b2PolygonDef();
			floorShapeDef.SetAsBox(3, 0.1); //物体のサイズ
			floorShapeDef.friction = 0.3;
			floorShapeDef.density = 0;

			//物体を作る
			var floor:b2Body = world.CreateBody(floorBodyDef);
			floor.CreateShape(floorShapeDef);
			/*************************
			 *DebugDraw を有効にする
			**************************/
			var m_sprite:Sprite = new Sprite();
			var debugDraw:b2DebugDraw = new b2DebugDraw();
			debugDraw.m_sprite = m_sprite;
			debugDraw.m_drawScale = SCALE;
			debugDraw.m_fillAlpha = 0.5;
			debugDraw.m_lineThickness = 1;
			debugDraw.m_drawFlags = b2DebugDraw.e_shapeBit;
			world.SetDebugDraw(debugDraw);
			addChild(m_sprite);
		}
		private function createObject():void {
			/*************************
			 *落下物のセットアップ
			**************************/
			for (var i:uint = 0; i < 20; i++) {
				// 物体の定義を作る (x 座標と角度はランダム)
				var bodyDef:b2BodyDef = new b2BodyDef();
				bodyDef.position.Set((300 * Math.random()) / SCALE, 0);
				bodyDef.angle = Math.PI / 2 * Math.random();

				// 物体を作る
				body = world.CreateBody(bodyDef);

				// 形の定義を作る
				var bodyShape:b2CircleDef = new b2CircleDef();
				bodyShape.radius = Math.random()*0.3+0.05;
				bodyShape.density = 0.5;
				bodyShape.friction = 1;
				bodyShape.restitution = 0.3;

				// 形を物体に追加する
				body.CreateShape(bodyShape);

				// 重さ・重心を計算する
				body.SetMassFromShapes();
			}
		}
		//mouseDownHandler
		private function mouseDownHandler(event:MouseEvent):void {
			var body : b2Body = GetBodyAtMouse(event.stageX, event.stageY);
			if (body) {
				var md : b2MouseJointDef = new b2MouseJointDef();
				md.body1 = world.m_groundBody;
				md.body2 = body;
				md.target.Set(event.stageX / SCALE, event.stageY / SCALE);
				md.maxForce = 500.0 * body.m_mass;
				md.timeStep = 1 / 24;
				mouseJoint = world.CreateJoint(md) as b2MouseJoint;
				body.WakeUp();
			}
		}
		//該当オブジェクトがあるかの判定
		private function GetBodyAtMouse(stageX : Number, stageY : Number) : b2Body {
			// Make a small box.
			var mousePVec : b2Vec2 = new b2Vec2();
			var mouseXWorldPhys : Number = stageX / SCALE;
			var mouseYWorldPhys : Number = stageY / SCALE;

			mousePVec.Set(mouseXWorldPhys, mouseYWorldPhys);
			var aabb : b2AABB = new b2AABB();
			aabb.lowerBound.Set(mouseXWorldPhys - 0.001, mouseYWorldPhys - 0.001);
			aabb.upperBound.Set(mouseXWorldPhys + 0.001, mouseYWorldPhys + 0.001);

			// Query the world for overlapping shapes.
			var k_maxCount : int = 10;
			var shapes : Array = new Array();
			var count : int = world.Query(aabb, shapes, k_maxCount);
			var body : b2Body = null;
			for (var i : int = 0;i < count; ++i) {
				if (shapes[i].m_body.IsStatic() == false) {
					var tShape : b2Shape = shapes[i] as b2Shape;
					var inside : Boolean = tShape.TestPoint(tShape.m_body.GetXForm(), mousePVec);
					if (inside) {
						body = tShape.m_body;
						break;
					}
				}
			}
			return body;
		}
		//mouseUphandler
		private function mouseUpHandler(event:MouseEvent):void {
			if(mouseJoint){
				world.DestroyJoint(mouseJoint);
				mouseJoint = null;
			}
		}
		//mouseMoveHandler
		private function mouseMoveHandler(event:MouseEvent):void {
			if (mouseJoint) {
				var p2 : b2Vec2 = new b2Vec2(event.stageX / SCALE, event.stageY / SCALE);
				mouseJoint.SetTarget(p2);
			}
		}
		//enterFrameHandler
		private function enterFrameHandler(event:Event):void {
			world.Step(1 / 24, 10);
		}
	}
}

関連する投稿

• Box2DFlashAS3を使ってみる[Box2D-1] (0)
• 物理エンジン[Box2D]を使ったの作品紹介 (0)
• FlashDevelopの便利ショートカット (0)
• FlashDevelopのインストールと初期設定 (2)
• ムービークリップを徐々に加速させる[3-7] (0)

複雑な物理計算を処理してくれるライブラリーとして注目を浴びているのが、Box2DFlashAS3です。
とても便利なライブラリーでFlash、ActionScriptの世界を楽しくさせてくれますが、その反面Box2Dを使いこなすまでには、一筋縄ではいかなく中々難しいのが現状です。
しかし覚えて損はしないライブラリーなのは間違いないので、理解するよりまずは使っていくことにしました。

まずはBox2Dのライブラリーをダウンロードしてきて、解凍したフォルダ内のBox2Dフォルダ、Generalフォルダ、TestBedフォルダ（要らないかも）をflaファイルまたはasファイルと同じ階層に置き、アクションスクリプトにインポートさせます。
その前にBox2Dを体験したい場合は解凍したフォルダ内のHelloWorld.swf、PhysTest.swfなどを開くと体験することができます。

//インポート
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Common.Math.*;
import Box2D.Dynamics.*;
import Box2D.Dynamics.Joints.*;
import General.*;

ここからはザクっとBox2Dを使うための簡単な説明を。。。
Flashの中にBox2Dと言う世界を作ります。
地面、左右の壁、天井などを設定することにより、世界を大きさ、サイズを決めることができます。
またその中に物体を作ることにより、重力、反発、摩擦などが発生します。

Box2Dの世界をつくる

//外枠の定義
var worldAABB:b2AABB = new b2AABB();
worldAABB.lowerBound.Set(-100, -100);
worldAABB.upperBound.Set(100, 100);
//重力の定義
var gravity:b2Vec2 = new b2Vec2(0, 10);
//エンジンのセットアップ
world = new b2World(worldAABB, gravity, true);

地面をつくる

//物体の定義
var floorBodyDef:b2BodyDef = new b2BodyDef();
floorBodyDef.position.Set(2.5, 3); // 床の位置
floorBodyDef.angle = Math.PI / 24; //角度を指定
//物体の形の定義
var floorShapeDef:b2PolygonDef = new b2PolygonDef();
floorShapeDef.SetAsBox(3, 0.1); //物体のサイズ
floorShapeDef.friction = 0.3;
floorShapeDef.density = 0;
//物体を作る
var floor:b2Body = world.CreateBody(floorBodyDef);
floor.CreateShape(floorShapeDef);

落下物をつくる

for (var i:uint = 0; i < 20; i++) {
    // 物体の定義を作る (x 座標と角度はランダム)
    var bodyDef:b2BodyDef = new b2BodyDef();
    bodyDef.position.Set((300 * Math.random()) / SCALE, 0);
    bodyDef.angle = Math.PI / 2 * Math.random();
    // 物体を作る
    body = world.CreateBody(bodyDef);
    // 形の定義を作る
    var bodyShape:b2CircleDef = new b2CircleDef();
    bodyShape.radius = Math.random()*0.3+0.05;
    bodyShape.density = 0.5;
    bodyShape.friction = 1;
    bodyShape.restitution = 0.3;
    // 形を物体に追加する
    body.CreateShape(bodyShape);
    // 重さ・重心を計算する
    body.SetMassFromShapes();
}

基本は上記の世界の設定、床など（固定物）の設定、落下物の設定が必要で、さらにエンターフレームやデバックドローの設定をするとBox2Dの世界が開けます。
以下はカスタムクラスでのコードになりますので、Flashを使う場合はflaファイルのドキュメントプロパティーにカスタムクラス名を指定して下さい。

package {
	//インポート
	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	import Box2D.Dynamics.*;
	import Box2D.Dynamics.Joints.*;
	import General.*;
	import flash.display.Sprite;
	import flash.events.Event;

	/**************************
	 * ADD CHILD = AS3
	 * http://www.addchild.net/
	 * Tatsuya Nishino
	***************************/
	//コンスラクタ
	public class Box2D1 extends Sprite {
		//インスタンスプロパティー
		private const SCALE:Number = 100; // 物理エンジン内の1mを表すためのピクセル数
		private var world:b2World; // 物理エンジンの管理クラス
		private var body:b2Body; // 本体

		// メソッド
		public function Box2D1() {
			// 初期化
			init();
			createObject();

			// 毎フレームの処理
			addEventListener(Event.ENTER_FRAME, enterFrameHandler);
		}
		// init
		private function init():void {
			/*************************
			 *物理エンジンのセットアップ
			**************************/
			//外枠の定義
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.lowerBound.Set(-100, -100);
			worldAABB.upperBound.Set(100, 100);

			//重力の定義
			var gravity:b2Vec2 = new b2Vec2(0, 10);

			//エンジンのセットアップ
			world = new b2World(worldAABB, gravity, true);

			/*************************
			 *床を作る
			**************************/
			//物体の定義
			var floorBodyDef:b2BodyDef = new b2BodyDef();
			floorBodyDef.position.Set(2.5, 3); // 床の位置
			floorBodyDef.angle = Math.PI / 24; //角度を指定

			//物体の形の定義
			var floorShapeDef:b2PolygonDef = new b2PolygonDef();
			floorShapeDef.SetAsBox(3, 0.1); //物体のサイズ
			floorShapeDef.friction = 0.3;
			floorShapeDef.density = 0;

			//物体を作る
			var floor:b2Body = world.CreateBody(floorBodyDef);
			floor.CreateShape(floorShapeDef);
			/*************************
			 *DebugDraw を有効にする
			**************************/
			var m_sprite:Sprite = new Sprite();
			var debugDraw:b2DebugDraw = new b2DebugDraw();
			debugDraw.m_sprite = m_sprite;
			debugDraw.m_drawScale = SCALE;
			debugDraw.m_fillAlpha = 0.5;
			debugDraw.m_lineThickness = 1;
			debugDraw.m_drawFlags = b2DebugDraw.e_shapeBit;
			world.SetDebugDraw(debugDraw);
			addChild(m_sprite);
		}
		private function createObject():void {
			/*************************
			 *落下物のセットアップ
			**************************/
			for (var i:uint = 0; i < 20; i++) {
				// 物体の定義を作る (x 座標と角度はランダム)
				var bodyDef:b2BodyDef = new b2BodyDef();
				bodyDef.position.Set((300 * Math.random()) / SCALE, 0);
				bodyDef.angle = Math.PI / 2 * Math.random();

				// 物体を作る
				body = world.CreateBody(bodyDef);

				// 形の定義を作る
				var bodyShape:b2CircleDef = new b2CircleDef();
				bodyShape.radius = Math.random()*0.3+0.05;
				bodyShape.density = 0.5;
				bodyShape.friction = 1;
				bodyShape.restitution = 0.3;

				// 形を物体に追加する
				body.CreateShape(bodyShape);

				// 重さ・重心を計算する
				body.SetMassFromShapes();
			}
		}
		//enterFrameHandler
		private function enterFrameHandler(event:Event):void {
			world.Step(1 / 24, 10);
		}
	}
}

関連する投稿

• Box2DFlashAS3を使ってマウス操作する[Box2D-2] (0)
• 物理エンジン[Box2D]を使ったの作品紹介 (0)
• FlashDevelopの便利ショートカット (0)
• FlashDevelopのインストールと初期設定 (2)
• ムービークリップを徐々に加速させる[3-7] (0)

よく見かけてやってみたいと思っていましたが、実際やってみるとすごい苦労しました。
激しく上に掘り投げるとどっか行ってしまいます…

制作日

2010年１月8日

使用ツール

ActionScript 3.0｜FlashDevelop｜Box2DFlashAS3 ver2.0.1

まだまだ勉強不足で色んなサイトを巡回し、実験してはダメの繰り返しで取り合えずではありますが、こんな感じに仕上げました。
コードはとても見せれたもんではないので、もう少し勉強してからと言うことでお願いします。

関連する投稿

• Box2DFlashAS3を使ってマウス操作する[Box2D-2] (0)
• Box2DFlashAS3を使ってみる[Box2D-1] (0)
• ムービークリップを徐々に加速させる[3-7] (0)
• ムービークリップをボタンとして使う[2-4] (0)
• ムービークリップをボタンとして使う[2-3] (0)

『Math.random() を使ってランダムに色を変える方法』で利用したBall.asを今回も使ってステージにボールを配置します。
X軸はステージの1/5の位置に配置し、Y軸をステージの真ん中に配置させます。（サイズ50と青色を指定）

//Ball.asを読み込み
var ball:Ball = new Ball(50, 0x0000ff);
addChild(ball);
ball.x = stage.stageWidth / 5;
ball.y = stage.stageHeight / 2;

これでステージにボールが表示されるようになったと思いますので、次にボールを動かすスクリプトを書きます。
今までやってきたムービークリップの動かし方にさらに加速度のプログラムを足します。

//イベントリスナー
ball.addEventListener(Event.ENTER_FRAME, loop);

function loop(event:Event):void{
	ball.x += 1;
}

上記が従来ムービークリップのX軸に1を足して動かす方法ですが、下記は1の変わりに変数（vx)を用いてX軸の数値に置き換え、さらに加速変数（ax)をフレームが読み込まれる度に足して変数vxの数値を増やしていく感じになります。

//イベントリスナー
ball.addEventListener(Event.ENTER_FRAME, loop);

function loop(event:Event):void{
	vx += ax;
	ball.x += vx;
}

こうすることにより、ボールがどんどん加速しているように見えます。
今回は加速度を1に設定しましたが、数値を変えれば加速度を調整できます。
この加速度は色々な場面でも使うことができるので、徐々に何かをしたい時になどに使うと便利です。

//Ball.asを読み込み
var ball:Ball = new Ball(50, 0x0000ff);
//インスタンスプロパティー
var vx:Number = 0; //初期値
var ax:Number = 1; //加速度

addChild(ball);
ball.x = stage.stageWidth / 5;
ball.y = stage.stageHeight / 2;
//イベントリスナー
ball.addEventListener(Event.ENTER_FRAME, loop);

function loop(event:Event):void{
	vx += ax;
	ball.x += vx;
}

ボールがなくなってたらもう一度更新して下さい。

関連する投稿

• クラス参照でステージにムービークリップを配置[3-1] (0)
• カスタムクラスでステージにムービークリップを配置[3-3] (0)
• クラス参照でステージにムービークリップを配置[3-2] (0)
• Tweenクラスでムービークリップをトゥイーンさせる[3-4] (0)
• ムービークリップをボタンとして使う[2-4] (0)

FlashDevelopでの作業効率を上げる為に、覚えておくと便利なショートカットを忘れない為にメモします。
あくまで個人の判断ですので、その他にも便利と思うショートカットが一杯あると思います。

基本ショートカット

作業補助

便利と思うショートカットが見つかったら追記していきます。

関連する投稿

• FlashDevelopのインストールと初期設定 (2)
• Box2DFlashAS3を使ってマウス操作する[Box2D-2] (0)
• Box2DFlashAS3を使ってみる[Box2D-1] (0)
• 物理エンジン[Box2D]を使ったの作品紹介 (0)
• ムービークリップを徐々に加速させる[3-7] (0)

ランダムにボールの色を変える前に、準備としてBallクラス（Ball.as）を作成しといて外部ファイルから読み込んでボールを作ります。
※Ball.asを使いたいファイルと同階層に配置してください。

package {
	//インポート
	import flash.display.Sprite;

	//コンスラクタ
	public class  Ball extends Sprite{
		//インスタンスプロパティー
		public var radius:Number;
		public var color:uint;

		//メソッドメニュー
		public function Ball(radius:Number, color:uint) {
			this.radius = radius;
			this.color = color;
			init();
		}

		//メソッド
		public function init():void{
			graphics.beginFill(color);
			graphics.drawCircle(0, 0, radius);
			graphics.endFill();
		}
	}
}

radius（ボールのサイズ）とcolor（ボールの色）をあらかじめ変数に置き換えて、Ball.asを読み込んでボールを作る時に指定します。

表示させていファイルにNew演算子を使ってボールを作ります。この時にサイズと色を指定します。
今回はサイズ50と色を取り合えず青にします。

//Ball.asを読み込み
var ball:Ball = new Ball(50, 0x0000ff);
addChild(ball);
ball.x = stage.stageWidth / 2;
ball.y = stage.stageHeight / 2;

これでパブリッシュするとステージの真ん中に青のボールが表示されると思います。
では、次に色をランダムにします。
ランダムにするには、Math.random()を使うので、これを利用して、『Math.random() * 0xffffff』とします。
これで色がランダムに変わります。

//Ball.asを読み込み
var ball:Ball = new Ball(50, Math.random() * 0xffffff);
addChild(ball);
ball.x = stage.stageWidth / 2;
ball.y = stage.stageHeight / 2;

上記はランダムを取り入れた、完成版です。

再読み込みすればボールの色が変わります。
日本の国旗になった人はすごいラッキーな人です。

関連する投稿

• クラス参照でステージにムービークリップを配置[3-2] (0)
• ムービークリップを徐々に加速させる[3-7] (0)
• クラス参照でステージにムービークリップを配置[3-1] (0)
• カスタムクラスでステージにムービークリップを配置[3-3] (0)
• Tweenクラスでムービークリップをトゥイーンさせる[3-4] (0)

[1-8]でフェードインさせるアクションスクリプトとよく似た感じになりますが、TransitionManagerクラスを使用すればもっと違う表現の効果をあたえることができます。

タイムライン上にあるアクションスクリプトに、まずTweenクラスとeasingクラスをインポートさせ、使えるようにします。
（[3-4]同様）

//クラスのインポート
import fl.transitions.*;
import fl.transitions.easing.*;

[3-3]でカクスタムクラスを使ってステージ上にムービークリップを配置しているアクションスクリプトのBallをimgに変更してステージに表示させます。
（[1-8]同様にステージにimg_mcのムービークリップを用意している前提です）

// imgクラスからインスタンスを作る
var img:img_mc = new img_mc();
addChild(img);
img.x = stage.stageWidth / 2;
img.y = stage.stageHeight / 2;

表示させるムービークリップにトランジション効果を指定します。

//トランジション効果
TransitionManager.start(img,{
						type:Blinds, //トランジションタイプ
						direction:Transition.IN,  //transition効果の方向
						duration:1,  //動作時間
						easing:None.easeNone, //イージング設定
						numStrips:10,
						dimension:0
						});

addChildで画像が読み込まれると同時に、トランジション効果が始動する感じになります。

//クラスのインポート
import fl.transitions.*;
import fl.transitions.easing.*;

// imgクラスからインスタンスを作る
var img:img_mc = new img_mc();
addChild(img);
img.x = stage.stageWidth / 2;
img.y = stage.stageHeight / 2;

//トランジション効果
TransitionManager.start(img,{
						type:Blinds,
						direction:Transition.IN,
						duration:1,
						easing:None.easeNone,
						numStrips:10,
						dimension:0
						});

asファイルに関しては[3-3]と同じになりますので、省略します。
動作が終わっている場合は再読み込みして下さい。

トランジションの種類

関連する投稿

• ムービークリップを徐々に加速させる[3-7] (0)
• ムービークリップをボタンとして使う[2-4] (0)
• ムービークリップをボタンとして使う[2-3] (0)
• ムービークリップをボタンとして使う[2-2] (0)
• ムービークリップをボタンとして使う[2-1] (0)

Flashのライブラリーに画像を置かずに、外部から画像がある場所を指定して画像を読み込みます。
こうすることにより、画像のみ変更する時に、イチイチFlashを編集しなくて済むので、非常に有効的な方法だと思います。

まず表示させたい画像をフォルダにまとめて、swfファイルと同じ階層に配置します。（今回は3枚の外部画像を読み込んでみたいと思います。）

画像の用意ができたら、アクションスクリプトを書いていきます。
Actionscript3.0からなんですが、外部から画像を読み込むときにLoaderクラスと言う便利な機能が追加されました。
そこでnew演算子を使って、変数myLoaderに新しくLoaderクラスを読み込ませます。しかしこれだけでは、画像がどこにあるのか分からないので画像がある場所をURLRquestクラスを使って指定し、変数ImgUrlに置き換えてからmyLoaderにImgUrlをロードさせるカラクリになります。
あとはaddChilで表示させます。

//Loaderオブジェクト生成
var myLoader:Loader = new Loader();
//ファイルパス読み込み
var ImgUrl:URLRequest = new URLRequest("images/img1.jpg");
//画像読み込み
myLoader.load(ImgUrl);
addChild(myLoader);

しかし今回は複数画像を読み込むようにする為、画像の場所を指定したパスを配列に格納してから使うことにします。
さらに読み込んだ画像ごとにy軸の位置をずらします。

//配列
var url:Array = new Array();
url[0] = "images/img1.jpg";
url[1] = "images/img2.jpg";
url[2] = "images/img3.jpg";

for (var i:int = 0; i < 3; i++) {
	//Loaderオブジェクト生成
	var myLoader:Loader = new Loader();
	//ファイルパス読み込み
	var ImgUrl:URLRequest = new URLRequest(url[i]);

	//画像読み込み
	myLoader.load(ImgUrl);
	myLoader.y = 60 * i;
	addChild(myLoader);

}

関連する投稿

• クラス参照でステージにムービークリップを配置[3-2] (0)
• ムービークリップを徐々に加速させる[3-7] (0)
• ムービークリップをボタンとして使う[2-4] (0)
• ムービークリップをボタンとして使う[2-3] (0)
• ボタンに連動してムービークリップの表示を変える[2-7] (0)

ActionScript3.0を勉強するにあたり、当たり前のようにAdobe社のFlashを使っていましたが、実はFlash CS3以降でないとActionScript3.0を使うことができません。
そこでFlash CS3以降の環境がなくてもActionScript3.0が使える環境を導入することにしました。

他にも色々やりかたがあるかとは思いますが、ここではFlashDevlopを使ってActionScript3.0を書き、Flex SDKでパブリッシュする方法の設定をしたいと思います。間違ってたらすいません。
上記の書き方では何かややこしい設定っぽく感じますが、FlashDevlopにFlex SDKがここにありますよって教えてあげるだけでいいんです。

簡単に作業手順を紹介します。（現バージョンはFlashDevelop 3.0.6 RTMとFlex 3.4 SDKです）
まずFlashDevelop 3.0.6 RTM（下のDownloadコーナーからできます）とAdobe – Flex 3 SDK（Flex 3.4 SDKのテキストリンクからできます）をダウンロードします。

ダウンロードが完了したら、ダウンロードした場所にFlashDevelop-3.0.6-RTM.exeとfd3rc1.zipがあると思いますので、まずはFlashDevelop-3.0.6-RTM.exeクリックしてインストールをします。
セットアップが完了したら、fd3rc1.zipを解凍してマイコンピュータのCドライブに移動します。（Program Filesの中に置くとなぜか動かない）
移動したら、flex_sdk_3.4フォルダの中にあるbinフォルダの中にjvm.configがあるので、一部書き換えます。

//現状
# Arguments to VM

java.args=-Xmx384m -Dsun.io.useCanonCaches=false

//書き換え後
# Arguments to VM

java.args=-Xmx384m -Dsun.io.useCanonCaches=false -Duser.language=en -Duser.region=JP

これでFlexSDKの設定が完了ですので、次にFlashDevelopの設定をします。

デスクトップにあるFlashDevlopのアイコンをクリックして立ち上げます。
立ち上がったら、メニューバーのTools→Program Settingsを選択し、さらに左側のプラグイン一覧にAS3Contextを選択します。
するとメインエリアにLanguageの中にFlex SDK Locationがあるので、ここに先程移動したflex_sdk_3.4のパスを指定します。（C:\flex_sdk_3.4な感じ）

ついでにFlashDevlopの一部を日本語対応にします。
FlashDevelop 3.0.0 RC2 のメニューを日本語化してみる | logicalyze::blogで公開しているファイルをダウンロードし解凍したフォルダの中にある.xmlファイルをすべてを、インストールしたFlashDevlopフォルダの中にあるSettingフォルダの中に上書きします。
これで一部ですが、日本語になってると思います。

次にtrace()を使っても表示されるようにデバック版Flash Playerにします。
flex_sdk_3.4フォルダの中にruntimesフォルダがあり、その中にplayerフォルダがるので自分の環境にあったPlayerを選択して、すべてのアイコンをクリックして下さい。
これでOutPutパネルにtrace()した文字が表示されるはずです。

以上で簡単ですが、説明終わります。
基本、自分用の作業メモですので、あしからず。。。

関連する投稿

• FlashDevelopの便利ショートカット (0)
• Box2DFlashAS3を使ってマウス操作する[Box2D-2] (0)
• Box2DFlashAS3を使ってみる[Box2D-1] (0)
• 物理エンジン[Box2D]を使ったの作品紹介 (0)
• ムービークリップを徐々に加速させる[3-7] (0)

[3-3]でステージに配置したムービークリップにトゥイーンモーションを指定してます。

タイムライン上にあるアクションスクリプトに、まずTweenクラスとeasingクラスをインポートさせ、使えるようにします。

//クラスのインポート
import fl.transitions.Tween;
import fl.transitions.easing.*;

Tweenクラスに関しては、もっと奥が深いので今回は取り合えず簡単に使えるやり方にします。
詳しくはもっと勉強してからと言うことで…

[3-3]でカクスタムクラスを使ってステージ上にムービークリップを配置してますので、さらにTweenクラス用のアクションスクリプトを追記します。

// モーション設定
var mcTween:Tween;
mcTween = new Tween(my_mc, "y", Bounce.easeOut, 0, (stage.stageHeight - my_mc.height/2), 5, true);

変数mcTweenをTweenクラスを指定して宣言し、new演算子でTweenクラスでトゥイーンさせる処理を書きます。
順番としては
①トゥイーンさせるインスタンス名
②変化させたいプロパティ
③アニメーションの種類
④開始値
⑤終了値
⑥継続時間
⑦継続時間の単位
になります。
アニメーションの種類に関しては、あとでまとめます。

今回はムービークリップのY軸にイージング終了時にバンドさせる処理としてます。
カスタムクラスでステージ配置されたムービークリップは初期表示位置x軸はステージ幅の1/10で表示されるが、Y軸に関してはトゥイーンで0からステージの高さ（ステージいっぱい）に移動して、終了時にバウンドするせる感じになります。

//クラスのインポート
import fl.transitions.Tween;
import fl.transitions.easing.*;

// Ballクラスからインスタンスを作る
var my_mc:Ball = new Ball();
addChild(my_mc);
my_mc.x = stage.stageWidth / 10;

// モーション設定
var mcTween:Tween;
mcTween = new Tween(my_mc, "y", Bounce.easeOut, 0, (stage.stageHeight - my_mc.height/2), 5, true);

asファイルに関しては[3-3]と同じになりますので、省略します。

アニメーションの種類

イージンの種類

関連する投稿

• ムービークリップを徐々に加速させる[3-7] (0)
• クラス参照でステージにムービークリップを配置[3-2] (0)
• クラス参照でステージにムービークリップを配置[3-1] (0)
• カスタムクラスでステージにムービークリップを配置[3-3] (0)
• ムービークリップをボタンとして使う[2-4] (0)