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