FLASHで台形！！

FLASH上でDisplayObjectを台形などに変形させるには、ちょっと苦労するよう。
“FLASH 台形”で検索すると山ほど記事がヒットし、その実現方法もいくつかあるらしい。
その中で、座標指定して変形できるSandyのDistortImageクラスを試してみた。
が、調べてみると、このDistortImageクラスはAS2版にしかないらしく、AS3版にはないことが判明。
どうしようかと、別の方法を模索していると、DistortImageをAS3版に移植した方を発見！

http://www.rubenswieringa.com/blog/distortimage

早速試してみたところ、うまくいった！

[swf]/blog/wp-content/uploads/2009/06/transform.swf, 550, 400[/swf]

今回、DistortImageクラスで使用しているのは、以下のふたつ。

DistortImage()：コンストラクタ
public function DistortImage(w:Number, h:Number, hseg:uint = 2, vseg:uint = 2)

パラメータ

• w:Number ― 処理するイメージの横サイズ
• h:Number ― 処理するイメージの縦サイズ
• hseg:uint (初期値 = 2) ― 縦方向の精度
• vseg:uint (初期値 = 2) ― 横方向の精度

setTransform()：メソッド
public function setTransform(graphics:Graphics, bmd:BitmapData, tl:Point, tr:Point, br:Point, bl:Point):void

パラメータ

• graphics:Graphics ― 処理したBitmapDataを描画するgraphicsオブジェクト
• bmd:BitmapData ― 変形させるBitmapData
• tl:Point ― 変形後の左上座標
• tr:Point ― 変形後の左右座標
• br:Point ― 変形後の右下座標
• bl:Point ― 変形後の左下座標

こいつは指定したPointインスタンスに従ってBitmapDataを変形してGraphicsに描画するメソッド。

コードはこんな感じ。エラー処理は割愛しています！

package 
{
    import flash.display.*;
    import flash.geom.*;
    import flash.net.*;
    import flash.events.*;
    import flash.text.*;
    import org.flashsandy.display.DistortImage;
    
    public class Main extends Sprite {
        private var _loader = new Loader();
        private var _container:Sprite = new Sprite();
        private var _pointTL:Point;
        private var _pointTR:Point;
        private var _pointBL:Point;
        private var _pointBR:Point;
        private var _controller:Controller;
            
        public function Main() {
            init();
        }
        
        private function init():void {
            var urlRequest:URLRequest = new URLRequest("mountain.jpg");
            _loader.load(urlRequest);
            var info:LoaderInfo = _loader.contentLoaderInfo;
            
            info.addEventListener(Event.COMPLETE, function():void {
                info.removeEventListener(Event.COMPLETE, arguments.callee);
                
                addChild(_container);
                
                _controller = new Controller();
                _controller.x = 0;
                _controller.y = 340;
                _controller.btn.buttonMode = true;
                addChild(_controller);
                
                _controller.tlX.text = String((stage.stageWidth - _loader.width) / 2);
                _controller.tlY.text = String((stage.stageHeight - _loader.height) / 2);
                _controller.trX.text = String((stage.stageWidth - _loader.width) / 2 + _loader.width);
                _controller.trY.text = String((stage.stageHeight - _loader.height) / 2);
                _controller.brX.text = String((stage.stageWidth - _loader.width) / 2 + _loader.width);
                _controller.brY.text = String((stage.stageHeight - _loader.height) / 2 + _loader.height);
                _controller.blX.text = String((stage.stageWidth - _loader.width) / 2);
                _controller.blY.text = String((stage.stageHeight - _loader.height) / 2 + _loader.height);
                switchImg(null);
                
                _controller.btn.addEventListener(MouseEvent.MOUSE_DOWN, switchImg);
            });
        }
        
        private function switchImg(e:*):void {
            _container.graphics.clear();
            
            _pointTL = new Point(Number(_controller.tlX.text), Number(_controller.tlY.text));
            _pointTR = new Point(Number(_controller.trX.text), Number(_controller.trY.text));
            _pointBL = new Point(Number(_controller.blX.text), Number(_controller.blY.text));
            _pointBR = new Point(Number(_controller.brX.text), Number(_controller.brY.text));
            
            var bmd:BitmapData = new BitmapData(_loader.width, _loader.height, true, 0x00FFFFFF);
            bmd.draw(_loader);

            var distortion:DistortImage = new DistortImage(_loader.width, _loader.height, 5, 5);
            distortion.setTransform(_container.graphics, bmd, _pointTL, _pointTR, _pointBR, _pointBL);
        }

    }
    
}