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 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 :
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.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_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
