04
Jan-2011

Papervision head-first part 3

Alright folks, spicing up the PV3D stuff (for now) with some interactivity. I won't go line by line, explaining things this time, instead, I will give you the source code and the project files with explanatory comments. Not that it is easier for me to do so, but it might be hard to follow code snippets and sewing them together.

This is what you will(hopefully) get in the end of this part:
you can download the swf here

This movie requires Flash Player 9

If you do not want the project files and want to follow along;
-create a .FLA
-set it's document class to "Main" (without the quotes)
-make 4 movie clips and export them to actionscript with the names Texture1,Texture2,Texture3,Texture4

  1.  
  2. package
  3. {
  4. import flash.display.MovieClip;
  5. import flash.display.Sprite;
  6. import flash.events.Event;
  7. import flash.utils.getDefinitionByName;
  8. import org.ascollada.fx.DaeTexture;
  9. import org.papervision3d.cameras.Camera3D;
  10. import org.papervision3d.materials.MovieMaterial;
  11. import org.papervision3d.materials.utils.MaterialsList;
  12. import org.papervision3d.objects.DisplayObject3D;
  13. import org.papervision3d.objects.primitives.Plane;
  14. import org.papervision3d.render.BasicRenderEngine;
  15. import org.papervision3d.scenes.Scene3D;
  16. import org.papervision3d.view.Viewport3D;
  17.  
  18. //setting the swf's size, fps and backgroundColor properties
  19. [SWF(width = "500", height = "500", fps = "30",backgroundColor=0x444444)]
  20.  
  21. public class Main extends Sprite
  22. {
  23.  
  24. private var scene:Scene3D; //PV3D stuff to make a scene
  25. private var viewport:Viewport3D;
  26. private var camera:Camera3D;
  27. private var renderer:BasicRenderEngine;
  28.  
  29. private var plane:Plane; //PV3D plane and it's parent
  30. private var planeParent:DisplayObject3D;
  31.  
  32. private var texArray:Array; //An array to hold the textures in
  33. private var mat:Texture1; //and the textures themselves
  34. private var mat2:Texture2;
  35. private var mat3:Texture3;
  36. private var mat4:Texture4;
  37.  
  38. public function Main()
  39. {
  40.  
  41. initPV3D(); //initializing the PV3D related stuff
  42. setUpTextureArray(); //creating our materials and placing them in an array
  43. makePlaneGrid(); //making the planes
  44. //and event listener that will call a function every frame
  45. addEventListener(Event.ENTER_FRAME, onEnterFrame);
  46.  
  47.  
  48. }//end of constructor
  49.  
  50. private function onEnterFrame(e:Event):void
  51. {
  52. //getting where the mouse is in relation to the stage's
  53. //horizontal and vertical center
  54. var distX = mouseX - stage.stageWidth * 0.5;
  55. var distY = mouseY - stage.stageHeight * 0.5;
  56. //applying the values as rotations
  57. planeParent.rotationY = distX*0.1;
  58. planeParent.rotationX = distY*0.1;
  59. //rendering the scene every frame
  60. renderer.renderScene(scene, camera, viewport);
  61. }
  62.  
  63. private function setUpTextureArray():void
  64. {
  65. //this array holds the materials to be used later
  66. texArray = new Array();
  67.  
  68. mat = new Texture1(); //creating instances of our textures
  69. mat2 = new Texture2();
  70. mat3 = new Texture3();
  71. mat4 = new Texture4();
  72. //placing those in an array
  73. texArray.push(mat,mat2,mat3,mat4);
  74.  
  75. }
  76.  
  77. private function makePlaneGrid():void
  78. {
  79. //this will keep track of how many planes we created
  80. var planeCount:Number = new Number(0);
  81. //the nested for is to create a 2x2 grid
  82. for (var i:Number = 0; i < 2;++i) {
  83. for (var j:Number = 0; j < 2;++j) {
  84. //creating a new material for each new plane
  85. //and using the next movieclip as the texture
  86. //after each step
  87. var material:MovieMaterial = new MovieMaterial(texArray[planeCount]);
  88. material.interactive = true;
  89. material.smooth = true;
  90. material.oneSide = false;
  91. //creating our planes and laying them out on a grid
  92. //with 5px (115-110) apart from each other
  93. //our movieclips are 110x110 so let's will make the planes same size
  94. //with 4 subdivisons on width and height
  95. var plane:Plane = new Plane(material, 110, 110, 4, 4);
  96. plane.x = 115 * i-55;
  97. plane.y = 115 * j - 55;
  98. //add all the planes to the parenting object
  99. //so they share one pivot and do not transform seperately
  100. //on their individual axis
  101. planeParent.addChild(plane);
  102. //increment the plane count
  103. ++planeCount;
  104.  
  105. }
  106. }
  107. }//end of makePlaneGrid
  108.  
  109. private function initPV3D():void
  110. {
  111. //you already know what these do from the previous parts
  112. //this time we set the viewport's autoScaleToStage property true
  113. //while creating it from the constructor
  114. //we also set the interactive property to true
  115. scene = new Scene3D();
  116. camera = new Camera3D();
  117. renderer = new BasicRenderEngine();
  118. viewport = new Viewport3D(500, 500, true, true);
  119. //instantiating parent object to hold the planes in
  120. planeParent = new DisplayObject3D();
  121. scene.addChild(planeParent);
  122. //camera settings below sort of matches the PV3D units to the stage/pixels
  123. camera.focus = 100;
  124. camera.zoom = 11;
  125. //let's make the hand cursor visible in our viewport and
  126. //add our viewport to the scene so we can see something
  127. viewport.buttonMode = true;
  128. addChild(viewport);
  129. }//end of initPV3D
  130.  
  131. }//end of class
  132. }//end of constructor
  133.  

The Texture1 class:
(other classes are the same, with different names;) )

  1.  
  2. package
  3. {
  4. import flash.display.Sprite;
  5. import flash.events.Event;
  6. import flash.events.MouseEvent;
  7. import flash.net.navigateToURL;
  8. import flash.net.URLRequest;
  9.  
  10.  
  11. public class Texture1 extends Sprite
  12. {
  13.  
  14. public function Texture1()
  15. {
  16.  
  17. addEventListener(MouseEvent.CLICK, onClick);
  18.  
  19. }
  20.  
  21. private function onClick(e:MouseEvent):void
  22. {
  23. trace("clicked");
  24. navigateToURL(new URLRequest("http://www.servetulas.com/blog"));
  25. }
  26. }
  27.  
  28. }
  29.  

You can download the project here

Hope that helpes someone as much as it helped me whilst preparing it :)
Feel free to comment with questions,problems or requests.

0

 likes / 0 Comments
Share this post:

Leave a Reply

Your email address will not be published. Required fields are marked *


6 − = four

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Archives

> <
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec