flash pixel effect

pixel 效果教學，
也可以拿來當作馬賽克(mosaic)效果，

原圖用 10x10 的格子切割，
再用 getPixel 取出每個格子的代表色，
依序填入顏色方塊，就是最簡單的馬賽克效果。

*填入色塊時，用 fillRect 比用 copyPixels 快。

進階應用，馬賽克拼磚(拼圖)效果，將再下一篇做介紹。

本篇完整 code 如下：

	package
	{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
	public class Main extends Sprite
	{
	static public const PIXEL_SIZE:uint = 10;
	[Embed(source = "../assets/orig.jpg")]
	private var ImageClass:Class;
	private var img:Bitmap = new ImageClass();
	private var _myMosaic:Mosaic;
	public function Main():void
	{
	if (stage) init();
	else addEventListener(Event.ADDED_TO_STAGE, init);
	}
	private function init(e:Event = null):void
	{
	removeEventListener(Event.ADDED_TO_STAGE, init);
	// entry point
	// 10x10 馬賽克
	_myMosaic = new Mosaic(img, PIXEL_SIZE, true);
	addChild(_myMosaic);
	}
	}
	}

view raw Main.as hosted with ❤ by GitHub

	package
	{
	import flash.display.Sprite;
	import flash.display.Shape;
	import flash.display.DisplayObject;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.utils.getTimer;
	public class Mosaic extends Sprite
	{
	public var bmd:BitmapData;
	public var pixelSize:uint;
	public var totalTime:uint = 0;
	public var startRender:Boolean;
	private var _canvas:BitmapData;
	public function Mosaic(srcDispObj:DisplayObject, _pixelSize:uint = 0, _startRender:Boolean = true)
	{
	this.pixelSize = _pixelSize;
	this.startRender = _startRender;
	bmd = new BitmapData(srcDispObj.width, srcDispObj.height);
	bmd.draw(srcDispObj);
	if (pixelSize != 0 && startRender)
	{
	_canvas = new BitmapData(srcDispObj.width, srcDispObj.height, false, 0xFFFFFF);
	render();
	}
	}
	public function render():void
	{
	var startTime:uint = getTimer();
	var renderContainer:Sprite = new Sprite();
	var rec:Rectangle = new Rectangle(0, 0, pixelSize, pixelSize);
	var ySteps:uint = Math.round(bmd.height / pixelSize);
	var xSteps:uint = Math.round(bmd.width / pixelSize);
	for (var i:uint = 0; i <= ySteps; i++)
	{
	var colorY:uint;
	if (i == ySteps)
	{
	colorY = pixelSize * (i - 1);
	}
	else
	{
	colorY = pixelSize * (i);
	}
	for (var j:uint = 0; j <= xSteps; j++)
	{
	var colorX:uint;
	if (j == xSteps)
	{
	colorX = pixelSize * (j - 1);
	}
	else
	{
	colorX = pixelSize * (j);
	}
	// 取得顏色
	var color:uint = bmd.getPixel(colorX, colorY);
	rec.x = colorX
	rec.y = colorY
	// 填入顏色方塊
	//_canvas.copyPixels(bmd, rec, new Point(colorX, colorY));//slow
	_canvas.fillRect(rec, color);
	}
	}
	addChild(new Bitmap(_canvas));
	var rendTime:uint = getTimer() - startTime;
	totalTime += rendTime;
	trace("pixel size:", pixelSize, "pixel num:", ySteps * xSteps, "render time:", rendTime, "total time:", totalTime);
	}
	}
	}

view raw Mosaic.as hosted with ❤ by GitHub