Papervision3D + Tweener = Cones

Posted on · 19 Comments

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.

Related posts

19 responses

  3. 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

  4. Nice one Zeh! You beat me to the punch on that one. I was thinking of trying the same thing 🙂

  6. Nice zeh!
    but… why the yellow cone looks orange, and the black cone looks yellow to me?
    haha, just bothering you, don’t mind…

  7. 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…

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

  9. 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.

  13. 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.

Comments are closed.