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>