ActionScriptでイメージのスライス。

2010.03.01 / Labs

ActionScriptで読み込んだ一枚の画像を、グリッド状にスライスする方法です。
サンプルはこちら

package {
	
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.PixelSnapping;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.net.URLRequest;	
	import caurina.transitions.Tweener;
	import caurina.transitions.properties.DisplayShortcuts;  
	DisplayShortcuts.init();  
	
	[SWF(width="800", height="600", frameRate="30", backgroundColor="0xffffff")]

	public class Main extends Sprite {
		
		public function Main() {
			
			//スライス元のイメージを読み込み
			var loader:Loader = new Loader();
			var info:LoaderInfo = loader.contentLoaderInfo;
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
			loader.load(new URLRequest("image.jpg"));
			
			//読み込みが完了したとき
			function onLoaded(event:Event):void {
				var bmd_base:BitmapData = new BitmapData(info.width, info.height, true);
				var param:Object = new Object();
				bmd_base.draw(loader);
				
				//X軸・Y軸の分割数と、ピースの横幅・縦幅
				param.x = 8;
				param.y = 6;
				param.w = 100;
				param.h = 100;
				
				//Y軸のループ
				for (var i:uint = 0; i < param.y; i++) {
					
					//X軸のループ
					for (var j:uint = 0; j < param.x; j++) {
						var place:Sprite = new Sprite();
						var rect:Rectangle = new Rectangle(param.w*j, param.h*i, param.w, param.h);
						var bmd:BitmapData = new BitmapData(param.w, param.h, true);
						var bm:Bitmap = new Bitmap();
						
						//元のイメージから切り抜き
						bmd.copyPixels(bmd_base, rect, new Point());
						bm.bitmapData = bmd;
						bm.pixelSnapping = PixelSnapping.NEVER;
						bm.smoothing = true;
						
						//ピースの原点を左上から中心に移動
						bm.x = -param.w/2;
						bm.y = -param.h/2;
						place.x = param.w*j+param.w/2;
						place.y = param.h*i+param.h/2;
						
						place.addChild(bm);
						stage.addChild(place);
						
						//透明度、スケールを、それぞれ0から100％にアニメーション
						Tweener.addTween(place, {alpha:0, _scale:0});
						Tweener.addTween(place, {delay:((param.y*i)+j)*0.1, time:0.5, alpha:1, _scale:1});
					}
				}
			}
		}
	}
}

package {

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.display.Loader;

import flash.display.LoaderInfo;

import flash.display.PixelSnapping;

import flash.display.Sprite;

import flash.events.Event;

import flash.geom.Point;

import flash.geom.Rectangle;

import flash.net.URLRequest;

import caurina.transitions.Tweener;

import caurina.transitions.properties.DisplayShortcuts;

DisplayShortcuts.init();

[SWF(width="800", height="600", frameRate="30", backgroundColor="0xffffff")]

public class Main extends Sprite {

public function Main() {

//スライス元のイメージを読み込み

var loader:Loader = new Loader();

var info:LoaderInfo = loader.contentLoaderInfo;

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);

loader.load(new URLRequest("image.jpg"));

//読み込みが完了したとき

function onLoaded(event:Event):void {

var bmd_base:BitmapData = new BitmapData(info.width, info.height, true);

var param:Object = new Object();

bmd_base.draw(loader);

//X軸・Y軸の分割数と、ピースの横幅・縦幅

param.x = 8;

param.y = 6;

param.w = 100;

param.h = 100;

//Y軸のループ

for (var i:uint = 0; i < param.y; i++) {

//X軸のループ

for (var j:uint = 0; j < param.x; j++) {

var place:Sprite = new Sprite();

var rect:Rectangle = new Rectangle(param.w*j, param.h*i, param.w, param.h);

var bmd:BitmapData = new BitmapData(param.w, param.h, true);

var bm:Bitmap = new Bitmap();

//元のイメージから切り抜き

bmd.copyPixels(bmd_base, rect, new Point());

bm.bitmapData = bmd;

bm.pixelSnapping = PixelSnapping.NEVER;

bm.smoothing = true;

//ピースの原点を左上から中心に移動

bm.x = -param.w/2;

bm.y = -param.h/2;

place.x = param.w*j+param.w/2;

place.y = param.h*i+param.h/2;

place.addChild(bm);

stage.addChild(place);

//透明度、スケールを、それぞれ0から100％にアニメーション

Tweener.addTween(place, {alpha:0, _scale:0});

Tweener.addTween(place, {delay:((param.y*i)+j)*0.1, time:0.5, alpha:1, _scale:1});

}

photo by : chantrybee