AfterEffectsのmochaを使って動画にFlashオブジェクトを合成 - PHP,MySQL,Flex,JSな日々＋イラストとか

AfterEffectsのmochaを使って動画にFlashオブジェクトを合成してみました。

こんな感じ
http://moeten.info/flex/20101230_machaTest/bin-release/Main.html
ARのようにリアルタイム処理でないため比較的処理が軽いのでAndroid端末でも動作可能です。
mochaには画像のポジションの他にBlurも出力できるようなのでうまく合成するとそれっぽくなると思います。
Android端末で自分の撮った写真と組みあわせるとおもしろそうです。

ソース

ソースはこちら

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955" minHeight="600"
               creationComplete="application1_creationCompleteHandler(event)"
               viewSourceURL="srcview/index.html">
    <fx:Declarations>
        <s:HTTPService id="hts" resultFormat="text" url="assets/out.csv" result="hts_resultHandler(event)"/>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.rpc.events.ResultEvent;
            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                hts.send();
            }
            private var timer:Timer;
            private var arr:Array;
            protected function hts_resultHandler(event:ResultEvent):void
            {
                arr = CSVUtils.CsvToArray("" + hts.lastResult);
                timer = new Timer( 30 );
                timer.addEventListener(TimerEvent.TIMER , onTimer );
                timer.start();
                myUI.addChild( shape );
            }
            private var shape:Shape = new Shape();
            private var points:Array = new Array();
            private var W:Number;
            private var H:Number;
            [Embed(source='assets/image.png')]
            private var img:Class;
            private var bmp:Bitmap=new img();
            private function onTimer( e:TimerEvent ):void{
                if( timer.currentCount >= arr.length ){
                    timer.removeEventListener(TimerEvent.TIMER , onTimer );
                    vd.stop();
                    return;
                }
                var vertices:Vector.<Number>=new Vector.<Number>();
                vertices.push( arr[timer.currentCount][0] ,arr[timer.currentCount][1] );
                vertices.push( arr[timer.currentCount][2] ,arr[timer.currentCount][3] );
                vertices.push( arr[timer.currentCount][4] ,arr[timer.currentCount][5] );
                vertices.push( arr[timer.currentCount][6] ,arr[timer.currentCount][7] );
                var indices:Vector.<int>=new Vector.<int>();
                indices.push(0, 1, 2, 1, 2, 3);
                var uvtData:Vector.<Number>=Vector.<Number>([0, 0, 1, 0, 0, 1, 1, 1]);
                shape.graphics.clear();
                shape.graphics.beginBitmapFill(bmp.bitmapData);
                shape.graphics.drawTriangles(vertices, indices, uvtData);
                shape.graphics.endFill();
                p1.x = arr[timer.currentCount][0];
                p1.y = arr[timer.currentCount][1];
                p2.x = arr[timer.currentCount][2];
                p2.y = arr[timer.currentCount][3];
                p3.x = arr[timer.currentCount][4];
                p3.y = arr[timer.currentCount][5];
                p4.x = arr[timer.currentCount][6];
                p4.y = arr[timer.currentCount][7];
            }
        ]]>
    </fx:Script>
    <s:VideoDisplay id="vd" source="assets/video.f4v" />
    <mx:UIComponent id="myUI"/>
    <s:Rect width="5" height="5" id="p1">
        <s:stroke>
            <s:SolidColorStroke color="0xff0000" />
        </s:stroke>
    </s:Rect>
    <s:Rect width="5" height="5" id="p2">
        <s:stroke>
            <s:SolidColorStroke color="0xff0000" />
        </s:stroke>
    </s:Rect>
    <s:Rect width="5" height="5" id="p3">
        <s:stroke>
            <s:SolidColorStroke color="0xff0000" />
        </s:stroke>
    </s:Rect>
    <s:Rect width="5" height="5" id="p4">
        <s:stroke>
            <s:SolidColorStroke color="0xff0000" />
        </s:stroke>
    </s:Rect>
</s:Application>

参考になるページ

Tracking A Futuristic High Tech Floating Interface – Day 1: AfterEffectsのmochaを使ったサンプル
drawTriangleをちょっと触る 3: 鮭とプログラムとか: 画像を自由に変形できるdrawTriangleのサンプル
三角形分割によるテクスチャマッピング − Graphics.drawTriangles()メソッド Part 2 | Developer Center: 画像を自由に変形できるdrawTriangleのサンプル２
kujirahand/CSVUtils - Spark project: CSVをActionScriptで配列に変換する
Timer - ActionScript 3.0 コンポーネントリファレンスガイド: タイマーイベント