Papervision : Mouse interaction with 2D MovieMaterial
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 ://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;
}
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;
}
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
okButton.useHandCursor= true; //This is true by default
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);
}
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);
}
Tags: MovieMaterial, Papervision, Papervision3D