« Flash Creative Technique - vol.75
Papervision 3Dを使ってみよう(2)
| DEEP KICK.com Blog | AS3 Technical Bible - vol.02
フルスクリーンモードを備えたFLV Playerの作成 »

2008年7月30日

AS3 Technical Bible - vol.01
マウスイベントと連動した"さざ波"の作成

このエントリーをはてなブックマークに追加

w81cover.jpg web creators 2008年09月号 からスタートした新連載「ActionScript 3 Technical Bible」は「マウスイベントと連動した"さざ波"の作成」になります。

rippleMaker.png できあがりのサンプルはこちらをクリック。

はじめに、今月号(2008年09月号)の「web creators」からスタートする新連載「ActionScript 3 Technical Bible」の執筆を、ハヤシカオルが担当することになりました。先月号(2008年08月号)までおよそ2年半にわたって執筆させていただいた「Flash Creative Technique」から、さらにActionScript3を究めるためのテクニックを中心に紹介していきます。
本連載では、ActionScript1.0/2.0 で制作してきたクリエイターが、ActionScript3.0に移行するために理解しておきたい事柄について説明していければと考えています。というのはご存じのように、ActionScript1.0/2.0とActionScript3.0では、スクリプティング手法そのものが別の言語のように変わりました。よりプログラマーの世界に近づいたと言いますか、オブジェクト指向よりのスタイルになったわけです。オブジェクト指向プログラミングの開発の特徴は、誰が見ても分かりやすい合理的な継承・上書きによるクラスベースのスクリプティング、他の人が制作し公開しているライブラリやクラスの再利用のしやすさにありますが、同時にオブジェクト指向よりではなかったデザイナー向けといいますか、より直感的なスクリプティングが可能な開発言語だったActionScript1.0/2.0のおおらかなスクリプティングの特徴、ある意味なんでもありの自由きままな記述スタイルがにべもなく否定されてしまったわけです。。。古いFlash Playerに対する後方互換性の観点から、ActionScript1.0/2.0はなくなりはしないと思いますが、今後のFlashの進化とその方向性は、今後ActionScript3.0を基盤にしていくことは、歴然としています。
そのあたりの事情をふまえて、ActionScript3での開発を目指すFlashクリエイターに有用なサンプル制作を解説していく連載内容にしていきたいと思います。私自身も日々研究・格闘中です。読者のみなさんとともにじっくりと腰を据えて、Flashテクノロジーの勉強を続けていきたいと思いますので、ご期待ください。

誌面ではActionScript3の基本的な概念についてとりあげることはできなかったので、誌面では触れられなかったActionScript3の基本的な部分について補足してみます。
私は「スケルトンクラス」と呼んでいるのですが、AS3で新しくクラスを定義する場合の元となるスタイルです。下を見てください。

スケルトンクラス

package {
	
	// _________________________________
	//             1. クラスのインポート

	public class Main extends Sprite{
		
	// _________________________________
	//                 2. プロパティ設定
		
	// _________________________________
	//                 3. コンストラクタ
	
		public function Main() {
			init();
		}

	// _________________________________
	//                   4. メソッド定義

		private function init():void {

		}

	// _________________________________
	//               5. リスナー関数定義

	}
}

これをベースにして、クラスを定義します。何がなにやら分からない方は、とにかくこれはAS3で新しくクラスを定義する場合の「枕詞」だと思ってコピペしてください。人によって若干変わってきますけれども、おおよそスタンダードなスタイルではこのようなスケルトンクラスを元にして、新しくクラスを定義していくことが多いです。誌面のFrame1で作成しているRippleクラスでは、「 5. リスナー関数定義」部分は使用しないのでありませんが、このスケルトンクラスを元にして、必要な部分を追加してみました。下を見てください。

Rippleクラス(Ripple.as)

package {
	
	// _________________________________
	//             1. クラスのインポート
	
	import flash.display.Sprite;
	
	public class Ripple extends Sprite{
		
	// _________________________________
	//                 2. プロパティ設定
	
		private var radius:Number;
		private var weight:Number;
		private var color:Number;
		private var pixelHinting:Boolean = false;
		private var scaleMode:String = "none";
		
	// _________________________________
	//                 3. コンストラクタ
	
		public function Ripple (radius:Number = 100, 
				weight:Number = 10, 
				color:Number = 0xFF0000) {
			this.radius = radius;
			this.weight = weight;
			this.color = color;
			init();
		}
		
	// _________________________________
	//                   4. メソッド定義
	
		private function init():void {
			var myCircle:Sprite = new Sprite();
			myCircle.graphics.lineStyle(weight,color,1,pixelHinting,scaleMode);
			myCircle.graphics.drawCircle(0,0,radius);
			addChild(myCircle);
		}
	}
}

骨組みでしかなかったスケルトンクラスに、必要事項を記述してみました。これで立派なクラスの誕生です。一人前にクラス独自のプロパティもコンストラクタもメソッドも備えています。
ここで注目したいのはSpriteクラスです。Spriteクラスは、AS3から登場したクラスで、MovieClipからタイムライン部分を取り除いたようなクラスです。グラフィックの描画およびその他のグラフィック(表示オブジェクトといいます)を格納するためのコンテナの役割を果たします。ここではSpriteクラスを継承して、円を描画するRippleクラスを自作しています。そのためにこのコードが必要なわけです。たったそれだけのためにここまでスクリプトを記述しなくちゃならないのは、まだるっこしい以外の何者でもないと思った方は、ある意味正しいですが、しかしコードというものはいったん記述してしまえば、あとは命令を出すだけで仕事をしてくれます。例えばRippleクラスを呼び出すときに、引数に(半径、線の太さ、線のカラー)の値を指定すれば、Rippleクラスはその通りの円(Rippleクラスから生まれた実体。Rippleインスタンスと言います)を描画してくれるのです。この合理性に注目しましょう。AS3で何かを構築していくということは、すなわちFlash CS3にあらかじめビルトインされているActionScript3のクラス群やコンポーネント群の続きの物語を、ビルトインされているスクリプトと同じスタイルで自分用に記述していく作業であると言うこともできるでしょう。あらかじめ備わっているクラスや他人が制作したクラスの続きを自分用に書き繋いでいくことができるスクリプティングスタイル。それがオブジェクト指向です。自分じゃなくても他人が書いたAS3用のクラスをビルトインされているクラスの続きとして接合して、新たなクラスを作っていくことも可能です。何かと何かがつながって、新しい価値や仕事が生まれていくスクリプトの連携性の良さ。ある意味スクリプティングのネットワークといいましょうか。それまで個々人がそれぞれの能力にしたがって、自分なりのスタイルで(悪く言えば自分以外には誰も理解不可能な独りよがりなやり方)記述せざるをえなかったFlashのスクリプティングに、オブジェクト指向が持ち込まれたのは、今後のテクノロジーの進化に思いを馳せてみれば、必然といえば必然の結論ですね。
話を元に戻しますが、ビルトインのSpriteクラスを継承して、自分独自のRippleクラスを定義します。このあたり誌面でも詳しく触れたかったのですが、そうすると本来話したかったマウスイベントに辿り着けそうになかったので、割愛せざるをえませんでした。もしこれらのAS3の基本的概念について勉強したい方は、「web creators vol.69?vol.71」で私が執筆した「Flash Creative Technique - ActionScript 3.0 事始め(1)?(3)」や、AS3について書かれた参考書がいくつか出版されていますので、それらを読んでみることをおすすめします。

誌面のFrame2では、Spriteクラスから継承して作成したRippleクラスを使って、ステージ上の任意の部分をクリックするとマウスカーソルの位置が中心となるようにRippleクラスのインスタンスを作成し、同心円状に広がって消えていくサンプルについて解説しています。今回の連載では、このFrame2でやっていることが非常に重要です。ここに今回解説したかったことが集約されています。あとほおまけと言ってもいいです。詳しい解説は誌面のほうを見ていただきたいですが、AS3におけるENTER_FRAMEやMOUSE_DOWNなどのイベントの扱いについて理解するようにしてください。では今回はこのへんで。GOOD LUCK。

投稿者 kaoru : 2008年7月30日 10:56

このエントリーをはてなブックマークに追加

contents
about
contact
Photo Gallery
blog
iPhone/iPad アプリ
Kindle book
portfolio