Humming Via Kitchen

Progressionレクチャーメモ

Progression Framework のレクチャー＠ nium さんメモ。

とりあえずな定義として、一般的なコンテンツでの表示パターンは大まかにはこんな感じ。

1. 常に表示される 例）グローバルナビゲーション等
2. 特定階層以下で表示される 例）ローカルナビゲーション等
3. 特定のページのみで表示される 例）各ページの内容
4. その他、特定の条件下で表示される

４はどう考えても汎用化は無理なので、ココでは無視する。 例えばゲーム的なコンテンツを作るとして、

• １は、最初に表示させてそのまま放置すればOK
• ２は、例えば product ページに行ったら詳しい製品情報が出る感じで それ以下でずっと表示、それより上の階層に戻った場合は消去 という感じなので、n 階層のページ以上・以下で分岐する処理
• ３は、該当ページに移動してきた場合のみ処理すればOK

で、ココからが本題。２のパターンを実装したい場合、 特定の階層以下でずっと表示、それより上で消去ということは 階層を移動した瞬間が分かれば、そこに処理を書けば自動的に流れがつながるようになる。 Progression のイベントの流れで説明すると、１階層目のシーンから２階層目への移動は、

//  １階層目から２階層目へ移動
onGoto -> onLoad -> onInit

という感じでコールされていく。 コレだけ見ると、 onLoad と onInit 同じなんじゃ？いう感じな訳ですが、 これが１階層目から３階層目までダイレクトに飛んだ場合には、

//  １階層目から３階層目へ移動
onGoto -> onLoad -> onLoad -> onInit

となるらしく、なんと２階層目の onInit が実行されません！

で、基本的に onLoad と onUnload が、 onInit と onGoto がそれぞれ対になっているので、 onLoad で表示したものは onUnload で消去して onInit で表示したものは onGoto で消去すれば破綻なく処理出来るみたい。

上の例で言うと、第３階層から第１階層にダイレクトに移動した場合、

//  ３階層目から１階層目へ移動
onGoto -> onUnload -> onUnload -> onInit

というイベントフローになるので、第２階層目の onGoto は実行されない。

ココまでの流れの中で、実はちょっと省略したところがあって、 本当は第1階層から第3階層に行く時には、

//  間にonDEscendなイベントがコールされる
onGoto -> onLoad -> onDescend -> onLoad -> onInit

になるよ。

onDescend の使い道としては、 例えば第２階層以下で表示したい内容を、 第２階層に遷移してきた場合にはエモーショナルなアニメーションで表示して、 ２階層目を飛ばしてさらに下にダイレクトに飛んだ場合は省略アニメーションをしたい場合、 onDescend に省略アニメーションを仕込んでおく事で実装出来るよ。

ココらへんは、 nium さんもあまり使わないぐらいの応用編らしく、 とりあえずは「スルーしたよ。」というのも検知できると、 どこからどこに飛んでも確実に、かつドラマティックに画面を再現できるようになるよ！って事らしい。 実際にそれをやる場合には、 onLoad の処理と onDescend の処理が重複しないように、 Progression クラスが持っている destinedSceneId とかで判別してやる必要がある訳ですが、 それでも、個々の画面をほとんど意識しないで実装出来るってのは素敵！ onGoto と onUnload も同じ感覚で出来ちゃうと思うよ

ProgressionのPreloaderメモ

Progression Framework の PreLoader メモ。

今まで全く気にしてなかったんだけども、 deploy なディレクトリの中に preloader.swf ってファイルがある。 どうやらデプロイ環境では、最初にコレを読み込んでおいて、 そこから index.swf を読み込むようになってるみたい。 この方法だと index.swf がフォントの埋め込みとかサウンドの埋め込みとかで大きくなっても、 preloader.swf でローディング処理を入れておいてあげれば、 １フレーム目がなかなか読み込まれくてローディングが表示されない。 って問題も回避出来るね。

どうやってローディングしてるのかな？って、 ちょっと気になって Preloader.as を覗いてみた。 が、それらしい処理は書いてない。 なので、親クラスの jp.nium.display.ExPreloader.as を覗いてみると、 _init メソッドに書いてあった。

private function _init( e:DocumentEvent ):void {
    // flashvars からファイルパスを取得する
    _url = loaderInfo.parameters.url ? loaderInfo.parameters.url : _url;

    // Loader を作成する
    _loader = ExLoader( addChild( new ExLoader() ) );
    //  中略...
    _loader.load( new URLRequest( url ) );
}

_url にはデフォルトで index.swf に設定されていて、 flashVarsで url が指定されていれば、それを取りに行ってくれるみたい。 クラスベースで開発してるのであれば、 PreLoader クラスのコンストラクタでも指定出来るようになってるよ。

public function Preloader() {
    // 読み込み先 URL の指定を行います。
    // すでに読み込み操作が開始されていた場合には変更ができません。
    //url = "";
}

ポイントポイントをキレイに押えてあるのがものっすごい有り難い。 自分じゃ絶対マネ出来ないなぁ。

実際にローディング処理を入れる場合、 Preloader クラスに用意されてる（空の状態で書いてある）イベントハンドラに、 それぞれやりたい処理を書いておけば実行してくれる。 bytesLoaded や bytesTotal なプロパティも用意されてるので、 パーセンテージの計算とかもちゃんと出来るよ。

Progression Framework は、 まだまだ「なるほど！」の連続なのでイジっててもソース読んでても楽しい！

ps. Progression Framework 2.0.16 がリリースされてるよ！ かなり変更がかかってるので、みんなアップグレードしたら良いと思うよ

Progressionのコマンド使ってみたメモ

ココらへんのエントリーから続いて Progression Framework を触っております。

• Progressionをインストールしてみたメモ
• Progressionのチュートリアルやってみたよ。

今回はコマンドを試してみたのでメモメモ。 version 2.0.13 で試しております。

MovieClip や Button などのキャストクラスを、 ステージに配置したり、逆に消したりする時に、 _onInit とか _onGoto とかでやる訳なのですが、 ノーマルにやるとこんな感じになる。

override protected function _onInit():void
{
    //  childはCastScpriteとかのインスタンス
    progression.container.addChild(child);
}

override protected function _onGoto():void
{
    progression.container.removeChild(child);
}

コマンド使うとこうなる。

//  コマンドクラスをインポート
import jp.progression.commands.AddChild;
import jp.progression.commands.RemoveChild;

override protected function _onInit():void
{
    //  コマンドを使ってaddChildする
    addCommand(new AddChild(progression.container, child));
}

override protected function _Goto():void
{
    //  コマンドを使ってremoveChildする
    addCommand(new RemoveChild(progression.container, child));
}

この場合だと、どっちでやっても結果は同じ。 なら、わざわざクラスを使う必要無いんじゃ？って疑問がチラホラ。 が、実はこれら２つには重大な違いが。 コマンドクラスを使って操作すると、 操作される側のイベントを上手くトリガーしてくれたり、 コマンドの同期をとってくれたりする。

例えば、こんなクラスがありまして、

package
{
    import jp.progression.casts.CastSprite;

    public class Child extends CastSprite
    {
        public function Child()
        {
            graphics.beginFill(0x000000);
            graphics.drawRect(0, 0, 100, 100);
            graphics.endFill();
        }
    }
}

これに _onCastAdd や _onCastRemove なイベントを設定した場合、 例えば Tweener 使ってやるとしたらこんな感じになる。

override protected function _onCastAdded():void
{
    //  あらかじめalpha = 0しておく。
    addCommand(new DoTweener(this, {
        alpha: 1,
        time: 1,
        transition: "easeInSine"
    }));
}

override protected function _onCastRemoved():void
{
    addCommand(new DoTweener(this, {
        alpha: 0,
        time: 1,
        transition: "easeOutSine"
    }));
}

これをトリガーしてやろうとすると、 操作する側がコマンドで行ってあげる必要がある。

ドラマチック で エモーショナル な動きを出したい時は、 迷わずコマンドで操作する。って覚えておくと良いよね

Progressionのチュートリアルやってみたよ。

AS3 のメインフレームワーク？な Progression Framework のチュートリアルをやってみたよ。 Progression 自体は version 2.0.11 をインストールしております。

で、「 クラスベースでの制作スタイル 」をやってみた訳なのですが、 自分にしてはめずらしく、今回はハマりポイントが無かった！これだけでも十分素敵。 全体を通して、素直に作れるなぁ。って印象だったのですが、 細かい感想としてはこんな感じ。

• Scene って概念は良いな。って思った。 Papervision3D のそれとは別物だけども、 空間という意味で同じようなニュアンスではあると思う。
• Scene の遷移をURLに反映するのに、設定一つでOn/Off出来るのは感動。
• 開発用トレース機能も細かく吐き出してくれるので、何が起きてるのか解りやすい。

あと、ちょっとしたコネタ。 チュートリアルの「 7. ルートシーンを作ろう 」で、ルートシーンを設定する時に、

// IndexScene クラスが swf に含まれるように参照を設定しておきます。
IndexScene

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

って説明があるんですが、ソースをチラ見してみると、 ダイレクトにクラスを渡しても良いように作られてた。

// 文字列ではなくクラスをそのまま渡す。
_prog = new Progression( "index", stage, IndexScene );

この方がシンプルで良いなぁ。これってdeprecatedなのかな？って、 そうこうしてる間に Progression Framework の version 2.0.12 がリリースされちゃった

これからしばらく Progression との戦いの日々になりそう。 名テスター目指して頑張って行こう

Progressionをインストールしてみたメモ

AS3 のメインフレームワークを求めて、 今度は Progression Framework をインストールしてみたよ。

実際のインストール作業は Documents/Tutorial/Install - Progression Framework - Trac を見ながら進めていったよ。

1. まずは Adobe Extention Manager 1.8
2. 次にフルパッケージ版の Progression Framework 2.0.11

が、ココでちょっとした問題発生。 インストール出来たハズの Progression Framework が、 「ウィンドウ -> その他のパネル」に出てこない。 でも大丈夫。ジェントルマンは決して焦らない。決して走らない。（ Englishman in New York@Sting より）

こういう問題児の為に、 JSFLインストールパッケージ が用意されております。 なので、コレもインストールしてみる。 すると見事に Progression Framework な項目が出てきたよ！ こういうインストーラビリティって、もの凄く重要だと思う。 新しく何かを始めるってかなり体力使うし、ちょっとした問題でもモチベーション下っちゃうしね。

喜び勇んで新規プロジェクトを立ち上げてみる。 すると今度は「 Index.as なんて無ぇゼ！」って怒られた。 ちょっと分からなくなってきたので、 taka:nium さん（中の人）にヘルプしてみた。 すると、 それらしいエラー内容とその解決法 を教えてくださった。 どうやら PATHが長過ぎた らしい。

気をとりなおして、今度は短めなPATHでプロジェクトを作ってみる。 すると今度はバッチリ！ちゃんと Index.as なファイルも出来たよ！ 素敵過ぎます

とりあえず一通りのインストールは出来たか確認する為に、 何にも弄ってないけどもパブリッシュしてみた。

Progression Framework 2.0.11
Copyright (c) 2008 taka:nium.jp, supported by Spark project.

良し！インストールは出来たっぽい！ 以下まとめ。

• Progression Framework のインストーラビリティは抜群
• ドキュメントが日本語で問題児にも優しい
• メインコミッターに気軽に質問出来る（言語の壁的な意味で）

次はチュートリアルをこなして行こうと思いますです