Papervision : Mouse interaction with 2D MovieMaterial

Stéphane Roucheray — Thu, 10 Dec 2009 13:01:55 +0000

Papervision lets apply textures as MovieClip on 3D object surfaces. This kind of textures is called MovieMaterial. The nature of MovieMaterial gives users the ability to interact with it’s content. However it’s often tricky to make it works. In the following example I applied a MovieMaterial to a Cube (wihout depth so it looks like a PaperPlane) :

The Flash plugin is required to view this object.

The button and TextField are both children of the MovieClip used as the material in the MovieMaterial. This example shows how the mouse can interact with the button. While it rotates along with the cube and its MovieMaterial, it handles well the three events : mouse over, mouse out and mouse click.

MouseClick on a button inside a MovieMaterial

MouseClick on a button is really easy to implement. A simple listener is added to the button Object :

//WhitePanel class is an asset in the Fla's library
panel = new WhitePanel();

//Set up the okButton inside the panel
var okButton : MovieClip = MovieClip(panel.okButton);
okButton.mouseChildren = false;
okButton.addEventListener(MouseEvent.CLICK, clickListener);

var okInc : Number = 0;

function clickListener (e:MouseEvent):void{
++okInc;
TextField(panel.title).text = "Click on OK Button : "+ okInc;
}

On button click the text field is well updated.

Mouse over and mouse out a sprite inside a MovieMaterial

The mouse over and mouse out events are a little bit more tricky to implement. In general, when a zone is interactive you want the mouse to change its aspects. When over it is transformed to a hand cursor and when out to the simple arrow cursor. When working on a 2D stage it is done via these affectations :

okButton.buttonMode = true;
okButton.useHandCursor= true; //This is true by default

Thus the hand cursor appears when over the okButton MovieClip. Unfortunately it doesn’t work with Papervision. The workaround is to affect handlers to the MovieClip and globally change the aspect of the mouse cursor :

okButton.addEventListener(MouseEvent.MOUSE_OVER, handleOver);
okButton.addEventListener(MouseEvent.MOUSE_OUT, handleOut);

function handleOver(event:MouseEvent):void {
//Globally change the mouse cursor aspect
viewport.containerSprite.buttonMode = true;
//Not required, changes the aspect of the button
//in our case
MovieClip(event.currentTarget).gotoAndStop(2);
}

function handleOut(event:MouseEvent):void
{
//Globally change the mouse cursor aspect
viewport.containerSprite.buttonMode = false;
MovieClip(event.currentTarget).gotoAndStop(1);
}

— Download the demo sources MMInteractionDemo.zip

Lambda » Papervision

Papervision : Mouse interaction with 2D MovieMaterial

MouseClick on a button inside a MovieMaterial

Mouse over and mouse out a sprite inside a MovieMaterial