ADD CHILD = AS3

Box2DFlashAS3（ver2.0.2）で物体をマウス操作する

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

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

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

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

続きはこちら »

Box2DFlashAS3（ver2.0.2）を使って物理エンジンを体験する

複雑な物理計算を処理してくれるライブラリーとして注目を浴びているのが、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と言う世界を作ります。
地面、左右の壁、天井などを設定することにより、世界を大きさ、サイズを決めることができます。
またその中に物体を作ることにより、重力、反発、摩擦などが発生します。

続きはこちら »

外部から読み込んだ画像（制作実績）に物理エンジンを設定してみる

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

制作日

2010年１月8日

使用ツール

ActionScript 3.0｜FlashDevelop｜Box2DFlashAS3 ver2.0.1

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

カスタムクラスで読み込んだムービークリップに加速度をつけて移動させる

『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;

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

続きはこちら »

Flash Developで良く使うショートカット一覧

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

基本ショートカット

続きはこちら »

ランダムにボールの色を変えてみる『Math.random() * 0xffffff』

ランダムにボールの色を変える前に、準備として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を読み込んでボールを作る時に指定します。

続きはこちら »

ステージに配置したムービークリップにTransitionManagerクラスを使ってトランジション効果をつける

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

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

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

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

続きはこちら »

外部にあるイメージ画像をLoaderクラスを使って読み込む

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);

続きはこちら »

FlashDevlopを導入する為の作業メモ

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の設定をします。

続きはこちら »

ステージに配置したムービークリップにTweenクラスを使ってトゥイーンさせる

[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クラスでトゥイーンさせる処理を書きます。
順番としては
①トゥイーンさせるインスタンス名
②変化させたいプロパティ
③アニメーションの種類
④開始値
⑤終了値
⑥継続時間
⑦継続時間の単位
になります。
アニメーションの種類に関しては、あとでまとめます。

続きはこちら »