Attention: you're visiting an archived version of this post on my old website. Click here to view this same post on my new website.

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.

Posted on 13/Mar/2007 at 1:11 pm | Comments (0) | Trackbacks (0) | Categories: Actionscript, Easing, Flash, Interface, Papervision3D, Sources, Tweener

Comments (19)

Muuuito bom isso! Vai ser muito ├║til!

Posted by Rafael Cordoba on 13/Mar/2007 at 1:23 pm

Nice one…

Posted by zeflasher on 13/Mar/2007 at 1:27 pm

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.


Posted by arthur debert on 13/Mar/2007 at 1:31 pm

Nice one Zeh! You beat me to the punch on that one. I was thinking of trying the same thing ­čÖé

Posted by Nate Chatellier on 13/Mar/2007 at 3:21 pm

Thx so much for your code !

Great blog.

Posted by Fardeen on 12/Apr/2007 at 3:56 pm

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 by keita on 23/Jul/2007 at 10:58 pm

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 by Zeh on 24/Jul/2007 at 6:20 am

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 by harry vyvey on 3/Aug/2007 at 3:07 am

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:

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 by Zeh on 3/Aug/2007 at 6:03 am

Pretty nice demo, with great easing for the camera.

Posted by rowery on 14/Aug/2007 at 12:10 am

Thanx a lot! This is very useful.

Posted by tłumaczenia angielski on 19/Sep/2007 at 11:26 pm

Good work.Thanks.

Posted by domeny on 23/Sep/2007 at 5:03 am

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 by Justin V. on 9/Oct/2007 at 2:06 pm

Justin: not yet. Tweener doesn’t work with values of Array objects as of now.

Posted by Zeh on 9/Oct/2007 at 7:10 pm

Thanks for this article. I like your posts

Posted by meble biurowe on 11/Oct/2007 at 3:42 am

Killer stuff dude!!

Posted by Amit on 2/Nov/2007 at 3:52 am

Thanks for this very good article

Posted by Zados─çuczynienie on 9/Jan/2008 at 4:32 am

Good article , Thank You !

Posted by Anglia odszkodowanie on 9/Jan/2008 at 4:35 am

very nice.

Posted by Rodrigo Ferrari on 30/Jan/2008 at 9:27 am