ぬえさぶろうのAnimate放送部

解説

コンテンツのつくりかた

1. 外部ビットマップ画像の読み込み
2. 画像のピクセル情報の取得
3. 各ピクセルに対応するシェイプの作成
4. トゥイーンの適用

fla

ActionScript設定

　
• 　
• 

icongallery
var icon_mc:Array = new Array();
var count:uint = 0;
function iconGenerate(path:String):void {
	//インスタンス作成
	icon_mc[count] = new BitmapToShapes(path);
	//アイコン表示位置（左上）
	icon_mc[count].x = 115;
	icon_mc[count].y = 40;
	//停止時間
	icon_mc[count].stopTime = 2500;
	//パーツ同士の間隔
	icon_mc[count].spanX = 3;
	icon_mc[count].spanY = 3;
	//パーツのサイズ
	icon_mc[count].unitWidth = 25;
	icon_mc[count].unitHeight = 25;
	//イベントリスナーを設定
	icon_mc[count].addEventListener("finish", onFinish);
	icon_mc[count].addEventListener("error", onFinish);
	//表示リストに追加
	stage.addChild(icon_mc[count]);
}

function onFinish(event:Event):void {
	//イベントリスナー削除
	event.target.removeEventListener("finish", onFinish);
	event.target.removeEventListener("error", onFinish);
	//インスタンスを削除
	stage.removeChild(icon_mc[count]);
	delete icon_mc[count];
	//カウントアップ
	if(event.type == "error"){
		count = 0;
	}else{
		count++;
	}
	//実行
	iconGenerate("./images/icon"+count+".png");
}

//初回実行
iconGenerate("./images/icon"+count+".png");

As

icongallery
package {

	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;
	import flash.net.URLRequest;
	import flash.utils.*;
	import fl.transitions.easing.*;
	import fl.transitions.*;

	public class BitmapToShapes extends MovieClip {

		//-------------------------------------------
		//実行側から操作可能なプロパティの初期設定
		//-------------------------------------------
		public var unitShape:String = "rect";
		public var stopTime:Number = 3000;
		public var delay:Number = 10;
		public var spanX:Number = 0;
		public var spanY:Number = 0;
		public var unitWidth:int = 1;
		public var unitHeight:int = 1;
		public var breakup:Boolean = true;

		//-------------------------------------------
		//コンストラクタ
		//-------------------------------------------
		public function BitmapToShapes(path:String):void {

			//実行側でaddChildされたときのイベントリスナーを設定
			if (!stage) {
				addEventListener(Event.ADDED, start);
			}

			//開始処理
			function start(event:Event):void {
				//イベントリスナーを削除
				removeEventListener(Event.ADDED, start);
				//メイン処理を開始
				var url:URLRequest = new URLRequest(path);
				imageLoader(url);
			}
		}

		//-------------------------------------------
		//メイン処理
		//-------------------------------------------
		private function imageLoader(url:URLRequest):void {

			//パラメーター用配列生成
			var unitParam:Array = new Array();

			//縦横ピクセル数、ピクセル総数用変数定義
			var xNum:uint;
			var yNum:uint;
			var totalNum:uint;

			//Tween終了をカウントする変数
			var tweenEnd:uint = 0;

			//ローダーを生成して画像の読み込みを開始
			var loader_obj:Loader = new Loader();
			loader_obj.load(url);

			//-------------------------------------------
			//ローダー完了後初期化時の処理
			//-------------------------------------------
			loader_obj.contentLoaderInfo.addEventListener(Event.INIT, loaderInit);
			function loaderInit(event:Event):void {

				//縦横のピクセル数を取得
				xNum = event.target.width;
				yNum = event.target.height;

				//ピクセルの総数
				totalNum = xNum * yNum;

				//アイコン全体の縦横幅を計算
				var totalWidth:Number = xNum * (unitWidth + spanX) - spanX;
				var totalHeight:Number = yNum * (unitHeight + spanY) - spanY;

				//ステージ中心のローカル座標を取得
				var stageCenter:Point = globalToLocal(new Point(stage.stageWidth / 2, stage.stageHeight / 2));

				//拡散時配置の半径を計算
				var radius:Number = Point.distance(new Point(stage.stageWidth / 2, stage.stageHeight / 2), new Point(-unitWidth, -unitHeight));

				//BitmapDataを作成し、読み込んだ画像を書き込む
				var bmp_data:BitmapData = new BitmapData(xNum, yNum, true, 0x00000000);
				var rect:Rectangle = new Rectangle(0, 0, xNum, yNum);
				bmp_data.draw(loader_obj, null, null, BlendMode.NORMAL, rect, true);

				//色情報を配列に格納
				var pixelData:ByteArray = bmp_data.getPixels(rect);

				//ビットマップデータを解放
				bmp_data.dispose();

				//ピクセルの回数分繰り返しを実行
				for (var i:int = 0; i < totalNum; i++) {

					//パラメーター用オブジェクト生成
					unitParam[i] = new Object();

					//透明度と色を取得
					pixelData.position = i * 4;
					unitParam[i].alpha = pixelData.readUnsignedByte()/255;
					var colorArray:Array = new Array();
					for (var j:int = 1; j < 4; j++) {
						pixelData.position = i * 4 + j;
						colorArray[j-1] = pixelData.readUnsignedByte();
					}
					//配列から色をビットシフトして格納
					unitParam[i].fillColor = colorArray[0] << 16 | colorArray[1] << 8 | colorArray[2];

					//拡散時、集結時の座標を設定
					unitParam[i].firstPoint = new Point(Math.sin((360 / totalNum * i) * Math.PI / 180) * radius + stageCenter.x , Math.cos((360 / totalNum * i) * Math.PI / 180) * radius + stageCenter.y);
					unitParam[i].secondPoint = new Point((i % xNum * unitWidth) + (i % xNum * spanX), (Math.floor(i / xNum) * unitHeight) + (Math.floor(i / xNum) * spanY));

					//シェイプを描画
					unitParam[i].shape = new Shape();
					unitParam[i].shape.graphics.beginFill(unitParam[i].fillColor, unitParam[i].alpha);
					switch (unitShape) {
						case "ellipse" :
							unitParam[i].shape.graphics.drawEllipse(0, 0, unitWidth, unitHeight);
							break;
						case "rect" :
							unitParam[i].shape.graphics.drawRect(0, 0, unitWidth, unitHeight);
							break;
						default :
							unitParam[i].shape.graphics.drawEllipse(0, 0, unitWidth, unitHeight);
							break;
					}
					
					//動作開始
					setTimeout(unitTween, Math.random() * totalNum * delay, i);
				}
			}

			//-------------------------------------------
			//ローダーIOエラー時の処理
			//-------------------------------------------
			loader_obj.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loaderIOError);
			function loaderIOError(event:IOErrorEvent):void {
				dispatchEvent(new Event("error"));
			}

			//-------------------------------------------
			//ピクセルの動きを設定
			//-------------------------------------------
			function unitTween(i:int):void {

				//シェイプのスピードを設定（移動にかかる秒数）
				var speed:Number = 1;

				//X、Y座標にTweenを設定
				unitParam[i].tweenX = new Tween(unitParam[i].shape, "x", Strong.easeOut, unitParam[i].firstPoint.x, unitParam[i].secondPoint.x, speed, true);
				unitParam[i].tweenY = new Tween(unitParam[i].shape, "y", Strong.easeOut, unitParam[i].firstPoint.y, unitParam[i].secondPoint.y, speed, true);
				unitParam[i].tweenX.addEventListener(TweenEvent.MOTION_FINISH, convergeFinish);
				unitParam[i].tweenY.addEventListener(TweenEvent.MOTION_FINISH, convergeFinish);

				//シェイプを表示リストに追加
				addChild(unitParam[i].shape);
			}

			//-------------------------------------------
			//集結アクション終了時の処理
			//-------------------------------------------
			function convergeFinish(event:TweenEvent):void {
				event.target.removeEventListener(TweenEvent.MOTION_FINISH, convergeFinish);
				if (breakup) {
					event.target.addEventListener(TweenEvent.MOTION_FINISH, breakupFinish);
					event.target.func = Strong.easeIn;
					setTimeout(function(){event.target.yoyo();}, stopTime + totalNum * delay);
				} else {
					tweenEnd++;
					if (tweenEnd >= totalNum * 2) {
						tweenEnd = 0;
						dispatchEvent(new Event("finish"));
					}
				}
			}

			//拡散アクション終了時の処理
			function breakupFinish(event:TweenEvent):void {
				event.target.removeEventListener(TweenEvent.MOTION_FINISH, breakupFinish);
				tweenEnd++;
				if (tweenEnd >= totalNum * 2) {
					tweenEnd = 0;
					for (var i:Number = 0; i < unitParam.length; i++) {
						removeChild(unitParam[i].shape);
					}
					unitParam.splice(0, unitParam.length-1);
					dispatchEvent(new Event("finish"));
				}
			}
		}
	}
}

検証動画

• icongalleryフォルダのダウンロード