Pages


CS54 : Fun with Flash AS 3.0, AS 2.0, Papervision, and Design





Papervision Popup Book : The source - Just the elements on the stage

Posted by admin in AS3, Adobe, Expert, Flash, Papervision, Source Code, Tutorials
06 20th, 2008

Papervision Popup Book

Sorry for putting this up so late. This code is only used to arrange the items on the stage. Much work and re-working will need to be done to even start to achieve the effect of the  ecodazoo website.  Anyways, perhaps this will get someones brain moving in the right direction and help lead us in the path to re-creating this effect fully. As soon as I get some free time I will post a version that is a true popup book in papervision.

If anyone gets a chance sooner to do some cool things with the code please shoot me an email or a blog post and I would love to share it, with myself and with everyone else. :-D

 Download : FLA - AS & SOURCE

Don't forget the other code you will need to compile:

1) Papervision 2.0

2) Tweener

PLAIN TEXT
Actionscript:
  1. package {
  2. import caurina.transitions.Tweener;
  3. import org.papervision3d.cameras.FreeCamera3D;
  4. import org.papervision3d.core.data.qTree.QuadTree;
  5. import org.papervision3d.objects.DisplayObject3D;
  6.  
  7. import com.foomonger.utils.Later;
  8.  
  9. import flash.display.*;
  10.  
  11. import flash.events.Event;
  12. import flash.events.MouseEvent;
  13. import org.papervision3d.cameras.Camera3D;
  14. import org.papervision3d.materials.ColorMaterial;
  15. import org.papervision3d.materials.MovieMaterial;
  16. import org.papervision3d.objects.primitives.Cube;
  17. import org.papervision3d.objects.primitives.Plane;
  18. import org.papervision3d.render.BasicRenderEngine;
  19. import org.papervision3d.scenes.Scene3D;
  20. import org.papervision3d.view.Viewport3D;
  21.  
  22. public class Main extends Sprite
  23. {
  24. private var __camera                :FreeCamera3D;
  25. private var __scene     :Scene3D;
  26. private var __viewport        :Viewport3D;
  27. private var __renderer        :BasicRenderEngine;
  28.  
  29. private var __width     :Number;
  30. private var __height                :Number;
  31. private var __background            :Shape;
  32.  
  33. protected var __wallLeft            :DisplayObject;
  34. protected var __wallRight         :DisplayObject;
  35. protected var __wallBack            :DisplayObject;
  36. protected var __floor            :DisplayObject;
  37. protected var __tree                :DisplayObject;
  38. protected var __monster    :DisplayObject;
  39.  
  40. protected var __moveMatWallLeft  :MovieMaterial;
  41. protected var __moveMatRightWall    :MovieMaterial;
  42. protected var __moveMatWallBack  :MovieMaterial;
  43. protected var __moveMatFloor        :MovieMaterial;
  44. protected var __moveMatTree   :MovieMaterial;
  45. protected var __moveMatMonster    :MovieMaterial;
  46.  
  47. protected var __plane_wallLeft    :Plane;
  48. protected var __plane_rightWall  :Plane;
  49. protected var __plane_wallBack    :Plane;
  50. protected var __floorPlane      :Plane;
  51. protected var __treePlane         :Plane;
  52. protected var __monsterPlane        :Plane;
  53.  
  54. protected var __rotation            :Number;
  55.  
  56. public function Main():void
  57. {
  58.  
  59. init();
  60.  
  61. }
  62. protected function init():void
  63. {
  64. __rotation = 0;
  65.  
  66. setDefaultWidthHeight();
  67. createChildren();
  68. initPapervision();
  69. initMaterials();
  70. initObjects();
  71. initEvents();
  72. }
  73. protected function setDefaultWidthHeight():void
  74. {
  75. __width = 1000;
  76. __height = 600;
  77. }
  78.  
  79. protected function initPapervision():void
  80. {
  81. __scene = new Scene3D();
  82. __camera = new FreeCamera3D();
  83.  
  84. __camera.zoom = 11;
  85. __camera.z = -2000;
  86. __camera.y = 20;
  87.  
  88. __viewport = new Viewport3D(__width,__height,false,true,true);
  89. __renderer = new BasicRenderEngine();
  90. addChild(__viewport);
  91. }
  92.  
  93. protected function initMaterials():void
  94. {
  95.  
  96. __moveMatRightWall = new MovieMaterial(__wallRight, true)
  97. __moveMatWallLeft = new MovieMaterial(__wallLeft, true);
  98. __moveMatWallBack = new MovieMaterial(__wallBack)
  99. __moveMatFloor = new MovieMaterial(__floor);
  100. __moveMatTree = new MovieMaterial(__tree, true );
  101. __moveMatMonster = new MovieMaterial(__monster, true);
  102.  
  103. __moveMatRightWall.doubleSided = true;
  104. __moveMatWallLeft.doubleSided = true;
  105. __moveMatWallBack.doubleSided = true;
  106. __moveMatTree.doubleSided = true;
  107. __moveMatFloor.doubleSided = true;
  108. __moveMatTree.doubleSided = true;
  109. __moveMatMonster.doubleSided = true;
  110.  
  111. }
  112.  
  113. protected function initObjects():void
  114. {
  115.  
  116. __monsterPlane   = new Plane(__moveMatMonster, 184, 237, 4, 4);
  117. __plane_rightWall   = new Plane(__moveMatRightWall, 386, 239, 4,4)
  118. __plane_wallBack    = new Plane(__moveMatWallBack, 734, 240, 4,4);
  119. __plane_wallLeft    = new Plane(__moveMatWallLeft,386,239,4,4)
  120. __floorPlane       = new Plane(__moveMatFloor, 800, 800, 14,14);
  121. __treePlane         = new Plane(__moveMatTree, 79, 112, 4, 4);
  122.  
  123. __scene.addChild(__floorPlane);
  124. __scene.addChild(__plane_wallBack);
  125. __scene.addChild(__treePlane);
  126. __scene.addChild(__plane_wallLeft);
  127. __scene.addChild(__plane_rightWall);
  128. __scene.addChild(__monsterPlane);
  129.  
  130. __floorPlane.y = -120;
  131. __treePlane.y = -69;
  132. __floorPlane.pitch(90);
  133.  
  134. __monsterPlane.z = -300;
  135. __monsterPlane.x = 150;
  136. __monsterPlane.y = -10;
  137.  
  138. __plane_wallBack.z += 340
  139. __treePlane.z = 300;
  140. __treePlane.x = -220;
  141.  
  142. __plane_wallLeft.x = -155;
  143. __plane_rightWall.x = 155;
  144.  
  145. __plane_wallLeft.rotationY = -35;
  146. __plane_rightWall.rotationY = 35
  147. }
  148.  
  149. protected function initEvents():void
  150. {
  151. this.addEventListener(Event.ENTER_FRAME,render);
  152. }
  153.  
  154. protected function render(e:Event):void
  155. {
  156. __renderer.renderScene(__scene, __camera, __viewport, true);
  157. var moveXAmount:Number = (mouseX - 1000 / 2) * 4
  158. var moveYAmount:Number = (mouseY - 600 / 2) * 2
  159. if (moveYAmount <0)
  160. {
  161. moveYAmount = 0;
  162. }
  163.  
  164. __camera.x = moveXAmount;
  165. __camera.y = moveYAmount;
  166. __camera.lookAt(__floorPlane)
  167.  
  168. }
  169.  
  170. protected function createChildren():void
  171. {
  172. //Movieclips with Export for AS in Library
  173.  
  174. __wallBack   = new Wall_back();
  175. __wallLeft   = new Wall_left();
  176. __wallRight     = new Wall_right();
  177. __floor         = new Floor();
  178. __tree    = new Tree();
  179. __monster     = new Monster();
  180.  
  181. }
  182.  
  183. }
  184. }



read comments (2)

Papervision Popup Book : Source Code To Follow Shortly

Posted by admin in AS3, Adobe, Expert, Flash, Papervision
06 18th, 2008

Papervision Popup Book

While talking with Mike Britton this evening he sent me this link - http://www.ecodazoo.com/ If you surf around a bit you will eventually make your way to a Popup Book which was created with a custom engine (Sharikura 3D) written by Roxik. I decided to take a try at creating it in Papervision. So far I have some of the elements in place which in itself was kinda fun to put together. I would still need to get it to fold into a book but thought this was neat in itself to post.

Don't worry code will follow shortly. If anyone needs the rough version immediately feel free to send me a message cs54.com[at]gmail[dot]com

Here is a link to my quick version



read comments (4)

Controlling a Papervision Cube

Posted by admin in AS3, Adobe, Flash, Intermediate, Papervision, Source Code, Tutorials
05 4th, 2008

Papervision 3D Cube Example

View Example

The goal for this example was to create a simple way to display a cube, then rotate it one side at a time. The image is just from Google Images which will be all 6 sides of the cube. This again like the exploding image example illustrates some control over your elements. You can easily modify this example to include mouse events that you can use trigger a view each side of the cube.

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3. import caurina.transitions.Tweener;
  4.  
  5. import com.foomonger.utils.Later;
  6.  
  7. import flash.display.*;
  8.  
  9. import flash.events.Event;
  10.  
  11. import org.papervision3d.cameras.Camera3D;
  12. import org.papervision3d.materials.ColorMaterial;
  13. import org.papervision3d.materials.MovieMaterial;
  14. import org.papervision3d.materials.utils.MaterialsList;
  15. import org.papervision3d.objects.primitives.Cone;
  16. import org.papervision3d.objects.primitives.Cube;
  17. import org.papervision3d.objects.primitives.Plane;
  18. import org.papervision3d.render.BasicRenderEngine;
  19. import org.papervision3d.scenes.Scene3D;
  20. import org.papervision3d.view.Viewport3D;
  21.  
  22. public class PapervisionControlledCube extends Sprite
  23. {
  24. private var __camera:Camera3D;
  25. private var __scene:Scene3D;
  26. private var __viewport:Viewport3D;
  27. private var __renderer:BasicRenderEngine;
  28.  
  29. private var __cube:Cube;
  30. private var __matList:MaterialsList;
  31.  
  32. private var __width:Number;
  33. private var __height:Number;
  34.  
  35. private var __background:Shape;
  36.  
  37. //Only needed if you are linking the image from FlexBuilder
  38. //[Embed(source="assets/brick.png")]
  39. //public var Brick:Class;
  40.  
  41. protected var __brick:DisplayObject;
  42.  
  43. protected var __brickClip:MovieClip;
  44.  
  45. protected var __rotation:Number;
  46.  
  47. public function PapervisionControlledCube():void
  48. {
  49.  
  50. init();
  51.  
  52. }
  53. protected function init():void
  54. {
  55. __rotation = 0;
  56.  
  57. setDefaultWidthHeight();
  58.  
  59. //Only needed for flexbuilder
  60. //setupStage();
  61. //--------------------------
  62.  
  63. createChildren();
  64. initPapervision();
  65. initMaterials();
  66. initObjects();
  67. initEvents();
  68. }
  69. protected function setDefaultWidthHeight():void
  70. {
  71. __width = 500;
  72. __height = 250;
  73. }
  74.  
  75. protected function initPapervision():void
  76. {
  77. __scene = new Scene3D();
  78. __camera = new Camera3D();
  79.  
  80. __camera.zoom = 11;
  81. __camera.z = -5000;
  82. __camera.y = 200;
  83.  
  84. __viewport = new Viewport3D(__width,__height,false,true,true);
  85. __renderer = new BasicRenderEngine();
  86. addChild(__viewport);
  87. }
  88.  
  89. protected function initMaterials():void
  90. {
  91. __matList = new MaterialsList();
  92.  
  93. var movieMat:MovieMaterial = new MovieMaterial(__brickClip);
  94.  
  95. __matList.addMaterial( movieMat, "front" );
  96. __matList.addMaterial( movieMat, "back" );
  97. __matList.addMaterial( movieMat, "left" );
  98. __matList.addMaterial( movieMat, "right" );
  99. __matList.addMaterial( movieMat, "top" );
  100. __matList.addMaterial( movieMat, "bottom" );
  101.  
  102. }
  103.  
  104. protected function initObjects():void
  105. {
  106. __cube = new Cube(__matList,250,130,130);
  107. __scene.addChild(__cube);
  108.  
  109. Later.call(this,zoomIn,1000,true);
  110.  
  111. }
  112. protected function zoomIn(e:Event = null):void
  113. {
  114. Tweener.addTween(__camera,{z:-1000,transition:"easeInOutQuint",time:1,onComplete:rotateCube})
  115. }
  116.  
  117. //-----------------------------------------------------------------------
  118. //Rotate Cube
  119. //-----------------------------------------------------------------------
  120.  
  121. protected function rotateCube(e:Event = null):void
  122. {
  123.  
  124. __rotation += 90;
  125. Tweener.addTween(__cube,{rotationY:__rotation,delay:.6,transition:"easeInOutQuint",time:1,onComplete:rotateCube})
  126. }
  127.  
  128. protected function initEvents():void
  129. {
  130. this.addEventListener(Event.ENTER_FRAME,render);
  131. }
  132.  
  133. protected function render(e:Event):void
  134. {
  135. __renderer.renderScene(__scene,__camera,__viewport,true);
  136. }
  137.  
  138. protected function createChildren():void
  139. {
  140. __brick = new Brick();
  141. __brickClip = new MovieClip();
  142. __brickClip.addChild(__brick);
  143.  
  144. }
  145. //Only used in flexbuilder
  146. private function setupStage():void
  147. {
  148. stage.stageWidth         = __width;
  149. stage.stageHeight         = __height;
  150. stage.align             = "cc";
  151. stage.scaleMode         = "noScale";
  152. stage.stageFocusRect     = true;
  153.  
  154. }
  155. }
  156. }

Download Source

Other classes used:

1) Papervision 2.0

2) Foomonger's Code (Call Later)

3) Tweener



read comments (0)

Papervision 2.0 - Getting started from a simple starting example

Posted by admin in AS3, Adobe, Intermediate, Papervision, Tutorials
05 4th, 2008

At first when trying to create my first few Papervision projects it seemed a bit overwhelming. As you work with it more and more you notice that there are really only a few elements for creating a simple Papervision project. Then you can forget about the code and just think about what cool things you can do.

For any Papervision 2.0 project you need:

PLAIN TEXT
Actionscript:
  1. //As always your imports
  2. import flash.display.*;
  3. import flash.events.Event;
  4. import org.papervision3d.scenes.Scene3D;
  5. import org.papervision3d.view.Viewport3D;
  6. import org.papervision3d.cameras.Camera3D;
  7. import org.papervision3d.materials.ColorMaterial;
  8. import org.papervision3d.objects.primitives.Plane;
  9. import org.papervision3d.render.BasicRenderEngine;
  10.  
  11. //1) A Scene
  12. var scene:Scene3D = new Scene3D()
  13.  
  14. //2) A Camera
  15. var camera = new Camera3D()
  16. //Setting the camera zoom to 11 will make sure your objects are rendered at 100%
  17. camera.zoom = 11;
  18.  
  19. //3) A view area "viewport" - think of this as your canvas or stage for your 3D objects
  20. var viewport:Viewport3D = new Viewport3D(500,300,false,true,true)
  21.  
  22. //4) A render engine
  23. var renderer:BasicRenderEngine = new BasicRenderEngine();
  24.  
  25. //5) add the viewport to the stage
  26. addChild(viewport);
  27.  
  28. //6) Something in your scene such as a Plane, Cube, Sphere, etc - in this case a plane with a black color material
  29. var plane:Plane = new Plane(new ColorMaterial(0x000000),100,100)
  30. //add your object to your scene