読者です 読者をやめる 読者になる 読者になる

AfterEffectsのmochaを使って動画にFlashオブジェクトを合成

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のサンプル2
kujirahand/CSVUtils - Spark project
CSVActionScriptで配列に変換する
Timer - ActionScript 3.0 コンポーネントリファレンスガイド
タイマーイベント