10. Advanced Interactivity

Published

on February 17, 2008

. 72 Comments Tags: BitmapFileMaterial, InteractiveScene3DEvent, Interactivity, MaterialsList, MovieMaterial, PaperBase, Papervision 3D, Papervision Cube, Papervision Tutorial.

**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

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:

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:

PLAIN TEXT

Actionscript:

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:

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:

PLAIN TEXT

Actionscript:

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!

PLAIN TEXT

Actionscript:

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;
}
}
}
}

Delicious Digg This Post Facebook Stumble This Post

72 Responses to “10. Advanced Interactivity”

Feed for this Entry Trackback Address

1 jmind
October 29, 2008 at 9:43 pm

thanks to Luke and thanks to ttubin for solving the bug. I could’nt really figure it out by myself

sayd that, what about a panorama3D tutorial?
2 Pedro
January 23, 2009 at 8:28 pm

I’m just getting used to PV and while looking at this file, apparently the Main.as has some errors, I tried fixing them but was not succesful. I’ d like to know if there’s a way to fix it. Thanks
3 Dave
January 31, 2009 at 11:16 pm

I have completed this tutorial successfully, although I did have to alter some of the values of the targetrotation faces, because 2 of the faces were showing wrong sides when clicked, and they were upside down. Took me about 10 min to figure out what the proper values should be.

I have a question though. I am using the PaperBase.as basis with this, I think? If it even imports those settings? Not sure.

Anyways. I want to know if it is possible to make the camera position different, and what the code to do that would be. When I run this movie, the cube goes waayy into the distance, and I have to zoom like 400% in the flash player to see it properly.

Got a link to altering camera position/movement? Or code?
4 johnn
March 4, 2009 at 11:31 pm

PaperBase? I think Im using a newer version, seems to me that the biggest problem Im running into is refrencing all the classes
5 asdkjfew oaw ejtowa
March 15, 2009 at 10:26 am

Here is the CORRECTED targetrotation numbers for the ‘top’ and ‘bottom’ materials.. as Dave stated, those 2 faces were mixed up and upside down:

case “top”:
targetrotationX = -90;
targetrotationY = 0;
targetrotationZ = 0;
tweening = true;
break;
case “bottom”:
targetrotationX = 90;
targetrotationY = 0;
targetrotationZ = 180;
tweening = true;
break;
6 asdkjfew oaw ejtowa
March 15, 2009 at 10:44 am

In the ‘if’ statement, try changing the ‘6.8′ in both places to ‘60.8′. This is for the zoomout when not clicked.

and in the ‘else’, change the ‘2′ in both places to ‘30′. This is for the zoom in when clicked.
7 asdkjfew oaw ejtowa
March 16, 2009 at 1:26 am

Hello admin,

Can you please remove that post where i started saying “My last post came out incorrectly and it won’t let me delete the..” That code snippet is not correct, there was some sort of pasting error.

The post where i start off saying “Here is the CORRECTED targetrotation numbers for the ‘top’ and ‘bottom’ materials..” is in fact correct ;)
8 Peter
April 2, 2009 at 5:34 pm

Thank you so much for the awesome tutorial!

I’m a completely new to PV3D, and I have a rather stupid question.
When I publish the swf file to my html website the cube and the interactivity works, but none of the images appear. Can you let me know if there’s anything special I need to do?

Thanks again!
9 Maciek
April 7, 2009 at 10:09 am

I tried to add interactivity to your Cow from earlier tutorial but unfortunately I realised that only objects with explicit interactivity of material can work.
Is it possible to add mouse events to other 3D objects?

Kind regards,
Maciek
10 koxinaile
May 4, 2009 at 3:44 pm

hi!
and thank you for this tutorial!
i would like to ask you what “<” means ?
because when I try to publish my swf, I have an error on it
which is saying : (excuse me but it is in french)
“1084: Erreur de syntaxe : rightparen est attendu devant semicolon.”
and
“1084: Erreur de syntaxe : semicolon est attendu devant rightparen.”
“1084: Erreur de syntaxe : rightparen est attendu devant semicolon.”
“1008: Attribut non valide.”
“1084: Erreur de syntaxe : identifier est attendu devant rightparen.”
etc…
there are 17 errors like that…
did I do something wrong?
thank you for your answer.
11 koxinaile
May 4, 2009 at 3:47 pm

sorry it’s me again

when i post my message “<” appeared !
and it was oncoding on my flash
I changed that and it’s ok now

sorry again… and lot of thanks !
12 randygland
May 6, 2009 at 2:31 pm

very nice tutorial,

it’s been mentioned in other posts but bear in mind this guy’s blog doesn’t like signs, and replaces them with unicode.

also 6.8 and 2 should be replaced with 60.8 and 30 in the zooming logic, and the top and bottom cases are wrong..

anyway, i’m loving learning pv3d with this series of tutorials, so very well done and many thanks :D
13 batchas
June 28, 2009 at 3:52 pm

hello. thanx for sharing!
when I clicked on any side noting happens.
the listener dis not working…
cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);

thanx for any help
14 soxx
July 27, 2009 at 11:37 pm

hello,
looks great. unfortunately i cant get this running.. i allready tried to get help in german flash forums but no one could help.. as i can see here is allmost no one who didnt manage to run it properly.. maybe someone clould look at my script/file.. or more easy send me a file?
im triing this for so long and i realy need this for my website navigation..
thanx for any responding
15 Peter
September 1, 2009 at 3:25 pm

You may also need to set:

viewport.interactive = true;

to make your press event working.
16 Jenny
September 3, 2009 at 7:03 pm

Could someone zip up a working version of the files for this and post it here so I can compare them with mine? Thanks!
17 Chris
September 26, 2009 at 10:17 am

Hi there,
thanx for this great tutorial! It runs as it should, but maybe you can help me to solve another problem:

I want to load the final cube.swf via loader-class into another swf (interface.swf), created in Flash CS3 Pro. If I test this swf in Flash, it loads the cube as wanted. In a Flash-Projector, it works too. But with the local Flashplayer or online, the cube seems not to get loaded. If I try to load a JPG instead, it works fine.

Any ideas?
Thank you very much, greetings from Germany,

Chris
18 Chris
September 26, 2009 at 11:56 am

Problem solved! The interface.fla / swf has to be stored inside the cube.swf-folder. But theres another problem appearing now: If i reload the cube over and over using a loader-button inside the interface.swf, the cube gets slower and slower with each reload. Ideas?

THX,
Chris
19 ju
November 13, 2009 at 2:58 pm

I can get the cube loaded, with images, but when I click on it it dissapears :(
20 Nils N. H.
November 22, 2009 at 2:29 pm

I did the tutorial, and compared the code to the best of my ability. The cube isn’t quite performing as the example.

On click it spins around lovely, but sometimes it ends up zooming on a corner. Or when I click the “green side” it spins around to the blue side…

Anyhow, I’m glad I got the rotating cube. Thanks for the tutorial.

*Inching towards enlightenment* ^^
21 Charlie
November 27, 2009 at 3:35 am

Hey Everyone,

This tutorial has been updated.
http://papervision2.com/advanced-interactivity/

It includes a fix for targeting the proper panel of the cube when clicking the top / bottom sides.

Charlie
22 spin
December 8, 2009 at 2:08 am

Thank’s (–)(__)