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);
}
}
}