// you’re reading...

3D

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

Discussion

27 comments for “FIVe3D and TweenLite: Text Cloud”

  1. 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?

    Posted by Matt Przybylski | April 28, 2008, 4:08 pm
  2. 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.

    Posted by Zack Jordan | April 28, 2008, 4:31 pm
  3. 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.

    Posted by Benjamin | May 1, 2008, 4:55 pm
  4. Actually, FIVe3D comes with a utility that does convert fonts into the format it uses. Download the package and take a look.

    Posted by Zack Jordan | May 1, 2008, 5:10 pm
  5. […] 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 […]

    Posted by josh >> /dev/blog & » Blog Archive » Five3D | May 5, 2008, 9:38 pm
  6. […] UPDATE: For a more interesting and less useful FIVe3D experiment, see my other post here. […]

    Posted by { P I X E L W E L D E R S } | Experiments in the Third Dimension: FIVe3D | May 6, 2008, 8:16 am
  7. 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?

    Posted by Bartek Drozdz | May 9, 2008, 3:35 am
  8. 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.

    Posted by Zack Jordan | May 9, 2008, 8:00 am
  9. 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/

    Posted by Bartek Drozdz | May 12, 2008, 4:13 pm
  10. 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?

    _||_

    Posted by Justin Love | May 12, 2008, 6:27 pm
  11. 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.

    Posted by Zack Jordan | May 12, 2008, 7:25 pm
  12. 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 _||_

    Posted by Justin Love | May 12, 2008, 7:51 pm
  13. 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

    Posted by Justin Love | May 12, 2008, 7:54 pm
  14. 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…

    Posted by Zack Jordan | May 12, 2008, 8:35 pm
  15. 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.

    Posted by Zack Jordan | May 12, 2008, 8:36 pm
  16. Good work. Would be nice to share code.

    Posted by Smith | May 13, 2008, 8:01 am
  17. […] 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 […]

    Posted by Five3D update, plus first rant | dasPoda | | May 16, 2008, 6:08 am
  18. 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).

    Posted by Jeff | May 16, 2008, 6:28 pm
  19. nice work Zack! thats fresh… this is the first i have heard of five3D… hafta look into it more…

    Posted by jonathan greene | May 22, 2008, 1:20 pm
  20. @Jonathan:

    Thanks for the kind words. I’d definitely recommend five3D: it’s got some great features.

    Posted by Zack Jordan | May 22, 2008, 1:40 pm
  21. 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!

    Posted by jonathan greene | May 22, 2008, 8:56 pm
  22. […] 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 […]

    Posted by { P I X E L W E L D E R S } | FIVe3D TextCloud: AS3 Tutorial and Source | May 23, 2008, 5:54 am
  23. @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.

    Posted by Zack Jordan | May 23, 2008, 6:44 am
  24. very nice Zack, your code is very clean!

    Posted by jonathan greene | May 23, 2008, 9:06 am
  25. Thanks, Jonathan. I get pretty obsessive over code that I think other people might judge me by…

    Posted by Zack Jordan | May 27, 2008, 10:36 am
  26. 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’.

    Posted by Bjorn Schultheiss | May 29, 2008, 10:49 pm
  27. […] Direct link: click here […]

    Posted by Mathieu Badimon | FIVe3D | Blog » Blog Archive » FIVe3D and TweenLite: Text Cloud | August 30, 2008, 12:36 pm

Post a comment

Twitterpated