Papervision3D + Tweener = Cones
From the very start, one of the main aspects I wanted to focus on with Tweener was forgetting about the whole Actionscript/Flash API, forgetting there were “MovieClips” and “TextFields” and similar visual class instances. Instead, I wanted Tweener to be an engine focused on tweening any property of any object of any class, as long as it was numeric; it was too often with MC Tween that I had to create “wrap arounds” for new classes I created, when I simply wanted to tween a property of it – say, the .cameraX property of a Stage camera object. Hence why Tweener works by being a separate class that tweens properties of any object, regardless of its type; it’s meant to work seamlessly with whatever numeric properties you want to tween. So a few days ago I decided to put that flexibility into test with Papervision3D, the Actionscript 3d renderer that many people are talking about.
Now here’s the fun part: since Papervision3D’s renderer engine uses some simple objects, each with its own numeric properties, it was pretty easy to create something to test — with no code adaptation whatsoever to the way Tweener works. Check this example out:
Clicking each button on the base of the movie slides the free camera to a position I’ve defined earlier.
It’s not the most graphically intense Papervision3D demo you might have seen – just a pair of street cones I’ve painstakingly modeled in Blender, with a different texture applied to each cone – but it does the trick of showing how easing can also be applied to 3d elements. And since Papervision3D uses numeric properties, doing those travels are as easy as:
import caurina.transitions.Tweener;
...
Tweener.addTween(freeCamera, {x:-2967, y:1400, z:16, rotationX:-28, rotationY:90, rotationZ:0, time:1, transition:"easeinoutexpo"});
I like to believe that’s pretty straightforward. John Maeda would be proud.
Anyhow, download the example with source code here (Flash 9, AS 3). It was slightly based on Papervision3D’s own examples. It does not include Papervision3D renderer source, though, as it’s not publicly released yet; more information on how to get on the beta here.
Update: There’s another example of Tweener playing with Papervision3D here (in japanese). Tweener is used to tween the rotation and position of a plane. The blog itself also has many other Tweener examples, as well as Papervision3D examples.
Update again: A great resource for finding Papervision3D-specific examples (not related to Tweener) is this post on Davr’s blog. It lists all known online Papervision3D examples.
Muuuito bom isso! Vai ser muito útil!
Posted on 13/March/2007 at 13:23 | #
Nice one…
Posted on 13/March/2007 at 13:27 | #
Hi Zeh.
Pretty nice demo, with great easing for the camera.
Tweener and Papervision are a great match, precisely because of Tweener’s decoupling with flash’s native data types.
Everyday I find out something that can be tweened in a one-liner, and Papervision will surely be a great source for playing with Tweener.
cheers
Arthur
Posted on 13/March/2007 at 13:31 | #
Nice one Zeh! You beat me to the punch on that one. I was thinking of trying the same thing
Posted on 13/March/2007 at 15:21 | #
Thx so much for your code !
Great blog.
Posted on 12/April/2007 at 15:56 | #
Nice zeh!
but… why the yellow cone looks orange, and the black cone looks yellow to me?
haha, just bothering you, don’t mind…
Posted on 23/July/2007 at 22:58 | #
Hah.. you’re right. It’s because the orange cone was originally yellow/white, but later I changed it to orange/white. The black one is black/yellow…
Posted on 24/July/2007 at 6:20 | #
I see you use ase files, but I’m trying to find the same sort of thing but using DAE collada files and also MovieClips instead of bitmaps…
any idea on how this would be done?
Posted on 3/August/2007 at 3:07 | #
Harry, it’s just about the same thing. You create objects from COLLADA/DAE instead of ASEs, or even use this plugin to create geom code:
http://drawk.wordpress.com/2007/07/30/as3-geom-class-exporter-for-3ds-max-for-pv3d-sandy-and-away3d/
And then use a movieclip material or a movieclip asset material instead of a bitmap asset material. Check PV3D’s documentation.
Tweening would remain the same as it’s done on the object properties and it doesn’t care what kind of material it’s using or from what kind of model it was created from.
Posted on 3/August/2007 at 6:03 | #
Pretty nice demo, with great easing for the camera.
Posted on 14/August/2007 at 0:10 | #
Thanx a lot! This is very useful.
Posted on 19/September/2007 at 23:26 | #
Good work.Thanks.
Posted on 23/September/2007 at 5:03 | #
great job, really impressive. I was curious though if this also worked with matrices either a flash matrix or Matrix3D? I tried but I wasn’t able to get it to work.
Posted on 9/October/2007 at 14:06 | #
Justin: not yet. Tweener doesn’t work with values of Array objects as of now.
Posted on 9/October/2007 at 19:10 | #
Thanks for this article. I like your posts
Posted on 11/October/2007 at 3:42 | #
Killer stuff dude!!
Posted on 2/November/2007 at 3:52 | #
Thanks for this very good article
Posted on 9/January/2008 at 4:32 | #
Good article , Thank You !
Posted on 9/January/2008 at 4:35 | #
woww…
very nice.
Posted on 30/January/2008 at 9:27 | #