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):

View as Plain Text (Copyable)
Actionscript:
  1. package  {
  2.     import org.papervision3d.lights.PointLight3D;
  3.     import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
  4.     import org.papervision3d.materials.utils.MaterialsList;
  5.     import org.papervision3d.materials.WireframeMaterial;
  6.     import org.papervision3d.objects.primitives.Cube;
  7.     import org.papervision3d.objects.primitives.Plane;
  8.     
  9.     import caurina.transitions.Tweener;
  10.     
  11.     public class Main extends PaperBase{
  12.       
  13.        private var cube:Cube;
  14.        private var cube2:Cube;
  15.        private var mat:FlatShadeMaterial = new FlatShadeMaterial(new PointLight3D(), 0xFFFFFF, 0xFF0000);
  16.        private var mat2:WireframeMaterial = new WireframeMaterial(0x00FF00);
  17.        private var plane:Plane = new Plane(null, 2000, 2000, 10, 10);
  18.       
  19.        public function Main() {
  20.          init(600, 300);
  21.        }
  22.       
  23.        override protected function init3d():void{
  24.          cube = new Cube(new MaterialsList( { all: mat } ), 100, 100, 100);
  25.          cube.y = 0;
  26.          cube2 = new Cube(new MaterialsList( { all: mat2 } ), 100, 100, 100);
  27.          cube2.y = 0;
  28.          cube2.x = 1000;
  29.          cube2.z = 1000;
  30.          plane.material.lineColor = 0x777777;
  31.          plane.material.doubleSided = true;
  32.          plane.pitch(90);
  33.          plane.y = -50;
  34.          default_scene.addChild(plane);
  35.          default_scene.addChild(cube);
  36.          default_scene.addChild(cube2);
  37.          Tweener.addTween(cube, { x:1000, z:1000, time:2, onComplete: randomize } );
  38.          default_camera.x = 0;
  39.          default_camera.z = 1000;
  40.          default_camera.y = 1000;
  41.        }
  42.       
  43.        public function randomize():void {
  44.          var xp:Number = (Math.random() * 2000) - 1000;
  45.          var yp:Number = (Math.random() * 2000) - 1000;
  46.          Tweener.addTween(cube, { x:xp, z:yp, time:2, onComplete: randomize } );
  47.          cube2.x = xp;
  48.          cube2.z = yp;
  49.        }
  50.       
  51.        override protected function processFrame():void{
  52.          default_camera.lookAt(cube);
  53.        }    
  54.     }  
  55. }

March 10th, 2008

Categories: Tutorials | Author: Luke | Comments: 22 Comments |



Update and Downloads Section


Hi,

I haven't written a post in a while so I felt it was time to share what I've been playing around with.

I've put up a new downloads section where you can download various pieces of code that I've been creating, including code for parsing Heightmaps (click here) and Sculpted Prims (click here).

I'll have a proper update soon, and another Tutorial, I promise :)

-Luke

March 6th, 2008

Categories: Tutorials | Author: Luke | Comments: No Comments |



Panorama Viewer


*FIXED!!*

Here's a really simple example, all it does is texture a sphere and rotate it depending on what the camera is doing:

Click Here (1.3Mb download so I didn't embed this one)

Source Code (Uses the Base Class):

View as Plain Text (Copyable)
Actionscript:
  1. /**
  2. * ...
  3. * @author Luke Mitchell
  4. * @version 1
  5. */
  6.  
  7. package  {
  8.     import org.papervision3d.materials.BitmapFileMaterial;
  9.     import flash.events.MouseEvent;
  10.     import org.papervision3d.materials.ColorMaterial;
  11.     import org.papervision3d.materials.utils.MaterialsList;
  12.     import org.papervision3d.objects.primitives.Cube;
  13.     
  14.     public class Main extends PaperBase {
  15.       
  16.        public var materials:MaterialsList = new MaterialsList(
  17.        {
  18.          front: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s1.gif"),
  19.          back: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s3.gif"),
  20.          left: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s4.gif"),
  21.          right: new BitmapFileMaterial("http://papervision2.com/wp-content/pano/s2.gif"),
  22.          top: new ColorMaterial(0x000000),
  23.          bottom: new ColorMaterial(0x000000)
  24.        });
  25.        public var cubemap:Cube = new Cube(materials, 2000, 2000, 900, 5, 5, 5,Cube.ALL);
  26.       
  27.        public function Main() {
  28.          init(600,300);
  29.          cubemap.x = 0;
  30.          cubemap.y = 0;
  31.          cubemap.z = 0;
  32.          
  33.          default_scene.addChild(cubemap);
  34.          default_camera.z = 0;
  35.          default_camera.x = 0;
  36.          default_camera.y = 0;
  37.          default_camera.lookAt(cubemap);
  38.          
  39.          default_camera.zoom = 5;
  40.          stage.addEventListener(MouseEvent.MOUSE_WHEEL, mWheel);
  41.        }
  42.       
  43.        public function mWheel(e:MouseEvent):void {
  44.          default_camera.zoom += e.delta / 5;
  45.          if (default_camera.zoom <5) {
  46.               default_camera.zoom = 5;
  47.          }else if (default_camera.zoom> 20) {
  48.               default_camera.zoom = 20;
  49.          }
  50.        }
  51.       
  52.        override protected function processFrame():void {
  53.          cubemap.yaw( -((stage.mouseX - (stage.width / 2)) / stage.width)*4);
  54.          default_camera.rotationX = -((stage.mouseY - (stage.height / 2)) / stage.height) * (Math.sqrt(default_camera.zoom*6));
  55.        }
  56.     }
  57. }

You can use this for pretty much any panoramic image, just change the image url and tweak it a bit :)

-Luke

February 27th, 2008

Categories: Examples | Author: Luke | Comments: 6 Comments |



11. Advanced Interactivity 2


This tutorial will show you how to handle full interactivity on an objects surface, just as if it's a normal movieclip.

For my example, I've made this. The red spot in the centre is a button. You can click it to toggle it's glow on and off. The other button will reveal how it works!

There are other ways to do this, but I think this way is the easiest and most hassle-free, and it's pretty fast.

I've super-commented the source code, so from reading the comments in the code you should be able to figure out exactly what's going on.

The basic idea is, you add the movie clip which is being used as the texture to the scene, but make it invisible. You then move it so that your mouse is over the correct part of the movieclip, when your mouse touches the texture on the 3d model. I think the "Show Movieclip" button on the cube above will explain better than I can :)

View as Plain Text (Copyable)
Actionscript:
  1. package  {
  2.     import flash.display.Bitmap;
  3.     import flash.display.MovieClip;
  4.     import flash.events.MouseEvent;
  5.     import flash.filters.GlowFilter;
  6.     import org.papervision3d.materials.MovieMaterial;
  7.     import org.papervision3d.materials.utils.MaterialsList;
  8.     import org.papervision3d.objects.primitives.Cube;
  9.     import org.papervision3d.events.InteractiveScene3DEvent;
  10.     
  11.     public class Main extends PaperBase {
  12.       
  13.        // This is the movieclip that we'll use as the texture.
  14.        private var movie:MovieClip = new MovieClip();
  15.       
  16.        // This movieclip will be completley transparent and will hold the
  17.        // texture movieclip, then move it to the correct loaction under the mouse.
  18.        private var movieParent:MovieClip = new MovieClip();
  19.       
  20.        // These are buttons that I'm going to add to the texture movieclip
  21.        private var button:MovieClip = new MovieClip();
  22.        private var showbutton:MovieClip = new MovieClip();
  23.       
  24.        // A "MovieMaterial" will use a movieclip as a texture.
  25.        private var mat:MovieMaterial;
  26.       
  27.        // The cube that we're going to texture..
  28.        private var cube:Cube;
  29.       
  30.        // This will import the file "E:/Papervision/images/showtex.jpg" to the project, and
  31.        // store the data in "ButtonIm". (This is the "Show Movieclip" Button)..
  32.        [Embed(source = "E:/Papervision/images/showtex.jpg")] private var ButtonIm:Class;
  33.       
  34.        public function Main() {
  35.          // Initiate, 400px wide, 400px tall..
  36.          init(400, 400);
  37.        }
  38.       
  39.        override protected function init3d():void {
  40.          // - See the prepareMovieclip function. This just builds the movieclip called "movie".
  41.          // You can use ANY movie clip for this..
  42.          prepareMovieclip();
  43.          
  44.          // Prepare out moviematerial. Make it animated and interactive.
  45.          mat = new MovieMaterial(movie, false, true);
  46.          mat.interactive = true;
  47.          
  48.          // Zoom in a bit..
  49.          default_camera.zoom = 5;
  50.          
  51.          // Prepare the cube.
  52.          cube = new Cube(new MaterialsList( { all: mat } ), 500, 500, 500, 4, 4, 4);
  53.          // Listen for when the mouse is moved over the cube.
  54.          // Trigger the mMove function when this happens.
  55.          cube.addEventListener( InteractiveScene3DEvent.OBJECT_MOVE, mMove);
  56.          
  57.          // Add the cube to the scene.
  58.          default_scene.addChild(cube);
  59.          
  60.          // The movieParent movieclip will hold the movieclip which is being used
  61.          // as the texture. It will then move depending on the mouse posirion.
  62.          movieParent.addChild(movie);
  63.          // Make it invisible.
  64.          movieParent.alpha = 0;
  65.          
  66.          // Add the movieParent movieclip to the stage.
  67.          addChild(movieParent);
  68.          
  69.        }
  70.       
  71.       
  72.        private function prepareMovieclip():void {
  73.          
  74.          // - This code will set up our movieclip which is going to be used
  75.          // as the texture for the cube.
  76.          // Draw Outline:
  77.          movie.graphics.beginFill(0xFFFFFF);
  78.          movie.graphics.drawRect(0, 0, 500, 500);
  79.          movie.graphics.endFill();
  80.          movie.graphics.beginFill(0x000000);
  81.          movie.graphics.drawRect(0, 0, 10, 500);
  82.          movie.graphics.drawRect(490, 0, 10, 500);
  83.          movie.graphics.drawRect(0, 0, 500, 10);
  84.          movie.graphics.drawRect(0, 490, 500, 10);
  85.          movie.graphics.endFill();
  86.          
  87.          // Draw Circular Button:
  88.          button.graphics.beginFill(0xBB0000);
  89.          button.graphics.drawCircle(0, 0, 50);
  90.          button.graphics.endFill();
  91.          button.x = 250;
  92.          button.y = 250;
  93.          button.buttonMode = true;
  94.          
  95.          // Load bitmap button texture:
  96.          var Bim:Bitmap = new ButtonIm();
  97.          // Draw "Show Movieclip" Texture:
  98.          showbutton.graphics.beginBitmapFill(Bim.bitmapData);
  99.          showbutton.graphics.drawRect(0,0,100,30);
  100.          showbutton.graphics.endFill();
  101.          showbutton.buttonMode = true;
  102.          showbutton.x = 380;
  103.          showbutton.y = 450;
  104.          
  105.          // Add the buttons to the movieclip
  106.          movie.addChild(showbutton);
  107.          movie.addChild(button);
  108.          
  109.          // -- Listen for the buttons to be clicked --
  110.          button.addEventListener(MouseEvent.CLICK, mClickButton);
  111.          showbutton.addEventListener(MouseEvent.CLICK, showHide);
  112.          // --
  113.        }
  114.       
  115.        private function showHide( e:MouseEvent ):void {
  116.          // The "Show Movieclip" button has been clicked
  117.          if (movieParent.alpha == 0) { // If it's invisible,
  118.               movieParent.alpha = 0.2; // Make it slightly visible.
  119.          }else {
  120.               movieParent.alpha = 0; // Or make it invisible again
  121.          }
  122.        }
  123.       
  124.        private function mClickButton(e:MouseEvent):void {
  125.          // The cental round button has been clicked.
  126.          if(button.name == "on"){
  127.               button.filters = null;
  128.               button.name = "off"
  129.          }else {
  130.               button.filters = [new GlowFilter(0x000000, 1, 15, 15, 10, 1)];
  131.               button.name = "on";
  132.          }
  133.        }
  134.       
  135.        private function mMove( e:InteractiveScene3DEvent ):void {
  136.          // This code is run when the mouse is moved on the cube.
  137.          // This will move the movieclip to the right place beneath
  138.          // the mouse.
  139.          movieParent.x = root.mouseX -e.x;
  140.          movieParent.y = root.mouseY -e.y;
  141.        }
  142.       
  143.        override protected function processFrame():void {
  144.          // Spin our cube a bit.
  145.          cube.yaw(0.25);
  146.          cube.pitch(0.25);
  147.        }
  148.       
  149.       
  150.     }
  151. }

The image that's embedded in the code can be found here: showtex.jpg

Have fun! More Examples coming soon.

February 21st, 2008

Categories: Tutorials | Author: Luke | Comments: 37 Comments |



We Have Forums


We have forums!

I've set up a Papervision 3d forum at http://papervision2.com/forum/

Hopefully these forums will help everyone to solve common problems that they're having with Papervision. I'm going to fill them with some problems which we've resolved in the past so they're all in one place.

I've set up Help, General Chat, Suggestions and Examples forums. If you can think of anything else that the forum needs then make a thread in the suggestions forum and I'll get round to it.

Hope you like it!

-Luke

February 18th, 2008

Categories: News | Author: Luke | Comments: 5 Comments |

Next Page »

Papervision 2 is proudly powered by WordPress and themed by Mukka-mu