ActionScript 3.0: the Mosaic Class, different tests
randomly surfing I stumbled upon this Mosaic.as class written by Julian Kussman.
in Julians own words, this class “allows you to create a pixellated copy of any display object”.
cool.
so I had just had to play around with it.
here’s what I came up with:
the simplest version is simply a question of adding a DisplayObject to stage, and then pixelating it using the class:
check out the pixelated picture here
pixelation can be modified using the .pixelSize parameter, here’s a version with bigger pixels:
check out the even more pixelated picture here
using a Timer along with the class, the pixelation can be done over time:
check out pixelation over time here
not sure how to use a Timer?
then check out these earlier posts on using Timers.
how to use a Timer, part 1
how to use a Timer, part 2
back to the Mosaic Class, when using a Timer de-pixelation can be achieved the same way too:
check out de-pixelation over time here
Tweening the alpha of a pixelated picture on top of a normal picture would look like this:
using a normal picture and a pixelated picture together
as this Class works on any displayObject, you can load your picture dynamically using a Loader, and just pixelate the Loader.
nice!
so I decided to load a large picture, slice it in 25 parts and place it on stage.
on top of each part I put the pixelated version of the picture, and added some interaction, so that every part could be revealed if the pixelated version was “wiped” away.
check out the 25-part pixelated, interactive picture here
the entire code for this last example:
import caurina.transitions.Tweener;
var _placeringX:Number = 0;
var _placeringY:Number = 0;
var _myDelay:Number = 0;
var _bitmap:BitmapData = new BitmapData(1000, 750, true, 0);
var matrix:Matrix = new Matrix();
var rectDrawing:Sprite = new Sprite();
var _loader:Loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, picLoaded);
_loader.load(new URLRequest("1000x750.jpg"));
function picLoaded(e:Event):void {
_bitmap.draw(_loader, new Matrix());
var i:Number = 0;
while (i < 25) {
var copy:BitmapData = new BitmapData(200, 150, true, 0);
var rect:Rectangle = new Rectangle(_placeringX, _placeringY, 200, 150);
var pt:Point = new Point(0, 0);
copy.copyPixels(_bitmap, rect, pt);
var bm2:Bitmap = new Bitmap(copy);
bm2.x = _placeringX;
bm2.y = _placeringY;
_myDelay = _myDelay + 0.1;
addChild(bm2);
var myMoz:Mosaic = new Mosaic(bm2);
myMoz.x = _placeringX;
myMoz.y = _placeringY;
var _pixelSize = 16;
myMoz.addEventListener(MouseEvent.MOUSE_OVER, fadeMozOut);
myMoz.addEventListener(MouseEvent.MOUSE_OUT, fadeMozIn);
addChild(myMoz);
myMoz.pixelSize = _pixelSize;
myMoz.render();
_placeringX = _placeringX + 200;
i++;
if (i == 5 || i == 10 || i == 15 || i == 20 || i == 25 ) {
_placeringX = 0;
_placeringY = 150 * (i / 5);
}
}
}
function fadeMozOut(e:MouseEvent):void {
Tweener.addTween(e.target, {alpha:0, time:0.8});
}
function fadeMozIn(e:MouseEvent):void {
Tweener.addTween(e.target, {alpha:1, time:0.8, delay:6});
}
hope this was useful, comments or other examples are very welcome!
