FIVe3D and TweenLite: Text Cloud
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
Tags: 3D, Actionscript, FIVe3D
April 28th, 2008 at 4:08 pm
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?
April 28th, 2008 at 4:31 pm
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.
May 1st, 2008 at 4:55 pm
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.
May 1st, 2008 at 5:10 pm
Actually, FIVe3D comes with a utility that does convert fonts into the format it uses. Download the package and take a look.
May 5th, 2008 at 9:38 pm
[…] 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 […]
May 6th, 2008 at 8:16 am
[…] UPDATE: For a more interesting and less useful FIVe3D experiment, see my other post here. […]
May 9th, 2008 at 3:35 am
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?
May 9th, 2008 at 8:00 am
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.
May 12th, 2008 at 4:13 pm
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/
May 12th, 2008 at 6:27 pm
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?
_||_
May 12th, 2008 at 7:25 pm
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.
May 12th, 2008 at 7:51 pm
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 _||_
May 12th, 2008 at 7:54 pm
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
May 12th, 2008 at 8:35 pm
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…
May 12th, 2008 at 8:36 pm
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.
May 13th, 2008 at 8:01 am
Good work. Would be nice to share code.
May 16th, 2008 at 6:08 am
[…] 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 […]
May 16th, 2008 at 6:28 pm
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).
May 22nd, 2008 at 1:20 pm
nice work Zack! thats fresh… this is the first i have heard of five3D… hafta look into it more…
May 22nd, 2008 at 1:40 pm
@Jonathan:
Thanks for the kind words. I’d definitely recommend five3D: it’s got some great features.
May 22nd, 2008 at 8:56 pm
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!
May 23rd, 2008 at 5:54 am
[…] 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 […]
May 23rd, 2008 at 6:44 am
@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.
May 23rd, 2008 at 9:06 am
very nice Zack, your code is very clean!
May 27th, 2008 at 10:36 am
Thanks, Jonathan. I get pretty obsessive over code that I think other people might judge me by…
May 29th, 2008 at 10:49 pm
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’.
August 30th, 2008 at 12:36 pm
[…] Direct link: click here […]
July 30th, 2009 at 9:10 pm
Hi,
If you want to check out some Video3D:
Flash Video Album Using Five3D (Mathieu Badimon) And gTween (Grant Skinner)