おはようございます、kijimaです。つい先日、初めての体験をふたつしました。

ひとつめは、ライブでドラムを叩きながらメインで歌をうたうという芸当。目の前にマイクがあると叩きづらいし、離れると声を拾わないしでなかなか大変ですね。ちなみにSpecial Othersをやりました。


そしてもう一つは今回の本題です。
お恥ずかしながら、つい先日やっとProgressionデビューしました。


例によって、本家サイトからダウンロードできるクラスベースでのサンプルをまず触ってみて、それをもとに実装していったのですが、シーン遷移、コマンドについてなどハマった点など思い出しつつ数回にわけてまとめてみたいと思います。(Progressionのバージョンは 3.0.7)

※今回の記事ではProgression自体のインストール方法は割愛します。
インストール方法は下記ページをご覧下さい。

Progression > ダウンロード


オブジェクト指向に即した、クラススタイルで実装します。
Progressionの実装方法にはタイムラインベース、コンポーネントスタイル、クラススタイルと選べる3タイプがあるそうですが、今回選んだクラスベースは、“Progression のパワーを最大限発揮するオブジェクト指向に即した形式”とのこと。
以下のページのチュートリアルに沿ってサンプルファイルを一通り見ていきました。サンプル内には「ClassStyle.as3proj」というFlashDevelopのプロジェクトファイルが同梱されているので、FlashDevelop中毒な僕はFlashDevelopを起動。
Progression >>> クラススタイルガイド

ワンクリックでHTMLから外部ライブラリのセッティングまで用意してくれた
まず驚いたのは、Progressionの新規プロジェクトを作成したときに生成されるディレクトリたち。
もうこの段階で、プリローダー用fla,swfやらhtmlとか一式生成されるので、単純な話、deployディレクトリの中身をそのままアップロードすればブラウザで確認できます。(実際納品する場合にはファイルごとにディレクトリに分けたり、といった作業が必要ですが)

コマンドという概念について
GoFのデザインパターンでも登場するCommandパターン。とりあえず、Progressionでいうコマンドも要は同じだと認識しています。
矢沢久雄の早わかりGoFデザインパターン(10)
第10回 Commandパターン/Strategyパターン

addCommand便利だなーって思ってCastSpriteとかのクラスをextendsしたクラス(サンプルでいうところのFeaturePage.asとか)で、スーパークラスの関数をオーバーライドしていない適当につくった関数内で何も考えずに以下のように記述したんですが、動きません。。

private function hoge():void { // 実行したいコマンドを登録します。 addCommand( // ページを不透明にします。 new DoTweener( this, { alpha:1, time:1 } ) ); }

addCommand、どこでも使えたらいいのになーなんて思ってたら、当たり前のようにSerialListというクラスがあった。(jp.progression.commandsの中に)
SerialList - Progression 3.1 - API Reference

_onCastAddedとか以外の場所でコマンド定義して実行したいときは下のようにやるとOK。

private function hoge():void { var list:SerialList = new SerialList(); list.addCommand( new Wait(1000), new Trace("addCommand()の引数にいれる型は"), new Wait(1000), new Trace("配列なんだけど"), new Wait(1000), new Trace("SerialListで定義すると、頭から順番に処理していくのです"), new Wait(1000), function():void{ trace("この中に書いてもOK"); }, new Wait(1000), new Trace("順番を並び替えた後、"), new Wait(1000), new Trace("よく最後のカンマを消し忘れたりしちゃいます") ); list.execute();//コマンド実行! };

SerialList,ParallelList,addCommandの使い方については、こちらのページでわかりやすく解説されています。
flabaka - ParallelListとSerialList

とりあえず数日使ってみての感想
鼻血出るくらい便利です!まさに「作りたいものは、楽しいところだけ作る」ことができています。余計なことは考えずにタイムラインのアニメーション調整に時間を費やすことができたり。。
Flashの作業は見た目以上に中の設計に気を使うんですが、その苦労はFlasher本人しかわからないことも多く、その上時間がかかるのはそういった設計部分だったりします。

そういったわずらわしい部分をProgressionがサポートしてくれるので、Flasherの作業スピードは劇的に向上します。ただでさえFlasherという職種は、デザイナーやプログラマー、ディレクターといったチーム内のメンバーそれぞれとの密なやりとりが必須ですし、こちらから率先して連携をとっていかなければ思わぬ事故につながってしまいます。
とはいえ、やりとりに時間をかけても肝心の実装にかける時間が減ってしまっては元も子もありません。いかにFlashの実装のみにかける時間を確保するかが、大事だと感じます。まだまだ把握していない機能があると思うので、今後もProgressionについて書いていきます!

あ、それと今週末日曜日夜の「ごはんと新年会」ぼくも参加しまーす!(もはや「Flash」ってタイトルに入ってないじゃんw) bowlsでお会いしましょう!
【告知】2009/1/25 ごはんと新年会@bowlsやります|_level0.KAYAC

KAYACでは、ProgressionでがしがしコーディングができるFlasherを募集しています!!


HTML5飯