7. Basic Mouse Interaction

Published

on January 26, 2008

In this tutorial, I'll simply show you how to do some basic movement in the scene by using the mouse.

This is the result:
[kml_flashembed movie="/wp-content/downloads/movement1.swf" height="300" width="400" fversion="9" useexpressinstall="true" /]

Ugly, but simple. It's so simple that I'm just going to post the source code.. If you've been following my last tutorials, and you read the comments around the three lines of code in "ProcessFrame" then you should understand it.

PLAIN TEXT

Actionscript:

package {
import PaperBase;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.parsers.Collada;
public class Main extends PaperBase {
public var cow:DisplayObject3D;
public var distance:Number = 1000; //Distance the camera should be from the model
public function Main() {
init();
}
override protected function init3d():void {
cow = new Collada("http://papervision2.com/wp-content/downloads/dae/cow.dae");
cow.moveDown(100);
cow.scale = 3;
default_scene.addChild(cow);
}
override protected function processFrame():void {
// The next line is a bit of a mouthful, but it's quite simple really.
// It just gets the Y position of your mouse, and sets the camera.y to a
// value between -800 and 800, depending on the Y position of your mouse
// (If mouseY = 0 then camera.y = 800. If mouseY = stage.height, camera.y = -800)
default_camera.y = -(((mouseY - (stage.height / 2)) / stage.height) * 1600);
// We don't want the camera to move further away from the model, so we do this:
default_camera.moveForward(default_camera.distanceTo(cow) - distance);
// We now want to rotate the object depending on
// the Xmouse position. This is really simple.
cow.rotationY = -((mouseX / stage.width) * 360) //Rotation
// NOTE: This will only work if you only have one object in your scene.
// I'll write a more advanced movement tutorial soon
}
}
}

If you're seeing just white space because you're using the Flash IDE please use this as your final code:

PLAIN TEXT

Actionscript:

package
{
import PaperBase;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.parsers.Collada;
public class Main extends PaperBase
{
public var cow:DisplayObject3D;
public var distance:Number = 1000; //Distance the camera should be from the model
protected var sceneWidth:Number;
protected var sceneHeight:Number;
public function Main()
{
sceneWidth = stage.stageWidth
sceneHeight = stage.stageHeight;
init(sceneWidth,sceneHeight);
}
override protected function init3d():void
{
cow = new Collada("http://papervision2.com/wp-content/downloads/dae/cow.dae");
cow.moveDown(300);
cow.scale = 2;
default_scene.addChild(cow);
}
override protected function processFrame():void {
// The next line is a bit of a mouthful, but it's quite simple really.
// It just gets the Y position of your mouse, and sets the camera.y to a
// value between -800 and 800, depending on the Y position of your mouse
// (If mouseY = 0 then camera.y = 800. If mouseY = stage.height, camera.y = -800)
default_camera.y = -(((mouseY - (sceneWidth / 2)) / sceneHeight) * 1600);
// We don't want the camera to move further away from the model, so we do this:
default_camera.moveForward(default_camera.distanceTo(cow) - distance);
// We now want to rotate the object depending on
// the Xmouse position. This is really simple.
cow.rotationY = -((mouseX / sceneWidth) * 360) //Rotation
// NOTE: This will only work if you only have one object in your scene.
// I'll write a more advanced movement tutorial soon
}
}
}

**EDITED**

2 sets of code for this one. If you're using the Flash IDE please use the 2nd version.

32 Responses to “7. Basic Mouse Interaction”

Feed for this Entry Trackback Address

1 Alek
January 28, 2008 at 10:27 am

Luke I see a white screen, there is something that I’m missing?
Thank you very much! I’m following your blog, it is so helpfull.

Alek
2 Mike
February 6, 2008 at 4:46 pm

Hi,

I changed it to fit for Flash CS3, as well:

package {

import base.PaperBase;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.parsers.Collada;

public class CowExample extends PaperBase {

public var cow:DisplayObject3D;
public var distance:Number = 1000; //Distance the camera should be from the model
public var $currentRoot;

public function Main($root) {
this.$currentRoot = $root;
init($root);
}

override protected function init3d():void {
cow = new Collada(”http://papervision2.com/wp-content/downloads/dae/cow.dae”);
cow.moveDown(100);
cow.scale = 3;
cow.pitch(-30);
default_scene.addChild(cow);
}

override protected function processFrame():void
{

// The next line is a bit of a mouthful, but it’s quite simple really.
// It just gets the Y position of your mouse, and sets the camera.y to a
// value between -800 and 800, depending on the Y position of your mouse
// (If mouseY = 0 then camera.y = 800. If mouseY = stage.height, camera.y = -800)
default_camera.y = -(((this.$currentRoot.mouseY - (this.$currentRoot.height / 2)) / this.$currentRoot.height) * 1600);
// We don’t want the camera to move further away from the model, so we do this:
default_camera.moveForward(default_camera.distanceTo(cow) - distance);
// We now want to rotate the object depending on
// the Xmouse position. This is really simple.
cow.rotationY = -((this.$currentRoot.mouseX / this.$currentRoot.width) * 360) //Rotation
// NOTE: This will only work if you only have one object in your scene.
// I’ll write a more advanced movement tutorial soon
}

}

}

Mike
3 Manuel
February 8, 2008 at 4:49 pm

I have a white screen, too. The same as in tutorial 6. Can you explain what I have to write in my code when I have downloaded the model and texure files?
I`m an absolutely noob
Sorry for my English. I`m from Germany

Manuel
4 Asmodeus
February 15, 2008 at 2:02 pm

Hi Luke,

like Alek and Manuel i also have a whit screen :/ Why is that ? Did i miss some configurations steps ?
5 minipower
February 28, 2008 at 8:07 am

Hi to all! i am NOT a programmer or someone important, i am minipower but…in the first tryout i had white screen like others then.. i resolved copying the plain text code version and in flashdevelop it worked fine!!!

Maybe some kind of error writing comments or other
6 Robin
February 28, 2008 at 1:44 pm

I have a white screen too, but only if the dimensions are less then 800×600…
7 Ramiro Araujo
February 29, 2008 at 7:05 pm

Im getting a blank screen too, but if I test again with Ctrl + enter (simulates download) it gets it right. Im sure its not a code problem. Will probably work ok online.
8 Juan
March 4, 2008 at 3:24 pm

Hi, I have found a solution for CS3

package {
import PaperBase;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.parsers.Collada;

public class Main extends PaperBase {
public var cow:DisplayObject3D;
public var distance:Number = 1000;

public function Main() {
init();
}

override protected function init3d():void {
cow = new Collada(”http://papervision2.com/wp-content/downloads/dae/cow.dae”);
cow.moveDown(100);
cow.scale = 3;
cow.pitch(-30);
default_scene.addChild(cow);
}
override protected function processFrame():void {
default_camera.y = -(((this.mouseY - (this.stage.stageHeight / 2)) / this.stage.stageHeight) * 1600);
default_camera.moveForward(default_camera.distanceTo(cow) - distance);
cow.rotationY = -((this.mouseX/this.stage.stageWidth)*360) //Rotation
}
}
}

the stage width and height in Flash CS3 is get by this.stage.stageWidth and this.stage.stageHeight
9 Matt m
March 11, 2008 at 3:21 pm

That works in flex 3, also:

change all stage.height to stage.stageHeight and stage.width to stage.stageWidth
10 webmaster
March 15, 2008 at 9:21 pm

Yes It does work in Flex 3…
probably simple question: is the reason the cow is at the lower right of the screen always because of the coordinates in the orignal .dae file?
11 kea
March 22, 2008 at 4:39 pm

First, I would like to thank you for this great work ! Papervision and flashdevelop look like great tools, but they definitely lack good tutorials. I can’t tell you how grateful I am…
However, I feel realy stupid, as I am stuck with a problem I can’t solve. It is probably simple, but I have to admit I am completely lost.
Everything is working fine with the tutorials. I’ve adapted this one to my object (a simple cube, instead of the cow…) When I test it, it does work fine (yeah ! I’m in 3D ! Awesome !)
Unfortunately, my ultimate goal is to put it on a website. Problem is : as soon as I move my swf file (on another folder or on my server), it doesn’t work anymore.
Even if I move also the .dae, the texture, the .as files and the obj folder. Even when I change all paths (relative or absolute, even in the XML file…what is this one for, anyway ?)
I’ve been trying for a few hours now, but no luck. I think I’m gona cry !
So in short : what files will I need to upload on my server ? And do you know how to solve what seems to be a path problem ?

Thank you again for the good work, anyway.
12 Hokusai_spain
April 4, 2008 at 4:41 pm

Kea, maybe your problem is the sandbox security model. A explains about sandbox: work.whoischarles.com/files/flash_player_9_security_model.pdf
13 cih
June 8, 2008 at 11:50 pm

Thank you for the great tutorials, we are expecting more : )

a question: I have a project where the user can create a painting and then attach the painting to the 3D model as a texture. I can update the texture png while the swf is still running, but cannot update the texture on the model. Removing and adding “cow” child does not update the texture. How can I remove the “cow var” totally to be able to add later?

Thanks a lot!
14 jasonw
July 5, 2008 at 5:07 am

My cow doesn’t stay locked to the center of the screen when I move my mouse vertically. The cow moves up and down vertically. The rotation works fine, I just can’t figure out why the cow won’t stay centered when I move my mouse along the Y axis.

Any ideas?
15 Jay
August 3, 2008 at 7:35 am

@jasonw:

Probably the codebase has changed.
Using camera.lookAt( cow ) inside the processFrame() method fixes it for me.
16 Fraanske
September 3, 2008 at 5:11 pm

Great tut, but I’d like to know some less basic techniques. With Great White out in the water, we get a whole set of new goodies such as shaders, but mouse interaction has become a bit more difficult. The only tut that gives me 100% what I need, is horribly complex (as in “too time consuming to deploy quickly”). I’d like to know a technique that was more like 1.7, when you could attach filters and EventHandlers to a 3DObject’s internal container sprite. I’d like to know how to set EventHandlers on objects directly, instead of handling MouseEvents on the Stage. Still, I like your tut to display a single object: it’s perfect for that purpose!
17 breeze79
September 9, 2008 at 7:33 pm

default_camera.moveForward(default_camera.distanceTo(cow) - distance);
cow.rotationY = -((mouseX / stage.width) * 360) //Rotation

I too get the white screen. However, if you comment those two lines you can see the cow and it will move up and down.
I don’t know why the lines above gives white screen.. maybe something with the calculation???
18 atadami
September 15, 2008 at 1:42 am

i’m getting a blank white screen too. even on this tutorial page at the top the example is blank.
19 cnew
September 15, 2008 at 9:07 pm

Make sure that you don’t have the yaw going or you end up with the white screen.
20 shady
September 16, 2008 at 2:12 am

在flash CS3里,场景宽高应该用this.stage.stageWidth及this.stage.stageHeight获取,这个跟flex是不同的~
21 Bell
October 1, 2008 at 5:52 am

Hi luke,
Thanks a lot for these tutorials. They really help me get into PV3D more.
Now I am trying other interations like clicking mouse on collada objects.
But I suffered some problems…can i ask this question here?
I added these lines in the code of this example:

import org.papervision3d.events.InteractiveScene3DEvent;
[...]
cow.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress );
[...]
private function onPress( e:InteractiveScene3DEvent ):void { trace(”clicked!”); }

The PaperBase.as has been updated to the newest one.
I got no error during compile and runtime, but neither any responses when i clicked the cow.
Should I turn on the property of interactive options like [ourMaterial.interactive = true;]?
Now I can do OBJECT_PRESS on plane and cube object well, but how does that work on collada?
thx for reading.
22 Rain
October 16, 2008 at 12:20 pm

Hello!

I have a question: How do i publish the swf file in other place?

Now i can view it at local machine.

If i change the files place, i can’t see the 3D object.

THX!
23 Greg
October 21, 2008 at 7:32 am

Yeah, I see blank screen too.. I think it’s probably some kind of FlashPlayer issue. After update to 10 version this SWF doesn’t work properly.
24 Evio
November 6, 2008 at 12:53 pm

Change publish settings to Flash Player 9.
On flash player 10 it doesn’t work.
25 Strider
November 13, 2008 at 11:14 pm

I don’t Know if it comes in handy to anyone, But i too get Blank screens in all tutorials, when The FlashDevelop export them, and also when I run the SWF file on a Window, but if a Open the .SWF file using Firefox, everything is just fine.
26 LUCAS HUANG
December 22, 2008 at 8:31 pm

hi Everybody:

I find two statements that will nothing happen.

//nothing happen
public var distance:Number = 1000;
//nothing happen
default_camera.moveForward(default_camera.distanceTo(cow) - distance);

Somebody can tell me why?
If i delete these , I can get the same swf.Nothing different.
And i can’t find “moveForward” in the Camera3D class.
27 LUCAS HUANG
December 22, 2008 at 8:36 pm

Hi
Somebody told their cow are not center on the swf.
I think it is because
PaerBase.as
public function init(vpWidth:Number = 800, vpHeight:Number = 600)…..

If your fla are not 800*600, the cow will not center.

Sorry to my English.
28 jaziel
January 15, 2009 at 4:10 pm

this code is somehow broken. it’s not working.
29 Charlie
January 15, 2009 at 7:51 pm

Hey Jaziel,

The code should not be broken. I just personally ran a test from scratch. Please ensure you’re using the latest papervision classes.

You can download them from SVN here:
http://code.google.com/p/papervision3d/source/checkout

or I went ahead and compiled a zip of the latest for you:
http://papervision2.com/download/papervision/papervision-classes.zip

Please also make sure that you’re using the latest paperbase class found here:
http://papervision2.com/PaperBase.as
30 jaziel
January 16, 2009 at 3:03 am

thanks for the reply. took me the whole night to figure out what’s wrong.

since I’m building it with flex.

just 30 seconds ago. when I execute the .swf files instead of launching the HTML on IE7 it worked. I didn’t change anything but it worked.

My guess was just either IE7 was not in the mood last night or the Sever’s been slow.
31 nestos
March 18, 2009 at 2:30 pm

distanceTo() is defined in the DisplayObject3D class

but there is still something to fix in this movement

antyway, great tutos here !
32 adam
April 1, 2009 at 3:04 am

please put the following line at the beginning of function processFrame:

if (stage.width <= 0 || stage.height <= 0) {
return;
}

When this function is called before initialization, cow and camera posstion will be a NaN, causing a white screen.