[Flex][Air] BlurFilterでぼかす

1000speakersでプレゼンした時に、スライドがシャッって動くようなのをflexでやったんだけど、



動いてる方向にぼかしを入れるともっときれいになるってデザイナーの人に教えてもらったので、



次回のプレゼンするためのメモ



とりあえず、↓みたいになればいい





ソース:myBlurFilter.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="300" fontSize="14"> <mx:Script> <![CDATA[ import caurina.transitions.Tweener; private var blur:BlurFilter = new BlurFilter(); private function moveLeft():void { blur.blurX = 8; setFilter(); Tweener.addTween(myPanel, {x:-300, time:1, transition:"easeIn", onComplete:moveLeftComp}); } private function moveLeftComp():void { myPanel.x = 300; Tweener.addTween(myPanel, {x:50, time:1, transition:"easeOutz"}); Tweener.addTween(blur, {blurX:0, time:1, transition:"easeOut", onUpdate:setFilter, onComplete:clearFilter}); } private function moveUp():void { blur.blurY = 8; setFilter(); Tweener.addTween(myPanel, {y:-300, time:1, transition:"easeIn", onComplete:moveUpComp}); } private function moveUpComp():void { myPanel.y = 350; Tweener.addTween(myPanel, {y:50, time:1, transition:"easeOut"}); Tweener.addTween(blur, {blurY:0, time:1, transition:"easeOut", onUpdate:setFilter, onComplete:clearFilter}); } private function moveDown():void { blur.blurY = 8; setFilter(); Tweener.addTween(myPanel, {y:350, time:1, transition:"easeIn", onComplete:moveDownComp}); } private function moveDownComp():void { myPanel.y = -200; Tweener.addTween(myPanel, {y:50, time:1, transition:"easeOut"}); Tweener.addTween(blur, {blurY:0, time:1, transition:"easeOut", onUpdate:setFilter, onComplete:clearFilter}); } private function moveRight():void { blur.blurX = 8; setFilter(); Tweener.addTween(myPanel, {x:350, time:1, transition:"easeIn", onComplete:moveRightComp}); } private function moveRightComp():void { myPanel.x = -200; Tweener.addTween(myPanel, {x:50, time:1, transition:"easeOut"}); Tweener.addTween(blur, {blurX:0, time:1, transition:"easeOut", onUpdate:setFilter, onComplete:clearFilter}); } private function clearFilter():void { myPanel.filters = null; } private function setFilter():void { myPanel.filters = [blur]; } ]]> </mx:Script> <mx:HBox width="100%"> <mx:Button label="←" click="moveLeft()" /> <mx:Button label="↑" click="moveUp()" /> <mx:Button label="↓" click="moveDown()" /> <mx:Button label="→" click="moveRight()" /> </mx:HBox> <mx:Canvas id="myCanvas" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Panel id="myPanel" width="200" height="200" x="50" y="50"> <mx:Label text="あいうえお　かきくけこ" /> <mx:Label text="さしすせそ　たちつてと" /> <mx:Label text="なにぬねの　はひふへほ" /> <mx:Label text="まみむめも　や　ゆ　よ" /> <mx:Label text="らりるれろ　わ　　　を" /> </mx:Panel> </mx:Canvas> </mx:Application>


BlurFilterのコンストラクタは、
BlurFilter(blurX = 4, blurY = 4, quality = 1)で

・blurXは水平方向のぼかし(0.0〜255.0)、
・blurYは垂直方向のぼかし(0.0〜255.0)で
２のべき乗を指定すると速いらしい

・quialityは、なんかいblurをかけるか(?)で、値を大きくしたら重くなるので、１〜３にするといいらしい


これを適用させるには、filtersプロパティにこれを代入すればいいのだが、filtersの型はArrayなので"[","]"でくくってArrayにしてやる。
filterを外すには、filtersにnullを入れれば良い
private function clearFilter():void { myPanel.filters = null; } private function setFilter():void { myPanel.filters = [blur]; }



また、Panelの移動のTweenにtransition:"easeOut"を指定し、徐々に減速して行くようにしたので、ぼかしも少しずつ減っていかないと不自然だった。
そこで、blurXにtweenをかけて値を減らしていけば良いと思ったのだが、BlurFilterは処理が重くなるのを避けるために、Bindableではないらしい。
なので、blurXのtweenを適用させるために、TweenerのonUpdateを用いて、filterをセットし直す。
Tweener.addTween(blur, {blurX:0, time:1, transition:"easeOut", onUpdate:setFilter, onComplete:clearFilter});