Google Scuka Jjot


Tag Archive for 'PaperBase'

Time for an upgrade. Updated tutorials coming soon!

Published
by
Charlie
on November 22, 2009
in Actionscript 3 Papervision, Releases and Tutorials
. 0 Comments

upgrade
In an effort to keep the information on this site up to date over the next few weeks we will be re-writing the majority of the tutorials on this site.

All new tutorials will include:

1) More up to date PV3D code.
2) A version that can be compiled with the Flash IDE
3) A version that can be compiled with FlashDevelop, Flex etc.
4) Full source code.

Having two versions of the code, as well as full source (including pv3d code) will hopefully cut down on the confusion when getting started.

Please feel free to leave comments here for other requests. If we get several requests for features other than what has been mentioned we will do my best to incorporate them.

Enjoy and have fun.

Charlie

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post

10. Advanced Interactivity

Published
by
Charlie
on February 17, 2008
in Tutorials
. 72 Comments

**UPDATE
This tutorial has been updated:
Updates:
1) Removed InteractiveScene3DEvent and replaced it with standard MouseEvents
2) Updated to use papervision's BasicView.as class

view-update

Today we're going to learn how to handle more advanced interactivity. We'll be making something like this:

Click on a face of the cube to zoom into it. Click it again to make the cube spin again.

So, in this tutorial I'm going to show you exactly how to work out which material has been clicked on the cube and act accordingly.

If you haven't read it already, I strongly suggest that you read the Basic Interactivity tutorial first or you'll probably miss something.

Ok, so on to the code.

Firstly we'll want six materials to apply to each face of the cube. Here are mine, although you can create whatever materials you like:

PLAIN TEXT
Actionscript:
  1. private var frontMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
  2.         private var backMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/back.jpg");
  3.         private var leftMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/left.jpg");
  4.         private var rightMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/right.jpg");
  5.         private var topMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/top.jpg");
  6.         private var bottomMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/bottom.jpg");

So, in this code I'm just loading six images from my server to use as each face.

Also, add the following declaration beneath the texture declarations to hold our Cube object:

PLAIN TEXT
Actionscript:
  1. private var cube:Cube;

Now we need to set up the 3d initiation code. In this code we will firstly set all of our materials as interactive, and then give each of our materials a name. This is VERY important to be able to easily find out which material has been clicked. If we didn't give each material a name then we wouldn't be able to easily work out which face has been clicked.

So, add the following code to your init3d() function:

PLAIN TEXT
Actionscript:
  1. override protected function init3d():void {
  2.             // We need to be able to identify each side. We'll do this
  3.             // by asssigning names to each material. During this process
  4.             // we'll also make the materials interactive.
  5.             frontMaterial.interactive = true;
  6.             frontMaterial.name = "front";
  7.             backMaterial.interactive = true;
  8.             backMaterial.name = "back";
  9.             leftMaterial.interactive = true;
  10.             leftMaterial.name = "left";
  11.             rightMaterial.interactive = true;
  12.             rightMaterial.name = "right";
  13.             topMaterial.interactive = true;
  14.             topMaterial.name = "top";
  15.             bottomMaterial.interactive = true;
  16.             bottomMaterial.name = "bottom";
  17.             // ---------------------------------------------
  18.            
  19.             cube = new Cube(new MaterialsList( {
  20.                 front: frontMaterial,
  21.                 back: backMaterial,
  22.                 left: leftMaterial,
  23.                 right: rightMaterial,
  24.                 top: topMaterial,
  25.                 bottom: bottomMaterial
  26.                 } ), 500, 500, 500, 3, 3, 3);
  27.             cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);
  28.             default_scene.addChild(cube);
  29.         }

So, In this code, we've set each material as interactive, given each one a sensible name, and initialised our cube with the materials assigned to the correct faces.

We then add an event listener to trigger the "onPress" event when the cube is clicked, then finally we add the cube to the scene.

We've now got a cube with six materials on it listening for a click event.

Now, the code which will let us work out which face has been clicked:

PLAIN TEXT
Actionscript:
  1. private function onPress( e:InteractiveScene3DEvent ):void {
  2.     switch(e.face3d.material.name) {
  3.         case "front":
  4.             // This code will be run when the front face is clicked
  5.         break;
  6.         case "back":
  7.             // This code will be run when the back face is clicked
  8.         break;
  9.         case "left":
  10.             // This code will be run when the left face is clicked
  11.         break;
  12.         case "right":
  13.             // This code will be run when the right face is clicked
  14.         break;
  15.         case "top":
  16.             // This code will be run when the top face is clicked
  17.         break;
  18.         case "bottom":
  19.             // This code will be run when the bottom face is clicked
  20.         break;
  21.     }
  22. }

Pretty self explanitary. The "e" variable in this code holds lots of data about the click event, including which material has been clicked, so, because we know which material is on each face, we can tell by the materials name which face has been clicked!

With a little bit of code, you can make a nice spinning cube gallery like the example above:

Here is my final code, have fun!

PLAIN TEXT
Actionscript:
  1. package  {
  2.    
  3.     import flash.display.DisplayObject;
  4.     import org.papervision3d.materials.BitmapFileMaterial;
  5.     import org.papervision3d.materials.utils.MaterialsList;
  6.     import org.papervision3d.events.InteractiveScene3DEvent;
  7.     import org.papervision3d.objects.primitives.Cube;
  8.    
  9.     public class Main extends PaperBase {
  10.        
  11.         private var frontMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
  12.         private var backMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/back.jpg");
  13.         private var leftMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/left.jpg");
  14.         private var rightMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/right.jpg");
  15.         private var topMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/top.jpg");
  16.         private var bottomMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/bottom.jpg");
  17.        
  18.         private var targetrotationX:Number = 0;
  19.         private var targetrotationY:Number = 0;
  20.         private var targetrotationZ:Number = 0;
  21.        
  22.         private var tweening:Boolean = false;
  23.        
  24.         private var cube:Cube;
  25.        
  26.         public function Main() {
  27.             init(400, 400);
  28.         }
  29.        
  30.         override protected function init3d():void {
  31.             // We need to be able to identify each side. We'll do this
  32.             // by asssigning names to each material. During this process
  33.             // we'll also make the materials interactive.
  34.             frontMaterial.interactive = true;
  35.             frontMaterial.name = "front";
  36.             backMaterial.interactive = true;
  37.             backMaterial.name = "back";
  38.             leftMaterial.interactive = true;
  39.             leftMaterial.name = "left";
  40.             rightMaterial.interactive = true;
  41.             rightMaterial.name = "right";
  42.             topMaterial.interactive = true;
  43.             topMaterial.name = "top";
  44.             bottomMaterial.interactive = true;
  45.             bottomMaterial.name = "bottom";
  46.             // ---------------------------------------------
  47.            
  48.             cube = new Cube(new MaterialsList( {
  49.                 front: frontMaterial,
  50.                 back: backMaterial,
  51.                 left: leftMaterial,
  52.                 right: rightMaterial,
  53.                 top: topMaterial,
  54.                 bottom: bottomMaterial
  55.                 } ), 500, 500, 500, 3, 3, 3);
  56.             // Listen for the click:
  57.             cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);
  58.             // Add to scene:
  59.             default_scene.addChild(cube);
  60.         }
  61.        
  62.         private function onPress( e:InteractiveScene3DEvent ):void {
  63.             // If the cube has been moved to the front:
  64.             if (tweening) {
  65.                 // Let it rotate again
  66.                 tweening = false;
  67.             }else {
  68.                 // Find which rotation we need to be able to see
  69.                 // the face image:
  70.                 switch(e.face3d.material.name) {
  71.                     case "front":
  72.                         targetrotationX = 0;
  73.                         targetrotationY = 180;
  74.                         targetrotationZ = 0;
  75.                         tweening = true;
  76.                     break;
  77.                     case "back":
  78.                         targetrotationX = 0;
  79.                         targetrotationY = 0;
  80.                         targetrotationZ = 0;
  81.                         tweening = true;
  82.                     break;
  83.                     case "left":
  84.                         targetrotationX = 0;
  85.                         targetrotationY = -90;
  86.                         targetrotationZ = 0;
  87.                         tweening = true;
  88.                     break;
  89.                     case "right":
  90.                         targetrotationX = 0;
  91.                         targetrotationY = 90;
  92.                         targetrotationZ = 0;
  93.                         tweening = true;
  94.                     break;
  95.                     case "top":
  96.                         targetrotationX = 90;
  97.                         targetrotationY = 0;
  98.                         targetrotationZ = 0;
  99.                         tweening = true;
  100.                     break;
  101.                     case "bottom":
  102.                         targetrotationX = -90;
  103.                         targetrotationY = 0;
  104.                         targetrotationZ = 180;
  105.                         tweening = true;
  106.                     break;
  107.                 }
  108.             }
  109.         }
  110.        
  111.         override protected function processFrame():void {
  112.             if (tweening) {
  113.                 // If a face has been clicked
  114.                 if (default_camera.zoom <6.8) {
  115.                     // If the camera isn't zoomed enough then zoom in a bit more:
  116.                     default_camera.zoom += Math.sqrt(6.8-default_camera.zoom)/5;
  117.                 }
  118.                
  119.                 // Test each rotation and rotate it towards the target rotation:
  120.                 // X axis:
  121.                 if (cube.rotationX <targetrotationX) {
  122.                     cube.rotationX += Math.sqrt(targetrotationX-cube.rotationX);
  123.                     cube.rotationX = Math.round(cube.rotationX);
  124.                 }else if (cube.rotationX> targetrotationX) {
  125.                     cube.rotationX -= Math.sqrt(cube.rotationX-targetrotationX);
  126.                     cube.rotationX = Math.round(cube.rotationX);
  127.                 }
  128.                 // Y axis:
  129.                 if (cube.rotationY <targetrotationY) {
  130.                     cube.rotationY += Math.sqrt(targetrotationY-cube.rotationY);
  131.                     cube.rotationY = Math.round(cube.rotationY);
  132.                 }else if (cube.rotationY> targetrotationY) {
  133.                     cube.rotationY -= Math.sqrt(cube.rotationY-targetrotationY);
  134.                     cube.rotationY = Math.round(cube.rotationY);
  135.                 }
  136.                 // Z axis:
  137.                 if (cube.rotationZ <targetrotationZ) {
  138.                     cube.rotationZ += Math.sqrt(targetrotationZ-cube.rotationZ);
  139.                     cube.rotationZ = Math.round(cube.rotationZ);
  140.                 }else if (cube.rotationZ> targetrotationZ) {
  141.                     cube.rotationZ -= Math.sqrt(cube.rotationZ-targetrotationZ);
  142.                     cube.rotationZ = Math.round(cube.rotationZ);
  143.                 }
  144.             }else {
  145.                 // If the camera is zoomed in, it shouldn't be now
  146.                 if (default_camera.zoom> 2) {
  147.                     // So zoom out a bit.
  148.                     default_camera.zoom -= Math.sqrt(default_camera.zoom-2)/5;
  149.                 }
  150.                
  151.                 // Rotate the cube a bit:
  152.                 cube.rotationX += 2;
  153.                 cube.rotationY += 2;
  154.                
  155.                 // Make sure that we dont "wind up" the rotation
  156.                 if (cube.rotationX>= 360) cube.rotationX = 0;
  157.                 if (cube.rotationY>= 360) cube.rotationY = 0;
  158.             }
  159.         }
  160.     }
  161. }

Post to Twitter Post to Delicious Delicious Post to Digg Digg This Post Post to Facebook Facebook Post to StumbleUpon Stumble This Post


Follow papervision2 on Twitter

Flash and the City banner
2010 Flash And The City Speaker

RSS Feed