本書はコンピュータでメールを使い、インターネット通販の経験がある程度で、しかし3DやFlashのプログラミングに興味があるという方を対象に書いた本です。本書のモットーは「ともかくやってみること」で、思いつきオーケーの実験場です。

必要なものはコンピュータだけで、後は全部、インターネットからダウンロードして入手します。何事も金が優先する世知辛い資本主義の世の中にあって、自分の労作を無償で提供してくれる世界のプログラマーの人々にひたすら感謝します。

本節ではWindowsとMacについて、必要なソフトウェアのダウンロードとインストール、設定する方法を紹介します。

・Firefoxブラウザのダウンロードとインストール
・Flash Tracerのインストール
・Java環境のチェックと、必要ならインストール
・Flex SDKのダウンロードとインストール
・デバッグ用Flash Playerのインストール
・テキストエディタのダウンロードとインストール
・Away3Dのダウンロード

ダウンロードやインストールはあまり経験がないという方を対象に、写真を多く掲載し細かく解説しています。

インスタンスを生み出すクラスファイルの書き方にはいくつか決まりがあり、初めはとっつきにくいかもしれませんが、何度も書き続けていくうちに慣れてきます。”誕生”とか”生命”という擬人化にわたしが固執するのは、わたしがその昔、プログラミングをこのようにとらえたらうまく理解できたからです。

プログラミングとは確かにコンピュータを相手にした無機的な作業ですが、インスタンスという命を生み出し、そのインスタンスにプロパティと呼ばれる特性とメソッドと呼ばれるアクションを与えることで、実現したいことを進めていく、けっこうクリエイティブな作業です。

オブジェクトの誕生

画像を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の進行方向を変えるには、if…elseを使います。

if( buta.x < 600 - buta.width) {
    buta.x += 2;
} else {
    buta.x -= 2;
}

しかしこのコードを実行してもbutaはステージ右端でぶるぶる震えて、右にも左にも進まなくなります。trace()関数を使って、buta.xを調べてみると、その原因が分かります。

なぜ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の進む方向もランダムに変わります。

ボタンは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を動かしたり止めたりする]

複数の画像の保持に配列（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の顔が変わる]

本節では移動するアニメーションのコードをメインのクラスから切り離し、別のクラスに移します。このようなとき、ムービーのスタート時、実はメインのステージが参照できていないことからエラーが発生する場合があります。

「nullのオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません」というエラー

このような場合にはaddedToStageイベントを使うか、メインのクラスからステージへの参照を渡すかして、別のクラスから必ずステージを参照できるようにする必要があります。

[サンプル：butaのダンス]