ActionScript3で逆マスク
マスクの逆ってどうやるの?っていう事について。
これは青い画像に対して丸いSpriteをマスクとして登録しています。
よくある話ですね。
じゃぁ、逆に丸い部分以外の箇所を見えるようにはするにはどうしたらいいのか??
って事で、↓こうなります。
青い画像が丸く切り取られて、裏に表示されているHTMLが見えますね。
以下、スクリプト。
Root.as
package { import flash.display.Sprite; import flash.display.StageAlign; public class Root extends Sprite { public function Root():void { stage.scaleMode = "noScale"; stage.align = StageAlign.TOP_LEFT; addChild(new Wall()); } } }
Wall.as
package { import flash.display.Sprite; import flash.display.Loader; import flash.display.BlendMode; import flash.events.Event; import flash.net.URLRequest; import caurina.transitions.Tweener; import caurina.transitions.properties.FilterShortcuts; public class Wall extends Sprite { public function Wall():void { FilterShortcuts.init(); blendMode = BlendMode.LAYER; var loader:Loader = new Loader(); loader.load(new URLRequest("Blue.jpg")); addChild(loader); var erase:Erase = new Erase(); erase.addEventListener(Event.ENTER_FRAME, enterFrameHandler) addChild(erase); } private function enterFrameHandler(e:Event):void { Tweener.addTween( e.currentTarget, { x : root.mouseX, y : root.mouseY, time : 1, transition : "easeOutQuart" } ); } } }
Erase.as
package { import flash.display.Sprite; import flash.display.BlendMode; public class Erase extends Sprite { public function Erase():void { blendMode = BlendMode.ERASE; graphics.beginFill(0xFFFFFF); graphics.drawCircle(0, 0, 100); graphics.endFill(); } } }
この中で重要なのは2点のみ。
1.青い画像にあたるWallクラスのプロパティ「blendMode」に「BlendMode.LAYER」をセット
2.丸いくり抜きにあたるEraseクラスのプロパティ「blendMode」に「BlendMode.ERASE」をセット
これをより汎用的に言い換える。
1.くり抜かれる対象となるSprite(パン生地を想像しましょう。)の「blendMode」に「BlendMode.LAYER」をセット
2.くり抜くためのSprite(パン生地をくり抜くための型を想像しましょう)の「blendMode」に「BlendMode.ERASE」をセット
これで逆マスクの完成!!
簡単、簡単。