UPDATE: I have another FIVe3D example/experiment (3D graphing) here. And, if you’re just cruising the web for FIVe3D examples, I have yet another one here.
I can’t seem to get enough of this FIVe3D thing. It’s even becoming natural to capitalize every letter except for that “e” when I write it. Not that I’m blinded to its faults, for there are a few here and there. But for quick 3D text rendering, I have yet to find its equal.
Take today’s experiment, for example. It was originally a Twitter viewer, but I haven’t figured out how to get it working online yet, so I’ve given it some generic text to render. It uses TweenLite for movement, and FIVe3D for rendering. Try clicking around and moving the mouse.
The part of this project that would have been challenging in PV3D or Sandy is the spacing of the letters. It was a great relief to find that FIVe3D is already intimately aware of each letter’s size, since it is rendering them as shapes. Thus, I didn’t have to painstakingly experiment to find the proper spacing.
Once I actually think up a clever tagline, I might just turn this into my site header. This could also be a pretty slick little tag cloud for site content, but I think it might get annoying if this was the only way to find a category. Ah well. A man can dream.
UPDATE
I did indeed turn this into my header. We’ll see how many people play with it.
UPDATE #2
And… I took it back out. Seems that something was weird with IE and Kimili Flash Embed. Or… it could have been user error.
UPDATE #3And… source code is live! With a tutorial/walkthrough, even! Get it here:
FIVe3D TextCloud: AS3 Tutorial and Source
That’s a neat little experiment. I like when the letters are all in 3D space, looks cool.
Is it just converting the text into shapes on the fly or do you have to physically do that?
The system takes care of turning everything into a shape. In fact, there’s a class in FIVe3D called HelveticaBold (which is what I used), that contains all the information necessary to draw all those glyphs using the Flash drawing API. In my opinion, it’s a great idea, well-implemented.
That’s excellent! I like the new headers, and I think it’s funny you made it in 20 minutes. I would be interested in something that could change any font into vector shapes like that.
Actually, FIVe3D comes with a utility that does convert fonts into the format it uses. Download the package and take a look.
[…] not bitmap-based. This is a good and a bad thing. Good for vectors - including text (see this example by Zack Jordan) but it can’t handle bitmaps, MovieMaterial, VideoMaterial, etc […]
[…] UPDATE: For a more interesting and less useful FIVe3D experiment, see my other post here. […]
Hi! I also get interested in FIVe3D sometime ago. I created a little demo, that I posted on my blog here:
http://www.everydayflash.com/blog/index.php/2008/04/16/five3d-first-impressions/
Now I am working and a more complex animation for a banner and I am getting pretty good results. The simplicity of the API (compared to Away3D or PV3D) comes really handy when I have a 30KB limitation on the SWF size there
I used Tweener for animation but it is too heavy, so I need to switch to soemthing else. Is TweenLite as light as its name suggests?
I saw your example before I did mine, actually. I was impressed because it even looked like you did a little fake lighting on it- but it could be an illusion (dark background + my eyes expecting to see lighting).
Yes, TweenLite is a much lighter alternative. It only adds about 3k to your filesize- you can use it in anything.
In fact I used a pseudo lighting - it applies a color transform based on the rotation of the pendant.
I also posted the sources, so you can check them out. A link to the source files is at the bottom of my post, here:
http://www.everydayflash.com/blog/index.php/2008/04/16/five3d-first-impressions/
Hi Zack,
I’ve been looking for an api that could handle dynamically generated text in a 3D environment and five3d looks perfect - however, i am having an issue with flex - it doesn’t have any of the fl.* packages including fl.motion.color that Sprite3D uses - do you know of a workaround?
_||_
Hi Justin-
I just copied the folders from my Flash CS3 installation into a central directory that I use in every Flex project. The original directory is:
Flash CS3/Configuration/ActionScript 3.0/Classes/fl
Copy it from there (or add that directory to your Flex project) and you should be golden.
Thanks! After some research I found that it worked in an older version i.e. 2.0.1. Looks like the reference to fl.motion.Color was added to Sprite3D in version 2.1. i will try your copy/paste trick - it also looks like it is pretty easy to generate flex components (swc) in flash i.e. drag to library and right click here’s a step-by-step http://tinyurl.com/5ulcv5 _||_
btw. are planning to share your code? i wish this was done more in the flash/as3 community like it is in others e.g. processing
Yeah, I do plan on sharing my code. I want to make sure it’s nice and clean, though, so people don’t judge me too harshly. My “experiments” tend to be a little ugly…
Bartek-
That’s a great solution- I should have thought of that.
Also, I’ve noticed that there are some ambient lighting parameters in the 2.1 package, but I haven’t explored them yet. I wonder if they would give me a similar effect.
Good work. Would be nice to share code.
[…] after the earlier post about five3D, it turns out Mathieu Badimon came out with a version for as3. This example shows quite a bit more speed then my little […]
Wow that is a really cool experiment! Looking forward to the source as I cant figure out how to break apart the text. (Just started with the class though).
nice work Zack! thats fresh… this is the first i have heard of five3D… hafta look into it more…
@Jonathan:
Thanks for the kind words. I’d definitely recommend five3D: it’s got some great features.
Hey Zack,
I just spent the afternoon playing with it! I hope you don’t mind, but I made a TextCloud of my own
. Yours was just so fun to play with!
I have the source up on my blog for those wondering how to make one…
http://greenethumb.com/article/32/five3d-as3-demo-textcloud
cheers!
[…] 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 […]
@Jonathan:
Well, I finally got my code cleaned up, so I’m going to post it even though you’ve got something similar. Link here. Nice work, though; now you see why I like FIVe3D so much.
very nice Zack, your code is very clean!
Thanks, Jonathan. I get pretty obsessive over code that I think other people might judge me by…
2.1 as a swc is easy.
Use flash cs3. create a library movieClip, assign an AS class to it.. in that class reference all the classes you wish to compile into the swc.
Then right click on the library item and select ‘export as swc’.
[…] Direct link: click here […]