FLASHで台形!!

2009年6月18日 22:18

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

}

}

カテゴリー: programming タグ:

コメントはまだありません

No comments yet.

TrackBack URL

Leave a comment