パンダゼロと覚える ActionScript3.0

• 謎の生物との出会いとAS3の環境整備
• いちばん簡単なプログラムハローワールドを学ぶ
• Flashと表示リスト

本連載では、Flash/Flex/AIR で使われる「ActionScript3.0」を会話形式で気軽に学ぶことを目標にしています。謎の生物「パンダゼロ」と一緒にActionScript3.0を覚えましょう。今回は、Flashと表示リストの仕組みを学びます。

これまでのあらすじと登場人物の紹介

ある日の夕暮れ。Flashで何か作ってみたい少女「ふみか」の部屋に不思議な生物「パンダゼロ」がやってきました。そして、パンダゼロは、親切に ActionScript3.0を教えてくれるのです。

【登場人物】

	パンダゼロ	謎の生物。AS3.0が得意。
	ふみか	Flashで何か作ってみたいと思ってAS3を始める。
	ウッシー	パンダゼロの宿敵。

ウッシー現る！

	パンダゼロ「ふみかちゃん、こんにちは。今日も、まったりとActionScript3.0を学んでいきましょうね。」
	ふみか「うん。今日もよろしく。」

と、その時、天井から不思議な丸い生物がさらに落ちてきました。

ウッシー「何をまったりとやっておる！！このペースでは、１年経っても連載が終わらないぞ！もっとスパルタにしないとダメだ！！」

そう言って、この丸い物体は、パンダゼロを押しつぶしてペチャンコにしてしまった。そして言いました。

	ウッシー「ふみか、今日は、ワシが徹底的に教えてやるかならな！覚悟しておけよ。」
	ふみか「なに？！今日は、講師交代ってこと？！」
	ウッシー「今日は、Flashの表示リストについて教えてやるぞ！」

その前におさらい

	ウッシー「先日、ハローワールドをやったそうだな。ちょっと復習してみるか。」
	ふみか「うん。」

ウッシー「以下が、ハローワールドのスクリプトだ。Hello.as という名前で保存しよう。(ちょっと違うけどほぼ同じはず。)」

file: Hello.as

package {
	import flash.display.Sprite;
	import flash.text.TextField;

	public class Hello extends Sprite
	{
		public var txt:TextField; // TextField を宣言
		public function Hello()
		{
			// TextField の作成
			txt = new TextField();
			txt.text = "Hello World!";
			// 画面に表示する
			addChild(txt);
		}
	}
}

ウッシー「これをコンパイルするには、コマンドラインから次のように入力する。（もし、Hello.as を c:\AS3 というディレクトリに作成した場合 ）」

cd C:\AS3
mxmlc Hello.as

ウッシー「ちなみに、Flex Builder を使っている人なら、SDKが以下のパスに入っている。わざわざ、無料のSDKをダウンロードしなくてもコンソールから使えるぞ。」

(Windowsの場合)
C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\bin

※これをコマンドラインから使えるようにするには、パスを通さないといけません。詳しくは、第１回を参考にどうぞ。

表示リストについて

ウッシー「さて、前回は、ActionScript3.0では、package や class という枠の中にプログラムを書くというところを見たのだな。ところで、ハローワールドのコンストラクタ（初期化処理）を見てみよう。」

ふみか「コンストラクタって、クラス名と同じ名前の関数 Hello の部分のことよね？」

ウッシー「そうじゃ。次の部分だな。ここでは、TextFieldを作成して、これを画面に表示している部分だ。addChild()というところが、今回の肝となる部分じゃ。」

// TextField の作成
txt = new TextField();
txt.text = "Hello World!";
// 画面に表示する
addChild(txt);

ふみか「画面に表示するのに、addChild（＝子供を追加する）ってなんか不思議な気がするわ。」

ウッシー「そう！よく気づいたな。Flash では、画面に複数の透明なシート（のようなもの）を重ねることができるようになっているのだ。」

Flashではシート(のようなもの)をいくつも重ねることができる

ふみか「アニメのセル画みたいなものね。」

ウッシー「そう、このセル画のようなものを【表示オブジェクト】と呼ぶが、この上に何かを重ねるとき、上のように、addChild()を使うんだ。」

ふみか「へぇ～。」

ウッシー「文字じゃ面白くないだろう。今度は、絵をいくつも重ねてみよう。以下のソースを"Kasaneru.as"という名前で保存しろ。自分で入力するのも良いが、ささっと、コピペしてしまうのが早いだろうな。」

file:Kasaneru.as

package {
	import flash.display.Graphics;
	import flash.display.Sprite;

	public class Kasaneru extends Sprite {
		// スプライトを3つ宣言
		public var sp1:Sprite;
		public var sp2:Sprite;
		public var sp3:Sprite;

		public function Kasaneru() {
			// スプライトを3つ作る
			sp1 = new Sprite();
			sp2 = new Sprite();
			sp3 = new Sprite();
			// 赤色の四角を描画
			sp1.graphics.beginFill(0xFF0000);
			sp1.graphics.drawRect(0,0,200,200);
			sp1.graphics.endFill();
			// 青色の円を描画
			sp2.graphics.beginFill(0x0000FF);
			sp2.graphics.drawCircle(150,150,100);
			sp2.graphics.endFill();
			// 黄色の四角を描画
			sp3.graphics.beginFill(0xFFFF00);
			sp3.graphics.drawRect(150,150,200,200);
			sp3.graphics.endFill();
			// 表示リストにスプライトを追加
			addChild(sp1);
			addChild(sp2);
			addChild(sp3);
		}
	}
}

ウッシー「これをコンパイルするには、コマンドラインから次のように入力しよう。」

mxmlc Kasaneru.as

ふみか「わっ！図形が出た！」

実行してみたところ

ウッシー「どうだ。これは、Sprite（スプライト）を３つ作り、そこに色とりどりの図形を描いて、addChild()で表示してみたんだ。」

ふみか「スプライトっていうのは何？」

ウッシー「"Hello World!"の時にみた TextField も、ここで使った Sprite も画面に何かしらのものを表示する点では同じだ。しかし、TextField には、文字を表示することができて、Sprite には、図形や画像を表示することができるというように、役割分担されているんだ。つまり、Sprite を使うと、画像や図形を表示できるということを覚けばいいだろう。」

ふみか「なるほど。」

	ウッシー「addChild()で画面にオブジェクトを表示できるというのが、表示リストだというのが分ったか？」
	ふみか「うん。なんとなく分かったよ。」
	ウッシー「それでは、次に進もう。」

画像の表示

ウッシー「ここまで、図形を描画してきたが、Flashでは画像を読み込んで表示することもできる。次に、画像を表示する方法を覚えようか。」

ふみか「やった！ようやく、それっぽくなって来た！」

ウッシー「ActionScript3.0では、Flashファイル(SWF形式のファイル)に画像を埋め込んでおいてこれを表示させる方法と、サーバーにある画像を読み込んで表示する方法の２つが可能だ。ここでは、Flashファイルに画像を埋め込む方法を紹介しよう。」

ふみか「何を表示するの？」

ウッシー「それは、もちろんワシの顔に決まっているだろう。以下の画像を右クリックしてポップアップメニューから『画像を保存』をクリックしよう。そして、usi100.gifという名前で保存しよう。」

サンプル画像

ウッシー「細かいことは、おいおい解説することにして、ここでは、以下のソースを、"Gazou.as" という名前で保存しよう。」

file:Gazou.as

package {
	import flash.display.Bitmap;
	import flash.display.Sprite;

	public class Gazou extends Sprite {
		// 画像埋め込みの宣言
		[Embed(source='usi100.gif')]
		private var ImageUsi100:Class;

		public function Gazou() {
			var bmp:Bitmap = new ImageUsi100() as Bitmap;
			addChild(bmp);
		}
	}
}

ウッシー「画像ファイルとActionScript3.0のファイル"Gazou.as"は、同じディレクトリにコピーしておくのだぞ。もう、コンパイルの仕方は大丈夫かな？」

>mxmlc Gazou.as

ふみか「もう、真っ黒のコンソール画面にも慣れてきたよ。えいっ！できた。」

画像を表示するサンプルを実行したところ

ふみか「わぁ、画像が出た！」

ウッシー「以下のようにスクリプトを書くと、Flashファイルの中に、画像を埋め込むことができるのだ。そして、ImageUsi100 という名前で画像を利用できるようになる。」

// 画像埋め込みの宣言
[Embed(source='usi100.gif')]
private var ImageUsi100:Class;

ふみか「なるほど。それで埋め込んだ画像をどうやって使うの？」

ウッシー「うむ。埋め込んだ画像は、その直後で宣言したクラスと関連づけられるのだ。そのため、ImageUsi100 という名前のクラスならば、次のようにして、作成し画面に表示できる。Sprite と同じように画面に表示するときは、addChild() を使う。」

var bmp:Bitmap = new ImageUsi100() as Bitmap;
addChild(bmp);

画像を動かしてみよう

ふみか「でも、絵が１つだけじゃ、ちょっと寂しいな。もっと賑やかにしてよ！」

ウッシー「そうだな。じゃぁ、ワシの顔をもっとたくさん作って、画面中を動き回るようにしようか。」

ふみか「ちょっと怖いけどやってみたい！！」

ウッシー「それでは、以下のソースを"Gazou2.as"という名前で保存しよう。」

file:Gazou2.as

package
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;

	public class Gazou2 extends Sprite
	{
		// 画像埋め込みの宣言
		[Embed(source='usi100.gif')]
		private var ImageUsi100:Class;
		// 配列変数
		private var images:Array;
		// コンストラクタ（初期化処理）
		public function Gazou2() {
			images = new Array();
			for (var i:int = 0; i < 8; i++) {
				images[i] = makeUsi();
			}
			addEventListener(Event.ENTER_FRAME, doEnterFrame);
		}
		// 画像の生成処理
		public function makeUsi():Bitmap {
			var bmp:Bitmap = new ImageUsi100 as Bitmap;
			bmp.y = Math.random() * 300;
			bmp.x = Math.random() * 300;
			addChild(bmp);
			return bmp;
		}
		// 動かす
		public function doEnterFrame(e:Event):void {
			for each (var bmp:Bitmap in images) {
				bmp.x += Math.random() * 30;
				if (bmp.x > 400) bmp.x = 0;
				bmp.y += Math.random() * 30 - 10;
				if (bmp.y > 400) bmp.y = 0;
			}
		}
	}
}

ウッシー「そして、以下のように入力してコンパイルしよう！」

>mxmlc Gazou2.as

ふみか「えいやっ！でコンパイルして、実行すると・・・わっ、すごい動いている！！」

画像を表示する

• 以下のURLで実行結果を確認できます。
  • http://aoikujira.com/demo/hakkaku/rc/2008070..

ウッシー「さすがに、ちょっと先取りしたかな。先のソースでは、配列変数の中に画像オブジェクトをたくさん入れておいて、定期的に動かすという処理を入れているんだ。」

ふみか「え？！配列変数？よくわからないけど、ウッシーをたくさん動かすことができるのね。分かったわ。」

ウッシー「まぁ、配列変数はまたの機会に紹介しよう。」

表示リストのまとめ

	ウッシー「今日は、表示リストについて考えてみた。ここで紹介したのはほんの一握りの機能だけだがな。」
	ふみか「ウッシーがたくさん動いて楽しかったよ。」
	ウッシー「それは良かった。パンダゼロより教え方上手だったろう？」

ウッシーがそう言った時でした。それまで、ぺしゃんこになっていたパンダゼロが起き上ってきました。

パンダゼロ「ようやく回復した・・・しかし、今回はもう終わってしまったようですね。ガッカリ。皆さん、ウッシーの説明は分かりましたか？また、次回お会いしましょう。」

今回は、Flash の表示リストの仕組みを少し紹介しました。Flash では、表示オブジェクトと呼ばれる絵などのオブジェクトを addChild() メソッドで追加することにより、画面に表示できるのでした。これらは、消したり(removeChild)順番を入れ替えたり(setChildIndex)することもできます。本来、表示リストの仕組みは、ツリー状になっており、親ガメの上に、子ガメを乗せて、その上に孫ガメを乗せて…と、いくらでも入れ子状に乗せることができます。この辺りの話は、また今度することにします。

ここでは、Flash では、表示リストの仕組みがあること、Sprite などのオブジェクトを作成したら、addChild() することで画面に表示できることの二点を覚えておきましょう。