最近 YouTube が Video サイトとしてはかなりの人気で、何人かのクリエイターやプログラマーの方々がアプリケーションを作ってますが、自分も YouTube - snapshot というアプリケーションを作ってみた。

The screenshot of YouTube - snapshot

コンセプトは、YouTube から動画のキーワード検索して HTML 上に表示し、興味のある動画を Flash 内で再生。この動画のこのシーンが面白いとかブログに書き込んで人に伝えたい場合に、YouTube - snapshot で簡単に読み込んだ動画の好きなシーンのスナップショットを取ることです。

【技術】
Linux、Zend Framework、Proxy、MySQL、PHP、Smarty、Pear、Flash 8、Javascript、CSS、Photoshop、Express Install あたり

自分の担当領域は Flash 8、PHP（Flash 関連部分）、MySQL、Pear、Javascript、CSS、ExpressInstall、デザイン等辺りです。他は hotToast の Taro Yamamoto 氏が設定・作成しました。

【ダウンロード】
flash_sample.zip （fla、swf、html、flv ファイルが入っています）
＊PHP ファイルに関しては次回の説明の際に提供します。

【ソース】
今回はどの様に Flash で動画のスナップショットを取得するかについて説明することにする。このプロジェクトすべてに関して説明するのは複雑になってしまうため、ポイントのみの端的なものにする。

（１）
ドキュメント上に Video オブジェクトを配置し FLV を Video オブジェクトに割り当てる。今回は FMS ではなく Proxy を通した FLV のため、ローカル接続するイメージで NetConnection オブジェクトで接続を確立する。同時に、NetStream オブジェクトを作成し、FLV の再生を始める。

// NetConnection オブジェクト設定

var nc:NetConnection = new NetConnection();

nc.connect(null);

// NetStream オブジェクト設定

var ns:NetStream = new NetStream(nc);

// Video 設定

sample_video.attachVideo(ns);

ns.play("test.flv");

（２）
上記で設定した FLV のスナップショット取得用プログラムを設定する。
Flash 8 から BitmapData という新しい class が追加され、bitmap データを Flash 内で動的に作成できるようになった。今回はこのクラスを使用することで、動的に動画のスナップショットを作成することにする。この bitmap データを movieClip に格納し表示するために attachBitmap を使用する。ただしこれだけだと単純な bitmap なので、draw 関数により、bitmap オブジェクトに対し、特定のリソースからの bitmap 情報を書き込む。これにより Flash 内で動画の画像が表示される。また、bitmapData オブジェクトが不必要になる場合、dispose 関数を使用し、bitmapData オブジェクトをメモリから開放する関数も設定する。

// snapshot 作成用関数

var bd:BitmapData;

function get_snapshot():Void {

    var tmp:MovieClip = _root.createEmptyMovieClip("snap_mc", 10);

    bd = new BitmapData(sample_video._width, sample_video._height, true, 0x00000000);

    tmp.attachBitmap(bd, 1, "auto", true);

    bd.draw(sample_video);

    tmp._x = 300;

    tmp._y = 126;

    buttonset_mc.gotoAndStop(2);

    save_mc._visible = true;

}

// snapshot 削除用関数

function clear_snapshot():Void {

    bd.dispose();

    buttonset_mc.gotoAndStop(1);

    save_mc._visible = false;

}

（３）
このスナップショットを jpeg として保存する。
上記のままファイルを閉じると、先ほど作成した bitmap のスナップショットをデータとして保存することが出来ないため、getPixel を使用して 1 pixel ごとの bitmap の色情報を取得する。その色情報は PHP で管理しやすい様に、16 進数に変更し、Array に格納する。最後に LoadVars で色情報を PHP に送信するために toString 関数により Array 情報を一時的に string 化し、bitmap の幅・高さの値と共に LoadVars オブジェクトによりサーバ側に送信する。

// snapshot の色情報取得用関数

function save_snapshot():Void {

    var colors:Array = new Array();

    var w_total:Number = sample_video._width;

    var h_total:Number = sample_video._height;

    for(var w_each:Number = 0; w_each <= w_total; w_each++) {

        for(var h_each:Number = 0; h_each <= h_total; h_each++) {

            var tmp:String = bd.getPixel(w_each, h_each).toString(16);

            colors.push(tmp);

        }

    }

    var colors_str:String = colors.toString();

    send_colorinfo(w_total, h_total, colors_str);

}



// snapshot の色情報をサーバ上に送信

function send_colorinfo(w:Number, h:Number, colors:String):Void {

    var send_obj:LoadVars = new LoadVars();

    send_obj.w = w;

    send_obj.h = h;

    send_obj.colors = colors;

    send_obj.send("./get_snapshot.php", "_blank", "POST");

}

今回は Flash 8 から利用可能な BitmapData オブジェクトを使用し、どの様に動的に FLV の 色情報を取得し、bitmap を生成するかについて説明した。
次回はサーバサイドでどの様に Flash からの色情報を取得し、動的に jpeg を作成するかについてと、その他で覚えておきたいことをまとめることにする。