Pixel by pixel

i’m trying to get an effect by which an object (eg. the letter “A”) is simulated to be drawn/rendered pixel by pixel, or something of a mosaic effect.

the only method i can think of is to arrange squares to fit my object shape and then load them one by one using actionscript, but due to the size of my squares the image turns out not very precise. (in other words, ugly)

i could ofcourse lower down the size of each square, but that’s going to be very tedious and i dont really have that kind of time…

anyone got a solution to my problem? :frowning:
is there any specific code i could use? (newbie at actionscript here, dont know more than just the basics)

thanks in advance

One solution could be that you load in an xml document that has each pixel for each letter defined. then you could load in the xml document and duplicate a small square movie clip for each letter for each location. That’d take the tediousness out of each letter, however you make it tedious to code hehe =) thats one solution i thought of right now.

Another solution would have to involve somehow determine thru AI what a letter should be and duplicate squares in relative to each square =)

Bottom line, none of these solutions are really easy, you’ll be doing some work either way =)

http://www.kirupa.com/developer/mx/fadegrid.htm :beam:

yeah voetsjoeba’s way is cool and easy

whoa hey! thanks a lot. i did go through some of the actionscript tutorials, but i had skipped this one because i thought it refered to gridlines:sleep:

that did the trick. however, I’m now trying to make the grids appear randomly, but towards the end the script keeps calling numbers that were called before (i’m using random()) and it takes long to fill up those missing grids.

how can i prevent this (calling previously called numbers) from happening?

hm i’ve sorta managed to solve that problem, but now the script would stop executing towards the end (leave a few grids still at 100 alpha).

here’s the fademc function part of the script which i edited.

[AS]function fadeMC(mcnr, speed) {
mcnr = random(368);
if (this[“box”+mcnr]._alpha == 100) {
this[“box”+mcnr].onEnterFrame = function() {
this._alpha -= speed;
if (this._alpha<=smoothness) {
this.onEnterFrame = null;
continueFade(this, speed);
fadeOut(mcnr, speed);
} else {
fadeOut (0, 5);
}
}
}
}[/AS]

i added the *if (this[“box”+mcnr]._alpha == 100) { * statement to ensure that the grid called would be one that is still yet to be faded out.

what am i missing? thanks a lot for the help.

*note: random(368) is used because my image is 160x230 and my grids are 10x10

Well, I have created a random fading version of this effect, but there were some problems with it. For some reason I don’t know, Flash gives a 256 levels of recursion error at random times.

oic.
i noticed that when i lowered the smoothness to about 65 or below my problem would be solved.
anyone got a better solution?

*Originally posted by Voetsjoeba *
**Well, I have created a random fading version of this effect, but there were some problems with it. For some reason I don’t know, Flash gives a 256 levels of recursion error at random times. **
Voets, try something like this:

//array to store the number of the movieclips
mcs_array = [];
//prototype to randomize an array
Array.prototype.randomize = function() {
	return this.sort(function (a, b) {
		return (Math.floor(Math.random()*2) == 0) ? 1 : -1;
	});
};
//Declare variables
xspacing = box._width;
yspacing = box._height;
depth = 0;
box._visible = 0;
smoothness = 90;
//Calculate positions and values
amH = Math.ceil(image._width/box._width);
amV = Math.ceil(image._height/box._height);
border._height = image._height+1;
border._width = image._width+1;
border._x = image._x-0.5;
border._y = image._y-0.5;
//Create grid
for (i=0; i<amH; i++) {
	for (var k = 0; k<amV; k++) {
		box.duplicateMovieClip("box"+depth, depth);
		cur = this["box"+depth];
		cur._x = image._x+(xspacing*i);
		cur._y = image._y+(yspacing*k);
		mcs_array.push(depth);
		depth++;
	}
	mcs_array.randomize();//randomize array
}
function fadeOut(startboxnr, speed) {
	fadeMC(startboxnr, speed);
}
function fadeMC(mcnr, speed) {
	this["box"+mcnr].onEnterFrame = function() {
		this._alpha -= speed;
		if (this._alpha<=smoothness) {
			delete this.onEnterFrame;
			continueFade(this, speed);
			fadeOut(mcs_array.pop(), speed);//fade out the last element from the array
		}
	};
}
function continueFade(mc, speed) {
	mc.onEnterFrame = function() {
		this._alpha -= speed;
		if (this._alpha<=0) {
			delete this.onEnterFrame;
		}
	};
}
fadeOut(mcs_array.pop(), 5);//start fading the last element fof the array

Nice solution, claudio :wink:

Thanks :slight_smile:

whoa, thanks a lot!

welcome :wink: