以前紹介したやり方は「まずコンポーネントスタイルで作ってみて、ちょっとずつクラスを混ぜ込んでみよう」というものでしたが、今回からは「いかにスクリプトを書かずにすむようにスクリプトを書くか」です。

一見、矛盾してそうなコンセプトですが、前回よりも研究結果がだいぶ洗練されてきたので、スクリプトアレルギーの方も、よりコピペだけでまともに動かせるようにはなっていったかなと思います(^^;

作り方は違うけどできあがりは前回とほぼ同じパターン

前回は、最初クラスベースでプロジェクトを作っておいて、EasyCastingLoaderコンポーネントをステージに置くことで無理矢理コンポーネントベーススタイルに戻すという方法をとっていました。

今回は結果は同じなんですがクラスだけで完結するパターンを考えてみました。

いちおう前提としてProgressionコンポーネントスタイルガイドでの制作は出来るものとして進めていきます。

先ずはプロジェクトを作成

クラスベースでプロジェクトを作成します

普通にクラスベースのプロジェクトが出来ます。

シーンエディタでシーンを編集

コンポーネントスタイルと同じようにシーンエディタでシーンを作ります

うまくシーンが出来たら、プロジェクトで出来たフォルダに「deploy」ってフォルダがさらに出来てるのでその中に「easycasting.xml」と名前を付けて保存しましょう。

というか、ここはコンポーネントと同じです。

Index.asの編集

プロジェクトの作成の際にパッケージ名やメインクラスの設定を変えていなければ、src/classes/myproject/Index.asというファイルが出来ていると思います。

これがドキュメントクラスというやつで、まあ言ってみれば一番最初に実行される奴です。前回はステージのプロパティからこれを消して、その代わりにEasyCastingLoaderコンポーネントをステージに置くことでクラスベースからコンポーネントベースに変更していました。
今回はこのドキュメントクラスをそのまま使ってEasyCastingLoaderコンポーネントの代わりに働いてもらうことにします。

Index.asファイルを開くと、60行目あたりに

// Progression インスタンスを作成します。
prog = new Progression( "index", stage, IndexScene );

とあります。
どうやらこのあたりがクラスベースの最初に動作するとこらへんっぽいです。

そこでこのあたりを一気に書き換えてしまいます。コンポーネントベースと同じ動きにしたいので、EasyCastingLoaderクラスと言う奴を使います。
このEasyCastingLoaderクラスとはEasyCastingLoaderコンポーネントと名前が似てますが、というか「クラス」と「コンポーネント」のとこ以外は名前が一緒なので、たぶん同じような動きをするクラスなんだなと思います。
試しにIndex.asの58行目から65行目あたり（つまり最後まで）を全部削って、この一行にかえてみます。

var easyCastingLoader:EasyCastingLoader = new EasyCastingLoader(stage, new URLRequest("easycasting.xml"));

はっきり言ってしまえば、これで終わりです。あとはコンポーネントスタイルと同じように進めていったら、Flashサイトが出来てしまいます。素晴らしすぎます。Progression。

いちおう蛇足的にいろいろと書き足してみたIndex.asをまとめてさらしておきます。

package myproject {
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
	import flash.events.ProgressEvent;
	import flash.net.URLRequest;
	import jp.progression.casts.*;
	import jp.progression.commands.*;
	import jp.progression.core.debug.Verbose;
	import jp.progression.events.*;
	import jp.progression.loader.*;
	import jp.progression.*;
	import jp.progression.scenes.*;
	import jp.progression.core.ui.*;
	import jp.progression.core.utils.*;
	import flash.events.*;
 
	/**
	 * Index クラス
	 */
	public class Index extends CastDocument {
 
		/**
		 * Progression インスタンスを取得します。
		 */
		public var prog:Progression;
 
		/**
		 * コンストラクタ
		 */
		public function Index() {
		}
 
		/**
		 * SWF ファイルの読み込みが完了し、stage 及び loaderInfo にアクセス可能になった場合に送出されます。
		 */
		protected override function _onInit():void {
			// stage の初期設定を行います。
			align = StageAlign.TOP_LEFT;
			quality = StageQuality.HIGH;
			scaleMode = StageScaleMode.NO_SCALE;
 
			// 開発者用の出力を有効化します。
			//Verbose.enabled = true;
			//Verbose.filteringCommand();
 
			// コンテキストメニューを使用しない場合true
			if(false){
				Progression.uiContextMenu.enabled = false;
				CastObjectContextMenu.enabled = false;
				CastButtonContextMenu.enabled = false;
			}
 
			// Progression インスタンスを作成します。
			//prog = new Progression( "index", stage, IndexScene );
			var easyCastingLoader:EasyCastingLoader = new EasyCastingLoader(stage, new URLRequest("easycasting.xml"));
			easyCastingLoader.addEventListener(Event.COMPLETE, function(e:Event):void {
				prog = e.target.progression;
 
				// ブラウザ再生時に URL 同期を有効化します。
				prog.sync = false;
 
				//あとはお好みに応じて…
				//
				//ページ遷移中はボタンを押せないようにする場合はtrueにする
				if(1==2){
					prog.addEventListener(ProcessEvent.PROCESS_START, function(e:ProcessEvent):void {
						stage.mouseChildren = false;
					});
					prog.addEventListener(ProcessEvent.PROCESS_COMPLETE, function(e:ProgressEvent):void {
						stage.mouseChildren = true;
					});
				}
				//ブラウザ再生時URL同期をONにした場合、直リンクなどで間違ったシーンIDのときIndexSceneに飛ばす
				if(prog.sync){
					prog.addEventListener(ProcessEvent.PROCESS_ERROR, function(e:ProgressEvent):void {
						prog.goto(prog.firstSceneId);
					});
				}
 
			});
		}
	}
}

自分で紹介しておいてなんですが、今回の方法そのものにはあんまりメリットがありません。
クラスをこう書いたから、コンポーネントスタイルガイドと同じ事が出来たよ、というだけでは、じゃあ最初からコンポーネントで作ればいいからです。
ただ、ここから必要なぶんだけちょっとずつクラスを混ぜていくことになります。僕もまだ研究段階なので「こうしたほうがいいよ」いうものではないですが、「こういう方法もあるよ」というくらいのまとめ方はして、次回に発表したいと思います。

こちらからダウンロードして下さい。

CSS_Nite_OSAKA_vol16_masamune_sample.zip

サンプルはご本人の学習目的での使用においてご自由に使って頂いて結構ですが、むやみな転載や再配布はお控え下さい。

セミナーでは「とにかくこう書いてみれば動くので始めてみるきっかけになれば」という部分のみに焦点を当てて紹介しておりますので、なるべくかみ砕いて幾つかの部分であえて簡略的な表現をこころがけています。
はじめて触るぶんには必要としないであろう知識ですが、これから本格的に学習される方に向けて出来るだけ詳細な情報を補足という形でここにまとめさせていただきます。

ActionScriptのバージョンについて

• 「アクション」
  • stop(),gotoAndPlay()などのフレームの制御ができる
  • オブジェクトのドラッグドロップやボタンアクションなどのある程度のインタラクションが可能
  • 変数や条件分岐などはあったが、入力が独自インターフェースのみで直接スクリプトを記述できなかったのが特徴＜/li>
• ActionScript1
  • フレームアクション、ボタンアクション、クリップアクションなどに直接スクリプトの記述が可能になった
  • 関数が使えるようになった
  • JavaScriptライクな記述が可能になった（ECMAScript準拠）
  • 全てをオブジェクトとして扱う
• ActionScript2
  • AS1を拡張してクラスや変数の型が扱えるようになった
  • それによってよりオブジェクト指向よりな記述が可能になった
  • AS1との「ある程度」の互換性を持たせたことが特徴
  • 変数の型宣言などはデバッグには役立つが処理速度向上にはつながらなかったため、普及率としてはAS1とどっちつかず？
• ActionScript3
  • 以前までのASとは実行エンジンレベルで変更した（SWFの内部でスクリプトを処理していたActionScript Virtual Machineという実行エンジンのバージョンを従来の1から２へとメジャーバージョンアップ）
  • そのためAS1、AS2とは互換性が無い
  • 厳密な型のチェックや型宣言などにより処理速度やデバッグ環境が向上したのが主な特徴
  • ボタンアクション、クリップアクションの廃止。記述は必ずフレームアクションかasファイルに書かなければならない
  • 以上のことから初心者に少し敷居が高くなったように感じられるのは事実

個人的な見解も混ざっていますが、以上がActionScriptのバージョンの遍歴になります。

では初心者はAS2以前を勉強した方がいいのか、それともAS3を勉強した方が良いのかは意見が分かれますが、AdobeがAS2以前の実行環境を用意している以上はどちらでも良いとも言えますし、今後AS2以前の環境が残される保証がないことと今後の新機能はAS3のみに追加されることが予想されるのでなるべくAS3から始めた方が良いとも言えます。

僕個人としてはせっかく最初から覚えるならなるべくAS3からはじめたほうがいいと思っています。
理由としてはセミナーのように最初はgotoやstop、マウスアクションから入るのでとっかかりにそんなに差異がないと考えているからです。
とはいえ、初心者の方にはAS3の厳密な型のチェックが独学する上で重大な障壁になる恐れもあります。
AS2以前では当たり前だった、root.gotoAndPlay(10);とかでもAS3ではいきなり型のチェックでエラーになったりするので、これからAS3を学ばれる方は最初に「型」と「クラス」の基礎について十分理解を深めておくことをお勧めします。

addEventListenerについて

AS3では「何かあったら動く」記述はほぼ全てaddEventListenerに集約されています。
詳細は大重美幸さんの著書「ActionScript3.0入門ノート」（大重さんのサイトに飛びます。サイト内にアマゾンへのリンクがあります）が参考になるかと思います。大重さんの本でも書かれてあることですが、イベントリスナーを理解することはAS3を理解することに直結してきますので、ここでもaddEventListenerの記述のしかたについては十分に補足したいと思います。

パターン１

addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void{
  //ここに命令を書く
});

パターン２

addEventListener("click", function(e:MouseEvent):void{
  //ここに命令を書く
});

パターン３

addEventListener(MouseEvent.CLICK, hoge);
function hoge(e:MouseEvent):void{
  //ここに命令を書く
}

上の３つのパターンは書き方は微妙に違っていますが動作は同じものになります。
違いを少しずつ見つけていくことで、呪文のように見えるaddEventListenerの書き方も理解しやすくなるかも知れません。

パターン１とパターン２の違いについて

パターン１とパターン２の違いは、MouseEvent.CLICKと書いてあるか"click"と書いてあるかだけです。
試しにFlash上で新規AS3ファイルを開いて、下のスクリプトをコピペして実行してみて下さい。

if(MouseEvent.CLICK === "click"){
	trace("ふたつは全く同じもの！");
}

「出力」ウインドウに「ふたつは全く同じもの！」と表示されるかと思います。
つまりaddEventListenerの括弧の中の一番最初に入る文字（「1番目の引数」と呼ぶ）は"click"でもMouseEvent.CLICKでもどちらでも良いということになります。ただし"click"と書こうとした場合、中身を"clik"とか"kurikku"など間違えて書いてしまうとバグの発見が遅れるなどいろんな問題が起きるので通常はaddEventListenerの第一引数に"click"とは書きません。
では何故MouseEvent.CLICKと書いた方が良いのか、そもそもMouseEvent.CLICKとは何なのか、に関しては今回の記事だけで説明が困難ですが、興味のある方は「static 定数」などのキーワードや「マジックナンバー　マジックワード」などのキーワードで検索することをお勧めします。マジック・ナンバーを使ってはいけないといったコラムも参考になるかも知れません。
以前ぼくがセミナーで使ったこちらの記事のPDFでも多少説明してあります（今後このサイトでまとめる予定です）。
要点としては、書き方の問題になるんですがMouseEvent.CLICKという「定数」と呼ばれるものをここでは用いるのがセオリーとなっています。
addEventListenerまわりでは今後もMouseEventやらEventなどの記述が、一見すると何度も出現して慣れないうちはまぎらわしいのですが「"click"とMouseEvent.CLICKは同じものなんだ、でもaddEventListenerの第一引数ではMouseEvent.CLICKと書いておく方がいいんだ」と頭の片隅にでも覚えておけば便利です。
今後自分でイベントを設定する「カスタムイベント」と呼ばれるものを作成したり、「クラス」や「型の宣言」について学ばれるときに、きっと役に立ちます。

パターン１とパターン３の違いについて

ふたつの違いを見つけるために、もう一度パターン１とパターン３を並べてみました。
・パターン１

addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void{
  //ここに命令を書く
});

・パターン３

addEventListener(MouseEvent.CLICK, hoge);
function hoge(e:MouseEvent):void{
  //ここに命令を書く
}

まずパターン３からですが、addEventListenerの括弧の中の2番目に入る文字（「2番目の引数」と呼ぶ）に「hoge」などという適当な名前を入れておいて、2行目以降にその「hoge」という関数を作っている、という流れになります。
つまり1行目の「hoge」は関数の名前を入れている、ということになります。
そしてパターン１ですが、パターン３の2行目以降の関数を定義する（名前付き関数を作る）記述を省いて、addEventListenerの2番目の引数にいきなり関数を書いています。
パターン１のようにいきなり関数を書くことを「匿名関数」とか「関数リテラル」と呼びますが、書き方としては「匿名」という文字通り、この場合は名前をつけません。

そのほか、パターン１では最後3行目に「});」などという一見意味不明な記号の羅列のようにも見られる記述がありますが、これは中括弧｛｝と括弧（）の閉じ忘れを注意深く見ればaddEventListenerの直後に開き括弧（が来てて、そのあと開き中括弧｛がきてるので今度は開いた順番と逆に閉じてることに気付けば、パターン１の呪文のような記述も理解の糸口が見えてきます。

実際の制作では第二引数に匿名関数を使うか名前付き関数を使うかについてはケースバイになるかと思います。
今回のセミナーでは「とりあえずコピペでも動くスクリプト」をご紹介したかったため、名前付き関数の名前の書き間違いや重複によるエラーを回避するために、匿名関数での書き方のみの紹介となりました。

まとめますとaddEventListenerについては、先ずは第一引数に「何が起こったか」を文字として書き入れて、第二引数に「そうなったら次にどうしたいのか」を関数として書き入れる、
第一引数はただ単に文字列を入れても良いけど「MouseEvent.CLICK」などのあらかじめ定義されてある「定数」を使うのがセオリー、
第二引数については関数を入れればよいが匿名関数にするか名前付き関数にするかはケースバイなので、その都度都合の良い方、もしくは自分でわかりやすい書き方をすれば良い、
ということになります。

参考書籍、参考サイト

僕が普段から参考にさせて頂いているサイトや書籍を紹介します。
サイトに関しては本当はもっとあるんですが、挙げていくときりがないので入門にお勧めなサイトを絞ってあります。

• 書籍
  • ActionScript3.0入門ノート
    • 記事中にも紹介しましたが僕がAS2からAS3へ移行したときに一番お世話になった本です。とにかく入門にお勧めです。これがないと始まらない！
  • ActionScript 3.0 アニメーション
    • より高度なアニメーションに関してのScriptの知識が得られます。値段以上の価値があるのでこちらも非常にお勧めです
  • 初めてのActionScript3.0
    • プログラマに定評のあるオライリー社です。言語をきちんと理解したいプログラマにはこちらの本がお勧めです
  • ActionScript3.0ゲームプログラミング
    • そのものズバリな内容です。FlashでActionScriptを学びたいという方はゲームを作りたいという目的の方はけっこう多いので。
  • オブジェクト指向でなぜつくるのか
    • 直接ActionScriptについて解説してある本ではないですが、僕が最近読んだ技術書の中でお勧めです。AS3自体がバッキバキのオブジェクト指向で出来ているので、AS3についてのより深い理解につながりました
• サイト
  • Flash-jp
    • Flashで困ったことがあればまずこちらで検索すれば大抵の問題は解決するかと思います
  • f-site
    • Flashの旬な話題が盛りだくさんです
  • ActionScript 3.0で始めるオブジェクト指向スクリプティング
    • AS3について詳しく書かれています。
  • にゃあプロジェクト　ウェブログFlash関連記事
    • AS2関連の情報について、ものすごい量のサンプルで解説されています
  • HAKUHIN's home page -Flashゲーム講座-
    • こちらもAS1からAS3まで、もの凄い量で解説されていますのでゲーム開発にかかわらず参考になります

なおリンク先に関しては僕の一方的な判断で張っています。当然のことながらリンク先のサイト管理者はこの記事を知りませんしCSS Nite in OSAKA, Vol.16のイベントに関しても関与しておりません。
なので例えばFLASH-jpのサイトに行っていきなり「この間のイベントのことなんですけど」なんて質問しても誰もわからないと思いますのでご注意下さい。念のため。

最後に

せっかくActionScriptに興味を持ったのなら、「難しいことは考えずにとにかく動く楽しさから入って貰いたい」という気持ちと「せっかくなのであれも知って欲しいしこれも知って欲しい」という気持ちから、こうした形で補足としてまとめさせて頂きました。
「ここは違うんじゃないの？」とか「ここってどうなの？」等のご指摘やご意見、ご質問ありましたら下のコメント欄に残して頂くと幸いです。

CSS Nite in OSAKA, Vol.16

6月9日、18:30～20:30
アップルストア心斎橋 2F
CSS Nite in OSAKA, Vol.16に出演します。

詳細はバナーリンクか、こちらのページでご確認下さい。
CSS Nite in OSAKA, Vol.16

僕のしゃべる内容としては、「これから始めるFlashActionScriptツボのツボ」と題しまして、今までActionScriptに触れたことがない方を対象として「こう書けばすぐ動く」スクリプトをご紹介したいと思います。

僕は今までも大阪でFPSというイベントを行ったりしてきましたが、FPSはもともとFlash好きが集まる前提で開催されますが今回CSSNiteというWEB標準技術を追求する方々の前でお話しさせて頂くと言うこともあり、皆さんが全員Flashに精通されてる方ばかりでもないと思い、FlashActionScriptのかなり初歩的なところの紹介になるかと思います。

ActionScriptを駆使すれば高度なモーションやWEBアプリケーションの作成が可能になることは既に皆さんもご存じですが、今回は「WEBサイトに必要なActionScript」に絞ってボタンインタラクション（ボタンを押したときどう動かすか）だったり、デザインやモーションに必要なXY座標とWidth（幅）Height（高さ）のコントロールについてズバリそのもののScriptをご提供します。

もしかしたら既にActionScriptを学ばれてる方にとっては退屈かもしれませんが、これから挑戦したいという方にとっては、先ずは書いて動かして覚えられる良い機会になれば幸いです。

そのほか、AS2までを学ばれてる方にとって最低これだけは覚えておけばいいAS3との違いなどもまとめる予定です。こちらは以前このブログにまとめておこうと思ってほったらかしにしていた部分なので今回が蔵出しになります。

それでは当日お会いできることを楽しみに準備を進めていきます。お時間のある方はどうぞお越し下さい。
（もちろん懇親会も出る予定です。というかセミナーは出なくても飲み会には必ず顔を出す派）