**Update
This tutorial has been updated using TweenLite and the most recent papervision BasicView class.
Hi,
In this tutorial we’re going to use Tweener to move a cube around. This will teach you basics of animation, and how to use Tweener (which is awesome).
The example that I’ve produced is this:
So, in this example our solid red cube is trying to stay inside our green wireframe cube. Every time the red cube gets itself positioned completley inside the green cube, the green cube moves.
Tweener is the package which is smoothly moving the red cube around. The Tweener package is also firing the event to move the green cube when the tween is complete.
1: To start off, you’ll need Tweener. You can download it here if you don’t already have it: http://code.google.com/p/tweener/
Once you’ve got tweener, either add the source directory containing the “caurina” folder to your project’s classpaths, or add the caurina folder into your current project.
2: Import tweener – Add this line to your imports:
import caurina.transitions.Tweener;
3: Add a Tween. You can add tweens to any parameter of any object. The Tweener package will gradually change any parameter in your code to a new value over time, so only numeric values will work nicely. Anyway, you can read a load more about tweener at the google code page above.
To add a tween, we use the code
Tweener.addTween(object, {parameter1: value, parameter2: value2, time: X, transition:"transition", onComplete: functionname});
This may look a little bit confusing at first, but it’s really simple. Let’s show you a real example..
Tweener.addTween(cube, { x: 1000, z: 500, time: 2, onComplete: randomize } );
The line above will add a tween. This tween will change the values “x” and “y” on the object “cube” to 1000 and 500 respectively. It will smoothly change the values over a period of 2 seconds and once the tween is complete and the cube.x is 1000 and cube.y is 500, it will trigger the “randomize” function.
Experiment with more ways to tween your objects. You can apply tweens to anything, including cameras, lights, rotations, sizes and camera zooms. Any numerical value you can think of.
Here is my source code (Uses latest version of my base class):
package { import org.papervision3d.lights.PointLight3D; import org.papervision3d.materials.shadematerials.FlatShadeMaterial; import org.papervision3d.materials.utils.MaterialsList; import org.papervision3d.materials.WireframeMaterial; import org.papervision3d.objects.primitives.Cube; import org.papervision3d.objects.primitives.Plane; import caurina.transitions.Tweener; public class Main extends PaperBase { private var cube:Cube; private var cube2:Cube; private var mat:FlatShadeMaterial = new FlatShadeMaterial(new PointLight3D(), 0xFFFFFF, 0xFF0000); private var mat2:WireframeMaterial = new WireframeMaterial(0x00FF00); private var plane:Plane = new Plane(null, 2000, 2000, 10, 10); public function Main() { init(600, 300); } override protected function init3d():void { cube = new Cube(new MaterialsList( { all: mat } ), 100, 100, 100); cube.y = 0; cube2 = new Cube(new MaterialsList( { all: mat2 } ), 100, 100, 100); cube2.y = 0; cube2.x = 1000; cube2.z = 1000; plane.material.lineColor = 0x777777; plane.material.doubleSided = true; plane.pitch(90); plane.y = -50; default_scene.addChild(plane); default_scene.addChild(cube); default_scene.addChild(cube2); Tweener.addTween(cube, { x:1000, z:1000, time:2, onComplete: randomize } ); default_camera.x = 0; default_camera.z = 1000; default_camera.y = 1000; } public function randomize():void { var xp:Number = (Math.random() * 2000) - 1000; var yp:Number = (Math.random() * 2000) - 1000; Tweener.addTween(cube, { x:xp, z:yp, time:2, onComplete: randomize } ); cube2.x = xp; cube2.z = yp; } override protected function processFrame():void { default_camera.lookAt(cube); } } } |
hi there
did every tutorial on ur site to learn how papervision works. very interesting – thanks for your good work.
today I played a bit with tweening functions – its really easy to combinate. you can change almost everything during a tween.
the nicest parameters to change are materialparameters.
f.ex:
Tweener.addTween(“whatever”.material, { fillAlpha: 0.5, time:1 } );
looks that smooth :-)
greets
hi there,
can you post the source for all necessary files for each tutorial?
my camera perspective isn’t changing (like yours is). i think it’s related to a changed i missed in my PaperBase class?
cheers,
mark
Thx for your tutorials !
But unfortunately this one must have something missing or some…?
From your code the Plane doesn’t move, and the cubes are not on the plane.
Take care.
Hi,
Thanks for the comments!
@Mark, You can download the most recent base class from the sidebar.. The problem is, you need to change all the references to “Camera3D” to “FreeCamera3D”..
@ohm, The plane isn’t supposed to move :).. Maybe you’re having the same camera problem as Mark, if not then I’m not sure what the problem is..
-Luke
Hi,
Really Nice Tutorial.
Great
Very nice tutorial, keep on the good work.
Thanks a lot for sharing your knowledge. These tuts are the most didactic i have found so far
and they really deserve the name ‘tutorial’.(A lot of so called tutorials i have found
about Papervision were just a bunch of code and eventually a reference to an expensive
workshop) Good job!!
I cant see anything when I publish my file. I dont get any errors, but I dont understand wht I am doign wrong…NOOB
do you need my code to help?
Hi,
Quick question. How do I apply a blend mode to an object in the scene, or if it’s easier thee whole scene?
I’ve stuck this near the top “import flash.display.BlendMode;” and I’ve tried variations on “cube.blendMode = “MULTIPLY”;” everywhere, but no joy.
Found an example somewhere else doing it, but the code was hardcore and I gave up. Thought you might have a simpler method?
Thanks, pv
i’m getting Viewport3D and BasicRenderEngine errors. The import org.papervision3d.render.BasicRenderEngine; and org.papervision3d.view.Viewport3D; lines in PaperBase.as don’t exist in the org directory. am I doing something wrong? actually, more precisely, WHAT am i doing wrong??? ;)
doh! downloaded the wrong pv version, now i get ambiguous references to vertex3D. today is not going well :(
I have followed the tutorial , everything works fine exept the default_camera.lookAt(cube) that seems not to be interpreted.. the camera doesn’t move. I don’t know what can be the reason :-(
hey luke, great tuts – espically the complex collada and tweener animations – though i’ve got a question that
you might be able to answer regarding pprvision….
following your tuts – i’ve done a little scene in which everything works fine –
when testing the movie/swf from flash it looks great – one prob
when uploaded onto the web and into a web page (via the swfobject.js – which you seem to be using aswell)
none of the collada models appear- -only the superficial 2d _mc’s/graphics appear (which would be normally be infront..)
i’ve even uploaded all the accompanying files (all the bitmaps and .dae and .fla .as files) to see if that would work
which it still doesn’t :(
shouldn’t the swf be self contained – and run without referencing the actionscript/greatwhite classes all the time…
cheers – any help would be useful
i wouldn’t of normally posted this here – but i can’t seem to access your forums..
, alex
(if you wanted to examine them – here are all the files)
http://www.achmedthesnake.com/idm/
hey Luke,
big thanx for great tutorial!
you led me to the first dive into papervision.
Thx Luke for your tuts !
I’m having a problem tho figuring out how can one add 2d objects over the 3d scene
overriding your init2d (make a simple hud display with a square, for instance)?
Anyone can help ?
when will you upload more tutorials ??
you are great at explaining stuff so simple to understand!
please keep it up!
Nice tweener. Is there any twister???
Luck, why do the .swf that u show here is black background color but mine is white background color?
Downloaded everything from the http://papervision3d.googlecode.com/svn/trunk/branches/GreatWhite/src/ directory today.
Downloaded the latest version of your PaperBase class.
But I just can’t make it work. I get this error when I try to export movie:
1020: Method marked override must override another method.
Can you help with this one? Cheers.
I found the solution for the erros on the previous post. It was posted by Nik and Ralph Hauwert at http://theflashblog.com/?p=360.
Just make sure you’re not running two versions of Papervision 3D. In Flash IDE go to Edit > Preferences > ActionScript > ActionScript 3.0 Settings… and check if you have any older versions of Papervision 3D in your Classpath.
There is a discrepancy between my version and yours. The camera (zoom?) is different. Could you tell us what you did to change the zoom? I futzed with the camera.zoom prop and that worked but I don’t know if there is some other property that’s better to use.
awesome and thank you.
Ah, I didn’t have the current versions of PaperBase. Because of this I was using a Camera3D instead of a FreeCamera3D. Interestingly, these two cameras have differing default values for zoom. Camera3D.zoom = 11; FreeCamera3D.zoom = 2;
Hey Luke. Great tutorials! Can I put the tweener on a camera? I use the mouse to move the camera and would like to have a nice tweener on the camera.
dear friends. i´ve made this experiment, and i was wondering how big can a viewport be, and can it affect the processing. the bigger it is the more processing it takes?…
this has 10 planes. so the height its about 2600… but i cant make a scroll intro it. if i do, the 1st plane appears in the center…
any sugguestion?
http://www.andrevenancio.com/teste2/
venancio.andre@gmail.com
drop me an email.
Hi Luke, i´m brazillian and i’ve following your tutorials for my tests with papervision. It helped me a lot! Now i will create my own blog and i had the idea to translate your tutorials to portuguese because i couldn’t find this type of content about papervision (with quality) in my language. Of course that i will put references to your blog/website and keep always clear for my readers that you are the author of this translated articles in each post that i make with your content.
I had this idea because i pretend to write about flash in my blog and post my own samples with papervision too.
What do you think about it? Is it ok for you?
Thanks!
Hi Luke, i´m brazillian and i’ve following your tutorials for my
tests with papervision. It helped me a lot! Now i will create my own
blog and i had the idea to translate your tutorials to portuguese
because i couldn’t find this type of content about papervision (with
quality) in my language. Of course that i will put references to your
blog/website and keep always clear for my readers that you are the
author of this translated articles in each post that i make with your
content.
I had this idea because i pretend to write about flash in my blog and post my own samples with papervision too.
What do you think about it? Is it ok for you?
Thanks!
Thanks so much for putting together these wonderful tutorials. Gave me a great headstart.
Hi
This is again a great tuturial. I went through them all and have learn a great deal. Thank you very much.
I also speak french and I wonder if you would allow me to translate this excellent tuturial in french.
I think you work deserves exposure. I wonder how I would handle the questions thought. Your reply is appreciate.
About the camera you suggestion to mark is tu change the base class as follows:
…@Mark, You can download the most recent base class from the sidebar.. The problem is, you need to change all the references to “Camera3D” to “FreeCamera3D”..
I did not find the ..sidebar.. you talk about, but I did changed the PaperBase class default camera to FreeCamera3D from the camera3D. It did work.
But going back to previous tuturial like the cow tuturial it now have a rather funny camera zooming effect.
So I have tried the a different approach successfully by creating a new camera:
import org.papervision3d.cameras.FreeCamera3D;// import FreeCamera3D
then in main class declare it:
public var camera:FreeCamera3D; //make it available
in override protected function init3d() replacing the default_camera by the camera and declare it as current-camera:
camera = new FreeCamera3D(); // create the object
camera.x = 0; // assign starting position
camera.z = 1000;
camera.y = 1000;
current_camera = camera; // make that camera current
finaly replacing the defaul_camera as follows in override protected function processFrame():void{
current_camera.lookAt(cube); // make the current camera always looking at the cube
Only a thought.
Anyway this was realy fun! Keep it up.
In your long list of to do I hope papervision3D usage with Blender import is in the list. http://www.rozengain.com/blog/2008/01/02/export-your-blender-objects-straight-to-away3d-papervision3d-and-sandy/
Many thanx for these tutorials Luc. I did them all two day’s. I hope more tuts following. Your tuts are very well commented and a plus for the papervision fans…….. cheers :)
Insert this in the process frame function, some fun you can have with the dafault camera:
default_camera.copyTransform(cube.transform);
default_camera.transformView();
default_camera.moveBackward(800);
default_camera.moveUp(100);
Thanks for everything here, when you get a sec the source files for all the tutorials would really be nice.
You can work with Camera3D, you just have to adjust plane to have the same example as this one. When you define plane properties, just add:
plane.roll( 90 );