3D
FIVe3D TextCloud: AS3 Tutorial and Source
A few people have asked me to release the code to my FIVe3D Text Cloud example, so I’ve cleaned things up to the point where I wouldn’t be completely humiliated to release it into the wild. However, I thought I’d touch on a couple points and turn this post into something halfway between a tutorial and an exhibition.
If you just want the source code, you can download it at the bottom of the page. If you’d like the whole shebang, pray read on.
The (new and improved) example:
FIVe3D Basics
FIVe3D is ridiculously easy to set up. In this example, I used the following code to set up everything I needed:
// the Scene3D class is what contains and renders everything else // think of it as a 3D Stage class scene = new Scene3D(); scene.x = 375; scene.y = 200; addChild( scene ); // Sprite3D is, obviously, a 3D version of the standard Sprite class // it is an actual DisplayObject, so you can use normal positioning, filters, etc. on it container = new Sprite3D(); scene.addChild( container );
You’ll notice that the syntax is just like AS3 extended into the third dimension. You can nest Sprite3Ds just like Sprites. When you move or rotate the parent Sprite3D, the children will move and rotate with it. The reason I’ve created a container Sprite3D here is so I can rotate several children at the same time.
Now if I wanted to do this the easy way, I could just add my text in one big chunk with the DynamicText3D class that ships with FIVe3D. It works much like the AS3 TextField class, except that the fonts are actually ActionScript files (you’ll see what I mean when you crack open the FIVe3D source).
var txt:DynamicText3D = new DynamicText3D( HelveticaBold ); // HelveticaBold ships with FIVe3D txt.size = 30; txt.color = 0xD34328; txt.text = "Pixelwelders LLC" container.addChild( txt );
That’s it. The Scene3D class takes care of its own rendering, so you don’t have to trigger it yourself, Papervision-style. Even when a FIVe3D scene looks static, it is actually rendering at your current frame rate. Thus, this is enough code to render 3D text in FIVe3D. Add an ENTER_FRAME listener and increment the container.rotationX property every frame and you’ll see what I mean.
Moving On…
Now this is fine for your everyday run-of-the-mill 3D text, but not for the effect that I had in mind. If I had added my text this way, it would have behaved as a single block, each letter forever doomed to stay wedged firmly between its neighbors. No, I had bigger plans for this text.
For this effect, I created a class called MotifCollection3D. Not a very good name, but typography is not my strong suite and I wasn’t quite sure what else to call it. It’s an extension of the aforementioned FIVe3D Sprite3D class, and it contains one DynamicText3D instance for every letter of the word that it’s currently displaying. This is how you instantiate it:
var cloud:MotifCollection3D = new MotifCollection3D( "PIXELWELDERS LLC", HelveticaBold, 30, 0xD34328 ); container.addChild( cloud );
There’s nothing to it. You send the text, the font class (again, included with FIVe3D), the size, and the color. It creates and assembles all the DynamicText3D instances, and then you can treat it like any other Sprite3D. However, it also includes two methods: assemble(), and the thrillingly-named explode().
Calling either of these methods cycles through all the instances of DynamicText3D and tweens them each to a destination using TweenLite. The explode() method was easy: it just chooses a random destination and rotation for each letter. The assemble() function, on the other hand, was a bit trickier; it needs to know the exact width of every letter in order to place them next to each other.
Happily, that is one of the things that’s included with the FIVe3D typography classes. Each letter, number, and punctuation mark in HelveticaBold contains a __width property, accessible like so:
var letterWidth:Number = HelveticaBold.__widths[ "P" ]; // returns the width of the "P" glyph
That’s a start, but it returns the same width regardless of what size the font is being displayed at. After a little experimentation, I found that this code gives the correct glyph width no matter what size the font:
var letterWidth:Number = HelveticaBold.__widths[ "P" ] * ( size / 100 );
I think that pretty much covers anything novel that I may have done. There are additional comments in the code as well, and it’s only two classes anyway: it shouldn’t be too difficult to figure out anything not explicitly laid out here.
Download Source
Pixelwelders FIVe3D Text Cloud
NOTE: You’ll need to download TweenLite and FIVe3D from their respective sites to get this to run. But you probably already knew that.
Tags: Discussion
31 comments for “FIVe3D TextCloud: AS3 Tutorial and Source”
Post a comment
[…] #3And… source code is live! With a tutorial/walkthrough, even! Get it here: FIVe3D TextCloud: AS3 Tutorial and Source Tags: 3D, Actionscript, […]
FANTASTIC, thanks, you’re my man!
:O)
felisan
Anything for you, felisan. Hope it helps!
[…] it explains the basics of using Five3D with ActionScript3.0 and shows how very simple it is to use. THUMBS UP, this is good stuff :O) check out the tutorial from Zach Jordan on Five3D and ActionScript3.0 here: […]
nice work on the getting the proper widths of the chars!
Very cool and nice to see the source. Thanks.
Nice job
[…] FIVe3D TextCloud: AS3 Tutorial and Source saved by 5 others Lueda123 bookmarked on 05/24/08 | […]
Thanks for sharing your source
Excellent.
Beautiful! And it looks like you’re getting quite a nice rep.
@jonathan greene: Yeah, that was a little difficult, but I knew it had to be possible.
@Matt, Juan and Simplicity00: Thanks, and you’re welcome.
@Benjamin: Aw, shucks.
wow, is scene setup really that easy? I’m going to have to put down pv3d for a day or two and take a closer look.
Thanks for the example!!
[…] un nuage de tags réalisé à partir d’un tutoriel trouvé sur PixelWelders, et basé sur la classe AS3 […]
I saw the your flash action.it is good
I’m getting an error from flash complaining that it can’t find the five3d functions: type not found or not a compile time constant.
Using FlashDevelop and i set the path to the directory with the classes from Five3D.
Anyone able to help me out?
Nice example!
I’m getting the same error as Kevin does, I assume. It doesn’t seem to find a fl.motion.Color Class. I also tested the five3d v. 2.01 and there I get an error related to the DynamicText3D Class. Saying it only excepts zero arguments. So when defining no font (HelveticaBold in your pendant example) it works. That’s all a bit odd.
Nevertheless, love your examples, teach a lot. I’d love to see more experiments with filters applied, too.
Kevin,
In MotifCollection3D.as replace
new DynamicText3D(typography)
with
new DynamicText3D()
In FIVe3D_experiment2.as
replace all HelveticaBold with HelveticaMedium
really fantastic work, love it.
I figured out all the package-dot problems, the font-class-import problem, and the DynamicText3D() override listed above, and now it works and explodes gracefully…but only in Helvetica! I can’t figure out how to add other fonts.
Help! I’m addicted.
Too much action here. I eventually found the FIVe3D_make_typography_v2.0
files. Easy enough: put the .swf into your WindowSWF folder (hard to find on a Mac–couldn’t even find it with a Mac OS X search*), then open a new .fla, make a dynamic text box, and save the file.
Then in the Flash menu go to Windows>Other Panels and open the Make a New Typography file. Choose the font you want, click the “Generate” button, and in the fullness of time an .as file will be generated somewhere…not necessarily in same folder as your .fla. (I assume this method works the same in CS4, though I haven’t yet tried.)
(Aide-memoire for myself:)
- Now your new (Fontname).as file is your new Class file for typography. Put it with your other FIVe3D typography files within the typography package subfolder folder.
- Using the FIVe3D_experiment2.as (above) as a model, import the new typopgraphy .as and change the two lines of the text cloud to whatever you want to say. Make sure you change the class name and constructor function before you save the .as again.
*Although it is hidden from the search function, the WindowSWF folder is located in /Users/yourusernamehere/Library/Application Support/Adobe/Flash CS3/en/Configuration/WindowSWF. It’s a lot easier to find on Windows.
Hello, great work here.
But when I tried to compiled it myself I’m getting several errors in Sprite3D.as
Like 1024: Overriding a function that is not marked for override. public function get rotationZ():Number {
Or Warning: 1060: Migration issue: The method Color is no longer supported. The Color class has been removed. Use the flash.geom.ColorTransform class for equivalent functionality..
Any ideas how to get it work ???
hai am geting code yar eror
Hi, sorry, I haven’t had time to read through the article and comments thoroughly but couldn’t you have used textmetrics for the positions of the characters?
For the problem pointed by hsimeonov: compile for flash player 9
Hi, I am getting build error while building the source code you provided. Could you please provide the complete project or tell me where can I get the five3d libraries.
Regards.
zack, your the best!
smashing example
btw, i got same errors like hsimeonov i also was publishing from flashdevelop fp9.
everithing was fix when i published from the flash ide,
so hsimeonov heres your solution, (and include tweenlite…but u know that already)
again zack, great job!
Sorry to be very dim. I have downloaded the source file, and can see there is a .as file. I have included the ‘five3D’ and ‘gs’ files. But what do I do then? As there is no .fla file, I can’t work out how to progress from here, to actually be able to compile the .swf output. Any advice gratefully received. Thanks!
hi Jim.
no worries :O)
just create a new .fla, tell it to use FIVe3D_experiment2 as class, publish and enjoy the wonderful work of Zack Jordan.
hi Zack, this post once again got me curious, so I did some new Typography-files and tried replacing the HelveticaBold, with StencilSTD and CharcoalCY, but none of these look very nice.
check out your original version here:
http://campjohn.dk/AS3/Five3D/TypographyIssues/HelveticaBold/FIVe3D_experiment2.html
the StencilSTD version here:
http://campjohn.dk/AS3/Five3D/TypographyIssues/StencilSTD/FIVe3D_experiment2.html
and the CharcoalCY version here:
http://campjohn.dk/AS3/Five3D/TypographyIssues/CharcoalCY/FIVe3D_experiment2.html
it’s especially the i’s and w’s that look out of place.. do you have any idea what is going on, is your MotifCollection3D-class only “compatible” with HelveticaBold?
thanks
felisan
I’m getting this error: 1067: Implicit coercion of a value of type Class to an unrelated type five3D.typography:Typography3D.
Anyone able to help me?
thanks!