シーン遷移と言えばFlashの画面展開として最も重要な部分。
FlashサイトからFlashゲーム、Flashアニメに至るまで、必ずといっていいほど考えなくてはいけない部分です。
必ずぶち当たる問題なのに、ほとんど直接作品とは関係ない部分でもありますし、かといってこれまた必ず制作の途中段階で変更を余儀なくされる部分でもあります。
なので本来の作品性に関係ない部分を出来る限り省力化をしながら作らないといけないし、かといって出来る限り柔軟に作っておかないと作品の作り込みに影響するという、ほぼ全てのFlasherのジレンマとして君臨し続けているのではないでしょうか（言い過ぎか）。

そんなシーンに対する、僕たちひよこたちの方法とは？
僕はProgressionのシーン遷移の部分に焦点を当てて（本来僕はProgressionの目玉を大きく三つにわけて、シーン遷移、キャスト、コマンドとしています。今回はそのシーン遷移の部分）、技術的なお話はおいておいて「何故Progressionを使うのか」についてお話しさせて頂きました。
ほとんど資料無しのお粗末な内容ですが、皆様ご静聴ありがとうございました！
「本やネットにある情報だけど、あえて口頭で説明した方がわかりやすいな」みたいな内容も交えてたので、ブログに残せるほど有意義な情報はありませんでしたが、一旦レポートしておきたいと思います。

そもそも何故Progressionを使うのか

Progressionとは何かをあえて間違って定義してみる

Progressionとかフレームワークとか、何かをインストールしないといけないとか勉強しないといけないとか、一旦難しい事はおいておいて、シーン遷移だけに限って言えばProgressionはとても便利なクラスライブラリと考えていいと思います。
クラスライブラリというのは、AS3を書く方なら一回は使ったことがあると思いますが、Tweenerとか、ああいったような、誰かがあらかじめ作ってくれたとても便利なクラスということになります（誰かが、とか言い回し失礼します）。

AS1やAS2しか触ったことがなくても、色を変えるColorとか時間を計算するDateとかあれもクラスですので、やはり一回は使ったことあると思うんです。
ですので、誤解を恐れずあえて極端なことを言うと、「Progressionのシーン遷移も、Dateなどのクラスと一緒なのだから、使い始めるのに何も特別なことはない」と言えると思います。

Progressionに対して抱いている（おそらく必要以上に）高い敷居を下げるためにあえて極端なお話をしましたが、この方法が正しいかどうかはわかりませんが、もちろん最終的には公式ページや技術書などでしっかりと理解することをお勧めします。

Progressionは難しい？

Progressionのシーン遷移は難しいか？いいえ簡単です。
難しいのはシーン遷移のほうです。
僕は長年シーン遷移に悩まされてきました。
最初は簡単なgotoAndPlayの分岐にはじまり、attachmovieやaddChildなどのアクションスクリプトに頼り、デザインパターンやMVCを引っ張り出しても完璧なものができませんでした（その原因の全てはデザパタやMVCが悪いんじゃなくて僕自身のスキル不足にあります）。
将来的な作り込みを見越して柔軟性に富んだ作りにしたつもりが、使いにくいAPIとスパゲッティな内部を持ったゴミの固まりみたいなのが出来たり、全く想定してなかった箇所に変更が入って作り直しを余儀なくされたり…。思い出すだけでも胃に穴が空きそうです（苦笑）。

そういった、「シーン遷移の難しさ」を簡単にしたものがProgressionのシーン遷移なのです。
ここは誤解でも極論でもないです。

具体的に知りたいProgressionのシーン遷移のこと

Progressionのシーン遷移で重要なクラスは
SceneObjectです。
（注意：公式のASDocのフレームに直リンク張っています）
このSceneObjectの主に四つの関数を呼ばれるタイミングを駆使するだけで複雑なシーン遷移をコントロールします。
その4つとは
atSceneGoto()
シーンから出発したときに呼び出される関数。

atSceneLoad()
シーンが読み込まれたときに呼び出される関数。

atSceneInit()
シーンが到着したときに呼び出される関数。

atSceneUnload()
自分より上の階層のシーンに移動して、自分が必要なくなったときに呼び出される関数。

です。
こちらも公式サイトに直リンクを張っていますので詳しくはリンク先でお調べ下さい
（注意：フレーム内に張っています）。

これについては、どの解説書でも丁寧に説明がなされています。
詳しくはそういった技術書で身につけることをお勧めしますが、まずはひよこのとっかかりとして口頭でこれらがどういった動きをするかを会では説明させて頂きました。

慣れないうちはとくにatLoadとatInitの使い分けに苦しんだ記憶がありますが、
それでも複雑なシーン遷移をこの４つの関数が呼び出されるタイミングで処理するやり方はとても理にかなったものなので、慣れれば多階層シーンの移動の際に、
atLoadはメモリの初期化など
atInitは描画処理など
atUnloadeでメモリの解放など
というようにうまく使い分けることで破綻せずシーン遷移が楽に行えるようになるかと思います（注意：ここに書かれてあるのは必ずしもatLoadでメモリの初期化をしないといけない、ということではないです）。

さいごに

まいどまいど長いばっかりで中身のないブログ内容で本当ごめんなさい。
基本的には技術的な検証あんまりしないし文章も推敲しないし自分の駄文レポートなので、読んでくださってる方には毎回申し訳ない気持ちで一杯です。

まあそんなありがたくも申し訳ない心情をつらつらと書いてても仕方がないので話を進めますと、あのあと帰ってから次の日にぎっくり腰になりまして、ただいま寝返りも打てない状態で安静中です（笑）。
ぎっくり腰になったきっかけというのも、ゴホンゴホンと咳き込んでいたらいきなりぐきっといったという地上最弱生物の名をまたしてもほしいままにしてしまいましたｗ

ひよこの会も僕が幹事とはいえあんまり何もしてない派なので、いつも細やかに仕切ってくださるひろゆきさんはじめ皆さんのご協力あって成り立っています。お忙しい中、ご協力もご参加も本当に感謝です！
「初歩的な質問をする会」なので、決して上級者お断りではないので、初心者も上級者もいろんな「いまさらな話」でみんなで盛り上がれたらと思います。

かといって「ひよこの会と聞いたけど自分ばかりが初心者でまわりがとてもレベルが高く感じた。こんな初歩的な質問していいのか迷った」という方が居ましたら、それこそまさしく初歩的な質問ですのでどしどし参加してくださいね！
僕ももうちょっと緊張しないようにやっていきますので、これからもよろしくお願いします。

中段あたりにチェックボックスがあるよ

いきなりですがswcファイルって「スウィック」って読むらしいですね。アドビの中の人もそう読んでたんで確かな情報です。
しかしながら僕は慣れなくていつも「エスダブルシー」って読んでしまうんですね。そこらへんのモサさが自分流さ、なんて無頼を決め込んで今日も「エスダブルシーエスダブルシー」と 読んでいます。
僕が「エスダブルシー」って言う度に周りが若干イラっとした顔されるんですが、それでもかわまず「エスダブ…エスダボースィー」とか呼び続けてるのに未だ怒られた事がないのは 、ひとえに僕の人徳だと思います。

無駄な軽口はこのくらいにして、先日行われたひよこの会で少しだけ要望があったのでSWCと連携してProgressionでのFlashサイト開発環境を超快適にする方法をご紹介したいと思います。
今までのやり方にもよりますが、体感100倍速いと言っても全くおおげさでないくらい、爆速開発が可能になりますよ！

そもそもパブリッシュが遅い…

Progressionに限らずですが、Flashサイトを作っていて一番のネックになるのが「パブリッシュに時間がかかる」事なんですよね。
それもflaファイルが肥大すればする程パブリッシュに時間がかかるようになり、納品間近の追い込みの時期になるにつれてパブリッシュだけで1分以上かかるようになるし…（ヒーッ）。

デバッグなんかもそうですが、「よりわかりやすく、より気持ちよく」動くことを心がけているFlashサイトにとって、1pxの位置や0.1秒の速度までこだわってなんべんも動かしてみて作り込むことはよくあることなのに、パブリッシュに時間がかかるようになるとそれもままなりません。

書き出せるものは先に書き出しておけば…

そこで今回ご紹介するswcなんですが、これは言ってしまえば頻繁に変更しない素材はあらかじめswc形式で書き出しておいて 、それを使うことによって開発を進めていこう、という方法なんですね。
この方法自体は、僕もkatapadさんから教えて頂きました。
ちなみに僕というひよこ向けの備忘録なので、最初はswcとは何か、どうやってswcを書き出すのかなどの事が書かれてありますが、Progression連携のミソは一番最後なので、swc書き出しに精通されてる方はこのまま最後まですっ飛ばして読まれてもいいかもしれません。

ものには順序がある。まずはFlashBuilderとProgressionを連携させるようにしておく

僕の現在のFlash開発環境は100％FlashBuilder+Progressionなので、その方法でご説明します。
基本的なところは同じなので他の開発環境 でも工夫してswc連携スタイルが作れることと思います。

まずは僕の以前の記事
Progression4をいい感じにFlashBuilderで作業できるようにする
を参考にしてください。
これはFlashBuilderがsrcにあるflaファイルを勝手にbin-debugフォルダにコピーしてしまう現象を回避できなかったので、思い切ってflaファイルを削除してそれでもちゃんとswfがパブリッシュできるように設定し直した方法ですが、基本的にこのスタイルで開発を進めていくことになります。

記事に沿って、index.flaとかpreloader.flaを思い切って捨てちゃって下さい。次に進みます。

新規flaファイルを作る

FlashCS5の「ファイル」→「新規」から新規flaファイルを作ります。Progressionと連携させるのでASのバージョンはもちろんAS3です。
僕はFlashBuilder連携を前提にこの記事を書いていますんで、今回FlashCS5指定ですがFlashDevelopとかFDT、FlexBuilderなどお使いの環境に合わせて読まれてる方にとっては、特にFlashCSのバージョンは関係はありません。

新規flaファイルの保存場所はどこでもかまいません。どこでもかまいませんがFlashBuilderのワークスペース以外のところに作るのがおすすめです。flaファイルのファイル名も何でもいいですが、ここではmaterial.flaと名付けました。

SWCファイルを書き出す

おやこんなところにSWC書き出しのチェックが！

そのままFlashの「ファイル」→「パブリッシュ設定」で真ん中らへんに「SWC書き出し」というチェックボックスがあるので、ここにチェックを入れます。
そのままパブリッシュしたらflaファイルと同じフォルダに「material.swf」が出来たと思います。

おやこんなところにSWCファイルが出来ちゃった！

material.flaのライブラリの中はリンケージ書き出しのシンボルでいっぱい！

さてさて、これでswc書き出し用のflaファイルが新規作成できましたので、早速作業に入っていきましょう。
基本的にはmaterial[素材]というファイル名からも想像がつくように、このflaファイルの役割は「素材倉庫」です。長年慣れ親しんできたflaファイルをただの素材倉庫にするのは僕もしのびないですが快適環境作りのため。最終的にはFlash全体の開発環境が快適になることによって自然とこのflaファイルの活躍の場も以前より増してきますのでご心配なく！

最終的にライブラリの中にたくさんリンケージ書き出しのシンボルが作れました。

ライブラリの中は汗と涙と夢でいっぱい！

書き出したSWCファイルをProgression開発環境にコピーする

この記事ではProgression開発環境イコールFlashBuilderのワークスペースな意味合いで使っています。
先ほど書き出したswcファイルを早速Progressionの開発環境で使ってみましょう。

具体的にはProgression開発環境のlibというフォルダに先ほどのswcファイルをコピーするだけで良いです。

わかりにくくてすみません。スクリーンショットでは800_material.swcとリネームされていますが特に意味はないです。

たったこれだけ！

FlashBuilder+Progression環境だと、この「swcをlibフォルダに入れる」だけであとは何もせずにswcの中にあるリンケージをそのままクラスとして読み込めるようになります！

快適すぎて死ぬｗｗｗ！

他の環境だとクラスパスの設定とかしないといけないかもしれないですが、本来はひよこ的には「クラスパスって何？」ってところから記事を書きたいところなのですが今回の記事ではそれは割愛して、まあ他の環境でよくわからない場合は本番開発用flaと同じフォルダにswcファイルも入れておけば同じような感じにはなるかと思います。

まじで便利なコンポーネント連携！

さてさて、ここまでは普通にswc書き出しとの連携なんですが、Progressionが凄いのはここからなんです。

とちょっとそのまえにProgressionのAddChildコマンドについて少しお話を…。

FlashのActionScript3では、表示オブジェクトを画面上に入場/退場させる命令としてaddChildとremoveChildがあります。
Progressionではそれをさらに便利にしたjp.progression.commands.displayパッケージがあって、ようはわかりやすく言うとAddChildコマンドやRemoveChildコマンドっちゅうのがあります。
（他にもAddChildAtコマンドやRemoveAllChildrenなどなどいろいろ便利なコマンドもありますが、ややこしくなるのでこの記事では一律AddChildコマンド、RemoveChildコマンドと呼ぶことにします）
ただ便利なだけでなく、Progression側で何が表示されてて何が退場していったのかの管理とか、それこそ重なり順とか、表示されたときに実行される処理とか、かなりProgressionの根幹に関わる処理が、このAddChild系コマンドの実行されたタイミングで行われています（いるような気がします）。
なのでAddChildコマンドを使わずにaddChildだけで表示した場合、これがProgressionが管理しきれない表示オブジェクトとなってしまうので、使ってる経験上こういうのが思いがけずちょっとしたトラブルを招くことが多いです。

Progression始めた人で、僕が個人的にはまりやすいなと思うのが、この部分なので、例えばCastSpriteやCastMovieClip系の表示オブジェクトをAddChildコマンド経由せずにふつうにflashの addChildで表示させてしまってatCastAddedが正しく実行されないなどのミスで戸惑っている人がいるんじゃないかなと思っています。

swc連携に限ったことではないですが、Progressionでは特に初心者の場合でAddChildコマンドが何しちょるのかようわからん、といった場合はパフォーマンスを稼ぐなどの特別な理由がない限りはaddChildは使わずほぼ全てAddChildコマンドを使うようにしよう！と決めておくとそこらへんのミスが減るんじゃないかと僕は思います。

で、少し脱線したんで本題に戻りますが、とにかくProgresisonのAddChild系コマンド、RemoveChild系コマンドはコンポーネントとも連携が利くので、ここからが本領発揮です。

Flashの強力なタイムライン機能を活かしてInOutMovieコンポーネントでわしわしアニメーション描くもよし！

複雑なアニメーションもInOutMovieコンポーネントで思いのまま！

ボタンなんかもRollOverButtonコンポーネントでさくさく！

どうせswcの中に素材としてボタン置いてるんだからついでにコンポーネントでボタン化までしておいてしまえ！

new AddChildするだけの簡単なお仕事

あとはリンケージさえ設定してもらえれば、あとはプログラム側ではnew AddChildするだけの簡単なお仕事です。本当に。
ビジュアルとロジックの分離は当制作所でも必須課題なのですが、Progression導入でそこらへんも本当にやりやすくなりました。タイムラインでしっかり作り込みたいところはタイムラインで作って、Tweenerなどでぴっちり制御したいところはロジックを作って、それらの違いを意識せずに最終的に扱えるようになるのは、本当にパワフルな開発環境を整えることが出来ます。

この記事中、ほとんどが僕の無駄口で長くなってしまいましたが、実際はやってみると本当に簡単なので是非試してみて下さいね！
デメリットとしては先ほど書いたように今まで慣れ親しんだflaファイルをただの素材置き場としてしか使わなくなる事への心の抵抗くらいですが、最終的にはFlashのタイムラインというパワフルな環境を十二分に発揮できるスタイルに移行するわけなので、かえって以前よりFlashCS5の出番が増えるようになります。
「もっとこうしたほうがいいよ」とか「うちではこうしてるよ」ですとか、「うそばっかりやんけ！」などのご意見ありましたらコメント下さいね。
最近「ブログ読んでます」という反応が少しだけ得られるようになって、本当嬉しいです。

俗に言う「大重本」この写真はクリックするとアマゾンへ

著者である大重様、発送いただいたソーテック社様、この場をお借りしてお礼申し上げます。

献本していただくなんていう体験、僕自身の人生の中でそうあることでもないのでものすごくうれしいです。ましてやAS3を覚えるときに相当お世話になった大重さんからとなっては、これはもう本気でレビューするしかありません！！
僕も業務フレームワークとしてProgressionをがっつり使っている人間の一人として、また実際に自分が入門の時にどこでつまづいたのかとかも思い出しながら、かなり突っ込んでレビューしたいと思います！
考えてみれば本のレビューなんてそんなにやったことがなくて、もしかしたらかなりとんちんかんなことになるかもしれませんが、少しでも皆さんのほんの購入時の参考になればと思います。がんばります。

最初の印象

基本的には、AS3入門書で有名な「詳細！ActionScript3.0入門ノート」と雰囲気が一緒で前ページ青と黒の二色刷。
チャプター1でProgression4の基礎をひととおり習った後は、Proression4をフルパワーで使うためにほぼすべてのチャプターでクラススタイルでの説明になります。
なのでメインとなる読者の対象としては「詳細！ActionScript3.0入門ノート」などでAS3をある程度入門した方、といったところでしょうか。
技術書である以上、専門用語やスクリプトもよく出てきますが同じように画面写真も豊富なので、特に難解な印象は受けません。
多くの人が入門書を手にするとき「この本は自分のレベルにみあった入門書か」を気にすると思いますが、何をもって簡単そうとか難しそうと印象するのかは人それぞれですので、このへんは先もいったようにAS3入門ノートの雰囲気と一緒なのでそちらを読まれたことがある方はそれを参考にするといいでしょう。

入門ノートの名に恥じない、細やかな操作手順。こっから先の写真はクリックすると拡大します。

目次ごとの感想

全部でチャプター７まであります。

• チャプター1：Progression4の基礎
  • Progressionとは何なのかの説明に始まり、インストールから各プロジェクトの作成方法、さらにはコンポーネントスタイル、タイムラインスタイル、クラススタイルの3つのスタイルで実際にHelloWorldを表示させるまでが説明されています。
    このチャプターでひとまず全体にわたって動かしてみて、徐々に順を追ってこれから学習を進めるという構成になっているようです。
• チャプター2：シーンツリーの基本パターン
  • Progressionの肝のひとつである「シーン」についてかなり詳細な説明がされています。
    シーンの概念は、HTMLでいう「ファイル（ページ）」と同じく場面を構成する1単位なわけです。ほとんどの場合シーン構造がそのままサイトマップになりますので、このシーンの概念にチャプターをまるまる一つ費やして説明されているのはかなりわかりやすいと思いました。
• チャプター3：シーンの移動とシーンイベント
  • シーンの構造が理解できたら、次はいよいよシーンの移動を行います。
    このへんからスクリプトの記述が多くなってきます。
    
    

    ぱっと見でくじけそうになる人も！

    
    もしかしたらスクリプトに慣れていない方はこのへんから難しく感じるかもしれません。でも、大重さんの本（というかプログラミング技術書全般）には読み方のコツがあって、長いスクリプトの中でも重要なのは1行だけだったりするので、あとのほうにその重要な1行を抜き出してちゃんと説明されてあるんです。
    
    

    ちゃんと重要なところを抜き出して説明してくれる！

    
    なので長いスクリプトが苦手な方も、そこを読み飛ばして後から書かれてある重要なところだけを注目していけばいいのでそういう読み方をすれば安心です。
    シーンの移動に関してですが、前章でわざわざシーン構造だけを一章使って学習したことが活きてきます。シーン構造さえわかってしまえばProgressionは「前のシーンへ」「次のシーンへ」「上のシーンへ」「いきなり孫のシーンへ」などという便利なシーン移動がいろいろとできるので、この章はその移動方法が書かれただけですので一見スクリプトが多くてややこしいそうに見えますが、コツさえわかってしまえば易しいと思います。
• チャプター4：コマンドとコマンドリスト
  • ここから本の厚み的に後半に向かいます。
    コマンドもProgressionの機能の中核をなす技術の一つですが（ちなみにほかには、さっきやった「シーン」と次にやる「キャスト」）、配列を用いたSerialListとParalelListの入れ子など、かなり実践的な機能の紹介まで踏み込んで説明されています。
    あと173ページの虫がかわいいです。
• チャプター5：キャストオブジェクトを利用する
  • この章は全体から見るとさらっと流されているようにも見えますが、先ほどもいいましたようにProgression三本柱のひとつ（キャスト）について学習できます。
    僕が特に重要だと感じたのが、本で言うと185ページあたりに実際のFlashのムービークリップからCastMovieClipを作るやり方でして、これを知らないと多くの人が入門できたはいいけど実際のサイト作るにはどうしたらええのん？ってなっちゃうと思うんです。なのでこの説明からもこの本がより実践向けに書かれてあるんだなあと重ね重ね感じたのでした。
• チャプター6：外部ファイルの読み込みとプリロード
  • FlashのActionScriptの中でも特に難しいと感じる人が多いのが「外部ファイルの読み込み」だと思うんですが、Progressionはそこを比較的簡単に扱うことができます。
    簡単とはいっても、Progressionなりの書き方を覚えないといけないのはそれはもう仕方がないので、この章で勉強します。
    一括読み込みやリソース管理や先読み機能など、覚えるのも難しいけど自分で作るともっと難しい、つまり是非とも覚えて使いこなしたいかなり便利な機能もあります。
    こういった機能を、じっくり読みながら学習が進められるのも本ならではですね。
• チャプター7：さらに進んだ使い方
  • フルフラッシュサイトのディープリンク機能についてのつまづきやすい点の説明やカスタムコマンドなど基本的な機能をさらに突っ込んだ使い方からSWFをそのままシーンとして読み込む、リキッドレイアウトなどの夢のような機能までひととおり学習できます。
    ここまで読めば、もうProgression4の機能はひととおり学習したと言えますし、実際にFlashサイト制作に投入してもかなりの部分で応用できるようになるでしょう。

総評

気になった点としましては、たとえば82ページなどの「contentloaderInfo.bytesTotal」と「contentloaderInfo.bytesLoaded」など、説明ページの英数字が半角全角がどちらかに統一されていないところでした。文字の間隔がそれぞれ違うので少し見づらい点でした。見づらいのは説明文だけで、見たところソースコードなどは大丈夫だったので、問題はないんですがちょっと気になるな、というところです。
※大重さんより、半角全角統一されていないんじゃなくて、半角で統一されているけど均等割り付けで文字幅が広がっているとの事でした。長い単語を途中で改行しないようにするとどうしてもこうなってしまうらしいです。
それ以外に関しては先ほどから繰り返し言ってきた言葉なんですが、この本はProgression4の機能紹介だけにとどまらず、実際に使う側の立場としてどう学習していけば本当にFlashサイトが作れるのかを突き詰めた「かなり実践的で使える参考書」だと感じました。
僕の周りでも「Progression4の機能や出来ることについてはわかったし、今までも本やネットで基本的な作り方も学べたけど具体的に自分のFlashサイトでどう適用して良いのかわからない」といった声を多く聞きました。「詳細！Progression 4 Flashフレームワーク入門ノート」は機能紹介から一歩踏み込んだ、まさに使えるようになるための入門ノートとして最適ではないでしょうか。
Flashの開発環境はCS3/CS4/CS5にまたがって対応している点もありがたいですね。
今日からでもこの本読みながら学習したことを仕事に投入していきます！

最後に、僕自身がProgressionのファンであり大重さん本のファンでもあるので、こんな僕のつたないレビューですが皆さんの購入の判断にちょっとでもお役に立てれば幸いです。

あ、あと本の中身の写真に関しては著作権を侵害しないよう最大限配慮したつもりですが、もし至らない点などありましたらお知らせください。

Progression4がFlashBuilderとの連携ができるようになっていたのがきっかけだったのと、あとFlashのコンパイル（パブリッシュ）がその都度グラフィックを書き出し直すので時間がかかるようになったのが嫌でグラフィックはあらかじめswc書き出ししておいてFlashBuilderからasだけをコンパイルできるようになったらいいなと思ったので、FlashBuilderを使いこなせるように勉強してみることにしました。

常々お伝えしているように、うちのFlash請負制作業務のほぼ100%をProgressionフレームワークを使用していますので、ProgressionとFlashBuilderがうまいこと連携できていないと困ります。いろいろ試してみてうまい感じに連携できるようになったので書いておきたいと思います。

あとFlashBuilderについての本や情報が多いですがだいたいがFlex技術者向けになっていて、MXMLとか僕もよくわからないのですが僕のやりたいFlash開発とは微妙に違う気がするので、Flash向けにFlashBuilderの設定方法なんかの情報があっても良いなーと思っていたので、今回の記事はProgressionとあわせて是非ともマスターしたい技術だと思います。

先ずはFlashを立ち上げて

最初はFlashを立ち上げてProgressionプロジェクトを作成するところからはじめます。

はじまりはいつもFlash

種類：「クラス」にするのを忘れないで！

「FlashBuilderに対応させる」のチェックも忘れるな！

プロジェクトの設定で気をつけるところはここまでです。
おもむろに「作成」ボタンを押すとしばらくしてProgressionプロジェクトが作成されるはずです。

できたできたー！

プロジェクトが出来てしまえばもうFlashには用がありません（ひどい）。
Flashはそのまま終了しましょう。

ここからFlashBuilderで作業する

ここから先はFlashBuilderで作業します。長年使い慣れたFlashを捨てて慣れないFlashBuilderを使っての作業になりますのでかなりドキドキします。

FlashBuilderのワークスペースの概念はおわかりでしょうか？
もしまだでしたら今後FlashBuilderを使っていくにあたってワークスペースはよく切り替えることになるのでこの記事を読む前に「Eclipse ワークスペース」などで調べておく事をお勧めします。それ以前にFlashBuilderとEclipse との関係についても調べておいて損はありません。
ワークスペースやEclipseについてよくはわかってないけど、手っ取り早くこの記事を読む場合、「とりあえずワークスペースとは作業フォルダを決める事なので、先ほどProgressionプロジェクトを作成したフォルダーの一階層上を選択しておけば良い」とだけ覚えておいてください。
（僕の理解度もだいたいそのへんです）

※2010/11/10追記
最近Dropboxで作業スペースを同期とってるんですが、ワークスペースをDropbox内に設定すると他のPCと同期をとったときにFlashBuilderのライセンス違反が起こるらしく、えらい大変なことになります。
Dropboxなどで共有してる人は、プロジェクトファイルはDropbox上で、FlashBuilderのワークスペースは各PC固有のディレクトリで設定するのがお勧めです。

ワークスペースを決めたら、先ほど作ったProgressionプロジェクトフォルダをFlashBuilderに登録します。

ファイルメニューから開く

FlashBuilderのメニュー「ファイル」→「Flexプロジェクトを読み込み」を選びます。

プロジェクトフォルダーからさっき作ったフォルダを選ぶ

うまく読み込めた！

上手く読み込めました！

ただ、ファイル構成をよくよくみてみると、srcフォルダにあるはずのflaファイルがbin-debugフォルダにもコピーされるんですね。このままではまずいですよね。

どうしたらいいかというと解決方法は簡単で、srcフォルダにあるflaファイルを削除すればいいんです。
index.fla と preloader.fla の二つを削除します。

で、Progressionプロジェクトを作った時に自動的に「Index.as」が「bin-debug/index.swf」にパブリッシュされるようにFlashBuilderプロジェクトを設定してくれているんですが、同じように「Preloader.as」ファイルを「bin-debug/preloader.swf」として書き出すようにFlashBuilderプロジェクトを設定し直す必要があります。

他にもFlashBuilderのみでパブリッシュできるようにFlashBuilderプロジェクトの設定をいろいろ変更しておきましょう。

FlashBuilderプロジェクトの設定をいい感じに設定し直す

FlashBuilderプロジェクトの設定を変更するには、プロジェクトそのものを右クリックして「プロパティ」を選びます。

プロジェクトを右クリックで「プロパティ」

Flexコンパイラでは「HTMLラッパーファイルの生成」のチェックを消す。Hey YO!

「HTMLラッパーファイルの生成」のチェックを外すんですよ。つけるんじゃないですよ。

Flexモジュールでは追加ボタンを押す

書き出されるswfファイル名の大文字小文字に気をつけて

「モジュールの追加」画面で気をつける事と言ったら、通常「Preloader.as」からは「Preloader.swf」が書き出されようとするので、大文字小文字に気をつけることですね。index.htmlを書き換えたくないのであれば、ここで出力SWFのファイル名を「preloader.swf」と小文字に直しておきましょう。
モジュールSWFのサイズは「最適化しない」にしておきましょう。

これでFlashBuilderプロジェクトの設定は完了です。
いろいろ警告が出るとは思いますが、警告文を良く読むとほとんどの方にとっては問題ないケースかと思われますので、理解して問題ないならOK連打で元の作業画面に戻りましょう。

選択したファイルを削除だ！

あとはsrcのindex.fla 、preloader.fla、bin-debufのindex.swfとindex.fla、preloader.swfとpreloader.flaを削除してみましょう。

そしてFlashBuilderメニューの「プロジェクト」→「クリーン」で一回プロジェクトをやり直して、bin-debugフォルダにflaファイルが出来なくなって、さらにindex.swfとpreloader.swfが作られていればOKです！

あとはがんがん開発するのみ！よいProgression+FlashBuilderライフを！

おまけ

MacではFinderからswfを右クリックして「情報を見る」で

「このアプリケーションで開く」を設定

「このアプリケーションで開く」で Flash Player Debuggerを選んでおいてね。

flaファイルは死んでしもうたん？

このやり方ではindex.flaとpreloader.flaを大胆にも削除してしまうので、今後一切をasファイルで行わなければならなくなります。flaファイルは果たして使えないのでしょうか？

いいえ違います。

flaファイルはswc書き出しをするようにして、プロジェクトフォルダのlibsフォルダに突っ込むようにしましょう。
InOutMovieコンポーネントなどを使ったMCをリンケージ書き出ししておけば、「タイムラインを上手く使いつつ爆速コーディング可能な」Progression4+FlashBuilderというなかなか厨房臭いほど最強なコーディング環境が整うかと思います。

これはかなり万人向けな便利スタイルですので、また今後是非とも掘り下げて紹介したいとおもいますが、swcを駆使してうまいことFlashBulderとFlashとの両立スタイルも研究していきましょう！

※2010/10/27追記

さらにswcを駆使して使う方法はこちらの記事に書きました。
SWC+Progressionで快適コーディング生活はじまる！

第一章：index.flaをクラスでもコンポーネントでも使えるようにしておく

最初はクラススタイルでプロジェクトを作成

メニューの「コマンド」→「プロジェクトを作成する」を選ぶ！

最初、プロジェクトの種類は「クラス」を選んでおく。 プロジェクト名、書き出し先のチェックも忘れずに。

プロジェクトの設定はもう少し続きます。

パッケージパスには最初何も書かれていないのでここでは 「classes」と書いておく。 メインクラス名がちゃんと「Index」となっているかも 確認しておく。

デフォルトではパッケージパスに何も書かれてないので、ここにとりあえず「classes」と追加。メインクラス名ってところはデフォルトで「Index」ってなってるはずなので、それを確認しておきます。
「FlashBuildefに対応させる」「FlashDevelopに対応させる」も、今は必要ないかもしれませんがとりあえずチェック入れておけば後々便利になります。

以上の設定をチェックしたら「作成する」ボタンを押してプロジェクトを作成してください。
しばらく待った後、書き出し先のディレクトリに自動的にこんな感じのディレクトリ構造が出来上がるはずです。

ここまでひとりで出来てはじめておとな。

クラススタイルで作成されたindex.flaをコンポーネントにしなおす

プロジェクトを書き出すことは出来ましたが、このままではただのクラススタイルの開発になってしまいます。これをコンポーネントで扱えるように少し手を入れます。

先ずはドキュメントクラスを削除します

ステージのプロパティに、ドキュメントクラスを設定するところがあって、Progressionでクラススタイルを選択してプロジェクトを作成すると自動的にここが設定されています。コンポーネントスタイルで動かす場合にはこのドキュメントクラスは必要ないので削除しておきます。

ドキュメントクラスを探して！

男なら消すときはためらわず！でもためらって消しても結果は同じ！

ステージにコンポーネントを置いていきます

メニューの「ウインドウ」→「コンポーネント」からコンポーネントパネルを開きます

使うのはProgressionConfigのWebConfigとProgressionLoaderのEasyCastingLoaderのふたつです

置きましょう

コンポーネントパネルからWebConfigコンポーネントとEasyCastingLoaderコンポーネントの二つをステージ上にドラッグ＆ドロップして置きます。これらはステージ上のどこに置いてもいいです。SWF時には表示されません。

コンポーネントを設定する

いよいよ大詰めです。

コンポーネントインスペクタからコンポーネントの設定を行いましょう。

コンポーネントインスペクタを呼び出す鍵はここらへんにあります

コンポーネントインスペクタとやらの出し方がわからない方は、コンポーネントを選択したときのポロパティウインドウのここらへんのボタンを押してみてください。

先ずはWebConfigコンポーネントから

とりあえずこうなっていればよし

EasyCastingLoaderは次のような感じです

urlのところには恥ずかしがらずに「easycasting.xml」と書こー！

syncのところは「true」urlのところは「easycasting.xml」と書いておきます。
ここらへんのEasyCastingLoaderコンポーネントの詳しい設定は是非Progression公式サイトのコンポーネントリファレンスをお読みください。

あとはシーンエディタでシーンを作るのみ

どんな優れた技術でも、残念なサイトを作るのが得意な正宗の手にかかっては形無しだ！

あとはシーンエディタで自由にシーンを作ってください。ここらへんからは通常のコンポーネントスタイルと全く変わりません。

最後にbin-debugディレクトリにeasycasting.xmlとして保存すればOK

これで最初はクラススタイルとして書き出したプロジェクトをコンポーネントスタイルで開発するように準備ができました。
手順を細かく説明したのでステップ数が多く複雑に見えますが、実際にはちょっとした手間だけで済みます。

第二章：同じ事をpreloader.flaでもできる

このテクニックはpreloaderでも使えるので、たとえばindex.flaは普通にクラススタイルで作るけどpreloader.flaはコンポーネントでさくっと作りたい、またはその逆でindex.flaはコンポーネントで作ったけど、いろいろpreloaderのほうであらかじめ処理しておきたいことがあるのでpreloader.flaだけはクラスで作りたい、といったスタイルにも便利に使えます。

やることはindex.flaと同じ考え方です。

ドキュメントクラスを消して！

preloader.flaのドキュメントクラスを消しておいて

こんどはPreloaderコンポーネントをドラッグ＆ドロップします

ステージにPreloaderコンポーネントをドラッグ＆ドロップしておきます。
コンポーネントインスペクタのurlは「index.swf」としておきます。

これで完了です。逆にコンポーネントからクラスにしたい場合は逆の手順でOKです。

第三章：コンポーネントで作ったキャストに何か処理を加える

preloader.flaのほうはコンポーネントとクラスを行ったり来たりできると便利だという方が多いのですが、index.flaのほうはこんなややこしいことしておいて何が便利なのかがイマイチわからない、という方も多く居ます。

ただコンポーネントで作っていても何かしらActionScriptの処理が必要になってくるときがあるので、その方法を紹介しておきます。

基本はInOutMovieコンポーネントを活用する

キャストには、簡単に扱えてしっかりした画面効果を得られるコンポーネントがたくさんありますが、Flashのタイムラインで実際にアニメーションを味付け出来るInOutMovieコンポーネントを基本にしていくといいでしょう。

InOutMovieも、in点からstop点、stop点からout点の挙動など、今までのgotoAndPlayとはちょっと違った動きをするので最初のうちは戸惑いますが、すぐに慣れてきます。慣れてさえくれば、そのあとはstopひとつ書かなくてもいいInOutMovieでのタイムライン作業が非常に効率がいいものになります。

やり方１：タイムラインにActionScriptを直接書く

これはもう、従来のようにタイムラインにActionScriptを書くやり方です。本当に文字通り従来通りのやり方になります。

例）

いままでどおり普通にタイムラインにActionScript書いてもいいじゃない。変態だもの。

よく誤解されがちですが、コンポーネントを使ったからと言ってActionScriptを一切書いてないけないなんて制約はないですし（同じようにクラススタイルだからタイムラインを使ってはいけないという事も無い）、そこはもう、今まで通りやればいいんですよ。変態だもの。みつヲ

やり方２：せっかくなのでクラスを使ってみる

AS3のクラスがどうしても苦手な方は、無理してクラスを覚えなくても今まで書いたやり方でもなんとかなるかと思いますが、無理してまでクラスを覚えたらメリットが多いのも事実です。

というかここが醍醐味なので、紹介しておきます。いちおう「カスタムクラスくらいは書ける」方を対象に書きますが、クラスをばりばりかける方も是非ともチャレンジしてほしいテクニックです。

Progressionシーンエディタのメニューから「ツール」→「シンボルを書き出す」で書き出されたキャストには、全て自動的にキャスト名がリンケージとして設定されています。

「ツール」→「シンボルに書き出す」

IndexPageというキャストは自動的にIndexPageというクラスにしてもらってる

Progression以前に、まずFlashの仕様の話なのですが、AS3からのリンケージというのはムービークリップをクラスとして扱うので、Progressionでもキャストというのはクラスで管理していた訳なんです。

つまり、コンポーネントスタイルを使っていて、キャストを使ったことがあるなら、知らず知らずのうちに自動的にクラスを扱っていたということになります。

なので考え方としては今まで自動で使われていたクラスに手を加えてみる、という考え方になります。

試しにflaファイルと同じディレクトリに「IndexPage.as」というASファイルを作って、次のようにクラスを書いてみましょう。

package{
	import flash.display.MovieClip;
	public class IndexPage extends MovieClip{
		function IndexPage():void
		{
			trace("やっほー");
		}
	}
}

リンケージの設定でクラス名をIndexPageとしておくと、IndexPageクラスを作ると自動的に連動するようになります。
正確には「連動」というのは間違いなんですが、この記事では詳細の説明を省かせてください。flaファイルを置いたディレクトリにクラスファイルだらけになるのがイヤな方は「クラスパス」とか「パッケージ」というキーワードでAS3について調べてみるといいと思います。

とりあえずここではリンケージの設定とカスタムクラスの連動を実験してみました。この実験をさらにすすめて、IndexPage.asを次のように書き直してみましょう。

package{
	import jp.progression.casts.animation.InOutMovie;
	public class IndexPage extends InOutMovie{
		function IndexPage():void
		{
			trace("やっほー");
		}
	}
}

さっきと比べてどこが変わったかは探してみてください。こんな感じでInOutMovieクラスを継承する形でキャストをカスタムクラス化すると、コンポーネントを使ったときと全く同じ効果が得られます。

まだAS3のクラスに慣れてなくて何を言っているのかわからない方は、今のところはとにかく「コンポーネントで作っていたとしても、あとからクラスを覚えてクラスとして使いたくなったときや、クラスを使えるプログラマーが見つかってその人に引き継ぐときでも、簡単に移行出来るんだ」とだけ覚えておいても結構です。
クラスをばりばりに書ける方も、とりあえずコンポーネントとクラスはかなりシームレスに相互で行き来できるというのがわかっていただけたかと思います。

RollOverButtonなんかも、特にマウスオーバーなんかの状態はコンポーネントで作っておいて、クリックしたときの挙動だけスクリプトで書く、なんていうのも簡単に出来てしまうので非常におすすめです。

まとめ

説明が下手なので、長々と冗長な記事で本当すいません。Progressionが非常に柔軟で誰にでもすぐに実践で扱えるくらい簡単に自分の仕事を拡張してくれる名アシスタントであることが伝われば幸いです。
今回この記事ではコンポーネントスタイルから、キャストを部分的にでも（もちろんキャスト全部でも良いですが）クラス化する方法を紹介しました。
もし、シーン管理もクラスとコンポーネントでシームレスに管理したいと興味を持たれたら、以前の記事「Progression4：SceneObjectでシーンの構造管理はしない」を併せてお読みください。

この記事がみなさんのFlashサイト制作ライフにお役に立てば幸いです！

僕はと言うと、先週行われたProgression本を朗読する会に参加してきました。せっかく買った本なんだから読まなきゃね！
で、この朗読会、スーパー肩パッドさんとシナチクさんがTwitterで音頭をとって開催された企画でして、非常に面白くてためになりました。

まず14時から開始して19時半まで5時間半、ぶっとおしでProgression談義。その後居酒屋に移動して3時間またぶっとおしでFlash談義。
僕自身も大阪てら子でProgressionを勉強したのが2年前。出会って以来この2年間で覚えてるだけで15案件、実際には20案件以上は実践投入してきたほどハマりまくってるProgressionについて、ここまでディープに語り合える場と仲間がいなかったので（個人事業なので家内以外仕事のパートナーが居ないので孤独）ここまで時間を忘れて、ほぼ初対面の方々たちと語らいだのは生まれて初めての経験でした。

本当にいい刺激になりました。

で、いちおう自分がとってたノートもあるんだけど、皆さんの喋った内容がまとめきれていないので、せめて自分のネタだけでもまとめておこうと思ったわけです。

21日の僕の勉強会でもこれやります。
不思議なことに全く同じ記事を「クラススタイル向け」と「コンポーネント向け」で2回書きます。今回はその第一回目です。
第一回目は、「クラススタイル向け」に書いてみようと思います。

目的：SceneObjectでシーンの構造管理をしない

この記事の目的はこれにつきます。ちょっと何を言っているのかわからないと思いますが、大まじめです。
本やネット上のサンプルなどにも、SceneObjectを使ってaddSceneとかで子シーンを管理したりしていますし、クラススタイルに慣れてくると、シーンのloadやinit、gotoやunloadを駆使していろいろと複雑なシーン管理を行えるようになってくるのですが、あえてシーンの管理をほとんどしない方法を探るというやり方です。この方法が何故いいのかは勉強会でお話ししたいと思います。

シーンの構造はXMLで

具体的にどうシーン管理をSceneObjectではさせないかというと、シーンの構造はほぼ全てXMLで管理するようにします。
「な～んだ。SceneObjectのaddSceneFromXMLだろ。知ってるよ」という方も沢山いらっしゃると思いますが、ここではさらに踏み込んでEasyCastingだけでシーンを管理することを目指します。

普段クラススタイルで作られてる方は「えーEasyCastingってコンポーネントスタイルで扱う簡単シーン管理でしょ。うちの案件はもうちょっと複雑なの。いろいろと出来ないと困る」と思うはずです。大丈夫です。

プロジェクトの種類は「クラス」でOK

クラススタイル派にとってEasyCastingを使う心配事は「こんな簡単機能使ってて、俺がしたいあれとかこれとかちゃんと出来るんだろうか」というところにあると思います。少なくとも僕はそうでした。

基本的にはプロジェクト設定のとき、種類は「クラス」でOKです。FlashDevelopやFlashBuilderの対応など、いつもどおりのプロジェクトで書き出せば先ずは準備はOKです。

サンプルを見てみる

先ずはこちらのサンプル（Prog4MimeticEasyCasting.zip）をダウンロードして解凍してみてください。

解凍して出来るファイル構成は

• classes
  • casts
    • AbstractCast.as
  • common
    • AbstractSceneManager.as
  • display
    • AbstractSceneContainer.as
  • scenes
    • AbstractScene.as
  • Index.as

こうなっていると思います。
この中で大事なのはcasts.AbstractCasts.asと、scenes.AbstractScene.asと、Index.asの3つだけです。

ちなみに、プロジェクトがこういった構造になっている前提で話を進めます。

Index.as

Index.asを見てみましょう。これ以降、ソースがよく出てきますがソースの興味のある方は読んでもいいし、読まなくてもいいです。なぜなら、僕は自分のソースに全く自信が持てないので、嘘を書いてる可能性もあるし何より大事なのは考え方の説明のほうだと思っているからです。

package classes {
	import flash.net.URLRequest;
	import jp.progression.casts.*;
	import jp.progression.commands.display.*;
	import jp.progression.commands.lists.*;
	import jp.progression.commands.managers.*;
	import jp.progression.commands.media.*;
	import jp.progression.commands.net.*;
	import jp.progression.commands.tweens.*;
	import jp.progression.commands.*;
	import jp.progression.config.*;
	import jp.progression.data.*;
	import jp.progression.debug.*;
	import jp.progression.events.*;
	import jp.progression.loader.PRMLLoader;
	import jp.progression.scenes.*;
	import flash.events.*;
	import classes.common.*;
	import classes.scenes.*;
 
	/**
	 * ...
	 * @author ...
	 */
	public class Index extends CastDocument {
		AbstractScene;
		/**
		 * 新しい Index インスタンスを作成します。
		 */
		public function Index() {
			// 自動的に作成される Progression インスタンスの初期設定を行います。
			// 生成されたインスタンスにアクセスする場合には manager プロパティを参照してください。
			//super( "index", IndexScene, new WebConfig() );
			//PRMLLoaderにまかせるのでここではnullを入れておく
			super(null, null, new WebConfig);
		}
 
		/**
		 * SWF ファイルの読み込みが完了し、stage 及び loaderInfo にアクセス可能になった場合に送出されます。
		 */
		override protected function atReady():void {
			var prmlLoader:PRMLLoader = new PRMLLoader(stage);
 
			prmlLoader.addEventListener(Event.COMPLETE, function(e:Event):void {
				prmlLoader.removeEventListener(Event.COMPLETE, arguments.callee);
				// 開発者用に Progression の動作状況を出力します。
				Debugger.addTarget( manager );
				// 外部同期機能を有効化します。
				manager.sync = true;
 
				//違うところにナビゲーションしたらトップページに
				manager.addEventListener(ProcessEvent.PROCESS_ERROR, function(e:ProcessEvent):void {
					manager.goto(manager.syncedSceneId);
				});
 
				// 最初のシーンに移動します。
				manager.goto( manager.syncedSceneId );
			});
 
			prmlLoader.load(new URLRequest("casting.xml"));
		}
	}
}

基本的に大事なのは、コンストラクタ内では初期化を行わずに、atReadyの中でPRMLLoaderを使ってcasting.xmlを読み込んでいることだけです。

EasyCastingSceneもどきを作る

次にscenes.AvstractScene.asのほうです。こちらは潔いくらいEasyCastingSceneのパクリです。
ヘッダの記載に迷ったのが、ほとんど手を付けてないのでEasyCastingの表記を守りましたが、逆に「へぼくなってる。手を加えたのなら自分の表記にするべき」なのであれば、ヘッダーの部分は僕自身の名前に変えます。興味ある方はオリジナルのEasyCastingと読み比べて見てください。

※2010.05.21 公式の4.0.2bパッチに対応しました

/**
 * Progression 4
 *
 * @author Copyright (C) 2007-2010 taka:nium.jp, All Rights Reserved.
 * @version 4.0.2b
 * @see http://progression.jp/
 *
 * Progression Libraries is dual licensed under the "Progression Library License" and "GPL".
 * http://progression.jp/license
 */
package classes.scenes {
	import flash.display.Sprite;
	import flash.utils.Dictionary;
	import flash.utils.getDefinitionByName;
	import jp.nium.core.debug.Logger;
	import jp.nium.core.L10N.L10NNiumMsg;
	import jp.nium.utils.ObjectUtil;
	import jp.nium.utils.StringUtil;
	import jp.progression.commands.display.AddChild;
	import jp.progression.commands.display.AddChildAt;
	import jp.progression.commands.display.RemoveChild;
	import jp.progression.commands.lists.ParallelList;
	import jp.progression.core.L10N.L10NProgressionMsg;
	import jp.progression.core.PackageInfo;
	import jp.progression.events.DataProvideEvent;
	import jp.progression.events.SceneEvent;
	import jp.progression.executors.CommandExecutor;
	import jp.progression.Progression;
	import jp.progression.scenes.*;
	import classes.display.AbstractSceneContainer;
	import classes.common.AbstractSceneManager;
	import classes.casts.*;
 
	/**
	 * <span lang="ja">EasyCastingScene クラスは、拡張された PRML 形式の XML データを使用して ActionScript を使用しないコンポーネントベースの開発スタイルを提供するクラスです。</span>
	 * <span lang="en"></span>
	 *
	 * @example
<listing version="3.0">
	 * // EasyCastingScene インスタンスを作成する
	 * var scene:EasyCastingScene = new EasyCastingScene();
	 * </listing>
	 */
	public class AbstractScene extends SceneObject {
		AbstractCast;
		/**
		 * すべてのインスタンスを保持した Dictionary インスタンスを取得します。
		 */
		private static var _instances:Dictionary = AbstractSceneManager.getInstance().contentInstance;
 
		/**
		 * 現在表示しているインスタンスを保持した Dictionary インスタンスを取得します。
		 */
		private static var _displayingList:Dictionary = AbstractSceneManager.getInstance().displayingList;
 
		/**
		 * コンテナインスタンスを保持した Dictionary インスタンスを取得します。
		 */
		private static var _containers:Dictionary = AbstractSceneManager.getInstance().containers;
 
		/**
		 * <span lang="ja">自身に移動した際に表示させる表示オブジェクトを保持した配列を取得します。</span>
		 * <span lang="en"></span>
		 */
		public function get casts():Array { return _casts.slice(); }
		private var _casts:Array;
 
		/**
		 * キャストオブジェクトのクラス名をキーとして、パラメータを保持した Dictionary インスタンスを取得します。
		 */
		private var _castParameters:Dictionary;
 
		/**
		 * <span lang="ja">新しい EasyCastingScene インスタンスを作成します。</span>
		 * <span lang="en">Creates a new EasyCastingScene object.</span>
		 *
		 * @param name
		 * <span lang="ja">シーンの名前です。</span>
		 * <span lang="en"></span>
		 * @param initObject
		 * <span lang="ja">設定したいプロパティを含んだオブジェクトです。</span>
		 * <span lang="en"></span>
		 */
		public function AbstractScene( name:String = null, initObject:Object = null ) {
			// 初期化する
			_casts = [];
			_castParameters = new Dictionary();
 
			// 親クラスを初期化する
			super( name, initObject );
 
			// Progression が CommandExecutor を実装していなければ例外をスローする
			if ( Progression.config.executor != CommandExecutor ) { throw new Error( Logger.getLog( L10NNiumMsg.getInstance().ERROR_017 ).toString( className, "CommandExecutor" ) ); }
 
			// イベントリスナーを登録する
			super.addEventListener( SceneEvent.SCENE_UNLOAD, _sceneUnload, false, 0, true );
			super.addEventListener( SceneEvent.SCENE_INIT, _sceneInit, false, 0, true );
			super.addEventListener( SceneEvent.SCENE_ADDED_TO_ROOT, _sceneAddedToRoot, false, 0, true );
			super.addEventListener( SceneEvent.SCENE_REMOVED_FROM_ROOT, _sceneRemovedFromRoot, false, 0, true );
		}
 
		/**
		 * <span lang="ja">XML データが EasyCasting 拡張 PRML フォーマットに準拠しているかどうかを返します。</span>
		 * <span lang="en"></span>
		 *
		 * @param prml
		 * <span lang="ja">フォーマットを検査したい XML データです。</span>
		 * <span lang="en"></span>
		 * @return
		 * <span lang="ja">フォーマットが合致すれば true を、合致しなければ false となります。</span>
		 * <span lang="en"></span>
		 *
		 * @example
<listing version="3.0">
		 * </listing>
		 */
		public static function validate( prml:XML ):Boolean {
			prml = new XML( prml.toXMLString() );
 
			// コンテンツタイプを確認する
			switch ( String( prml.attribute( "type" ) ) ) {
				case "text/easycasting"			:
				case "text/prml.easycasting"	: { break; }
				case "text/prml.plain"			: { break; }
				default							: { return false; }
			}
 
			// 必須プロパティを精査する
			for each ( var cast:XML in prml..cast ) {
				if ( !String( cast.attribute( "cls" ) ) ) { return false; }
			}
 
			// PRML として評価する
			prml.@type = "text/prml.plain";
 
			return SceneObject.validate( prml );
		}
 
		/**
		 * <span lang="ja">この SceneObject インスタンスの子を PRML 形式の XML データから追加します。</span>
		 * <span lang="en"></span>
		 *
		 * @param prml
		 * <span lang="en">PRML 形式の XML データです。</span>
		 * <span lang="en"></span>
		 */
		override public function addSceneFromXML( prml:XML ):void {
			// <scene> の cls を上書きする
			/*
			for each ( var scene:XML in prml..scene ) {
				scene.@cls = "jp.progression.scenes.EasyCastingScene";
			}
			*/
 
			// PRML のフォーマットが正しくなければ例外をスローする
			if ( !validate( prml ) ) { throw new Error( Logger.getLog( L10NNiumMsg.getInstance().ERROR_005 ).toString( "PRML" ) ); }
 
			// 親のメソッドを実行する
			super.addSceneFromXML( prml );
		}
 
		/**
		 * <span lang="ja">保持しているデータを解放します。</span>
		 * <span lang="en"></span>
		 */
		override public function dispose():void {
			_casts = [];
			_castParameters = new Dictionary();
 
			// 親のメソッドを実行する
			super.dispose();
		}
 
		/**
		 * シーン移動時に目的地がシーンオブジェクト自身もしくは親階層だった場合に、階層が変更される直前に送出されます。
		 */
		private function _sceneUnload( e:SceneEvent ):void {
			// 対象がルートでなければ終了する
			if ( this != super.root ) { return; }
 
			// コンテナを取得する
			_containers[super.container] ||= new AbstractSceneContainer( this );
			var container:AbstractSceneContainer = _containers[super.container];
 
			// コマンドリストを作成する
			var removeChildList:ParallelList = new ParallelList();
 
			// すでに表示されている対象を検索する
			for ( var cls:String in _displayingList ) {
				// コマンドを追加する
				removeChildList.addCommand( new RemoveChild( container, _displayingList[cls] ) );
 
				// 登録から削除する
				delete _displayingList[cls];
			}
 
			// コマンドを追加する
			super.addCommand( removeChildList );
		}
 
		/**
		 * シーンオブジェクト自身が目的地だった場合に、到達した瞬間に送出されます。
		 */
		private function _sceneInit( e:SceneEvent ):void {
			// コンテナを取得する
			_containers[super.container] ||= new AbstractSceneContainer( this );
			var container:AbstractSceneContainer = _containers[super.container];
 
			// コンテナが登録されていなければ登録する
			if ( !super.container.contains( container ) ) {
				super.container.addChild( container );
			}
 
			// コマンドリストを作成する
			var addChildList:ParallelList = new ParallelList();
			var removeChildList:ParallelList = new ParallelList();
 
			// すでに表示されている対象を検索する
			for ( var cls:String in _displayingList ) {
				// 登録されていれば次へ
				if ( _castParameters[cls] ) { continue; }
 
				// コマンドを追加する
				removeChildList.addCommand( new RemoveChild( container, _displayingList[cls] ) );
 
				// 登録から削除する
				delete _displayingList[cls];
			}
 
			// 現在のシーンで必要な対象を追加する
			for ( var cast:String in _castParameters ) {
				// インスタンスを取得する
				var instance:Sprite = _displayingList[cast];
 
				// すでに表示されていれば次へ
				if ( instance ) { continue; }
 
				// インスタンスを取得する
				instance = _instances[cast];
 
				// プロパティを設定する
				ObjectUtil.setProperties( instance, _castParameters[cast] );
 
				// インデックスを取得する
				var index:String = _castParameters[cast].index;
 
				// コマンドを追加する
				if ( index ) {
					addChildList.addCommand( new AddChildAt( container, instance, parseInt( index ) ) );
				}
				else {
					addChildList.addCommand( new AddChild( container, instance ) );
				}
 
				// 表示中リストに登録する
				_displayingList[cast] = instance;
			}
 
			// コマンドを追加する
			super.addCommand( removeChildList, addChildList );
		}
 
		/**
		 * シーンオブジェクトが直接、またはシーンオブジェクトを含むサブツリーの追加により、ルートシーン上のシーンリストに追加されたときに送出されます。
		 */
		private function _sceneAddedToRoot( e:SceneEvent ):void {
			if ( super.dataHolder ) {
				super.dataHolder.addEventListener( DataProvideEvent.DATA_UPDATE, _update, false, 0, true );
			}
		}
 
		/**
		 * シーンオブジェクトが直接、またはシーンオブジェクトを含むサブツリーの削除により、ルートシーン上のシーンリストから削除されようとしているときに送出されます。
		 */
		private function _sceneRemovedFromRoot( e:SceneEvent ):void {
			if ( super.dataHolder ) {
				super.dataHolder.removeEventListener( DataProvideEvent.DATA_UPDATE, _update );
			}
		}
 
		/**
		 * 管理するデータが更新された場合に送出されます。
		 */
		private function _update( e:DataProvideEvent ):void {
			// データを取得する
			var xml:XML = new XML( super.toXMLString() );
 
			// cast を取得する
			_castParameters = new Dictionary();
			for each ( var cast:XML in xml.cast ) {
				var o:Object = {};
 
				// アトリビュートを取得する
				for each ( var attribute:XML in cast.attributes() ) {
					o[String( attribute.name() )] = StringUtil.toProperType( attribute );
				}
 
				_castParameters[String( cast.@cls )] = o;
			}
 
			// インスタンスを作成する
			_casts = [];
			for ( var clsPath:String in _castParameters ) {
				try {
					// クラスの参照を取得する
					var cls:Class = getDefinitionByName( clsPath ) as Class;
 
					// インスタンスを生成する
					_instances[clsPath] ||= new cls();
 
					// リストに追加する
					_casts.push( clsPath );
				}
				catch ( e:Error ) {
					if ( PackageInfo.hasDebugger ) {
						// 警告を表示する
						Logger.error( Logger.getLog( L10NProgressionMsg.getInstance().ERROR_018 ).toString( clsPath ) );
					}
 
					// 登録を破棄する
					delete _castParameters[clsPath];
				}
			}
		}
	}
}

あとはガンガンXMLを書いていく

ほかのクラスはどうでもいいです。
とりあえずバグが出なくなるように調整したクラスだったりしますから。

あとはProgressionシーンエディタでもいいですし、XMLを直接でもいいですし、PRMLをがっつり書いていきます。
がっつり書き終えたら、次の二つのことをしておきます。

1. PRMLの属性を type="text/prml.plain" にしておく
2. sceneのcls属性を全部"classes.scenes.AbstractScene"にしておく

あとは動かすだけ！

たったこれだけでクラススタイルの自由な環境を維持したままシーンの構造をXMLにまるなげ出来る環境が整いました。
PRMLのtypeは"text/prml.plain"ですので、XMLでも個別に動かしたいシーンはclasses.scenes.AbstractSceneをオーバーライドしたカスタムSceneObjectでいつもどおりの開発も行えます。
もう少しコンポーネントとハイブリッドな開発を行いたければ、僕の一番のおすすめはPRMLをEasyCastingと同じようにcastタグを追加するスタイルです。

castタグのcls属性もクラスの指定なので、ここで独自のCastObjectを指定しておけば、クラススタイルの開発と変わることなくキャストによる開発を行えます。むしろSceneObjectをXML以外で触ることがほとんど無くなるので従来のクラススタイルより一歩進んでスマートに開発が行えるようになりました。

castタグ以外にも、ほかにも自由にXMLにタグを追加してdataHolderから値をとるなど、かなり柔軟で強力な開発を行えるスタイルなので、ばりばりクラスを使いこなす人ほど「コンポーネントスタイルとの連携なんて」と思わず是非とも実践して欲しい技の一つです。

ご意見ご質問は随時受け付けております。みんなでオレオレProgression開発スタイルを語り合おう！

詳しい内容はこちらのリンクを参照して下さい。

以前も何度かProgressionのコンポーネントとクラスの話題はこのブログでもやってきていますが、いろいろと情報も古くなってきてたり微妙に間違えているところがあったりしてたので、Progression4も正式公開したことだしここいらへんで情報共有の良い機会ではないかと思ったわけです。

内容に関しても、リンク先を参照して頂くのが一番ですが、要はコンポーネントとクラスをしっかり分離して作ったら思いのほか使い勝手が飛躍的に向上したので、そこらへんについて勉強したいと思います。
このブログでも、勉強会に向けて少しでも仕入れておいた方が良い知識を何回かに分けて書いていこうかと思います。

Progressionはシーンとキャストを管理してくれる

Progressionはよく「Flashサイトを作るのに便利なフレームワーク」と説明されますが、僕はサイトに限らず何を作るにしてもFlashをより便利で簡単に作れるようになるフレームワークと認識しています。
それは、もともとFlashにはステージ（舞台）の上でそのままタイムラインが進行するソフトだったものに、シーン（場面）とキャスト（役者）の管理を追加したものがProgressionだからです。
Flashにもネイティブにシーンとかあるし、インスタンスが役者みたいなものなんだけどProgressionはそれらをもっと厳密に扱うことになります。
いうなれば、今までてんでばらばらに動いていたFlash劇団に、Progressionさんという場面と役者の進行管理役が入団したようなイメージです。
今まではFlash劇団員たちはそれぞれが自分の出るタイミングをはかって舞台に出て、演技しながらもそれぞれが舞台の状況を判断して舞台から退場したり、状況に応じて変身したりしていました。とても自由だけどエラー（失敗）も多かったことも確かでした。
そこに現れたProgressionさんは、進行管理役である以上慣れないうちはFlash劇団員にとって口うるさい厄介者に感じるかも知れません。
ところが、舞台に出たり引っ込んだり、その場面のタイミングとか舞台の状況とかは全部Progressionさんに任せられることが出来るようになったので、役者達は舞台に出たら出たで一生懸命、演技にのみ集中することが出来るようになった、僕にとってはProgressionに対してそういうイメージが強いです。

劇団のたとえ話から戻します。Progressionがシーンとキャストという概念をFlashに新たに追加して、より簡単にFlashの進行をコントロールしてくれるおかげで、面倒臭いところは全部Progressionに任せてFlashの表現にのみ集中することが出来るようになりました。

Progressionはコマンドを使わせてくれる

もうひとつProgressionが便利なのが、コマンドという便利な命令が沢山用意されていることです。
さらにこのコマンドは「順番に実行していくか」「一度に実行していくか」を細かく自由に選べるので（しかもとっても簡単に！）複雑な表現なんかも本当に楽に挑戦することが出来るようになります。

Progressionは使う人を選ばない

こんなに便利で楽しいProgressionの凄いところは、Flashを触れる人であれば誰でも得意なスタイルで触り始められることです。
Progressionには「コンポーネントスタイル」「タイムラインスタイル」「クラススタイル」という3つのスタイルで始められるのですが、コンポーネントスタイルは特に圧巻で、ActionScriptは「stop()」のスの字も一文字も書かずに、かなり複雑なFlashが作れてしまいます。
いずれブログでも取り上げたいのですが、ゲームなんかも作れてしまいます。

それだけを見ると、昔よくあったサードパーティ製の「けっこう複雑なFlashが驚くほど簡単に作れちゃう！」系のソフトみたいな、いわゆる「プロユースでない」ゆるいソフトを想像するかも知れませんが、とんでもないです。
自分で言うのもなんですが、僕のところの制作実績として公開非公開あわせて小さい案件からけっこう大規模な案件までやらせて頂いてますが、Progressionは大案件の開発にも耐えうる、どころか僕の経験したくらいの大案件ならば、もはやProgression無しでは難しいくらい信頼性の高い開発環境を提供してくれています。

ひとたび「クラススタイル」で作り始めると、Progressionの設計の高さから自分のコーディング力もアップすること請け合いですｗ
ソースコードも公開されているので、困ったときにリファレンスと一緒に眺めてるとかなり勉強にもなります。

要するにProgressionは、「何々が出来ないと使えない」ような使う人を選ぶフレームワークではなく、使う人が「すきなProgressionを選べばいい」ように出来ているのです。

Progressionのスタイルには隔たりがない

Progressionのコンポーネントスタイルとタイムラインスタイルとクラススタイルには特に隔たりがありません。
作り方にコツがあるんですが、最初コンポーネントで作っておいてあとからクラスに変更することも簡単ですし、その逆にクラスで作っていてもあとからコンポーネントにし直すことも簡単に出来ます。

勉強会では、このへんのコツもお話しする予定ですのでお楽しみにして下さい！

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

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

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

前回は、最初クラスベースでプロジェクトを作っておいて、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);
					});
				}
 
			});
		}
	}
}

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

Progressionではスクリプトを一切使わない「コンポーネントスタイル」やタイムラインスクリプト派の「タイムラインスタイル」、クラスでわしわし書きたい人向けの「クラススタイル」など制作者のスタイルにあわせたとても柔軟な開発スタイルが用意されていますが、今回はその中でも「コンポーネントスタイル」と「クラススタイル」を連携させた開発手法についてまとめてみました。

はじめに

そもそも「コンポーネントスタイル」と「クラススタイル」の連携とはなんぞやという説明ですが、ひとつのサイトを作る上でデザイナーやアニメーターは「コンポーネントスタイル」を、プログラマーは「クラススタイル」をそれぞれ用いながら、同時にサイト制作を行えないかと考えてあみだした必殺技です。
Progressionのようなよくできた開発フレームワークがあれば、Progressionを制作の共通言語として、開発スタイルの違いを気にせずほんとうに簡単に連携してサイト制作が行えるようになります。

今回はそのためのひとつの方法をうちがやってる例として紹介したいと思います。

今回の例

コンポーネントとクラス、それぞれのスタイルの連携といっても、ベースのスタイルをどちらにするか先ず決めなければ行けません。
ページの遷移のコントロールなど、サイト全体の管理をクラスベースで行いたい場合は「クラススタイル」ベースにしておいて、ページの部品などをコンポーネントで制作していくやり方になるでしょうが、今回は「コンポーネントスタイル」をベースとして制作を行い、あるページや部分だけをクラスで開発するという方法をとってみます。

Progressionプロジェクトの作成

Flashdevelopと連携するため、一旦クラスベースでProgressionプロジェクトを作成します。
Flashdevelopを使う予定のない場合は、そのままコンポーネントスタイルでプロジェクトを作成して、この章をすっ飛ばして読み進めてもかまいません。

AS3クラスを書くのにFlashDevelopが欠かせないのは僕みたいな中途半端なスクリプトコーダーには言わずもがななんですが、最初からコンポーネントスタイルでProgressionプロジェクトを作成してもFlashDevelopプロジェクトファイルも一緒に書き出せればいいんですが、どうも最初にクラスベースにしておかないとFlashDevelopプロジェクトファイルは書き出してくれないようで、だったら最初はコンポーネントスタイルにしておいて後から手作業でFlashDevelopプロジェクトファイルを作成する方法もあるのですが、いろいろと設定が面倒なので今回は「最初に一旦クラスベースで書き出しておいて、FlashDevelopプロジェクトファイルを書き出してもらってからflaファイルのほうはコンポーネントベースで制作できるようにする」ことを目的としています。

Progressionプロジェクトを作成

種類を「クラス」に選んだら、ActionScriptタブの中にある「FlashDevelopプロジェクトを作成」にチェックを入れておきます。あとは「新しく作成する」ボタンで適当なフォルダにプロジェクトを作成します。

しばらく待つとプロジェクトが作成されてindex.flaが開くと思います。普通のクラスベースの開発でしたら、ここからそのままわしわしとクラスを書いていけばいいのですが、今回はこのプロジェクトをコンポーネントスタイルで行いたいので、そっちで制作するように変更してみましょう。

ドキュメントクラスを消します

Flashのステージのプロパティウインドウにドキュメントクラスっちゅうものを指定する欄があります。クラスベースでProgressionプロジェクトを作成すると、クラスでの開発が行いやすいようにとあらかじめtaka:nium先生が入れて下さっているのですが、コンポーネントスタイルの開発には必要のないものなので心は痛みますがここの項目はさくっと消しちゃいましょう。

ドキュメントクラスの設定を消します

要はFlashDevelopプロジェクトファイルを作って欲しかっただけで、利用するものは利用して必要のないものはどんどん消していくという、名付けて鬼のジゴロスタイル！

次にFlashメニューの「ウインドウ」→「コンポーネント」からコンポーネントウインドウを開いて、その中にある「Progression Loader」の「EasyCastingLoader」というコンポーネントを探してきて、これをステージにドラッグドロップします。

ステージ上にEasyCastingLoaderコンポーネントを置こう

今ステージ上に置いたEasyCastingLoaderを選択した状態で、Flashメニューの「ウインドウ」→「コンポーネントインスペクタ」からコンポーネントインスペクタウインドウを開きます。EasyCastingLoaderの設定画面が出てくると思うので、ここの「url」の欄に「easycasting.xml」と書き込んでおきましょう。

urlのところにeasycasting.xmlと書く

これで「クラスもところどころで書きたいのでFlashDevelopプロジェクトも作りつつコンポーネントスタイルメインで制作を行う」準備が整いました。

Progressionシーンエディタの活用

あとはコンポーネントスタイルで気楽に制作に取りかかりましょう。
Flashメニューの「ウインドウ」→「他のパネル」→「Progression シーンエディタ」でシーンエディタを開きます。

気楽に、ってこのサイト気ぬきすぎです

シーンエディタの詳しい使い方はProgression公式ページのドキュメント、コンポーネントスタイルガイドの「シーンを作成する」などを参考にしてみて下さい。
シーンは「舞台」、キャストは「役者」など昔なつかしいFlashの概念を踏襲してて、ほとんど直感的に扱えると思います。

ちなみにシーンエディタでは、Flashで言うところのレイヤーの重なりと同じ概念としてキャストに「index」という数字を設定できます。
これは数字が大きい方が前面に重なるものなので、サイトロゴやグローバルメニューなど常に前面に表示しておきたいキャストはこの「index」の数字を大きい数字にしておくと良いです。
ただし「index」がゼロの場合だけは特別で、ここをゼロに設定しておくと常に一番前面に表示されるようです。
もう、何が何でも絶対に表示されてないといけないキャストは（あ、それこそサイトロゴとか）ここをゼロに設定する方法も考えてみても良いでしょう。

ちなみにシーンエディタの「書き出し」→「キャストをシンボルとして書き出す」をするとよくわかるんですが、コンポーネントスタイルでのキャストというのは要はムービークリップの事です。
ここらへんもよくできていて、今まで培ったムービークリップの技術を捨てることなく誰でも今日からでもProgressionを使用してサイト制作を容易にするための工夫が随所にちりばめられています。

キャストをシンボルとして書き出す

さっきからProgressionべたぼめで自分でも気持ち悪いですが、いやほんと使えば使うほどよくできてます。

最後にシーンエディタ上の「ファイル」→「名前をつけて保存」から（Flashメニューではなくシーンエディタのメニューです）今回のProgressionプロジェクトで作成したフォルダにある「deploy」というフォルダの中に「easycasting.xml」という名前でファイルを保存すれば完成です。

easycasting.xmlという名前でdeployフォルダに保存

あとは各ページを作っていくだけ！

基本的にあとはコンポーネントスタイルで制作していくだけなので、Progressionコンポーネントスタイルガイドなどを参考に、本当にActionScriptを一行も書かずにフルFlashサイトが出来てしまいます。

Progressionのバージョンが2と少し古いですが（現在のProgressionのバージョンは3）FlashPowerSessionでもお世話になっている琉球インクさんの松竹さんがAdobeデベロッパーセンターに書かれたProgression Framework 2　初級編：ActionScriptを書かずにFlashサイトを簡単に構築するという記事も参考になります。

繰り返しになりますがとにかくコンポーネントスタイルで制作すれば、ActionScriptの事なんか一行も考えずにページが出来ていくようになります（もちろんActionScriptを書いても良いです）。

でも特定のページはクラスで書きたい

いちおう今回の記事のヤマですが、他のページはコンポーネントだけで作りたいけどある特定のページだけはクラスで作っていきたい場合があります。

基本的にはただのクラスの継承なので、そもそもクラスベースで開発したい方にとっては当たり前すぎて有用な情報ではないのですが、まとめておきたいと思います。

例えば今回参考にしたシーンの中で「BbsPage」だけはクラスで作りたい場合、プロジェクトの中にBbsPageというクラスを作っておきます。今回はsrcフォルダの中に「myproject」フォルダを作り、さらにその中に「pages」というフォルダを作ってそこにクラスファイルを作成しました。
（蛇足ですが僕はクラスベースで開発するときはSceneObjectクラスは「scenes」フォルダ、そのSceneObjectから直接読み込まれるCastなにがしクラスは「pages」フォルダを作りそれぞれその中に入れるようにしています）

BbsPageクラスを作っておく

クラスファイルの中身は、こんな感じでCastSpriteやSctMovieClipなどを継承しておけば、_onCastAddedや_onCastRemovedイベントも受け取ることが出来るのでとても便利です。

package myproject.pages
{
	import flash.display.Graphics;
	import jp.progression.casts.*;
	import jp.progression.commands.*;
	import jp.progression.events.*;
	import jp.progression.loader.*;
	import jp.progression.*;
	import jp.progression.scenes.*;
 
	/**
	 *
	 */
	public class BbsPage extends CastSprite
	{
 
		/**
		 * コンストラクタ
		 */
		public function BbsPage( initObject:Object = null )
		{
			super( initObject );
 
			var p:Progression = new Progression("contact");
 
			var g:Graphics = graphics;
 
			g.beginFill(0xFF0000);
			g.drawRect(0, 0, p.stage.stageWidth, p.stage.stageHeight);
			g.endFill();
 
			alpha = 0;
		}
 
		/**
		 * ICastObject オブジェクトが AddChild コマンド、または AddChildAt コマンド経由でディスプレイリストに追加された場合に送出されます。
		 * このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
		 */
		protected override function _onCastAdded():void
		{
			// 実行したいコマンドを登録します。
			addCommand(
				// 任意のコマンドを記述してください。
				new DoTweener(this, { alpha:1, time:1 } )
			);
		}
 
		/**
		 * ICastObject オブジェクトが RemoveChild コマンド、または RemoveAllChild コマンド経由でディスプレイリストから削除された場合に送出されます。
		 * このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
		 */
		protected override function _onCastRemoved():void
		{
			// 実行したいコマンドを登録します。
			addCommand(
				// 任意のコマンドを記述してください。
				new DoTweener(this, { alpha:0, time:1 } )
			);
		}
	}
}

あとはFlash上のライブラリウインドウから「BbsPage」インスタンスのプロパティを選択して、継承するクラス（基本クラス）を「myproject.pages.BbsPage」と書き換えてやるだけで、本当に簡単にコンポーネントスタイルと連携を取ることができるようになります。

基本クラスを自分の作ったクラスファイルに書き換えるだけ

まとめ

デザイナーとプログラマーの連携以外にも、「Progressionコンポーネントスタイルはマスターして次はクラスベースにも挑戦したいけど全部をクラスにするにはまだ難しくて敷居が高い」方も、こうしておくと基本はコンポーネントスタイル作っていって、特定のページだけクラスに挑戦することも出来るので非常にお勧めです。

うちでは普段はProgressionで制作するときは先ずクラスベースで作っておいて、ボタンなどちょっとした部品はコンポーネントを併用することの方が多いですが、今回まずデザインやアニメーションありきの案件の場合コンポーネントメインで作っておいて、ある特定のページだけ高度なことをしたかったのでクラスと連携させる方法を探ってみました。結果としてProgressionの_onCastAdded便利なCommand環境を捨てることなくすんなりとコンポーネントスタイルに組み込むことが出来たので制作スタイルの幅がよりいっそう広がったと思います。

Flashサイト制作の上でもはや手放せないフレームワーク、その名も「Progression」
Scene管理も秀逸ですが僕がProgressionを使ってて何よりも惚れ惚れするのがCommandがよく練られていてとっても使いやすいところなのです。
「こういうこともCommandで出来ないかな？」とリファレンスを読み読みしてると必ず上手いやり方が用意されていて、どんどん使っていくうちにいわゆる「Progression的な」コードの書き方に身が染まっていって毎日新しい発見があってコードを書くのがとても楽しいです。
（もちろん、Progression的な書き方を強制されるわけでは無くって、我流の書き方も完全に許容されているところもこのフレームワークを好きな理由の一つです）
ということで、今まで勉強してきたCommandの使い方の途中段階までをまとめておきたいと思います。

基本のキホン

まずCommandがどこで実行されるかですが、一番簡単なのは
SceneObjectでしたら_onLoad、_onInit、_onGoto、_onUnloadの関数の中に直接addCommandしておく方法。
CastSpriteやCastMovieClipなどは_onCastAddedや_onCastRemovedなんかに直接addCommandしておきます。
このへんのシーン管理やイベント管理もとっても面白いんでいろいろとまとめたいところなんですが、今日のまとめはあくまでCommandだけにとどめておきたいと思います。

SerialListとParallelList

• SerialListは順番にコマンドを実行する
• ParallelListは一度に同時にコマンドを実行する
• SerialListに配列としてコマンドをaddCommandすればその配列内のコマンドはParallelListとして実行される
• 逆にParallelListに配列としてコマンドをaddCommandすればその配列内のコマンドはSerialListとして実行される
• _onInitなんかの関数の中は最初はSerialList

こんなところでしょうか。
使い方はこんな感じ。

 
private function test():void {
	var list:SerialList = new SerialList();
	list.addCommand(
		new LoadURL(new URLRequest("hoge.xml")),//XMLの読み込みを開始
		function():void {
			trace(new XML(this.latestData));//読み込んだXMLを出力
		},
		[
			new DoTweener(front, { alpha:0, time:1 } ),//前面のMCを1秒かけて透明に
			new DoTweener(back, { alpha:1, time:1 } )//背面のMCも同時に1秒かけて不透明に
		]
	);
	list.execute();//SerialListを実行
}
 

最初にSerialListで実行させているので、XMLの読み込みを待って完了したら自動的に次の処理に移ります。
その後配列で登録してあるのでクロスフェードの処理はParallelListとして同時に実行されることになります。
そうめんもそうなんですが、もうaddEventListenerだらけで「えっと、ここが完了したら次こうなって…」と悩まされなくて済むようになりました。

外部swfのクラスを使いたい

こんだけイケてるCommandなのですから、シーンの読み込みの際に外部swfを取得してそこからクラスを参照するやり方も何か用意されているのではないかと思って調べてたら、やっぱりありました。
LoadObjectといって、CastLoaderを監視するコマンドがありました。
さすがtaka:nium先生！もう俺は一生Progressionについていくぜー！

 
package
{
	import flash.display.Sprite;
	import jp.progression.casts.*;
	import jp.progression.commands.*;
	import jp.progression.commands.display.LoadObject;
	import jp.progression.events.*;
	import jp.progression.loader.*;
	import jp.progression.*;
	import jp.progression.scenes.*;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	import flash.system.ApplicationDomain;
	public class Test extends CastSprite
	{
		private var _loader:CastLoader;
		private var _context:LoaderContext;
		public function Test( initObject:Object = null )
		{
			super( initObject );
			_loader = new CastLoader();
			_context = new LoaderContext();
			_context.applicationDomain = ApplicationDomain.currentDomain;
		}
		protected override function _onCastAdded():void
		{
			addCommand(
				new DoTweener(this, { alpha:0 } ),
				new LoadObject(_loader, new URLRequest("hoge.swf"), {
					context:_context,
					onCastLoadComplete:function():void {
						var myDomain:ApplicationDomain = _loader.contentLoaderInfo.applicationDomain;
						var myClass:Class = _myDomain.getDefinition("onigiri") as Class;
						var mc:Sprite = new myClass();
						addChild(mc);
					}
				}),
				new DoTweener(this, { alpha:1, time:1 } )
			);
		}
	}
}
 

実際にはLoadObjectのonCastLoadCompleteに登録しなくっても、そのままシリアルリストに次の処理を書いていってもよさげ。

だけどここで少しばかり問題が。
上に挙げたサンプルはCastなにがしで処理を行っているので問題ないんだけれど、SceneObjectでこれをやろうとするとCommandの参照の問題が出てくるような気がする。

例えばある特定のScene以下からは"hoge.swf"を読み込んでその階層以下からのSceneでは"hoge.swf"を使い回したい場合

 
package
{
	import jp.progression.casts.*;
	import jp.progression.commands.*;
	import jp.progression.events.*;
	import jp.progression.loader.*;
	import jp.progression.*;
	import jp.progression.scenes.*;
	import jp.progression.commands.display.LoadObject;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	import flash.system.ApplicationDomain;
	import HogePage;
 
	public class HogeScene extends SceneObject
	{
		private var _page:HogePage;
		private var _singleton:Singleton;
		private var _loader:CastLoader;
		private var _context:LoaderContext;
 
		public function HogeScene( name:String = null, initObject:Object = null ) {
			super( name, initObject );
 
			title = "hogehogeシーン";
 
			_loader = new CastLoader();
			_context = new LoaderContext();
			_context.applicationDomain = ApplicationDomain.currentDomain;
 
		}
 
		private function init():void {
			var myDomain:ApplicationDomain = _loader.contentLoaderInfo.applicationDomain;
			_page = new HogePage(myDomain);
 
			removeAllScenes();
			var fugaHelp:DressHelpScene = new fugaHelpScene(myDomain);
			fugaHelp.name = "help";
			addScene(fugaHelp);
		}
 
		protected override function _onLoad():void
		{
			addCommand(
				new LoadObject(_loader, new URLRequest("dressshop.swf"), {
					context:_context
				}),
				init,
				new AddChild(progression.container, _page)
			);
		}
 
		protected override function _onInit():void
		{
			addCommand(
			);
		}
 
		protected override function _onGoto():void
		{
			addCommand(
			);
		}
 
		protected override function _onUnload():void
		{
			addCommand(
				new RemoveChild(progression.container, _page),
				function():void {
					_loader.unload();
				}
			);
		}
	}
}
 

こんなふうに書くと動かなくなる。
何故これがだめなのかは

 
package
{
	import jp.progression.casts.*;
	import jp.progression.commands.*;
	import jp.progression.events.*;
	import jp.progression.loader.*;
	import jp.progression.*;
	import jp.progression.scenes.*;
	import jp.progression.commands.display.LoadObject;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	import flash.system.ApplicationDomain;
	import HogePage;
 
	public class HogeScene extends SceneObject
	{
		private var _page:HogePage;
		private var _singleton:Singleton;
		private var _loader:CastLoader;
		private var _context:LoaderContext;
 
		public function HogeScene( name:String = null, initObject:Object = null ) {
			super( name, initObject );
 
			title = "hogehogeシーン";
 
			_loader = new CastLoader();
			_context = new LoaderContext();
			_context.applicationDomain = ApplicationDomain.currentDomain;
 
		}
 
		private function init():void {
			var myDomain:ApplicationDomain = _loader.contentLoaderInfo.applicationDomain;
			_page = new HogePage(myDomain);
 
			removeAllScenes();
			var fugaHelp:DressHelpScene = new fugaHelpScene(myDomain);
			fugaHelp.name = "help";
			addScene(fugaHelp);
 
			trace(this, _page);
		}
 
		protected override function _onLoad():void
		{
			addCommand(
				new LoadObject(_loader, new URLRequest("dressshop.swf"), {
					context:_context
				}),
				init,
				new Trace(this),
				new Trace(_page),
				new AddChild(progression.container, _page)
			);
		}
 
		protected override function _onInit():void
		{
			addCommand(
			);
		}
 
		protected override function _onGoto():void
		{
			addCommand(
			);
		}
 
		protected override function _onUnload():void
		{
			addCommand(
				new RemoveChild(progression.container, _page),
				function():void {
					_loader.unload();
				}
			);
		}
	}
}
 

こう書いてみるとなんとなくわかるんだけれど、じゃあどうすればいいかというと僕はこうしました。

 
package
{
	import jp.progression.casts.*;
	import jp.progression.commands.*;
	import jp.progression.events.*;
	import jp.progression.loader.*;
	import jp.progression.*;
	import jp.progression.scenes.*;
	import jp.progression.commands.display.LoadObject;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	import flash.system.ApplicationDomain;
	import HogePage;
 
	public class HogeScene extends SceneObject
	{
		private var _page:HogePage;
		private var _singleton:Singleton;
		private var _loader:CastLoader;
		private var _context:LoaderContext;
 
		public function HogeScene( name:String = null, initObject:Object = null ) {
			super( name, initObject );
 
			title = "hogehogeシーン";
 
			_loader = new CastLoader();
			_context = new LoaderContext();
			_context.applicationDomain = ApplicationDomain.currentDomain;
 
			_page = new HogePage(myDomain);
		}
 
		private function init():void {
			var myDomain:ApplicationDomain = _loader.contentLoaderInfo.applicationDomain;
			//_page = new HogePage(myDomain);
			_page.myDomain;
 
			removeAllScenes();
			var fugaHelp:DressHelpScene = new fugaHelpScene(myDomain);
			fugaHelp.name = "help";
			addScene(fugaHelp);
 
			trace(this, _page);
		}
 
		protected override function _onLoad():void
		{
			addCommand(
				new LoadObject(_loader, new URLRequest("dressshop.swf"), {
					context:_context
				}),
				init,
				new Trace(this),
				new Trace(_page),
				new AddChild(progression.container, _page)
			);
		}
 
		protected override function _onInit():void
		{
			addCommand(
			);
		}
 
		protected override function _onGoto():void
		{
			addCommand(
			);
		}
 
		protected override function _onUnload():void
		{
			addCommand(
				new RemoveChild(progression.container, _page),
				function():void {
					_loader.unload();
				}
			);
		}
	}
	public class HogePage extends CastSprite
	{
		private var _myDomain:ApplicationDomain;
		public function set myDomain(value:ApplicationDomain):void
		{
			_myDomain = value;
		}
	}
}
 

他にもどうしても_onLoadのときに動的にクラスを生成しなければならなかったりした場合はもうちょっと違う書き方をするんだけど、僕の書いたどれもが根本的にCommandで処理できる流れになってなくて、ものすごい気持ち悪いです。
ひとえに僕がCommand内のthisの参照をよくわかっていないからだとは思いますが、もうちょっとCmmandだけで完結できる方法を勉強してみたいと思います。
目指せ！ProgressionのCommandマスター！