Using particles to fill dynamic content in 3D

Update: Some of you did not see the demo the way it's shown in the screen shot. This is because in my wisdom to get it up fast I embedded the font instead of loading it for run-time sharing. So if you did not have the font installed, you did not see the demo the way it's shown in the screen shot. But I fixed it and it should work now. Source is also updated with the fix.

To expand on my previous post, in a 3D space the possibility for manipulation is even greater. I whipped up an example using FIVe3D this time while playing around. The clock refreshes every 5 seconds to allow animation to complete. And by choosing a pixel font with no round edges it allows the text to display closer in looks to its original source and no longer pixelated.


Download the Source.

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

FlashSwitcher X (Mac Only)

If you upgraded to Firefox 3 you know that you can no longer use the Flash Switcher Plug-in. Here we have a neat little browser-independent widget for the Mac. It works well except installation is bit of a PITA. So far I have not been able to install Flash Player 8 and down because I can’t find one that’s for Intel-based Mac. I've already tried the Archived Flash Players on Adobe and had no luck (they are PowerPC-based). Let me know if you can find any previous Flash Player that works on Intel-based Mac. But it serves the purpose well for testing between FP9 or FP9 debug and FP10.

http://flashalisious.com/flashswitcher-x/

Update: The Flash Switcher Plug-in for Firefox has indeed been updated to support FF3. Thanks JohnO. It's still a great tool if you use FF and on a PC. But if you're on a Mac and don't want to be constrained by browser type the FlashSwitcher X is there for you to use.

More FIVe3D Fun

The ease of use has prompted me to throw together a couple of more demos. I must admit, I don't dig the low level details of complex math, matrix algorithm, 3D logic, or whatever you call it. On top of that, I'm a lazy coder. If it's easy to use and it works, it will tickle my fancy. Plain and simple. That's why I have much appreciation for the people behind those Flash APIs floating around (FIVe3D, PV3D, APE, Box2D, FOAM, etc) and making them free because they are the catalyst for the majority of Flash developers in creating cutting-edge experience.

Anyway, here is a couple of demos with one demonstrating the use of DynamicText3D and the other demonstrating a cube formation with images of my favorite robots as sides brought in as Bitmap3D. Very easy and useful. Images of my favorite robots come from Michael Bay himself on his blog. Make sure you have d/led the FIVe3D source files from five3d.mathieu-badimon.com/.



Source


Source

FIVe3D, so easy to use, even a caveman's cat can do it.

FIVe3D does not have camera or collada support; it lacks all the primitives such as Papervision or other 3D API have. But for your everyday Flash websites it will more than suffice. Wow factor? It's all about how you use the tool.

Don't believe me? Check out the demo I just threw together in minutes. Right-click to toggle full-screen.

Update: Just d/led Flash Player 10. Look at that frame rate!



Oh and of course, right-click here for the source. I did not include the FIVe3D classes here. You will need to download them at five3d.mathieu-badimon.com