Home

  • JSFLのベンチマークをとってみる

    Flash, JSFL  · 

    JSFLのパフォーマンスを向上させる記事があったので、自分でも試してみました。

    参考：Salsa de Pixeles: Improving JSFL performance

    こういう関数を作って実行してみる。xJSFLにTimer が用意されていて便利。

    xjsfl.init(this); // init xJSFL
    ;(function(){
    function scriptFolderURI() {
    return fl.scriptURI.replace(/[¥/][^¥/]*?$/,"/");
    }
    // use Lo-Dash
    fl.runScript(scriptFolderURI() + "jsload/lib/lodash.compat.js");
    })();
    function benchmark(name, times, callback){
    var timer = new Timer(name);
    timer.start();
    for (var i=0; i < times; i++){
    callback();
    }
    timer.stop(true);
    }
    clear();
    benchmark("benchmark test", 1000,function(){
    // task
    _.reduce(_.range(100), function (sum, num) {return sum + num;});
    });
    benchmark("benchmark test2", 1000,function(){
    // task
    _.map(_.range(100), function (item) {return item * item * item;});
    });
    view raw benchmark1.jsfl hosted with ❤ by GitHub

    結果は以下のようになります。単純な計算なのであまり変わりませんね。

    Task "benchmark test" took 126 milliseconds Task "benchmark test2" took 156 milliseconds

    キーフレームの作成方法による違い

    空のキーフレームを100個作るときの時間を計測しています。

    xjsfl.init(this); // init xJSFL
    ;(function(){
    function scriptFolderURI() {
    return fl.scriptURI.replace(/[¥/][^¥/]*?$/,"/");
    }
    // use Lo-Dash
    fl.runScript(scriptFolderURI() + "jsload/lib/lodash.compat.js");
    })();
    function benchmark(name, times, callback){
    var timer = new Timer(name);
    timer.start();
    for (var i=0; i < times; i++){
    callback();
    }
    timer.stop(true);
    }
    function deleteAllLayers() {
    function layerCallback(layer, index) {
    $timeline.deleteLayer(index)
    }
    Iterators.layers(Context.create(), layerCallback);
    }
    clear();
    benchmark("convert keyframes", 10,function(){
    // task
    $timeline.convertToKeyframes(0,100);
    deleteAllLayers();
    });
    benchmark("insert keyframes", 10,function(){
    // task
    _.range(100).map(function(item){$timeline.insertKeyframe(item);});
    deleteAllLayers();
    });
    view raw benchmark2.jsfl hosted with ❤ by GitHub

    結果は以下のようになります。 convertToKeyframesで一括で作る場合とinsertKeyframeで1フレームずつ作る場合を比較しましたが、 前者の方が後者より約45倍早くなっています。

    Task "convert keyframes" took 565 milliseconds Task "insert keyframes" took...

  • JSFL で Underscore.js を使うテスト

    Flash, JSFL  · 

    JSFL の fl.runScript を使って汎用的な JS のライブラリ Underscore.js が使えるか試してみたらできたのでメモ。

    ファイルの構造（xJSFLでファイルのURIを指定しているのでこんな感じ）

    jsfl_underscore_file-2

    ※注意：underscore-min.js （圧縮されたJS）を読み込んだところ、特定のメソッドで Flash が強制終了しました…。圧縮されてない underscore.js を使うと落ちませんでした…不思議。

    //xjsfl.reload();
    xjsfl.init(this); // using xJSFL
    clear();
    fl.runScript(xjsfl.file.find('lib', 'underscore.js'));
    trace(_.map([1, 2, 3], function(num){ return num * 3; }));
    trace(_.some([null, 0, 'yes', false]));
    trace(_.invoke([[5, 1, 7], [3, 2, 1]], 'sort'));
    var evens = _.filter(_.range(1, 20), function(num){ return num % 2 == 0; });
    trace(evens);
    var sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);
    trace(sum);
    var stooges = [{name : 'curly', age : 25}, {name : 'moe', age : 21}, {name : 'larry', age : 23}];
    var youngest = _.chain(stooges)
    .sortBy(function(stooge){ return stooge.age; })
    .map(function(stooge){ return stooge.name + ' is ' + stooge.age; })
    .first()
    .value();
    trace(youngest);
    view raw temp.jsfl hosted with ❤ by GitHub

    結果

    underscore_result

    使い道

    あまり思い浮かびませんが、生のJS書くよりはマシなのでモチベーションがあがりますね。 他にも汎用的なJSのライブラリを読み込んだりしたらさらに便利になりそう。

  • Flashでラスタ画像をカクカクさせない方法

    Flash  · 

    Flashでラスタ画像を扱うとき、拡大縮小・回転するとカクカクして表示が汚いですが、回避する方法を（今更ながら）知ったのでメモ。 一括で設定する方法も後述します。

    手順

    ライブラリからビットマッププロパティを開き、スムージングにチェックを入れる。

    結果

    一括指定方法

    xJSFL をインストールしていると、スニペットパネルが使えるようになり、その中のSmooth bitmaps を実行すると、ライブラリにある画像すべてスムージングが有効になる。便利！

  • xJSFL はじめの一歩

    Flash, JSFL  · 

    xJSFLのベータ版が終わり1.xがリリースされましたね。めでたい！！

    これを機にxJSFLをインストールして快適なJSFLライフを過ごしましょう（宣伝）

    以下、備忘録とか宣伝とか。基本的には以前書いたエントリと同じですが。。。

  • SWF2PNGSequence のフィルタ関係の不具合を修正しました

    Flash, Movie, Program  · 

    お陰さまで SWF2PNGSequence が 20個ほど売れています。ありがとうございます！（ニッチなツールとしては多いのかな・・・？）

    フィルタを使用したSWFの変換が で上手くできないという問い合わせを頂きましたので修正しました！

    以前購入いただいた方へ：同じURLに修正したファイルをアップロードしていますので、ダウンロード・インストールをお願いします。 新規購入の方はこちら：SWF2PNGSequence

    ついでに下記項目も修正しています。

    • サイズ指定：ニコニコ動画の新プレイヤーの解像度864x486, 648x486 を追加
    • ファイル名：日本語のファイルがエスケープされていたのでアンエスケープして表示するように修正

  • モーショントゥイーンを自動作成する.jsfl

    Flash, JSFL  · 

    モーショントゥイーンを自動作成する.jsflをとりあえず作ってみました。

    xjsfl.init(this); //init xJSFL
    const STAR_NAME = "star";
    var dom = $dom;
    var lib = $dom.library;
    var tl = $timeline;
    var context = Context.create();
    makeStar(); //星を作る
    lib.addItemToDocument({x:100 , y:100}, STAR_NAME); //ステージに配置
    tl.createMotionTween(); //モーショントゥイーンを作成
    tl.insertKeyframe(29); //30フレーム目にキーフレームを挿入
    //30フレーム目のMCを変形させる
    $('*')
    .attr('position', [400,200])
    .attr('scale', [1, 0.5])
    .attr('rotation', 30)
    .refresh();
    //星のMCを作る
    function makeStar(){
    if( ! lib.itemExists(STAR_NAME))
    {
    lib.addNewItem('movie clip', STAR_NAME);
    lib.editItem(STAR_NAME);
    makeStarPath(5, 20, 40);
    dom.selectAll();
    dom.setFillColor('#99CC3366');
    dom.setStroke('#003300AA', 0.5, 'solid')
    context.goto();
    }
    }
    //星のパスを描画
    function makeStarPath(sideNum, inside, outside){
    var myPath = fl.drawingLayer.newPath();
    var radius, radians;
    for (var i = 0; i <= sideNum * 2 ; i++)
    {
    radius = (i%2) ? inside : outside;
    radians = 360 * (i / sideNum / 2) * (Math.PI / 180) + (Math.PI * 1.5); // 星なので90度から描画開始
    myPath.addPoint(Math.cos(radians) * radius, Math.sin(radians) * radius);
    //trace(Math.cos(radians) * radius, Math.sin(radians) * radius);
    }
    myPath.makeShape();
    }
    view raw MotionTest.jsfl hosted with ❤ by GitHub

    xJSFL | Context (class) を使いたかったが、バグがかなりあるようなのでかなりはまりました。無難に公式のAPI叩いた方がいいかも。 2012/6/10 追記：$timeline が用意されているようなので、それを使いました。

    実行するとこんな感じになります。

    次にやりたいこと

    • 任意のフレームをモーショントゥイーン
    • イージング
    • 複数レイヤーで同時に自動作成
    • グラフィック（またはMC）を作ってその中にタイムライン作成
    • パーティクルのようなもの
    • タイポグラフィー