FLASHで台形!!

2009年6月18日 22:18 action script — littlepad

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

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

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

This movie requires Flash Player 9

今回、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);
		}

	}
	
}

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

No comments yet.

TrackBack URL

Leave a comment

about

ハンドルネーム:littlepad
都内で WEB 制作(デザイン, html/css, Flash, MT, WordPress etc)をしているBOØWY研究家

category:

search:


archives:

GO TO PAGETOP