10. Advanced Interactivity
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:
-
private var frontMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
-
private var backMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/back.jpg");
-
private var leftMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/left.jpg");
-
private var rightMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/right.jpg");
-
private var topMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/top.jpg");
-
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:
-
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:
-
override protected function init3d():void {
-
// We need to be able to identify each side. We'll do this
-
// by asssigning names to each material. During this process
-
// we'll also make the materials interactive.
-
frontMaterial.interactive = true;
-
frontMaterial.name = "front";
-
backMaterial.interactive = true;
-
backMaterial.name = "back";
-
leftMaterial.interactive = true;
-
leftMaterial.name = "left";
-
rightMaterial.interactive = true;
-
rightMaterial.name = "right";
-
topMaterial.interactive = true;
-
topMaterial.name = "top";
-
bottomMaterial.interactive = true;
-
bottomMaterial.name = "bottom";
-
// ---------------------------------------------
-
-
cube = new Cube(new MaterialsList( {
-
front: frontMaterial,
-
back: backMaterial,
-
left: leftMaterial,
-
right: rightMaterial,
-
top: topMaterial,
-
bottom: bottomMaterial
-
} ), 500, 500, 500, 3, 3, 3);
-
cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);
-
default_scene.addChild(cube);
-
}
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:
-
private function onPress( e:InteractiveScene3DEvent ):void {
-
switch(e.face3d.material.name) {
-
case "front":
-
// This code will be run when the front face is clicked
-
break;
-
case "back":
-
// This code will be run when the back face is clicked
-
break;
-
case "left":
-
// This code will be run when the left face is clicked
-
break;
-
case "right":
-
// This code will be run when the right face is clicked
-
break;
-
case "top":
-
// This code will be run when the top face is clicked
-
break;
-
case "bottom":
-
// This code will be run when the bottom face is clicked
-
break;
-
}
-
}
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!
-
package {
-
-
import flash.display.DisplayObject;
-
import org.papervision3d.materials.BitmapFileMaterial;
-
import org.papervision3d.materials.utils.MaterialsList;
-
import org.papervision3d.events.InteractiveScene3DEvent;
-
import org.papervision3d.objects.primitives.Cube;
-
-
public class Main extends PaperBase {
-
-
private var frontMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
-
private var backMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/back.jpg");
-
private var leftMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/left.jpg");
-
private var rightMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/right.jpg");
-
private var topMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/top.jpg");
-
private var bottomMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/bottom.jpg");
-
-
private var targetrotationX:Number = 0;
-
private var targetrotationY:Number = 0;
-
private var targetrotationZ:Number = 0;
-
-
private var tweening:Boolean = false;
-
-
private var cube:Cube;
-
-
public function Main() {
-
init(400, 400);
-
}
-
-
override protected function init3d():void {
-
// We need to be able to identify each side. We'll do this
-
// by asssigning names to each material. During this process
-
// we'll also make the materials interactive.
-
frontMaterial.interactive = true;
-
frontMaterial.name = "front";
-
backMaterial.interactive = true;
-
backMaterial.name = "back";
-
leftMaterial.interactive = true;
-
leftMaterial.name = "left";
-
rightMaterial.interactive = true;
-
rightMaterial.name = "right";
-
topMaterial.interactive = true;
-
topMaterial.name = "top";
-
bottomMaterial.interactive = true;
-
bottomMaterial.name = "bottom";
-
// ---------------------------------------------
-
-
cube = new Cube(new MaterialsList( {
-
front: frontMaterial,
-
back: backMaterial,
-
left: leftMaterial,
-
right: rightMaterial,
-
top: topMaterial,
-
bottom: bottomMaterial
-
} ), 500, 500, 500, 3, 3, 3);
-
// Listen for the click:
-
cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);
-
// Add to scene:
-
default_scene.addChild(cube);
-
}
-
-
private function onPress( e:InteractiveScene3DEvent ):void {
-
// If the cube has been moved to the front:
-
if (tweening) {
-
// Let it rotate again
-
tweening = false;
-
}else {
-
// Find which rotation we need to be able to see
-
// the face image:
-
switch(e.face3d.material.name) {
-
case "front":
-
targetrotationX = 0;
-
targetrotationY = 180;
-
targetrotationZ = 0;
-
tweening = true;
-
break;
-
case "back":
-
targetrotationX = 0;
-
targetrotationY = 0;
-
targetrotationZ = 0;
-
tweening = true;
-
break;
-
case "left":
-
targetrotationX = 0;
-
targetrotationY = -90;
-
targetrotationZ = 0;
-
tweening = true;
-
break;
-
case "right":
-
targetrotationX = 0;
-
targetrotationY = 90;
-
targetrotationZ = 0;
-
tweening = true;
-
break;
-
case "top":
-
targetrotationX = 90;
-
targetrotationY = 0;
-
targetrotationZ = 0;
-
tweening = true;
-
break;
-
case "bottom":
-
targetrotationX = -90;
-
targetrotationY = 0;
-
targetrotationZ = 180;
-
tweening = true;
-
break;
-
}
-
}
-
}
-
-
override protected function processFrame():void {
-
if (tweening) {
-
// If a face has been clicked
-
if (default_camera.zoom <6.8) {
-
// If the camera isn't zoomed enough then zoom in a bit more:
-
default_camera.zoom += Math.sqrt(6.8-default_camera.zoom)/5;
-
}
-
-
// Test each rotation and rotate it towards the target rotation:
-
// X axis:
-
if (cube.rotationX <targetrotationX) {
-
cube.rotationX += Math.sqrt(targetrotationX-cube.rotationX);
-
cube.rotationX = Math.round(cube.rotationX);
-
}else if (cube.rotationX> targetrotationX) {
-
cube.rotationX -= Math.sqrt(cube.rotationX-targetrotationX);
-
cube.rotationX = Math.round(cube.rotationX);
-
}
-
// Y axis:
-
if (cube.rotationY <targetrotationY) {
-
cube.rotationY += Math.sqrt(targetrotationY-cube.rotationY);
-
cube.rotationY = Math.round(cube.rotationY);
-
}else if (cube.rotationY> targetrotationY) {
-
cube.rotationY -= Math.sqrt(cube.rotationY-targetrotationY);
-
cube.rotationY = Math.round(cube.rotationY);
-
}
-
// Z axis:
-
if (cube.rotationZ <targetrotationZ) {
-
cube.rotationZ += Math.sqrt(targetrotationZ-cube.rotationZ);
-
cube.rotationZ = Math.round(cube.rotationZ);
-
}else if (cube.rotationZ> targetrotationZ) {
-
cube.rotationZ -= Math.sqrt(cube.rotationZ-targetrotationZ);
-
cube.rotationZ = Math.round(cube.rotationZ);
-
}
-
}else {
-
// If the camera is zoomed in, it shouldn't be now
-
if (default_camera.zoom> 2) {
-
// So zoom out a bit.
-
default_camera.zoom -= Math.sqrt(default_camera.zoom-2)/5;
-
}
-
-
// Rotate the cube a bit:
-
cube.rotationX += 2;
-
cube.rotationY += 2;
-
-
// Make sure that we dont "wind up" the rotation
-
if (cube.rotationX>= 360) cube.rotationX = 0;
-
if (cube.rotationY>= 360) cube.rotationY = 0;
-
}
-
}
-
}
-
}
37 Comments




Hey Luke,
this example is quite nice. But to load a complete movieClip (which contains buttons) into a pane (instead of a graphic) is not possible, is it? I would like just to use Buttons _in_ these movieClips to do sth. And not the pane it self...
Hmm.. Perhaps if I know the coordinates of the buttons, I can create a matrix with x, y coordinates to find out which button is clicked. It is quite complicated. Do you see an other way?
Mike
Hey ya,
Mouse events are just not working for me, any idea?
The cube rotes but does not react on me. This is the same for the basic interactivity demo.
Christian
@Mike,
I think there is a way which involves placing the movie clip over the viewport with a very low alpha level, then grabbing the coordinates of the mouse on the texture on mouse over, and moving the movieclip so that it's positioned underneath the mouse correctly. I'll try to find the example that I saw..
@Christian,
What version of Flash Player are you using? Does the interactivity work when you view the movie directly from your browser (Try navigating to http://papervision2.com/wp-content/advancedinteractive.swf)
-Luke
Hi Luke,
that sounds quite interesting. Would be really cool if you can post that example. Currently I am using a callback within the movieClips I load into the plane, which is called by init2d() and creates an exact copy of the items which should be clickable on the screen, when the plane of the cube is in view. It is working ok. But this mouse thing seems to be more elegant.
I am looking forward to your post.
Mike
Hello,
for use a movieclip i do :
var clip:Myclip = new Myclip()
var material:MovieMaterial = new MovieMaterial( clip, true, true )
material.interactive = true
material.oneSide = false
material.smooth = true
//----------------------------------------------------
plane = new Plane( material, 250, 250, 10, 10 )
clip.bouton.addEventListener( MouseEvent.ROLL_OVER, onOver );
clip.bouton.addEventListener( MouseEvent.ROLL_OUT, onOut );
scene.addChild( plane )
But the rollOver on Button in Movieclip is not perfectly issue.
Try it and tell me if its fine for you
Ps: sorry for my language im french
Hi toojee,
I think I understand what you mean and I'll be showing you how to do this in my next tutorial!
Thanks for visiting!
-Luke
Thanks you Luke!
With that, we will can do a website in 3d!
I was wondering how I could make the the box slightly transparent. I know that it probably has something to do with the MaterialObject3D class but I can't figure it out. Is it even possible?
The tutorials are really terrific! Thanks!
Hello,
I'm trying to make buttons outside of the model to control the cube but nothing seems to be working can you take a look at it? I'm getting this error:
1120: Access of undefined property e.
heres the code:
b1.addEventListener('click', b1click);
function b1click(event:Event):void {
// If the cube has been moved to the front:
if (tweening) {
// Let it rotate again
tweening = false;
} else {
// Find which rotation we need to be able to see
// the face image:
switch (e.face3d.material.name) {
case "front" :
targetrotationX = 0;
targetrotationY = 180;
targetrotationZ = 0;
tweening = true;
break;
}
}
Hi Adam,
Change the line
to
Hope this helps!
-Luke
Thanks! for the response, but now I'm getting this error:
1119: Access of possibly undefined property face3d through a reference with static type flash.events:Event.
Hello !
Thank you for this website and for the tutorials.
I'm trying to add interactivity on a simple cube, like you are doing in this tutorial, but I can't catch any event on my cube.
Here is my code : (all the code in this class, I have no "PaperBase Class" like you)
(let's try to use the CODE tag, you can edit my post if the tag is wrong)