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

Youtubeビデオにマスクをかけてみた

ちょいと三角形で遊んでみたいなぁってことで、youtubeの動画にマスク処理してみました。
こんな感じ。
http://moeten.info/flex/20091207_triangleMacross/bin-release/main.html

#なんだかPerspectiveProjectionを使用するとyoutubeのマウスクリックを拾ってくれない汗
すべてのソースはこちら

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="init()"
    backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#000000, #737373]" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.ListEvent;
import mx.effects.easing.Linear;
import flash.display.Loader;
import flash.events.Event;
private var player:Object;
private var loader:Loader;
[Bindable]private var vidCollection:ArrayCollection;
private function init():void
{
    //パースペクティブの変更
//    var pp:PerspectiveProjection = new PerspectiveProjection();
//    pp.projectionCenter = new Point( this.width/2 , this.height/2);
//    pp.fieldOfView = 40;
//    myScene.transform.perspectiveProjection = pp;
    vidCollection=new ArrayCollection();
    vidCollection.addItem({data: "t-rPWGkkD9Q", label: "マクロス"});
    loader=new Loader();
    loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
    loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
    this.addEventListener(Event.ENTER_FRAME , onTimer );
}
private function onLoaderInit(event:Event):void
{
    loader.cacheAsBitmap = true;
    loader.mask = myMask;
    VidHolder.rawChildren.addChild(loader);
    loader.content.addEventListener("onReady", onPlayerReady);
    loader.content.addEventListener("onError", onPlayerError);
    loader.content.addEventListener("onStateChange", onPlayerStateChange);
    loader.content.addEventListener("onPlaybackQualityChange", onVideoPlaybackQualityChange);
}
private function onPlayerReady(event:Event):void
{
    traceArea.text+="player ready:" + Object(event).data + "\r";
    player=loader.content;
    player.setSize(VidHolder.width, VidHolder.height);
    VidSelection.selectedIndex=0;
    VidSelection.dispatchEvent(new ListEvent(ListEvent.CHANGE, true, false));
}
private function cueVideo(event:ListEvent):void
{
    traceArea.text+="switch to:" + event.target.selectedItem.label + "\r";
    player.cueVideoById(event.target.selectedItem.data);
}
private function onPlayerError(event:Event):void
{
    traceArea.text+="player error:" + Object(event).data + "\r";
}
private function onPlayerStateChange(event:Event):void
{
    traceArea.text+="player state:" + Object(event).data + "\r";
}
private function onVideoPlaybackQualityChange(event:Event):void
{
    traceArea.text+="video quality:" + Object(event).data + "\r";
}
private function onTimer(e:Event):void{
    myScene.rotationX = -this.mouseY*0.4;
    myScene.rotationY = -this.mouseX*0.4;
}
private function onMaskChange():void{
    myMask.source = maskList.selectedLabel + ".png";
}
]]>
</mx:Script>
<!---->
<mx:Parallel id="myAnime">
    <mx:AnimateProperty property="rotationY" fromValue="0" toValue="360" easingFunction="Linear.easeInOut" repeatCount="0" duration="10000"/>
</mx:Parallel>
<mx:GlowFilter id="gf" color="0xffffff" blurX="4" blurY="4" strength="10" inner="true" />
<mx:DropShadowFilter id="dsf" color="0xff0000" blurX="12" blurY="12" distance="0"/>
<!---->
<mx:Canvas id="myScene" verticalCenter="0" horizontalCenter="0" clipContent="false" width="1" height="1">
    <mx:Canvas id="myImage" width="1" height="1" clipContent="false" creationCompleteEffect="myAnime">
        <mx:Canvas id="VidHolder" verticalCenter="0" horizontalCenter="0"
            width="640" height="480" cacheAsBitmap="true" filters="{[gf,dsf]}" mask="{myMask}">
        </mx:Canvas>
        <mx:Image id="myMask" source="triangle.png" verticalCenter="0" horizontalCenter="0" cacheAsBitmap="true"/>
    </mx:Canvas>
</mx:Canvas>
<mx:ComboBox id="maskList" change="onMaskChange()" labelField="label" x="34" y="74" width="194">
    <mx:dataProvider>
        <mx:Array>
            <mx:Object label="triangle"/>
            <mx:Object label="star"/>
            <mx:Object label="circle"/>
        </mx:Array>
    </mx:dataProvider>
</mx:ComboBox>
<mx:ComboBox id="VidSelection"
                 editable="false"
                 dataProvider="{vidCollection}"
                 height="22"
                 change="cueVideo(event)"
                 width="194"
                 x="34"
                 y="104">
    </mx:ComboBox>
    <mx:TextArea
                 id="traceArea"
                 backgroundAlpha="0.6" color="0xffffff"
                 alpha="0.48" width="194" height="184" y="134"/>
</mx:Application>