書籍「Flash 3Dで学ぶプログラミング」のサンプルを紹介します
このWebページは書籍「Flash 3Dで学ぶプログラミング」で取り上げているサンプルを実際に目で見て操作してもらうためのページです。Flashの”動くページ”はもちろん、3D表現も実際に動いているところを見るのが興味を持ってもらうための一番の方法だと思い、準備しました。
本書はコンピュータでメールを使い、インターネット通販の経験がある程度で、しかし3DやFlashのプログラミングに興味があるという方を対象に書いた本です。本書のモットーは「ともかくやってみること」で、思いつきオーケーの実験場です。
必要なものはコンピュータだけで、後は全部、インターネットからダウンロードして入手します。何事も金が優先する世知辛い資本主義の世の中にあって、自分の労作を無償で提供してくれる世界のプログラマーの人々にひたすら感謝します。
本書ではFlash CS5などの高価なツールを使用せず、すべて無償ツールを使ってActionScriptとAway3DLiteのプログラミングを学んでいくので、コンピュータに必要なソフトウェアをダウンロードし、設定する必要があります。
本節ではWindowsとMacについて、必要なソフトウェアのダウンロードとインストール、設定する方法を紹介します。
・Firefoxブラウザのダウンロードとインストール
・Flash Tracerのインストール
・Java環境のチェックと、必要ならインストール
・Flex SDKのダウンロードとインストール
・デバッグ用Flash Playerのインストール
・テキストエディタのダウンロードとインストール
・Away3Dのダウンロード
ダウンロードやインストールはあまり経験がないという方を対象に、写真を多く掲載し細かく解説しています。
本節では最も基本的なActionScriptファイル（クラスファイル）を作成して、ActionScriptのインスタンスという”生命”がコンピュータのメモリの中に”誕生”していることを確認します。
インスタンスを生み出すクラスファイルの書き方にはいくつか決まりがあり、初めはとっつきにくいかもしれませんが、何度も書き続けていくうちに慣れてきます。”誕生”とか”生命”という擬人化にわたしが固執するのは、わたしがその昔、プログラミングをこのようにとらえたらうまく理解できたからです。
プログラミングとは確かにコンピュータを相手にした無機的な作業ですが、インスタンスという命を生み出し、そのインスタンスにプロパティと呼ばれる特性とメソッドと呼ばれるアクションを与えることで、実現したいことを進めていく、けっこうクリエイティブな作業です。
オブジェクトの誕生
本節では目に見える画像をFlash Playerのステージに表示します。
画像をActionScriptのクラスに持ち込むには埋め込み方式と読み込み方式があります。埋め込み方式は次のように記述します。
[Embed(source="buta1.gif")]
var ButaImage:Class;
埋め込んだ画像は次のようにインスタンスを作成し、ステージに表示します。
var butaImage:Bitmap = new ButaImage();
addChild(butaImage);
もちろんこれだけでは何のことやら分かりません。本書ではかなりの量をさいてbuta1.gifが表示されるまでを述べているので、ぜひ読んで頭で理解して次に進んでください。
本節は本書の肝とでもいうべき非常に重要な節です。
・クラスファイルの書き方
・Flash Playerの座標システム
・表示オブジェクトの位置
・表示オブジェクトのプロパティ
・アニメーションして見える理由
・毎フレーム発生するenterFrameイベント
・イベントリスナー
といった事柄を見ていきます。
次の図はFlashムービーがアニメーションして見える理由を表しています。
フレームとフレームの間ではenterFrameというイベントが発生しています。
addEventListener(Event.ENTER_FRAME, onEnterFrame);
というコードでこのイベントのイベントリスナーをクラスのインスタンスに登録すると、その発生時にonEnterFrame()関数を自動的に呼び出せるようになります。
enterFrameイベントはFlash Playerのステージの再描画と同じタイミングで発生するので、そのタイミングでステージを移動するコードを記述すると、効率的にアニメーションが作成できます。
function onEnterFrame(evt:Event);void {
buta.x += 2;
}
本節ではbutaがステージの左右の端で跳ね返り、それを繰り返すアニメーションを作成します。そのためにはbutaを左方向に移動させる方法を知る必要があり、何よりいつ方向を変えればよいのかというタイミングを知る必要があります。
butaの進行方向を変えるには、if…elseを使います。
if( buta.x < 600 - buta.width) {
buta.x += 2;
} else {
buta.x -= 2;
}
しかしこのコードを実行してもbutaはステージ右端でぶるぶる震えて、右にも左にも進まなくなります。trace()関数を使って、buta.xを調べてみると、その原因が分かります。
なぜbutaはステージ右端で震えるのか？
butaを斜め方向に移動させるということは、1フレームでbutaをxとy方向に同時に移動させるということです。
たとえば1フレームかけて右に6、下に3移動するbutaの動きは次の図で表せます。
xとyを同時に変更すると斜めに進む
ランダムなスピードはActionScriptのMathクラスのrandom()メソッドから得ることができます。random()はたとえばくじの当たりとか敵キャラのパワーの初期値とか、プログラミングに無作為性を持ち込みたいときによく使用されます。
1から最大値maxNumまでのランダムな整数を返すメソッドはたとえば次のように定義できます。
function randomInt(maxNum:Number):int {
var resultNum:int = Math.floor(Math.random()*maxNum)+1;
return resultNum;
}
[サンプル：斜め方向にランダムなスピードで移動する]
Webブラウザのリロードボタンを何回かクリックするとbutaのスピードが変わっているのが分かります。またこのサンプルではムービーの開始時にbutaのxとy方向へのスピードもランダムに変えているので、butaの進む方向もランダムに変わります。
本節ではボタンのクリックでbutaが動いたり止まったりするクラスを作成します。
ボタンはSpriteクラスのgraphicsプロパティが持つ描画機能を使って作成します。
var sp:Sprite = new Sprite();
sp.graphics.lineStyle(6, 0x0000FF, 0.5);
sp.graphics.beginFill(0xFFCC00);
sp.graphics.drawRect(0, 0, 50, 50);
sp.graphics.endFill();
graphicsプロパティを使ったボタンの描画
１つのボタンのクリックでbutaを動かしたり止めたりするには、”今butaは動いているのかどうか”を表すBoolean型の変数を利用します。
var isOn:Boolean = false;
if(isOn){
isOn = false;
removeEventListener(Event.ENTER_FRAME, onEnterFrame);
} else {
isOn = true;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
[サンプル：ボタンを使ってbutaを動かしたり止めたりする]
本節ではbutaに複数の画像を持たせ、クリックするとその顔が変わるクラスを作成します。
複数の画像の保持に配列（Arrayクラス）を使用します。
var imageList:Array = new Array("buta1.gif", "buta2.gif", "buta3.gif");
forループという繰り返し処理の方法を使うと、配列内の各項目に効率的にアクセスできます。
for(var i:int = 0; i < 4; i++) {
trace(imageList[i]);
}
butaに複数の顔を持たせるため、ActionScriptの表示リストを利用します。butaはSpriteを継承する表示オブジェクトコンテナなので、子として複数の表示オブジェクトを持つことができます。表示オブジェクトコンテナのメソッドを使うと、一番表層の画像を変えることで、butaの顔を変えることができます。
複数の顔を持つbuta
[サンプル：クリックでbutaの顔が変わる]
本節ではこれまで作成してきたクラスの機能を結集し、４つの顔を持つ複数のbutaがステージを移動して、端に当たったとき表情を変えるSWFファイルを作成します。
本節では移動するアニメーションのコードをメインのクラスから切り離し、別のクラスに移します。このようなとき、ムービーのスタート時、実はメインのステージが参照できていないことからエラーが発生する場合があります。
「nullのオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません」というエラー
このような場合にはaddedToStageイベントを使うか、メインのクラスからステージへの参照を渡すかして、別のクラスから必ずステージを参照できるようにする必要があります。
[サンプル：butaのダンス]