てっく煮ブログ

2010年03月23日
ActionScript, 動画

Bloggie のドーナッツ状パノラマ動画を変換してみた

bloggie という手軽にパノラマ動画を撮れるオモチャで遊ぶシリーズの第３回。前回、静止画のコンバーター ができたので、いよいよ動画にチャレンジする。

bloggie の動画は MPEG4(H.264/AVC) なのでそのまま Flash で読み込める。つまり、オリジナルの動画を再生しながら毎フレームごとに変換していけば、やや CPU は食うが展開して表示することはできる。実際、Flashで360度パノラマ動画MotionVRを再生 | ClockMaker Blog ではそのようにやってる。

同じ方法を試しても面白くないので、ここではドーナッツ状の動画を展開した動画を作ってみることにする。

できあがり

完成品がこちら。

製品付属の変換ツールを使わずに変換してみた。自転車で bloggie を手持ちしつつ鴨川沿いを走った動画でございます。

手順

動画といっても、コマごとに変換してやればいいだけ。フリーの定番動画変換ツール、ffmpeg を活用してみた。

  1. ffmpeg を利用して撮影画像をコマごとに画像として分解する (参考: フリーランス アキのオープンソース活用術: FFMpegで動画を画像にする)
  2. 静止画のコンバーター のソースを流用して、各画像を変換するツールを AIR で作成する
  3. ffmpeg を利用して変換後の画像から動画を再構成する (参考: フリーランス アキのオープンソース活用術: FFMpegで連続画像から動画を作成する)

もう１つサンプル

動画にできたのなら、あとは左端と右端を繋げればループしてくれる。ということで作ってみたのがコレ。

動画の上でマウスを移動させて位置調整できます。マウス動かしても反応ないなら、動画をクリックしてみる必要があるかも。

ソースはこんな感じ。ソース中に出てくる out.swf は YouTube にアップロードした動画を ffmpeg で swf として出力したもの。

package{
import flash.display.*;
import flash.geom.Matrix;
import flash.events.Event;

[SWF(backgroundColor="#ffffff")]
public class Bloggie360Test extends Sprite{
    [Embed(source="out.swf")]
    private var movie:Class;

    public function Bloggie360Test() {
        var mc:MovieClip = new movie();

        var bmd:BitmapData = new BitmapData(400, 248);
        var bmp:Bitmap = addChild(new Bitmap(bmd)) as Bitmap;

        var mtx:Matrix = new Matrix();
        var mtx2:Matrix = new Matrix();

        addEventListener("enterFrame", function(event:Event):void {
            mtx.tx += (200 - stage.mouseX) / 10;
            mtx.tx %= mc.width;

            bmd.draw(mc, mtx);
            if (mtx.tx > 0) {
                mtx2.tx = mtx.tx - mc.width;
                bmd.draw(mc, mtx2);
            }
            if (mtx.tx < mc.width - 400) {
                mtx2.tx = mtx.tx + mc.width;
                bmd.draw(mc, mtx2);
            }
            
        });
    }
}
}

商品情報はこちら。自分が購入したお店で値下がりしていて税抜2万円切っていた。

■ソニー【☆bloggie】モバイルHDスナップカメラ MHS-PM5K-L（ブルー）★送料無料【MHSPM5K】

■ソニー【☆bloggie】モバイルHDスナップカメラ MHS-PM5K-L（ブルー）★送料無料【MHSPM5K】

SONY モバイルHDスナップカメラ bloggie PM5K ブルー MHS-PM5K/L

SONY モバイルHDスナップカメラ bloggie PM5K ブルー MHS-PM5K/L