Humming Via Kitchen

AS3なLoggerとかDumperとか

最近まわりで AS3 な Logger だったり Dumper な話題が結構活発に出てくる。

Spark Project だったら dealforest さんの Dumper だったり、 kaede さんの Sanzoku だったり。 _level0.CUPPY の オレ様Logger も Spark Project にコミットされるかもだったり。

なんとなくなんだけども、こういうのって全部まとめて一緒に開発していけたら面白いんだろうな。とか妄想。 明瞭期はオレオレで実装しまくって、やりたい事を明確にしてからマージする。とかでも良いと思う。

Dumper の実装が個人的には好みなんだけども、 これが オレ様Logger みたくアウトプット部分をプラガブルにすれば、 結構良い感じじゃないかな？とか勝手に目論んでみたり。

あくまでも勝手な妄想な訳ですが、いつの間にかやってるかも

Spark Project 勉強会 #02

Spark Project 勉強会に参加してきたよ。

発表した資料はこちら。

メインストリームなレポは色んなところでアップされてるので、 そちらを参考にして頂くとして、 敢えて超絶個人的感想だけ書き殴る方向で

1. ThreadViewer や wasaco に AIR な未来を垣間見た。 Flash, Flex のセキュリティポリシーの影響を受けない。って点でも敷居が低いと思う。
2. Statistics の話に新しいデータ表現を感じた（ような気になってる）。 MathMatrix は flash のデフォルトで実装して欲しいぐらい実用的だと思う。
3. iphoneas の話の中で OSC と flash の連携には思わず声が出そうになるぐらい感激した!! これが出来るって事は Max/MSP/jitter とか SuperCollider との組み合わせも出来るって事だよね。 Flash がネイティブで OSC をサポートする日は来るんだろうか？
4. 懇親会（と言う名の飲み会）ばんざい！ 初対面にもかかわらず、同じテンションで付き合ってくださった方、本当にありがとうございます

グダグダな発表だったのに評価して頂いた方々、本当にありがとうございました。 これからも何らかの形で情報を発信して行けたらと思っておりますので、どうぞ宜しくお願いします。

ps. 実は結構緊張していて、顔と名前が一致しない方が...。本当にすいませんすいません!! またどっかで見かけたら声をかけておくんなまし

ECMAScript Harmony と ActionScript

yossy 氏の ECMAScript Harmony と ActionScript な話題に興味シンシン。

個人的には、どうせならActionScriptは独自路線（ってかJava）を走りだしても良い気がするんだけどなぁ。 って思いつつ、ここらへんに目を通す。

1. ECMAScript Harmony
2. ECMAScript Harmony の日本語訳

確かにJavaScriptをECMAScript 4に準拠させるってなるとエラい事になりそう。 どっちも使ってる言語なので、仲良くやってくれたら良いと思います

Spark projectでもMouseWheelライブラリ

何度目になるのか分からんですけども、凝りずにAS3なマウスホイールライブラリ作ってるよ。 今回は Spark project にコミットしてるので、事故で消えたりとかってのも無くて安心。

• HIGEWheel - Spark project
• /as3/higewheel - Spark project

Win/Macの差異をなくす事を目標として作成しているので、 winなSafariに対応してたり、イベントの伝播を（ある程度）きっちりしてたり、 某マウスホイールなライブラリ に追いつけ追いこせで開発しております。

まだまだソースが汚なかったりするんですが、使ってもらえたら両手を上げて喜びます

ExternalInterfaceがおかしい!?

ExternalInterface.available が、どうもfalseを返さないとダメな場合でもtrueを返してくる場合があるっぽい。 試してみたのはMac/Winともに Flash Player 9 Debugger Version 9.0.124。

適当にこんな感じのテストコードを用意してコンパイル。

// Test.as
package
{
    import flash.display.Sprite;
    import flash.external.ExternalInterface;

    public class Test extends Sprite
    {
        public function Test()
        {
            if (ExternalInterface.available)
            {
                ExternalInterface.call("function () { alert('available!!'); }");
            }
        }
    }
}

これをブラウザにドロップするなりして file:// なアクセスしてみると、 実際には実行出来ないんだけどもvailableはtrueを返してくるので、 結果的に SecurityError なエラー吐いちゃうよ。

とりあえずは Adobeの不具合報告フォーム に投げといた。けども、 対策としては try,catch してあげるのが良いと nium さんと合意。

try
{
    ExternalInterface.call("function () { alert('available!!'); }");
}
catch (e:SecurityError)
{
    // ココでなんかする。
    trace(e.getStackTrace());
}

なんかJavaScriptのIE対策っぽい感じがして嫌なんだけどもね

SWFでマウスホイールなjQueryプラグイン

SWFでマウスホイールを上手い事してくれる jQuery野良プラグインを jQuery野良プラグイン に追加したよ。

pixelbreaker の MouseWheel に思いっきりインスパイアされてる訳ですが、 それに不満があって作り始めたので、色々と改善してるつもり。winなSafariにも対応してるんだよ。

詳しい説明は Google Code の方に書いていく予定なので、 Flasherな方は宜しくどうぞー

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 との戦いの日々になりそう。 名テスター目指して頑張って行こう