アレを目コピでそれっぽく

dynamic motion demo
@author naoto koshikawa

forked:2
favorite:3
lines:136
license : All rights reserved
modified : 2009-02-19 18:09:20

Embed: Tweet

package
{
	import caurina.transitions.Tweener;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.GradientType;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.filters.ColorMatrixFilter;
	import flash.geom.ColorTransform;
	import flash.geom.Matrix;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	
	[SWF(width = "465", height = "465", backgroundColor = "0x000000", frameRate = "24")]
	/**
	 * dynamic motion demo
	 * @author naoto koshikawa
	 */
	public class Demo1 extends Sprite
	{
		/** 背景を表す */
		private var _background:Shape;
		
		/** 背景の色変更用ColorTransform */
		private var _bgColorTransform:ColorTransform;
		
		/** 背景変更のモード 0:redOffsetを増やす, 1:readOffsetを減らす */
		private var _colorTransformMode:uint;
		
		/** 泡を格納する */
		private var _bubbles:Array = []; // Arrayは初期値がnullなので初期化します
		
		
		/**
		 * コンストラクタ
		 */
		public function Demo1() 
		{
			drawBackground();
			drawImage();
			drawDot();
			drawCircles();
			startCircleMotion();
			_bgColorTransform = new ColorTransform();
		}
		
		/**
		 * 背景を描写します
		 */
		private function drawBackground():void
		{
			// グラデーション用のMatrixを作成します
			var matrix:Matrix = new Matrix();
			matrix.createGradientBox(stage.stageWidth, stage.stageHeight, Math.PI * 2);
			
			// グラデーション用のShapeオブジェクトを作成します
			_background = new Shape();
			
			// Shapeオブジェクトへグラデーションを描写します
			_background.graphics.beginGradientFill(
					GradientType.RADIAL,//GradientType.LINEAR, // グラデーションのタイプ
					[0xE7FDCE, 0xE7FDCE, 0xB9F977], // カラー
					[1.0, 1.0, 1.0], // アルファ
					[0, 100, 255], // 各色の比率
					matrix
			);
			_background.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
			
			// 背景を描写したスプライトをディスプレイリストへ追加します
			addChild(_background);
		}
		
		/**
		 * 画像を読み込みます
		 */
		private function drawImage():void
		{
			// 外部画像を読み込むLoaderオブジェクトを作成します
			var loader:Loader = new Loader();
			
			// 読み込み後のイベントをハンドリングするためリスナー登録をします
			loader.contentLoaderInfo.addEventListener(Event.INIT, initEventHandler);
			
			// 外部画像を読み込みます
			loader.load(new URLRequest("http://farm4.static.flickr.com/3304/3262584568_528e7b6d30.jpg"), new LoaderContext(true));
			loader.visible = false;
			
			// 外部画像をロードするLoaderオブジェクトをディスプレイリストへ追加します
			addChild(loader);
		}
		
		/**
		 * ドットを描写します
		 */
		private function drawDot():void
		{
			// ドットのためのビットマップデータを作成します
			// ここでは2 x 2の透明マスに対して左上の1ピクセルに薄い黒を描写します
			var bitmapData:BitmapData = new BitmapData(2, 2, true, 0x00000000);
			bitmapData.setPixel32(0, 0, 0x33000000);
		
			// ビットマップデータ用のShapeを作成します
			var dot:Shape = new Shape();
			
			// Shapeオブジェクトへ先のビットマップを塗りとして登録します
			dot.graphics.beginBitmapFill(bitmapData);
			
			// Shapeオブジェクトへ四角形を描写します
			dot.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
			
			// ドットを描写したスプライトをディスプレイリストへ追加します
			addChild(dot);
		}
		
		/**
		 * 10個の泡を描写します
		 */
		private function drawCircles():void
		{
			// 泡のためのビットマップデータを作成します
			// ここでは2 x 2の透明マスに対して左上の1ピクセルと右下の1ピクセルに薄い白を描写します
			var bitmapData:BitmapData = new BitmapData(2, 2, true, 0x00000000);
			bitmapData.setPixel32(0, 0, 0x99FFFFFF);
			bitmapData.setPixel32(1, 1, 0x99FFFFFF);
			
			for (var i:uint = 0; i < 10; i++)
			{
				// ビットマップデータ用のShapeを作成します
				var bubble:Shape = new Shape();
				
				// Shapeオブジェクトへ先のビットマップを塗りとして登録します
				bubble.graphics.beginBitmapFill(bitmapData);
				
				// Shapeオブジェクトへ円を描写します
				bubble.graphics.drawCircle(0, 0, 5 + Math.random() * 10);
				initCirclesPosition(bubble);
				_bubbles.push(addChild(bubble));
			}
		}
		
		/**
		 * 泡を並べます
		 */
		private function initCirclesPosition(bubble:Shape):void
		{
			bubble.x = Math.random() * stage.stageWidth;
			bubble.y = Math.random() * stage.stageHeight + stage.stageHeight + bubble.height;
		}
		
		/**
		 * 泡のモーションを開始します
		 */
		private function startCircleMotion():void
		{
			addEventListener(Event.ENTER_FRAME, enterFrameEventHandler);
		}
		
		/**
		 * 各泡のy座標を減らすことで泡を上に移動します
		 */
		private function changeCirclePosition():void
		{
			for (var i:uint = 0; i < _bubbles.length; i++)
			{
				_bubbles[i].y -= 50 / _bubbles[i].height;
				
				// 泡のy座標は円の中心なのでその半分(半径)よりも小さい場合
				if (_bubbles[i].y <= -_bubbles[i].height) 
				{
					// 画面外へ出ているので位置を初期化する
					initCirclesPosition(_bubbles[i]);
				}
			}
		}
		
		/**
		 * 現在の色変換オブジェクトの色味に応じて背景の色を変更します
		 * @param	event
		 */
		private function changeBackground():void
		{
			if (_colorTransformMode == 0)
			{
				_bgColorTransform.redOffset += 0.5;
			}
			else if (_colorTransformMode == 1)
			{
				_bgColorTransform.redOffset -= 0.5;
			}
			
			if (_bgColorTransform.redOffset <= -255)
			{
				// 赤味が下限に達したら、赤味を増やすモードに変更します
				_colorTransformMode = 0;
			}
			else if (255 <= _bgColorTransform.redOffset) 
			{
				// 赤味が上限に達したら、赤味を減らすモードに変更します
				_colorTransformMode = 1;
			}
			_background.transform.colorTransform = _bgColorTransform;
			
		}
		
		// _____________________________________________________ ハンドラ
		/**
		 * drawImage実行後にディスパッチされるEvent.ENTER_FRAMEイベントのハンドラ
		 * @param	event
		 */
		private function initEventHandler(event:Event):void
		{
			var loaderInfo:LoaderInfo = event.target as LoaderInfo;
			var loader:Loader = loaderInfo.loader;
			loaderInfo.removeEventListener(Event.INIT, initEventHandler);
			
			// Loaderオブジェクトの位置を調整します
			// loaderのx, y 座標はloaderの左上となります
			// よってステージの中心に配置する際はloader自身の半分のサイズをマイナスします
			loader.x = stage.stageWidth / 2 - loader.width / 2;
			loader.y = stage.stageHeight / 2 - loader.height / 2;
			loader.alpha = 0.1;
			
			// 彩度を下げるフィルターを適用します。パラメータの意味は省略
			loader.filters =[new ColorMatrixFilter([0.3,0.6,0.08,0,0,0.3,0.6,0.08,0,0,0.3,0.6,0.08,0,0,0,0,0,1,0])]; 
			loader.visible = true;
		}
		
		/**
		 * Event.ENTER_FRAMEがディスパッチされた際に実行されるハンドラ
		 */
		private function enterFrameEventHandler(event:Event):void
		{
			changeCirclePosition();
			changeBackground();
		}
	}
}

Code Fullscreen

Preview Fullscreen