マスクでちょっと遊んでみた。
画像が切り替わるときにちょっとしたエフェクトとしてマスクを遊んでみました。
こんな感じ
http://moeten.info/flex/20080912_imageMaskTest/bin-release/main.html
マスク用の画像
ENTER_FRAME でちょっとづつ閾値をあげていくとだんだんと削られて下の絵が表示される仕組み
ほとんどのトランジションはこれでかっこよくできるんじゃないかなぁって思ってます。
パーリンノイズを使った焼けるエフェクト
これと同じ原理。
ほんとはこういったものが作りたいんだけどどうなってるんだろう。
http://www.loverinco.jp/main.html#
ページの切り替えエフェクト
ソースはこんな感じ
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ private function init():void{ myImage.cacheAsBitmap = true; myMaskImage.cacheAsBitmap = true; myMask.cacheAsBitmap = true; //ここ重要 myImage.mask = myMask; this.addEventListener(Event.ENTER_FRAME , myTimer ); } private var bd:BitmapData = new BitmapData( 300,300 , true ); private var thr:uint = 0; private function myTimer( e:Event ):void{ bd.draw( myMaskImage ); thr += 300000; if( thr > 0x00ffffff ){ thr = 0; } bd.threshold( bd , bd.rect , new Point(0, 0), "<=", thr, 0, 0x00FFFFFF , false); myMask.source = new Bitmap( bd ); } ]]> </mx:Script> <mx:Image id="myMaskImage" source="mask.gif" x="337" y="0"/> <mx:Canvas x="0" y="0" width="300" height="300" verticalScrollPolicy="off" horizontalScrollPolicy="off"> <mx:Image source="10.jpg" y="0" x="0"/> <mx:Image id="myImage" source="06.jpg" y="0" x="0"/> <mx:Image id="myMask" x="0" y="0" width="300" height="300"/> </mx:Canvas> </mx:Application>