Thursday, August 14, 2008

Using particles to fill dynamic content

I have been trying to find ways to fill the strokes of dynamic text for my own manipulation. With AS2 it was only possible by hard-coding the positions of the strokes of each letter and number. That's cumbersome. But with AS3, we have getPixel(), a BitmapData method that returns the color value of any given pixel you point to. With this in mind, the approach follows:

1. Create a TextField and fill it with dynamic content as usual.
2. Set TextField visible to false. After all, our particles will spell out the words so we don't need to see the TextField.
3. Using getPixel() to determine where the text is. For example, if your background is white and your text is black, you check for where the text is black, get that pixel's position, and you know where to fill with a particle.
4. Create your particles based on the amount of pixels gotten from the Step 3, then lay them out and you're done.

Here's an example I call Clock displaying the time from your system. The result is not as anti-alias as I would like but the goal is achieved. Feel free to provide ideas for bettering this. =)


Download the Source

13 comments:

Will said...

This is great. Has almost endless possibilities. Would be nice to see lots of different transitions in and out.

Niall McCormack said...

Perhaps you need to detect 32bit hex numbers ( 0x00FFFFFF = whiite but transparent ) of each pixel on the bitmapData. You can then use this to set the alpha of each particle you create.

The Tlash Design Guy said...

This looks beatifull, one small comment just after the number becomes fully visible fade in an antialised number, and fade it our just before you take the numbers apart

Sushil kumar said...

Accent work, This is looking very beautiful transitions

calibra said...

Fine to torrent search!

Smitherz said...

Hey excellent, just what i needed to get my head around text particles.
The problem with antiliased particle text is you are only creating black particles.
You need to read what was there to create an exact replica of the colour.

change determinePixels() to:

var pixel:uint = bmd.getPixel(i, j);
if(pixel != 0xffffff) {
newPositions.push({x:i+_tf.x,y:j+_tf.y,color:pixel});
}

then in createParticles() do:

kid.graphics.beginFill(newPositions[i].color);

grandchamp_g said...

Cool effects it's very inspiring

Steve Tasovski said...

Hi mate,

Are you interested in posting a "give away" on your blog?
We have launched a beta version of the new flash components marketplace called FlashScope and we are willing to give away some credits to your blog readers.
In case that offer appeals to you please contact me back at steve.tasovski[at]gmail.com for details.

Regards,
Steve

Alex said...

Ничего особенного по-моему

Istanbul Urlaub said...

Nice effect play

Alex said...

Симпатично

JFL Media said...

Great!!!!!

http://www.jfl-media.com/flash/

Order prescription drugs said...

I really feel great to see some nice information exchange here, very informatics keep it up!!

http://www.internationalrxonline.com