アレを目コピでそれっぽく
dynamic motion demo
@author naoto koshikawa
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();
}
}
}