[Progression]の最近のブログ記事

現在の Progression にはシーンオブジェクトにイベントフローが実装されていますが、 表示オブジェクトとは少し挙動が違っています。（Progression 3.0.7 現在）

useCapture や eventPhase, bubbles あたりの値が有効化されていませんので、これを実装してみました。

変更を加えたファイルを以下に置いておきます。
jp/progression/events/progression_event
jp/progression/events/SceneEvent
jp/progression/scenes/SceneObject

未だ as ファイルだと表示できなくて、拡張子を .txt に変えてますが。
リンク先を trac.progression.jp の方に変更しました。

まとめてダウンロードされる場合はこちら。
eventflow.zip

以下、解説を少し。

var sceneA:SceneObject = createScene("sceneA");
var sceneB:SceneObject = createScene("sceneB");
var sceneC:SceneObject = createScene("sceneC");

sceneA.addScene(sceneB);
trace("----");
sceneB.addScene(sceneC);
trace("----");
sceneA.removeScene(sceneB);

function createScene(name:String):SceneObject
{
    var scene:SceneObject = new SceneObject(name);
    scene.addEventListener(SceneEvent.SCENE_ADDED, eventHandler, false);
    scene.addEventListener(SceneEvent.SCENE_REMOVED, eventHandler, false);
    scene.addEventListener(SceneEvent.SCENE_ADDED, eventHandler, true);
    scene.addEventListener(SceneEvent.SCENE_REMOVED, eventHandler, true);
    return scene;
}

function eventHandler(event:Event):void 
{
    trace(event.target.name, event.currentTarget.name, event.type, event.eventPhase);
}

出力結果

sceneB sceneA sceneAdded 1
sceneB sceneB sceneAdded 2
sceneB sceneA sceneAdded 3
----
sceneC sceneA sceneAdded 1
sceneC sceneB sceneAdded 1
sceneC sceneC sceneAdded 2
sceneC sceneB sceneAdded 3
sceneC sceneA sceneAdded 3
----
sceneB sceneA sceneRemoved 1
sceneB sceneB sceneRemoved 2
sceneB sceneA sceneRemoved 3

変更したのは SceneEvent クラスと SceneObject クラスの 2 つ。

まず SceneEvent クラスに以下を追記。

override public function get target():Object 
{
    return super.target
        && progression_event::$target 
        || super.target;
}

override public function get currentTarget():Object 
{
    return super.currentTarget 
        && progression_event::$currentTarget
        || super.currentTarget;
}

override public function get eventPhase():uint 
{
    return progression_event::$eventPhase || super.eventPhase;
}

progression_event var $target:Object = null;
progression_event var $currentTarget:Object = null;
progression_event var $eventPhase:uint = 0;

ここで SceneObject から値に手を加えられるようにするために、 progression_event という namespace ファイルを jp/progression/events/ 内に追加しています。

package jp.progression.events 
{
    public namespace progression_event 
        = "http://www.progression.jp/events/progression_event";
}

dispatchEvent() にイベントオブジェクトを渡したときに target に値が設定されていると、 dispatchEvent 内で Event.clone() が呼び出されるので、 super.target が null のときは null を返すようにしています。
もし $target が設定されていて super.target も設定されている場合は $target の値を、 $target が null でも super.target が設定されている場合は super.target の値を返します。
これは、 dispatchEvent() の内部以外での clone() メソッドの呼び出しへの配慮でもあります。

次はちょっと長いですが、 SceneObject に追加した内容。

/**
 * イベントフローのための内部参照
 */
private var $parent:SceneObject;

/**
 * キャプチャ段階のイベントに登録されたリスナーを保持しておくための EventIntegrator オブジェクト
 * 
 * コンストラクタ内に以下を追記
 * $captureEvent = new EventIntegrator(this);
 */
private var $captureEvent:EventIntegrator;

override public function dispatchEvent(event:Event):Boolean 
{
    if (event is SceneEvent)
    {
        return $dispatchEvent(event as SceneEvent);
    }
    return super.dispatchEvent(event);
}

private function $dispatchEvent(event:SceneEvent):Boolean
{
    var bool:Boolean = true;
    
    if (event.eventPhase == EventPhase.AT_TARGET)
        event.progression_event::$target = this;
    
    event.progression_event::$currentTarget = this;
    
    if (event.bubbles 
        && $parent 
        && event.eventPhase <= EventPhase.AT_TARGET)
    {
        var phase1:SceneEvent = event.clone() as SceneEvent;
        phase1.progression_event::$eventPhase = EventPhase.CAPTURING_PHASE;
        phase1.progression_event::$target
            = event.progression_event::$target;
        bool = $parent.dispatchEvent(phase1);
    }
    
    if (event.eventPhase == EventPhase.CAPTURING_PHASE)
    {
        bool = $captureEvent.dispatchEvent(event);
    }
    else
    {
        bool = super.dispatchEvent(event);
    }
    
    if (event.bubbles 
        && $parent 
        && event.eventPhase >= EventPhase.AT_TARGET)
    {
        var phase3:SceneEvent = event.clone() as SceneEvent;
        phase3.progression_event::$eventPhase = EventPhase.BUBBLING_PHASE;
        phase3.progression_event::$target = event.target;
        bool = $parent.dispatchEvent(phase3);
    }
    return bool;
}

override public function addEventListener(
    type:String, listener:Function, useCapture:Boolean = false,
    priority:int = 0, useWeakReference:Boolean = false):void 
{
    if (useCapture)
    {
        $captureEvent.addEventListener(
            type, listener, false, priority, useWeakReference);
    }
    else
    {
        super.addEventListener(
            type, listener, false, priority, useWeakReference);
    }
}

override public function removeEventListener(
    type:String, listener:Function, useCapture:Boolean = false):void 
{
    if (useCapture)
    {
        $captureEvent.removeEventListener(type, listener, false);
    }
    else
    {
        super.removeEventListener(type, listener, false);
    }
}

override public function hasEventListener(type:String):Boolean 
{
    return super.hasEventListener(type)
        || $captureEvent.hasEventListener(type);
}

override public function willTrigger(type:String):Boolean 
{
    var bool:Boolean = hasEventListener(type);
    if ($parent) bool = bool || $parent.hasEventListener(type);
    return bool;
}

override public function removeAllListeners(
    completely:Boolean = false):void 
{
    super.removeAllListeners(completely);
    $captureEvent.removeAllListeners(completely);
}

override public function restoreRemovedListeners():void 
{
    super.restoreRemovedListeners();
    $captureEvent.restoreRemovedListeners();
}

ここでは EventDispatcher のメソッドをそれぞれオーバーライドして処理内容に手を加えています。
具体的には、 addEventListener() と removeEventListener() で useCapture の値で 登録するオブジェクトを分けています。これはイベント呼び出し時にイベントフェーズによる振り分けができないためです。

dispatchEvent() 内は、親シーンへ遡ってイベントを呼び出すように変更しています。

更に、 _registerScene() と _unregisterScene() にも少し修正を加えます。

_registerScene の変更箇所

// イベントフロー時の参照先を登録する
scene.$parent = scene._parent;

// イベントリスナーを登録する
//scene.addExclusivelyEventListener( SceneEvent.SCENE_ADDED, 
    dispatchEvent, false, int.MAX_VALUE, true );
//scene.addExclusivelyEventListener( SceneEvent.SCENE_REMOVED, 
    dispatchEvent, false, int.MAX_VALUE, true );
//addExclusivelyEventListener( SceneEvent.SCENE_ADDED_TO_ROOT, 
    scene.dispatchEvent, false, int.MAX_VALUE, true );
//addExclusivelyEventListener( SceneEvent.SCENE_REMOVED_FROM_ROOT, 
    scene.dispatchEvent, false, int.MAX_VALUE, true );

// イベントを送出する
scene.dispatchEvent( new SceneEvent(
    SceneEvent.SCENE_ADDED, true, false, scene ) );

// ルートシーンが存在し、変更されていれば
if ( root && previousRoot != root ) {
    // イベントを送出する
    scene.dispatchEvent( new SceneEvent(
        SceneEvent.SCENE_ADDED_TO_ROOT, true, false, scene ) );
}

_unregisterScene の変更箇所

// イベントを送出する
scene.dispatchEvent( new SceneEvent( SceneEvent.SCENE_REMOVED, true, false, scene ) );

// ルートシーンが存在せず、変更されていれば
if ( !scene._root && previousRoot != scene._root ) {
    // イベントを送出する
    scene.dispatchEvent( new SceneEvent( SceneEvent.SCENE_REMOVED_FROM_ROOT, true, false, scene ) );
}

// イベントフローのための参照を削除
scene.$parent = null;

// イベントリスナーを解除する
//scene.completelyRemoveEventListener( 
    SceneEvent.SCENE_ADDED, dispatchEvent );
//scene.completelyRemoveEventListener( 
    SceneEvent.SCENE_REMOVED, dispatchEvent );
//completelyRemoveEventListener( 
    SceneEvent.SCENE_ADDED_TO_ROOT, scene.dispatchEvent );
//completelyRemoveEventListener( 
    SceneEvent.SCENE_REMOVED_FROM_ROOT, scene.dispatchEvent );

追加・削除された子シーンにイベントリスナーの登録を行っていた処理をコメントアウトしています。
また、イベントフローのための親シーンの参照を登録・解除しています。

あとは、 dispatchEvent に渡されるイベントオブジェクトの bubbles の値を true に変更しました。
bubbles が false に設定された場合はイベントフローを発生させないようにしているためです。

以上で、表示オブジェクトのようなイベントフローの実装ができます。
ただ、 EventIntegrator での実装を、あまり理解せずに手を加えているので、どこかに不都合はあるかもしれないです。
すこし使い倒してみる必要はあるかと思います。

まずはデモから。

デモ

Progression ではURLを指定してシーンを変更できるので、 Flash はビデオプレイヤーのみを実装しておいて、 あとは URL でビデオの再生位置や flv のパスを指定してやる。 ってこともありだと思った。

デモの FLV はキューポイントを3箇所設定している。 で、onCuePoint のイベントを受け取ってシーンを変更すれば ブラウザの「戻る」「進む」で再生位置を変更するとかもできる。
何気にタイトルも変えてみたり。

デモでは一応Flash内にボタンを設置しているけど、 これも場合によってはなくてもいい。

今回はキューポイントの指定だけども、URLで 直接時間指定することもできる。

要は SceneObject で URL の変化が受け取れるわけだから
これにあわせていろんなことができますね。って話。


--- 追記
直接 #page3 とかに飛ぶとビデオが読み込めてなくて、
最初から再生になってますが、デモだから。という言い訳。

先日書いた「FlashDevelop用Progressionプロジェクトテンプレート」を、 正式にリリースされた Progression3 にあわせて変更しました。

前回の Beta 2 版のプロジェクトテンプレートを入れてた方は、一度削除してから入れなおしてください。 削除しておかないと余計なファイルが含まれてしまいます。

今回のリリースで（前からあったかもですが）swc が配布されているのでこれを含めたテンプレートとなっています。

135 ActionScript 3 - AS3 Project with Progression3

あと、Air 用のプロジェクトテンプレートも作っておきました。

165 ActionScript 3 - AIR AS3 Projector with Progression3

使い方は前回のままですが

------------------------------------------

上記リンクからダウンロードしたzipを解凍すると、
中に「135 ActionScript 3 - AS3 Project with Progression3」というフォルダが入っているので、これをXPの場合以下のフォルダにコピーすると使えるようになります。
Documents and Settings\[USER]\Local Settings\Application Data\FlashDevelop\Templates\ProjectTemplates
------------------------------------------

です。

以後 Progression がアップデートされた際は lib ディレクトリ内の swc ファイルを置き換えればいいんじゃないかと思います。

どっかで誰かの役に立てば、これ幸い。

FlashDevelopのみでProgression Frameworkを使ったオーサリングができます。

ActionScript 3 - AS3 Project with Progression3

バージョンはそれぞれ

• FlashDevelop 3 beta 8
• Progression Framework 3 beta 2

上記リンクからダウンロードしたzipを解凍すると、
中に「135 ActionScript 3 - AS3 Project with Progression3」というフォルダが入っているので、これをXPの場合以下のフォルダにコピーすると使えるようになります。
Documents and Settings\[USER]\Local Settings\Application Data\FlashDevelop\Templates\ProjectTemplates

Vistaの場合はよくわかりませんが、似たようなところに入れるんじゃないかと。

以前タロタローグさんとこのブログに「Progression Frameworkを、FlashDevelopだけで使ってしまおうと言う挑戦。」という記事で同様のテンプレートが公開されてましたが、「Progression Framework自体が猛スピードで変化してて、テンプレートを置いといても意味なさそうなんで、公開は止めます。」とのことで今は公開されてないです。（かわりに「FlashDevelop用のプロジェクトテンプレートを作る安易な方法」という記事が出てますが。）

実際、明後日にはProgression 3が公開されるってのに、今更なんですが、今後の参考までにプロジェクトテンプレート用のテンプレート的な気持ちでアップしときます。

あと、fl パッケージはたぶん公開しちゃいけないんだろうから（ライセンス調べろって話ですが）下記の3つだけ仮でクラスファイル入れてあります。中身は定義だけで実装されてないです。
Flash CS3 持ってる人は置き換えればDoTweenコマンドとかも使えるようになります。

• fl.transitions.Tween
• fl.transitions.TweenEvent
• fl.transitions.easing.Regular

休み前なので立て続けですが。
たぶん休み中は更新しないです。あしからず。

Progression用のモーション系のコマンドをいくつか作りました。
せっかくなのでアップしておきます。
作ったといっても、AS2からずっと使ってる自前のモーションクラスをコマンド用に書き換えただけなんですが。
もちろん、みんなが安心、Tweenerをベースにしなおしといたんで、そのまま使うなり改良するなり、煮るなり焼くなりご自由に。

ただしProgressionのバージョンが2.1.xにバージョンアップすると使えなくなる可能性大です。
そのうち対応するとは思いますが。←僕が

あと、はじめに言い訳しておくと、パッケージ名がCroquisですが、
fladdictさんのsketchbookの名前をパクリました。すいません。（中身はパクってません）
というのも、なんかここまでいろんな便利ライブラリが出回ってると、自分でなんか作る気もしないので
とりあえずProgressionをベースに世のオープンソースなライブラリを自分用にまとめてショートカットクラスなんかにしちゃってるわけです。
sketchbookからSparkのutilsとかColorMatrixとかとか

そこまでくると、どこまで公開してもいいのか良く分からんし、あんまり大きな声じゃ言えないんですが。

んで、以下はその中の一部ってことです。はい。

ところで余談なのですが、SparkのUtilクラスってホントに勝手に書き足したやつとかコミット（？）しちゃっていいんだろうか。
あと、どれくらいUtil系そろえるつもりなんだろう。とにかく万能Utilにしちゃうんだろうか。
それとも他で出てるものとはかぶらない様にとかあるんだろか。
もしとにかく何でもってんなら、少しは貢献できるかもしれないけども。
なんかあの辺の人たち凄すぎて気後れしちゃうよ。
へむへむ。


でわでわ。以下デモになります。


ソースファイルはこちら。
croquis.zip

以下、このデモに含まれるクラス。

◆クラス一覧

基本クラス
croquis.motions.Motion

移動用コマンドクラス
croquis.motions.Linear
croquis.motions.Curve
croquis.motions.Cycle
croquis.motions.Wave
croquis.motions.Twist
croquis.motions.Bug

変形用コマンドクラス
croquis.motions.Trans

着色用コマンドクラス
croquis.motions.FillColor



◆簡易リファレンス

croquis.motions.Motion
Motion( type:String, time:Number, transition:String=null, delay:int = 0 )

Motionクラスのベースになるクラスです。
このクラスは直接インスタンスを生成することができません。
作成する場合は必ずサブクラスを作成します。

croquis.motions.Linear
Linear(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, transition:String=null, delay:int=0)

指定座標まで直進します。

target      対象となるオブジェクト
time        移動時間
x           目標X座標
y           目標Y座標
transition  Tweenerに渡すtransitionパラメータ
delay       待機時間

croquis.motions.Curve
Curve(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, angle:Number = 0.0, radius:Number=0.0, transition:String=null, delay:int=0)

指定座標まで弧を描いくように移動します

target      対象となるオブジェクト
time        移動時間
x           目標X座標
y           目標Y座標
angle       始点から終点までの中点からの中継点の角度
radius      始点から終点までの中点からの中継点までの半径
transition  Tweenerに渡すtransitionパラメータ
delay       待機時間

croquis.motions.Cycle
Cycle(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, round:Number = 0, clockwise:Boolean = true, transition:String=null, delay:int=0)

指定座標を中心に回転しながら移動します

target      対象となるオブジェクト
time        移動時間
x           目標X座標
y           目標Y座標
round       回転数
clockwise   時計回り（true） 反時計回り（false）
transition  Tweenerに渡すtransitionパラメータ
delay       待機時間

croquis.motions.Wave

Wave(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, radius:Number = 0.0, swing:Number = 0.0, transition:String=null, delay:int=0)

指定座標までの直線軸を中心に揺れながら移動します

target      対象となるオブジェクト
time        移動時間
x           目標X座標
y           目標Y座標
radius      初期振幅距離
swing       振動回数
transition  Tweenerに渡すtransitionパラメータ
delay       待機時間

croquis.motions.Twist
Twist(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, radius:Number = 0.0, round:Number = 0.0, clockwise:Boolean = true, transition:String=null, delay:int=0)

指定座標までの直線軸を中心に回転しながら目標点に移動します。

target      対象となるオブジェクト
time        移動時間
x           目標X座標
y           目標Y座標
radius      回転半径
round       回転数
clockwise   時計回り（true） 反時計回り（false）
transition  Tweenerに渡すtransitionパラメータ
delay       待機時間

croquis.motions.Bug
Bug(target:Object, time:Number = 1.0, x:Number = 0.0, y:Number = 0.0, turnSpeed:Number=0.05, transition:String=null, delay:int=0)

不規則な動作をしながら指定座標まで移動します

target  対象となるオブジェクト
time    移動時間
x   目標X座標
y   目標Y座標
turnSpeed   向きを変える速度
transition  Tweenerに渡すtransitionパラメータ
delay   待機時間

croquis.motions.Trans
Trans(target:DisplayObject, time:Number = 1.0, scaleX:Number = 1.0, scaleY:Number = 1.0, rotation:Number=0.0, basePoint:Point=null, transition:String=null, delay:int=0)

任意の座標を中心に DisplayObject インスタンスを回転、及び拡大縮小させます

target      対象となるオブジェクト
time        移動時間
scaleX      X軸拡大縮小値
scaleY      Y軸拡大縮小値
rotation    回転角度
basePoint   任意の中心点
transition  Tweenerに渡すtransitionパラメータ
delay       待機時間

croquis.motions.FillColor
FillColor(target:DisplayObject, time:Number = 1.0, colorTransform:ColorTransform = null, transition:String = null, delay:int = 0)

ColorTransform によって DisplayObject インスタンスに着色します

target      対象となるオブジェクト
time        移動時間
colorTransform  変更対象となる色情報
transition  Tweenerに渡すtransitionパラメータ
delay       待機時間

追記：
executeボタンを押したときに前回のコマンドが実行中の場合、前回のコマンドを停止してから実行するようにしました。
上記の一覧のクラスには変更はありません。

今度はFlickrAPIと、おなじみPapervision3DとでProgressionです。

Prog de Flickr

別にPV3D使ってるからといって、シーンの切り替えとかで
ダイナミックな使い方してるわけではないです。

今回は以下のライブラリを使用しています。
Progression Framework 2.0.18
Papervision3D Beta 1.7 (20.08.07)
as3flickrlib

ソースもアップしてます。
ソースファイル一式ダウンロード
前回以上に書きなぐりのソースになってますが、
特に整理しようとも思わないので、そのままアップしちゃいます。

毎度のことですが、APIキーはご自分で取得したものをお使いください。


あと、アップしてるサンプルですが、どうもアップしたては
アクセスが集中するのか読み込みにエラく時間がかかったりして
ちゃんと使えないかも。

こなれてくるとProgressionがホントに心地良いです。

今回は前回のエントリーでアップしたProgression de Amazonについてです。

シーンの動的生成と削除について書こうとして、削除してなかったのに気づいて一部書き換えました。
変更したのは demo.scenes.DetailScene クラスです。

ファイルをアップしなおそうとして、誤って上書きしちゃいました。
ソースファイル一式をダウンロード


DetailSceneクラスについて

このクラスは画面下部に表示された検索結果の商品一覧をクリックしたときに表示される、
詳細画面を開く際に通過するシーンクラスです。

まあ、何てことはないのですが、通過時に通知されるonDescendイベント内で移動先のシーンIDを取得して
新たにシーンオブジェクトを作成し、それを子シーンに追加しています。

こんな追加処理だけのシーンクラスを作らずに、移動元のシーンクラスのonGotoイベント内で
追加処理を実行してもよさげなものですが、それをするとURLから直接動的シーンに移動することになったときに
シーンが作成されなくなってしまうので、このように中継用のシーンを作成しています。

削除するときはonAscendイベントを使って、先ほど作成したオブジェクトを消すだけです。


なんか書こうと思ったんだけども、まったく特筆するようなことがないんだよなあ。
全部 Progression がやってくれてるし。


なもんで、このサンプルのソース見て「これ何？」って疑問のある人は質問してくれたら答えます。
ってことにしとけばきっと楽なんだ。

そういえばaccessKeyってまだ使ってないなあ。

引き続きProgressionの話題です。
現在のProgressionのバージョンは2.0.17です。

先日からやってたデモFlashの"Progression de Amazon"。

とりあえず時間かけ過ぎて飽きてきたので、今日でこのAmazon使ったFlashは終わりにしときます。
まだタブをポチポチ押しまくったり、ブラウザの「戻る」「進む」を繰り返してるとおかしなことになったりと
まだまだ挙動不審ですが、まあ、中には取っ掛かりの手助けになる箇所もあるんじゃないかなあと思います。

Progression de Amazon

ほんとに誰かの役に立つことがあるのか、甚だ疑わしいですが、
当初の予定通り、恥ずかしいソースファイルもアップしておきます。

ソースファイル一式ダウンロード
なお、言うのが遅すぎますが今回はクラスベースでプロジェクトを作りました。
レイアウトは思いっきり直置きなんですけども。。。

一応Progressionファイルも全部入ってるので、index.flaを書き出せば動きますが、
AmazonのAPIキーだけはご自身で取得したものを使用してください。
設定場所はIndexクラスにコメント書いておきました。

Amazon Web サービスのアカウントの取得はこちら
http://www.amazon.co.jp/gp/feature.html/?docId=451209

今回Amazon API についてはこちらを参考にさせていただきました。
MEMO - Amazon API

また、相変わらずクラスファイル内にコメント全然してないです。
詳細について解説しようかと思いましたが、今日は時間も遅いので
また後日書きます。（おそらくそんなに詳しくは書けないと思いますが。）


本音は、誰か僕に綺麗なスクリプトの書き方を教えてほしいんですが。

引き続きProgression Frameworkについて。
執筆時現在のバージョンは 2.0.17 です。
前回のデモのpreloader.flaに処理を追加してみました。
デモ（2008.04.03）

とりあえずpreloader.flaとクラスファイルをアップしときます。
preloaderソースファイル
Progressionのクラスは入ってないです。

クラスファイルの中身はこんなのです。
DemoPreloader.as
（余談だけど、hetemlって.asファイルをブラウザで見ることできないのかな？
.htaccessにAddType書いてみてもだめだったんだけども、なんでだろ？）


以下、今回けつまずいた箇所のメモ。

ExPreloaderを継承したDemoPreloaderクラス（以後Preloaderクラス） の onComplete の後、
IndexのonInitが発信されるが、今回complete後にアニメーションを加えた（これはindex.falに入れた
ほうが良いかもしれない）のと、ローディングのバーの伸び方にイージングを加えたので、
それが終わってから Progression のシーンが始まるようにしたかった。

そのため、IndexクラスからPreloaderクラスにイベント通知の登録をしようとして
Preloaderのインスタンスを参照しようとすると、ステージ上のオブジェクトが存在しないと怒られた。

これを回避するためにPreloaderクラス内のオブジェクトの参照をgetterを使って間接的に参照するようにした。

以下はIndexクラスに書いたPreloaderクラスへの参照の部分。

override protected function _onInit():void
{
    //～中略
    
    if( DemoPreloader.instance ){
        DemoPreloader.instance.addEventListener( Event.CLOSE , startContents );
    } else {
        startContents();
    }
}

private function startContents( event:Event=null ):void
{
    // 最初のシーンへ移動。
    prog.goto( prog.firstSceneId );
}

----

onProgressイベント内で、同クラスの bytesLoaded と bytesTotal の両プロパティを参照すればよいのかと思いきや
これらのプロパティは progress.swf 自身のバイト情報なのでロード進行中はすでにどちらも固定の値しか返してなかった。
なので addEventListener で一旦 progressイベントにリスナーを登録して、そこに渡されるイベント情報から
bytesLoaded と bytesTotal を読み取るようにした。
(ここで登録したリスナーにはきちんと内部のExLoaderの情報が返ってきてる。)

----

実際サーバーにアップしてみて気づいたのは、URLが変わって「index.html#/～」とかってなるところでリロードすると
Indexクラスの onInitイベントが飛ばされるみたい。詳細はわからないけども。
そのためローディングの後処理と、メインのコンテンツが同時に実行されてしまった。
これは Progression のルートに設定したシーンクラスの onLoad から Preloader の動作をキャンセルさせることで回避。

以下はルートシーンの onLoad イベント内の処理。
書いてることは Preloader が終了してなければスキップ。

override protected function _onLoad():void
{
    if (DemoPreloader.status != "close") DemoPreloader.status = "skip";
    
    addCommand( 
        new AddChild( progression.container , _cast )
    );
}

----

これはつまずいた訳ではないけども、ちょっと気になったのでボソっと。
toString がオーバーライドされてるからPreloaderクラスをtraceすると [object DocumentRoot] に。
DocumentRoot クラスから toString を消すと [object ExMovieClip] に。
コンマ数秒だけ「あれ？」って思った。w


なんか自分の失敗ばかりツラツラ書くと、Progression使うの難しく見えるかもしれないなあ。
でも、本当は気にするところが、上にあげた部分だけで、その他に気にすることが無いってところが良くできてるんだと思う。
だってプリローダーファイルを外部で用意して、コンテンツ部分と分離させようとか考えてイチから作ったらかなりの手間だと思う。
コンテンツ部分の制作時に親ファイルの存在を気にする必要もなく出来てる訳だし。
Progression使わずにローディングの部分だけでも使えるし。

あと、AS2やってた人がAS3の取っ掛かりにProgressionを使うのもいいと思う。

なかなか使いこなすまでには至らないけども、噛めば噛むほど味の出る感じがいいです、Progression。
きっとjp.niumパッケージの中身とかも便利クラスがいっぱい詰まってるんだろうと思いますが、
まだそこまで手が回りません。

Progression のサンプルデータのページからダウンロードした、
東京てら子ワークショップキットの IndexScene クラスをちょっと図にしてみた。



ふむふむ。

とりあえず何か作ってみないことには良し悪しも何もわからないので
とにかくざっくり作ってみた。
なんかせっかくリンクまでしてもらったのに、あのサンプルじゃ申し訳ないし。

Progression デモ(2008.03.31)

まだ画面遷移とか何もしてないので、もうちょっとチョメチョメしてからソースのほうもアップします。

で、以下、今のところの雑感など。

Progressionは大きくは「シーン」と「キャスト」の2つから構成されてるんだと思うのだけども、
シーンクラスに何を書いて、キャストクラスに何を書くかってのが悩む。
これは自分の未熟さのせいなんだけども。

ところでキャストからシーンを参照する方法が分からなかった。
そもそもそんな作り方をするのが間違いなのかもしれない。
このAmazonのやつは、すでにシーンとキャストがごちゃごちゃ。
シーンがキャストを制御するんだから、やっぱりキャストからシーンを参照するようなことは
しちゃいけなかったかもしれない。

あと、コマンドクラスをいかにウマく使うかってのもミソだと思うんだけども
これがまた不慣れなせいで、すっ飛ばして自分で関数作って実装しちゃったりする。
折角コマンドが用意されてるのにaddEventListener使いまくりだったり。
あとaddCommandで追加したコマンドの実行の仕方がわからなかったり。
結局SerialListを新たに作ってexecuteで実行とか。
きっと何か用意されてると思うんだけども。

Flash作るとき、自分はステージ上にボコボコレイアウトしていって
それをスクリプトで制御するんだけども、はじめからステージ上にオブジェクトを
配置していると、"onCastAdded"が使えなかった気がするな（気のせいかな？）。
なんか不確かなんだけども。

ExPreloaderからIndexへの遷移ももうちょっと調べてみないと。
ローディング後の後処理みたいなのを作った場合、その後処理後から
Indexへの連携の仕方が分からなかった。

ああ、帰らなきゃ。

AS3向けのフレームワーク「Progression」がなんだか便利みたいなので、自分も慣れておこうと思った。

とにかく手探りなので、まずは Wiki のチュートリアルを、と思ったら、チュートリアルもまだほとんど準備中だった。
なもんで、とりあえずリファレンスとソースを行き来しながら作ってみた。

作ってみたやつ

一応ソースファイルも一式アップしときます。
恥ずかしいソースファイルのダウンロード

まず組み立て方がよくわからなくて困った。たったこれだけのコンテンツなのに、クラスファイルが錯綜してます。

何気に、右クリックの「新規ウィンドウで開く」がすごいと思った。
Event系のクラスの toString の実装が直接文字列を返すようになってるのは何でなんだろう。

あと、イベントの順番のメモ

sceneStateChange → load → init
goto → unload → sceneStateChange