Papervision 3d Interactive Scene3DEvent template tutorial

Here at last with the second series of tutorials Papervision 3d templates. After our first instantiated template Pv3d and understood the foundations of this powerful package, add some interactivity to our objects in the scene, putting them in communication between them thanks to "InteractiveScene3DEvent. At the end of the tutorial you will be able to start adding a series of more or less complex functions such as uploading movie external link url, tweeners and whatever. You are ready to begin, let's go!

Demo

1) a template Pv3d

Before starting the tutorial make sure you have read and downloaded the first post in the series. If you already have familiarity Conti library Papervision 3d and you can instantiate an object you can proceed without problems.

Papervision 3d start-up your template first tutorial

2) Import InteractiveScene3DEvent

First we import the package InteractiveScene3DEvent "to enable the interactivity functions of our movieclip 3d. I remember that you can find the entire list of available packages at this link :

import org.papervision3d.events.InteractiveScene3DEvent; 

3) Add secondary elements

I declare the objects in the scene. In this case three, but of course this is just to make the animation demo, you can also enable a single plan to make the scene interactive

"Plane0" is the center of the scene (a room used as mc dummy target);

"Plane1 is the movieclip that appears later;

"Plane2" (despite the name) the first visible with the words "Click Me".

 private var plane0:Plane; private var plane1:Plane; private var plane2:Plane; 

4) Add materials

Creo their course materials. As mentioned the values attributed to the size and position (x, y, z) plans are only consequential to animation. Of course in this case I could use functions correct position, perhaps in relation to Stage.width, but in this simple example is fine as well.

 var material_mc0:MovieAssetMaterial = new MovieAssetMaterial("mc_0"); material_mc0.smooth = false; plane0 = new Plane(material_mc0, 1, 1, 1, 1); scene.addChild (plane0); plane0.x= 0; var material_mc1:MovieAssetMaterial = new MovieAssetMaterial("mc_1"); material_mc1.smooth = true; plane1 = new Plane(material_mc1, 899, 399, 6, 6); scene.addChild (plane1); plane1.x= 5600; plane1.z= 0; var material_mc2:MovieAssetMaterial = new MovieAssetMaterial("mc_2"); material_mc2.smooth = true; plane2 = new Plane(material_mc2, 400, 150, 4, 4); scene.addChild (plane2); plane2.x= 0; 

5) Interactive Movie Materials

We arrived to the point! We make the materials interactive. Now they are ready to implement our actions of the mouse!

 material_mc1.interactive =true; material_mc2.interactive =true; 

6) and addEventListener InteractiveScene3DEvent

Now add the "addEventListener" to our 3d scene and describe behavior.

In fact activating the script output window you can see how the tasks are returned Rollover, Rollout and Click. Well, here you can enter the actions you like and animate your scene as you see fit!

 plane1.addEventListener (InteractiveScene3DEvent.OBJECT_CLICK, plane1Clicked); plane1.addEventListener (InteractiveScene3DEvent.OBJECT_OVER, plane1Rollover); plane1.addEventListener (InteractiveScene3DEvent.OBJECT_OUT, plane1Rollout); plane2.addEventListener (InteractiveScene3DEvent.OBJECT_CLICK, plane2Clicked); plane2.addEventListener (InteractiveScene3DEvent.OBJECT_OVER, plane2Rollover); plane2.addEventListener (InteractiveScene3DEvent.OBJECT_OUT, plane2Rollout); function plane2Clicked (myEvent:InteractiveScene3DEvent):void{ trace ("The plane2 was clicked."); } function plane1Clicked (myEvent:InteractiveScene3DEvent):void{ trace ("The plane1 was clicked."); } function plane1Rollover (myEvent:InteractiveScene3DEvent):void{ trace ("The plane1 was over."); viewport.buttonMode = true; } function plane1Rollout (myEvent:InteractiveScene3DEvent):void{ trace ("The plane1 was out."); viewport.buttonMode = false; } function plane2Rollover (myEvent:InteractiveScene3DEvent):void{ trace ("The plane2 was over."); viewport.buttonMode = true; } function plane2Rollout (myEvent:InteractiveScene3DEvent):void{ trace ("The plane2 was out."); viewport.buttonMode = false; 

7) Full Class

 // DavidSalvatori.com // First Pv3d interactive Scene3DEvent template tutorial // Papervision3D_rev859 package { import flash.display.Sprite; import flash.events.Event; import org.papervision3d.scenes.Scene3D; import org.papervision3d.view.Viewport3D; import org.papervision3d.cameras.Camera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.materials.*; import org.papervision3d.objects.primitives.Plane; import org.papervision3d.events.InteractiveScene3DEvent; public class Pv3d_Tut_2blog extends Sprite { private var scene:Scene3D; private var renderer:BasicRenderEngine; private var viewport:Viewport3D; private var camera:Camera3D; private var plane0:Plane; private var plane1:Plane; private var plane2:Plane; public function Pv3d_Tut_2blog () { init (); } private function init ():void { viewport = new Viewport3D(stage.stageWidth, stage.stageHeight, false, true); scene = new Scene3D(); renderer = new BasicRenderEngine(); camera = new Camera3D(); camera.zoom = 8; camera.focus = 100; addChild (viewport); initObjects (); addEventListener (Event.ENTER_FRAME, render, false, 0, true); } private function initObjects ():void { var material_mc0:MovieAssetMaterial = new MovieAssetMaterial("mc_0"); material_mc0.smooth = false; plane0 = new Plane(material_mc0, 1, 1, 1, 1); scene.addChild (plane0); plane0.x= 0; var material_mc1:MovieAssetMaterial = new MovieAssetMaterial("mc_1"); material_mc1.smooth = true; material_mc1.interactive =true; plane1 = new Plane(material_mc1, 899, 399, 6, 6); scene.addChild (plane1); plane1.x= 5600; plane1.z= 0; var material_mc2:MovieAssetMaterial = new MovieAssetMaterial("mc_2"); material_mc2.smooth = true; material_mc2.interactive =true; plane2 = new Plane(material_mc2, 400, 150, 4, 4); scene.addChild (plane2); plane2.x= 0; plane1.addEventListener (InteractiveScene3DEvent.OBJECT_CLICK, plane1Clicked); plane1.addEventListener (InteractiveScene3DEvent.OBJECT_OVER, plane1Rollover); plane1.addEventListener (InteractiveScene3DEvent.OBJECT_OUT, plane1Rollout); plane2.addEventListener (InteractiveScene3DEvent.OBJECT_CLICK, plane2Clicked); plane2.addEventListener (InteractiveScene3DEvent.OBJECT_OVER, plane2Rollover); plane2.addEventListener (InteractiveScene3DEvent.OBJECT_OUT, plane2Rollout); function plane2Clicked (myEvent:InteractiveScene3DEvent):void{ trace ("The plane2 was clicked."); plane2.x= 8000; plane1.x= 0;} function plane1Clicked (myEvent:InteractiveScene3DEvent):void{ trace ("The plane1 was clicked."); plane1.x= 8000; plane2.x= 0;} function plane1Rollover (myEvent:InteractiveScene3DEvent):void{ trace ("The plane1 was over.");} function plane1Rollout (myEvent:InteractiveScene3DEvent):void{ trace ("The plane1 was out.");} function plane2Rollover (myEvent:InteractiveScene3DEvent):void{ trace ("The plane2 was over.");} function plane2Rollout (myEvent:InteractiveScene3DEvent):void{ trace ("The plane2 was out.");} } private function render (event:Event):void { camera.x += (((stage.mouseX-(stage.stageWidth * .5))*2)-camera.x )*.05; camera.y += (((stage.mouseY-(stage.stageHeight*.5))*2)-camera.y )*.05; camera.target = plane0; renderer.renderScene (scene, camera, viewport); } } } 

Conclusion & downloads

That's it! As the panel that controlled the output to verify the various stages of rollover, rollout and click events, We add your favorite stocks and let me know if something is unclear! Until next lesson ...

Download Source

Download Pv3d Revision_859 Tutorial