Forked from:: y_tti's てらこ23で発表したものの説明２

読み込んだ画像を、matrixで歪ませながら拡大させる。

http://wonderfl.net/c/wJDq/
構造は、fork前と同じです。
_containerの中に、_canvas,_p0,_p1,_p2,_p3が入ってます。
ゆがんでいるイメージを描画しているのはｄｒａｗ()のなかのbeginBitmapFill()です。
歪ませるのにはＭatrixが必要です。そのMatrixは_getTransformMatrix（）で設定しています。
このMatrixの設定のために、_p0,_p1,_p2,_p3（fork前のインスタンス名は_cP0,_cP1,_cP2,_cP3）の位置情報を使用しています。
手軽に試す場合は、
１．bitmapImageStringArrayのイメージＵＲＩを差し替える。
２．TestImageの画像サイズ（縦横400）を適宜変更する。
３．Tweenerのプロパティをいじる
などしてくみてださい。

※連打するとTweenerがわやわやですが、これ以上複雑にするのをやめます。
調整する必要があれば、フラグを立ててがんばってください。

※画像が静止すると、下に１ピクセル余計な線ができます。
簡単な調整として、TestImageの高さを-1してます。

※policyfileの読み込み待ち用TIMERは不細工です。
もっとスマートな方法があれば教えてください

sinketu

forked:3
favorite:17
lines:187
license : MIT License
modified : 2010-06-16 12:24:28

Embed: Tweet

// forked from y_tti's てらこ23で発表したものの説明２
//http://wonderfl.net/c/wJDq/

/*
構造は、fork前と同じです。
_containerの中に、_canvas,_p0,_p1,_p2,_p3が入ってます。
ゆがんでいるイメージを描画しているのはｄｒａｗ()のなかのbeginBitmapFill()です。
歪ませるのにはＭatrixが必要です。そのMatrixは_getTransformMatrix（）で設定しています。
このMatrixの設定のために、_p0,_p1,_p2,_p3（fork前のインスタンス名は_cP0,_cP1,_cP2,_cP3）の位置情報を使用しています。
手軽に試す場合は、
１．bitmapImageStringArrayのイメージＵＲＩを差し替える。
２．TestImageの画像サイズ（縦横400）を適宜変更する。
３．Tweenerのプロパティをいじる
などしてくみてださい。

※連打するとTweenerがわやわやですが、これ以上複雑にするのをやめます。
調整する必要があれば、フラグを立ててがんばってください。

※画像が静止すると、下に１ピクセル余計な線ができます。
簡単な調整として、TestImageの高さを-1してます。

※policyfileの読み込み待ち用TIMERは不細工です。
もっとスマートな方法があれば教えてください
*/
package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.MovieClip;
	import flash.utils.Timer;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import  caurina.transitions.Tweener;
	import net.hires.debug.Stats;
	import flash.system.Security;
	import flash.events.TimerEvent;
	[SWF(width = "465", height = "465", frameRate = "30", backgroundColor = "0x000000")]
	public class Main extends MovieClip
	{
		private var _container:Sprite;
		private var _canvas:Sprite;
		private var _bmd:BitmapData;
		private var _stageW:Number = 465;
		private var _stageH:Number = 465;
		private var _p0:CirclePoint;
		private var _p1:CirclePoint;
		private var _p2:CirclePoint;
		private var _p3:CirclePoint;
		private var myBitmapMaker:BitmapMaker;
		private var _counter:uint = 0;
		private var miniBitmapSize:uint = 40;
		
		public function Main()
		{
			Security.loadPolicyFile("http://www.sinketu.com/wonderfl/crossdomain.xml");
			var lpTimer:Timer=new Timer(500,1);
			//policyfileの読み込み待ち用TIMER
			lpTimer.addEventListener(TimerEvent.TIMER,setBitmap);
			lpTimer.start();
		}
		public function setBitmap(e:TimerEvent):void{
			myBitmapMaker = new BitmapMaker(this);
		}
		public function init():void {
			_bmd = Bitmap(new TestImage()).bitmapData;
			_canvas = new Sprite();
			_container = new Sprite();
			_container.addChild(_canvas);
			addChild(_container);
			_container.x = (_stageW - _bmd.width)/2;
			_container.y = (_stageH - _bmd.height)/2;
			_p0 = new CirclePoint(0,0);
			_p1 = new CirclePoint(_bmd.width,0);
			_p2 = new CirclePoint(0,_bmd.height);
			_p3 = new CirclePoint(_bmd.width,_bmd.height);
			_container.addChild(_p0);
			_container.addChild(_p1);
			_container.addChild(_p2);
			_container.addChild(_p3);
			xClick(null);	
			_container.addEventListener(MouseEvent.CLICK, xClick);
			_container.buttonMode=true;
			addEventListener(Event.ENTER_FRAME, xEnterFrame);
		}
		
		private function xEnterFrame(e:Event):void 
		{
				_draw();
		}
		
		private function xClick(e:MouseEvent):void 
		{
			var sw:Number = stage.stageWidth / 2;
			var sh:Number = stage.stageHeight / 2;
			_container.visible = true;
			_bmd.draw(myBitmapMaker.bitmaapArray[_counter % myBitmapMaker.bitmaapArray.length]);			
			_p0.x = -miniBitmapSize+_bmd.width/2;
			_p1.x = miniBitmapSize+_bmd.width/2;
			_p2.x = -miniBitmapSize+_bmd.width/2;
			_p3.x = miniBitmapSize+_bmd.width/2;
			_p0.y = -miniBitmapSize+_bmd.height/2;
			_p1.y = -miniBitmapSize+_bmd.height/2;
			_p2.y = miniBitmapSize+_bmd.height/2;
			_p3.y = miniBitmapSize+_bmd.height/2;
			Tweener.addTween(_p0, { x:_p0.initPoint.x, y:_p0.initPoint.y, time:Math.floor(0.5*Math.random()*10)/10+0.3, transition:"easeOutBack",delay:0.1});
			Tweener.addTween(_p1, { x:_p1.initPoint.x, y: _p1.initPoint.y, time:Math.floor(0.5*Math.random()*10)/10+0.3, transition:"easeOutBack",delay:0.15});
			Tweener.addTween(_p2, { x:_p2.initPoint.x, y: _p2.initPoint.y, time:Math.floor(0.5*Math.random()*10)/10+0.3, transition:"easeOutBack" ,delay:0.2});
			Tweener.addTween(_p3, { x:_p3.initPoint.x, y: _p3.initPoint.y, time:Math.floor(0.5*Math.random()*10)/10+0.3, transition:"easeOutBack",delay:0.25} );
			_counter++;
		}
		
		private function _draw():void {	
			//初期状態のポイント取得
			var aP0:Point = _p0.initPoint;
			var aP1:Point = _p1.initPoint;
			var aP2:Point = _p2.initPoint;
			var aP3:Point = _p3.initPoint;
			//初期状態のポイントよりマトリックス取得
			var initMatrix1:Matrix = _getTransformMatrix( aP0 , aP1 , aP2 );
			var initMatrix2:Matrix = _getTransformMatrix( aP3 , aP2 , aP1 );
			
			//変更状態のポイント取得
			var bP0:Point = new Point(_p0.x , _p0.y );
			var bP1:Point = new Point(_p1.x , _p1.y );
			var bP2:Point = new Point(_p2.x , _p2.y );
			var bP3:Point = new Point(_p3.x , _p3.y );
			//変更状態のポイントよりマトリックス取得
			var editMatrix1:Matrix = _getTransformMatrix( bP0 , bP1 , bP2 );
			var editMatrix2:Matrix = _getTransformMatrix( bP3 , bP2 , bP1 );
			
			//初期状態と変更状態のマトリックスを合体
			var newMatrix1:Matrix = initMatrix1.clone();
			newMatrix1.concat(editMatrix1);
			var newMatrix2:Matrix = initMatrix2.clone();
			newMatrix2.concat(editMatrix2);
			
			//前のをすべて消去
			_canvas.graphics.clear();
			//マトリックスを適応
			//分割した１個目を描画
			_canvas.graphics.beginBitmapFill(_bmd , newMatrix1 );
			_canvas.graphics.moveTo(bP0.x , bP0.y );
			_canvas.graphics.lineTo(bP1.x , bP1.y );
			_canvas.graphics.lineTo(bP2.x , bP2.y );
			_canvas.graphics.endFill();
			
			//分割した２個目を描画
			_canvas.graphics.beginBitmapFill(_bmd , newMatrix2 );
			_canvas.graphics.moveTo(bP3.x , bP3.y );
			_canvas.graphics.lineTo(bP1.x , bP1.y );
			_canvas.graphics.lineTo(bP2.x , bP2.y );
			_canvas.graphics.endFill();
		}
		private function _getTransformMatrix($pt0:Point, $pt1:Point, $pt2:Point):Matrix
		{
			var w:Number = _bmd.width;
			var h:Number = _bmd.height;
			var mat:Matrix = new Matrix();
			mat.a = ($pt1.x - $pt0.x) / w;
			mat.b = ($pt1.y - $pt0.y) / w;
			mat.c = ($pt2.x - $pt0.x) / h;
			mat.d = ($pt2.y - $pt0.y) / h;
			mat.tx = $pt0.x;
			mat.ty = $pt0.y;
			return mat;
		}
	}
}

import flash.display.Loader;
import flash.display.MovieClip;
import flash.display.LoaderInfo;
import flash.display.Bitmap;
import flash.display.Shape;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLRequest;
import flash.geom.Point;
class CirclePoint extends Sprite {
	public var initPoint:Point;
	public function CirclePoint($x:Number , $y:Number) {
		this.x = $x;
		this.y = $y;
		this.initPoint = new Point( $x , $y );
	}
}
class TestImage extends Bitmap {
	private var _w:Number = 400;
	private var _h:Number = 400-1;
	public function TestImage():void {		
		var bmd:BitmapData = new BitmapData(_w, _h);
		this.bitmapData = bmd;
	}
}
class BitmapMaker
{
	private var info:LoaderInfo;
	public var bitmaapArray:Array = new Array();
	public static const bitmapImageStringArray:Array = ["http://www.sinketu.com/wonderfl/sample01.jpg","http://www.sinketu.com/wonderfl/sample02.jpg"];
	private var _counter:uint=0;
	private var myLoader:Loader;
	private var _mc:MovieClip;
	public function BitmapMaker(mc:MovieClip)
	{
		_mc = mc;
		_counter = 0;
		makeBitmap();
	}
	private function makeBitmap():void
	{
		myLoader = new Loader();
		myLoader.load(new URLRequest(bitmapImageStringArray[_counter]));
		info = myLoader.contentLoaderInfo;
		info.addEventListener(Event.COMPLETE, xImgLoaded);
	}
	private function xImgLoaded(e:Event):void 
	{
		bitmaapArray.push(myLoader);
		_counter++
		if (_counter >= bitmapImageStringArray.length) {
			_mc.init() ;
		}else {
			makeBitmap();
		}
	}
}

Code Fullscreen

Preview Fullscreen