I was in the lab yesterday and saw my friend animating text and 3D and it did not seem very appetizing. I really regret having to do tedious time-consuming things by hand. If there is ever a procedural way to generate or simulate something I’m willing to try. So I put together this little example.

*UPDATE*

I was able to get the zDepth working by applying simple blur filters to the bitmaps of the BitmapMaterials inside papervision3D. I also added in an input text field so that users could change the text without having to recompile. I have some bigger ideas for this down the road, like sequencing camera tweens between each letter. And exploding a whole paragraph word for word. I had some trouble with making the letter interactive, but it’s always been a bit of a pain to get events working with papervision3D. But for now: I’m happy where it is. The code is extremely well documented and if you have any questions just shoot me a line at : ben.mcchesney@gmail.com

The update source code is located here

Click on my name to get the explode effect, and click again to revert to the whole word.

First I created a sample using just 2d MovieClips in Flash. Using the text of a dynamic textField on the stage it breaks down and seperates each text into it’s own textField with it’s own movieClip container. By the character’s inside a movieClip I was able to apply TweenLite’s blurFilter and fake depth of field, by checking the zDepth of the letter

But this solution wasn’t as appetizing. It lacked the interactivity that I was trying to emulate. I wanted to be able to explode the text and explore the wreckage. The Flash player 10 also has an issue with z-sorting. Since all of the 3d is just a raster illusion the zDepth is fake. If a child that has display index than another child with a lower z-depth the illusion is broken. So I could either write my own methods to parse through each array item and update the displayList constantly or I could go in a different direction.

. 

z-sort issue the letter "B" should be behind the letter "E" but Flash Player 10 doesn't sort it.

I was going to create a version of textExplode using an actionscript 3D api : Papervision3D (Papervision3D Site) . In papervision you have to create a small plane for each letter and draw a bitmap of it. You then take this bitmap and apply it to the geometry of the plane.

By creating a bitmapData object to draw the movieClip we can cast it as a BitmapMaterial and apply it to a plane.

I had been used to the old version of papervision3D which meant constructing a scene with viewports, cameras , renderers, and scenes. But in papervision 2.0 by simple extending the BasicView Class, all of these assets are extendable for your connivence. The result was a quickly developed, dynamic 3d text explode code set.

Another different technique I used was the use of Vectors. Vectors are a new data type in Flash Player 10 and are essentially arrays with of one and only one data type. This allows for strict data typing in for all array function increasing performance. It’s less noticeable in this example, but in a physics simulation where it’s stepping through each particle’s force application every frame. The increased limit of particles or general smoothness would be more obvious.
More information can be found on Mike Chambers Blog : here

The next steps are to apply depth of field by checking z-depth and being able to change the textField while the swf is running. I would also like to increase the interactivity by being able to focus and zoom to certain letter and really get the exploration feel. Another change that’s on the to-do list is a second stage breakup of the letters bitmaps into tiny triangles or squares for more fodder to explode.

I’ll keep posting as I get farther along and make it more and more extensible.