Tag/Flash

JSFL書いてみたメモ

Flashで作業してると、 同じ作業を何度となく繰り返す場面に出くわすんですが、 どうにかして回避したいなぁ。って思ってたところで JSFL ってものに遭遇。 どうやらJavaScriptで書けるFlashの機能拡張らしい。

で、色々調べながら書いてみたのがコレ。 berianiaocc が以前に話題にしてた、 ライブラリの画像をグラフィックスでラップして、 さらにムービークリップにしてくれるJSFL。完全に 車輪 ですよ!!

/**
 *  ConvertToSymbol.jsfl
 **/
(function ()
{
    //  ファイルが開かれてないとココでおしまい
    if (!fl || !fl.getDocumentDOM()) return alert("ドキュメントオブジェクトが見つかりません。");

    var DOC = fl.getDocumentDOM();
    var LIB = DOC.library;

    LIB.items.filter(function (element)
    {
        //  Bitmapなライブラリ以外はココではじく
        return element.itemType == 'bitmap' ? true : false;
    })
    .filter(function (element)
    {
        var newName = element.name.split(".")[0] + "_g";
        //  既に定義されていれば除く
        if (LIB.itemExists(newName)) return false;
        //  Graphicsを生成
        LIB.addNewItem("graphic", newName);
        //  BitmapをGraphicsでラップする
        LIB.editItem(newName);
        LIB.addItemToDocument({x:0, y:0}, element.name);
        //  ポジションの補正
        var rect = DOC.getSelectionRect();
        DOC.setSelectionBounds({
            left: 0,
            top: 0,
            right: rect.right - rect.left,
            bottom: rect.bottom - rect.top
        });
        DOC.exitEditMode();

        return true;
    })
    .filter(function (element)
    {
        var name = element.name.split(".")[0];
        var gName = name + "_g";
        var mcName = name + "_mc";
        //  既に定義されていれば除く
        if (LIB.itemExists(mcName)) return;
        //  MovieClipを生成
        LIB.addNewItem("movie clip", mcName);
        //  GraphicsをMovieClipでラップする
        LIB.editItem(mcName);
        LIB.addItemToDocument({x:0, y:0}, gName);
        //  ポジションの補正
        var rect = DOC.getSelectionRect();
        DOC.setSelectionBounds({
            left: 0,
            top: 0,
            right: rect.right - rect.left,
            bottom: rect.bottom - rect.top
        });
        DOC.exitEditMode();

        return true;
    });

})();
// vim: filetype=javascript fenc=utf-8 bomb

とりあえず良い感じに出来た(と思う)。 Flashでの作業中に、メンドクサイって3回思ったら JSFL 作るようにしよう :-P

Posted at: 
2008/04/25 00:49:17
4 Comments
0 TrackBacks
Tags: 
Flash
JavaScript
Trackback: 
http://humming.via-kitchen.com/2008/04/25/jsfl-memo/trackback/

Progressionレクチャーメモ

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

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

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

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

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

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

//  1階層目から2階層目へ移動
onGoto -> onLoad -> onInit

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

//  1階層目から3階層目へ移動
onGoto -> onLoad -> onLoad -> onInit

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

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

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

//  3階層目から1階層目へ移動
onGoto -> onUnload -> onUnload -> onInit

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

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

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

になるよ。

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

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

Posted at: 
2008/04/05 05:15:15
0 Comments
1 TrackBack
Tags: 
ActionScript
Flash
Progression
Trackback: 
http://humming.via-kitchen.com/2008/04/05/progression-lecture-memo/trackback/

SWFMacMouseWheelがバグってるメモ

t-matsuda 氏と AS3.0 MouseWheel on Mac OS X を触る必要があったんだけども、 なぜかwindowsでエラー吐くので調べてみたよ。

エラー内容を見てみると、 どうやら SWFMacMouseWheelregisterObject ってメソッドが無いらしい。 それはさすがにアリエナイだろ。って思ってソースを見てみたら、 swfmacmousewheel_src.js の20行目あたりに、ものっすごいのが書いてあった!

var swfmacmousewheel = function()
{
    if( !swfobject ) return null;

    var u = navigator.userAgent.toLowerCase();
    var p = navigator.platform.toLowerCase();
    var mac = p ? /mac/.test(p) : /mac/.test(u);

    //  この1行がアリエナイ。
    if( !mac ) return null;

    // 処理がつづく...

    //  Macだとここが実行される。
    return {
        /*
        Public API
        */
        registerObject: function(objectIdStr)
        {
            regObjArr[regObjArr.length] = objectIdStr;
        }
    };
}();

この実装はどうなんだ? そりゃ registerObject なんてメソッド無いだろうよ。 windowだと swfmacmousewheel の中身がnullになるよ!

このあと、なんだかんだ修正しまくったんだけども、 とりあえずのやっつけなのであれば、

if ( !mac ) return null;

のところを、

if ( !mac ) return {
    registerObject: function () {}
};

って変えてあげればエラーは消えるよ。 本当にやっつけだけども。 他にも色々と問題があったりなかったりなので、 デフォルトのまま使うのであれば、注意したほうが良いかもね :-P

Posted at: 
2008/04/01 14:31:09
0 Comments
1 TrackBack
Tags: 
Flash
JavaScript
Mac
Trackback: 
http://humming.via-kitchen.com/2008/04/01/swfmacmousewheel-bug-memo/trackback/

ProgressionのPreloaderメモ

Progression FrameworkPreLoader メモ。

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

どうやってローディングしてるのかな?って、 ちょっと気になって 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 クラスに用意されてる(空の状態で書いてある)イベントハンドラに、 それぞれやりたい処理を書いておけば実行してくれる。 bytesLoadedbytesTotal なプロパティも用意されてるので、 パーセンテージの計算とかもちゃんと出来るよ。

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

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

Posted at: 
2008/03/31 00:22:33
0 Comments
1 TrackBack
Tags: 
ActionScript
Flash
Progression
Trackback: 
http://humming.via-kitchen.com/2008/03/31/progression-preloader-memo/trackback/

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

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

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

MovieClipButton などのキャストクラスを、 ステージに配置したり、逆に消したりする時に、 _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));
}

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

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

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"
    }));
}

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

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

Posted at: 
2008/03/25 03:21:51
0 Comments
0 TrackBacks
Tags: 
ActionScript
Flash
Progression
Trackback: 
http://humming.via-kitchen.com/2008/03/25/progression-command-memo/trackback/

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 Frameworkversion 2.0.12 がリリースされちゃった :-P

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

Posted at: 
2008/03/24 01:11:02
2 Comments
0 TrackBacks
Tags: 
ActionScript
Flash
Progression
Trackback: 
http://humming.via-kitchen.com/2008/03/24/tried-progression-tutorial/trackback/

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 のインストーラビリティは抜群
  • ドキュメントが日本語で問題児にも優しい
  • メインコミッターに気軽に質問出来る(言語の壁的な意味で)

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

Posted at: 
2008/03/23 06:29:15
0 Comments
0 TrackBacks
Tags: 
ActionScript
Flash
Progression
Trackback: 
http://humming.via-kitchen.com/2008/03/23/progression-install-memo/trackback/

AS3でクラスの継承やインターフェイスを調べる

AS3 で、あるクラスが特定のクラスやインターフェイスを継承してるか?(インプリメンツしてるか?)を調べるメモ。 インスタンスに対してなら、 is を使えば良いから簡単。

var mc:MovieClip = new MovieClip();
trace(mc is MovieClip); // <- true
trace(mc is Sprite);    // <- true

が、これがクラスになると使えない。

trace(MovieClip is MovieClip);  // <- false
trace(MovieClip is Sprite);     // <- false
trace(MovieClip is Class);      // <- true

で、調べてみると flash.utilsdescribeType な関数が用意されていて、 コレを使うとクラスやオブジェクトのメタ情報?がXMLで取れる。

//  Spriteをリフレクション
trace(describeType(Sprite));

とかすると、色んな情報が吐き出されてくる。

<type name="flash.display::Sprite" base="Class" isDynamic="true" isFinal="true" isStatic="true">
  <extendsClass type="Class"/>
  <extendsClass type="Object"/>
  <accessor name="prototype" access="readonly" type="*" declaredBy="Class"/>
  <factory type="flash.display::Sprite">
    <extendsClass type="flash.display::DisplayObjectContainer"/>
    <extendsClass type="flash.display::InteractiveObject"/>
    <extendsClass type="flash.display::DisplayObject"/>
    <extendsClass type="flash.events::EventDispatcher"/>
    <extendsClass type="Object"/>
    <implementsInterface type="flash.display::IBitmapDrawable"/>
    <implementsInterface type="flash.events::IEventDispatcher"/>
    (省略...)
  </factory>
</type>

で、この中の extendsClass ってのと implementsInterface ってのを見てみると、 継承してるクラスとかインターフェイスがちゃんと出てきてる。 これを比較してやれば判別出来そう。 パッケージ名を補完するのには flash.utilsgetQualifiedClassName な関数が用意されてるよ。 使い方が合ってるかは分からんですけど。

var check:String = getQualifiedClassName(Sprite);
var meta:XML = describeType(MovieClip);
for each (var s:String in meta.factory.extendsClass.@type)
{
    if (s == check)
    {
        trace("hit", s);    // 'hit flash.display::Sprite'って出るハズ
    }
}

これを Boolean を返すような関数とかメソッドにしとくと、 先祖クラスのチェックに使えるね。インターフェイスのチェックなら、

var check:String = getQualifiedClassName(IEventDispatcher);
var meta:XML = describeType(MovieClip);
for each (var s:String in meta.factory.implementsInterface.@type)
{
    if (s == check)
    {
        trace("hit", s);    // 'hit flash.events.IEventDispatcher'って出るハズ
    }
}

こんな感じでチェック出来るね。

他にも色々な情報が引き出せてるから、 かなり細かいところまでチェックしたり出来そう。 リフレクションのライブラリとかって、コレを使ってるんだろうなぁ。と勝手に憶測。

また一つ勉強になりましたとさ :-)

Posted at: 
2008/03/18 02:45:00
0 Comments
0 TrackBacks
Tags: 
ActionScript
Flash
Trackback: 
http://humming.via-kitchen.com/2008/03/18/check-class-extends-and-implements/trackback/

ASDocメモ

ActionScript3 のドキュメント作成ツール、 ASDoc を初めて使ってみたのでメモ。

普通に吐き出すのであれば、 -doc-sources でソースのパスを指定するだけで出来る。

#   相対パスでも指定出来るよ
$ asdoc -doc-sources /path/to/sources

これでカレントディレクトリに asdoc-output なディレクトリが作られて、 その中にファイル群が一式作られる。 中にある index.html を開くと見慣れた風景が広がるよ。

吐き出す場所やディレクトリ名を指定したい場合は -output で指定出来る。

$ asdoc -doc-sources /path/to/sources -output /path/to/docs

こうすると /path/to なディレクトリに、 docs って名前でドキュメントのディレクトリが作られるよ。 こういう簡単にドキュメントを作ってくれるツールが、 デフォルトで用意されてるってのは良いね :-)

その他色々細かい指定も出来るみたいなんだけども、 そのへんはまたおいおい :-P

Posted at: 
2008/03/14 02:48:31
0 Comments
0 TrackBacks
Tags: 
ActionScript
Flash
Trackback: 
http://humming.via-kitchen.com/2008/03/14/asdoc-memo/trackback/

AS3で時計とか。

職場のおねぃさんから「時計とか作れない?」って話があって、 調子にのって作ったよ。 すいません。何の変哲もないただの時計であります :-P むしろ Flash なのに限り無くダサいのは触れないでおくんなまし。

こちらアナログ時計風。

ココにアナログ時計がくる予定。

次がデジタル時計風。

ココにデジタル時計がくる予定。

そのうちコレが目を引く華麗な時計に変わるんだから Flash は面白い!! ってか、デザイナーさんの力にただただ驚かされるばかりですな :-)

Posted at: 
2008/03/11 01:50:32
2 Comments
0 TrackBacks
Tags: 
ActionScript
Flash
Trackback: 
http://humming.via-kitchen.com/2008/03/11/clock-on-actionscript3/trackback/

Categories

Archives