12. Animation using Tweener
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.