Archive for the 'Adobe' Category

Papervision Custom Primitive Source code for use with cool particle field effect.

Papervision Particle field

Carlos Lunetta was kind enough to send me his custom primitive and vertex particle classes for this blog entry. These are similar to the ones that he used for the Terra TV website.  In this example that concept is rather simple. You create a primitive object (Plane, Cube, Sphere) and run a for loop on the verticles.

As shown here:

Actionscript:
  1. for (var i:int = 0; i <disc.geometry.vertices.length; i++)
  2. {
  3. var discVert:Vertex3D = disc.geometry.vertices[i];
  4. }

Link to my example

Source Code

Now that you are looping through the verticles of this primitive you are now privy to information such as the x y and z locations of each point. So what can we do with that.....

One thing we can do is attach particles to it.. such as

Actionscript:
  1. for (var i:int = 0; i <disc.geometry.vertices.length; i++)
  2. {
  3. var discVert:Vertex3D = disc.geometry.vertices[i];
  4.  
  5. var vertexParticle:VertexParticle = new VertexParticle(particalMaterial, 5, discVert);
  6.  
  7. vertexParticle.x = discVert.x;
  8. vertexParticle.y = discVert.y;
  9. vertexParticle.z = discVert.z;
  10.  
  11. myParticles.addParticle(vertexParticle);
  12. }

Doing this lends itself to some neat particle field effects such as the one shown above. Of course you can mess around with the settings to optimize it for your needs.

Here is how you put it all together:

Actionscript:
  1. package com.cs54.papervision
  2. {
  3.  
  4. import flash.events.Event;
  5.  
  6. import org.papervision3d.core.geom.Particles;
  7. import org.papervision3d.core.geom.renderables.Particle;
  8. import org.papervision3d.core.geom.renderables.Vertex3D;
  9. import org.papervision3d.core.geom.Vertices3D;
  10. import org.papervision3d.materials.ColorMaterial;
  11. import org.papervision3d.materials.special.MovieAssetParticleMaterial;
  12. import org.papervision3d.materials.special.ParticleMaterial;
  13. import org.papervision3d.materials.utils.MaterialsList;
  14. import org.papervision3d.materials.WireframeMaterial;
  15. import org.papervision3d.objects.DisplayObject3D;
  16. import org.papervision3d.objects.primitives.Cone;
  17. import org.papervision3d.objects.primitives.Plane;
  18.  
  19. import src.primitives.Dome;
  20. import src.primitives.Disc;
  21. import src.primitives.VertexParticle;
  22.  
  23. public class PV3DScene extends PaperBase
  24. {
  25.  
  26. protected var displayContainer    :DisplayObject3D;
  27. protected var particle            :Particle
  28. protected var myParticles        :Particles;
  29. protected var domeParticles        :Particles;
  30. protected var partMat            :ParticleMaterial;
  31. protected var colorMaterial        :ColorMaterial;
  32. protected var disc                :Disc;
  33. protected var particalMaterial    :ParticleMaterial;
  34. protected var particalMaterial2    :ParticleMaterial;
  35. protected var container            :DisplayObject3D;
  36. protected var domeContainer        :DisplayObject3D;
  37. protected var dome                :Dome;
  38.  
  39. override public function init(vpWidth:Number = 800, vpHeight:Number = 600):void
  40. {
  41. super.init(vpWidth, vpHeight);
  42. default_camera.y = 800;
  43. default_camera.rotationX = 20;
  44. }
  45.  
  46. override protected function createChildren3D():void
  47. {
  48. super.createChildren3D();
  49.  
  50. container = new DisplayObject3D();
  51. domeContainer = new DisplayObject3D();
  52.  
  53. default_scene.addChild(container);
  54. default_scene.addChild(domeContainer);
  55.  
  56. default_camera.zoom                 = 50;
  57. default_camera.z                     = -3000
  58. colorMaterial                         = new ColorMaterial(0xFF0000, 1, true);
  59. colorMaterial.doubleSided             = true;
  60. particalMaterial                     = new ParticleMaterial(0xFF00CC, 100, ParticleMaterial.SHAPE_CIRCLE);
  61. particalMaterial2                     = new ParticleMaterial(0x000000, 100, ParticleMaterial.SHAPE_CIRCLE);
  62. myParticles                         = new Particles();
  63. domeParticles                        = new Particles();
  64. disc                                 = new Disc(colorMaterial, 500,15,2,3,this);
  65. dome                                = new Dome(colorMaterial, 500, 100, 10, 5, 2);
  66.  
  67. for (var i:int = 0; i <disc.geometry.vertices.length; i++)
  68. {
  69. var discVert:Vertex3D = disc.geometry.vertices[i];
  70.  
  71. var vertexParticle:VertexParticle = new VertexParticle(particalMaterial2, 5, discVert);
  72.  
  73. vertexParticle.x = discVert.x;
  74. vertexParticle.y = discVert.y;
  75. vertexParticle.z = discVert.z;
  76.  
  77. myParticles.addParticle(vertexParticle);
  78. }
  79.  
  80. for (var j:int = 0; j <dome.geometry.vertices.length; j++)
  81. {
  82. var domeVert:Vertex3D = dome.geometry.vertices[j];
  83.  
  84. var domeVertexParticle:VertexParticle = new VertexParticle(particalMaterial, 5, domeVert);
  85.  
  86. domeVertexParticle.x = domeVert.x;
  87. domeVertexParticle.y = domeVert.y;
  88. domeVertexParticle.z = domeVert.z;
  89.  
  90. domeParticles.addParticle(domeVertexParticle);
  91. }
  92.  
  93. container.addChild(myParticles)
  94. domeContainer.addChild(domeParticles)
  95.  
  96. domeContainer.y = -10
  97. default_scene.addChild(container)
  98. default_scene.addChild(domeContainer);
  99. }
  100.  
  101. override protected function renderEnterFrame(ThisEvent:Event):void
  102. {
  103. super.renderEnterFrame(ThisEvent);
  104.  
  105. if (default_camera.z <0)
  106. {
  107. default_camera.z += (0 - default_camera.z)*.01
  108. }
  109.  
  110. default_camera.y += (50 - default_camera.y)*.01;
  111.  
  112. container.yaw(1);
  113. domeContainer.yaw(1);
  114. }
  115.  
  116. }
  117.  
  118. }

Paperbase.as

Actionscript:
  1. package  com.cs54.papervision
  2. {
  3. import flash.display.Sprite;
  4. import flash.events.Event;
  5. import org.papervision3d.view.Viewport3D;
  6. import org.papervision3d.cameras.*;
  7. import org.papervision3d.scenes.Scene3D;
  8. import org.papervision3d.render.BasicRenderEngine;
  9.  
  10. public class PaperBase extends Sprite
  11. {
  12.  
  13. public var viewport:Viewport3D;
  14. public var renderer:BasicRenderEngine;
  15. public var default_scene:Scene3D;
  16. public var default_camera:Camera3D;
  17.  
  18. public function init(vpWidth:Number = 800, vpHeight:Number = 600):void
  19. {
  20. initPapervision(vpWidth, vpHeight);
  21. createChildren3D();
  22. createChildren2D();
  23. size();
  24. initEvents();
  25. }
  26. protected function initPapervision(vpWidth:Number, vpHeight:Number):void
  27. {
  28. viewport = new Viewport3D(vpWidth, vpHeight);
  29. addChild(viewport);
  30.  
  31. renderer = new BasicRenderEngine();
  32.  
  33. default_scene = new Scene3D();
  34.  
  35. default_camera = new Camera3D();
  36. }
  37. protected function createChildren3D():void
  38. {
  39. // This function should hold all of the stages needed
  40. // to initialise everything used for papervision.
  41. // Models, materials, cameras etc.
  42. }
  43. protected function createChildren2D():void
  44. {
  45. // This function should create all of the 2d items
  46. // that will be overlayed on your papervision project.
  47. // User interfaces, Heads up displays etc.
  48. }
  49. protected function size():void
  50. {
  51.  
  52. }
  53. protected function initEvents():void
  54. {
  55. addEventListener(Event.ENTER_FRAME, renderEnterFrame);
  56. }
  57. protected function processFrame():void
  58. {
  59. // Process any movement or animation here.
  60. }
  61. protected function renderEnterFrame( ThisEvent:Event ):void
  62. {
  63. //trace("RENDERING")
  64. //We need to render the scene and update anything here.
  65.  
  66. renderer.renderScene(default_scene, default_camera, viewport);
  67. processFrame();
  68. }
  69. }
  70. }

Here are Carlos Lunetta's classes for the Dome,Disc and VertexParticle

Dome.as

Actionscript:
  1. package src.primitives
  2. {
  3. import org.papervision3d.core.geom.*;
  4. import org.papervision3d.core.geom.renderables.Vertex3D;
  5. import org.papervision3d.core.proto.*;
  6. /**
  7. * ...
  8. * @author clunetta
  9. */
  10. public class Dome extends TriangleMesh3D
  11. {
  12. private var segments:uint;
  13. private var sides:uint;
  14. private var radius:Number
  15. private var height:Number;
  16. private var sideIncrement:Number;
  17. private var currentIncrement:Number = 0;
  18.  
  19. public function Dome (material:MaterialObject3D=null, radius:Number=100, height:Number = 100, segments:uint=0, sides:uint=3, sideIncrement:Number=0, initObject:Object=null )
  20. {
  21. super(material, new Array(), new Array());
  22.  
  23. this.segments         = 1 + segments;
  24. this.sides             = sides;
  25. this.radius         = radius;
  26. this.sideIncrement     = sideIncrement;
  27. this.height         = 2 * height;
  28.  
  29. buildDome();
  30. }
  31.  
  32. private function buildDome():void
  33. {
  34. var matInstance:MaterialObject3D = material;
  35.  
  36. var i:Number, j:Number, k:Number;
  37.  
  38. var aVertice:Array = this.geometry.vertices;
  39.  
  40. var oVtx:Vertex3D;
  41. oVtx = new Vertex3D(0,height,0);
  42. aVertice.push(oVtx);
  43.  
  44. for (j = 1; j <segments; j++) {
  45.  
  46. //var hRds:Number = (segments-j)* (height/segments)
  47. var fZ:Numberheight * Math.sin((segments-(j-1))(0.5*Math.PI) / segments);
  48.  
  49. //var fZ:Number = (height)*Math.sin((j-1)*(0.5*Math.PI/segments));
  50. currentIncrement += sideIncrement;
  51. var curSides:uint = uint(Math.floor(sides + currentIncrement));
  52.  
  53. for (i = 0; i <curSides; i++) {
  54. var fRds:Number = j * radius / segments;
  55. var fX:Number = fRds*Math.sin(i*(2*Math.PI/curSides));
  56. var fY:Number = fRds*Math.cos(i*(2*Math.PI/curSides));
  57. oVtx = new Vertex3D(fY,fZ,fX);
  58. aVertice.push(oVtx);
  59. }
  60. }
  61.  
  62. this.geometry.ready = true;
  63. }
  64.  
  65. }
  66.  
  67. }

Disc.as

Actionscript:
  1. package src.primitives
  2. {
  3. import org.papervision3d.core.geom.*;
  4. import org.papervision3d.core.geom.renderables.Vertex3D;
  5. import org.papervision3d.core.proto.*;
  6. /**
  7. * ...
  8. * @author clunetta
  9. */
  10. public class Disc extends TriangleMesh3D
  11. {
  12. private var segments :uint;
  13. private var sides :uint;
  14. private var radius :Number;
  15. private var sideIncrement:Number;
  16. private var currentIncrement:Number = 0;
  17.  
  18. public function Disc (material:MaterialObject3D=null, radius:Number=100, segments:uint=0, sides:uint=3, sideIncrement:Number=0, initObject:Object=null )
  19. {
  20. super(material, new Array(), new Array());
  21. this.segments = 1+ segments;
  22. this.sides = sides;
  23. this.radius = radius;
  24. this.sideIncrement = sideIncrement;
  25.  
  26. buildDisc();
  27. }
  28.  
  29. private function buildDisc():void
  30. {
  31. var matInstance:MaterialObject3D = material;
  32.  
  33. var i:Number, j:Number, k:Number;
  34.  
  35. var aVertice:Array = this.geometry.vertices;
  36.  
  37. var fZ:Number = 0;
  38. var oVtx:Vertex3D;
  39. oVtx = new Vertex3D(0,0,0);
  40. aVertice.push(oVtx);
  41. for (j = 0; j <segments; j++) {
  42. currentIncrement += sideIncrement;
  43. var curSides:uint = uint(Math.floor(sides + currentIncrement));
  44. for (i = 0; i <curSides; i++) {
  45. var fRds:Number = (j + 1) * radius / segments;
  46. var fX:Number = fRds*Math.sin(i*(2*Math.PI/curSides));
  47. var fY:Number = fRds*Math.cos(i*(2*Math.PI/curSides));
  48. oVtx = new Vertex3D(fY,fZ,fX);
  49. aVertice.push(oVtx);
  50. }
  51.  
  52. }
  53.  
  54. this.geometry.ready = true;
  55. }
  56.  
  57. }
  58.  
  59. }

VertexParticle.as

Actionscript:
  1. package src.primitives
  2. {
  3. import org.papervision3d.core.geom.renderables.Particle;
  4. import org.papervision3d.core.geom.renderables.Vertex3D;
  5. import org.papervision3d.materials.special.ParticleMaterial;
  6.  
  7. /**
  8. * ...
  9. * @author clunetta
  10. */
  11. public class VertexParticle extends Particle
  12. {
  13.  
  14. public function VertexParticle(material:ParticleMaterial, size:Number, vertex:Vertex3D)
  15. {
  16. super(material, size);
  17. super.vertex3D = vertex;
  18. }
  19.  
  20. }
  21.  
  22. }

Source Code

Papervision Double Sided Plane (err sorta) :/

Papervision double sided plane

As far as I know there are 2 options when creating a double sided plane. Double sided meaning a different material for each side.

Option 1:
Create two planes. Plane 1 with a z sorting of 1 and the other with 0 and the rotationY of one of those planes set to 180. You could then contain this in one display container.

Version 2:
Create one cube with a depth of 0. Then you just apply a material to the front and back. OK OK OK so this is not really a Plane... but I like this approach because it allows me to more easily use things like Bend Modifier.

If anyone has a better or more improved approach I would love to hear about it.

Here is what the code for Option 1:

Actionscript:
  1. package com.cs54.ui
  2. {
  3. import org.papervision3d.objects.primitives.Plane;
  4. import org.papervision3d.materials.MovieMaterial;
  5. import org.papervision3d.materials.utils.MaterialsList;
  6. import org.papervision3d.objects.DisplayObject3D;
  7. import com.everydayflash.pv3d.modifiers.Bend;
  8. import flash.display.DisplayObject;public class Tree2Planes extends DisplayObject3D
  9. {
  10. [Embed(source="/assets/tree-side-1.png")]
  11. public var TreeFront        :Class;[Embed(source="/assets/tree-side-2.png")]
  12. public var TreeBack            :Class;
  13.  
  14. protected var treeFront        :DisplayObject;
  15. protected var treeBack        :DisplayObject;
  16.  
  17. protected var treeFrontMat    :MovieMaterial;
  18. protected var treeBackMat    :MovieMaterial;
  19.  
  20. protected var treeMatList    :MaterialsList;
  21.  
  22. protected var _height        :Number = 175;
  23. protected var _width        :Number = 191;
  24. protected var _container    :DisplayObject3D;
  25.  
  26. protected var plane1        :Plane;
  27. protected var plane2        :Plane;
  28.  
  29. public function Tree2Planes():void
  30. {
  31. treeMatList     = new MaterialsList();
  32. treeFront        = new TreeFront();
  33. treeBack         = new TreeBack();
  34.  
  35. //Tree Materials
  36. treeFrontMat     = new MovieMaterial(treeFront, true);
  37. treeBackMat     = new MovieMaterial(treeBack, true);
  38.  
  39. treeFrontMat.allowAutoResize = false;
  40.  
  41. plane1        = new Plane(treeFrontMat,_width,_height);
  42. plane2        = new Plane(treeBackMat,_width,_height);
  43.  
  44. plane1.z = 1;
  45. plane1.rotationY = 180;
  46.  
  47. _container = new DisplayObject3D();
  48.  
  49. addChild(_container);
  50. _container.addChild(plane1);
  51. _container.addChild(plane2);
  52.  
  53. }
  54.  
  55. public function get height():Number
  56. {
  57. return _height;
  58. }
  59. public function get width():Number
  60. {
  61. return _width;
  62. }
  63.  
  64. }
  65.  
  66. }

Here is what the code for Option 2:

Actionscript:
  1. package com.cs54.ui
  2. {
  3. import org.papervision3d.materials.MovieMaterial;
  4. import org.papervision3d.materials.utils.MaterialsList;
  5. import org.papervision3d.objects.DisplayObject3D;
  6. import org.papervision3d.objects.primitives.Cube;
  7. import com.everydayflash.pv3d.modifiers.Bend;
  8. import flash.display.DisplayObject;
  9.  
  10. public class Tree extends DisplayObject3D
  11. {
  12. [Embed(source="/assets/tree-side-1.png")]
  13. public var TreeFront        :Class;
  14.  
  15. [Embed(source="/assets/tree-side-2.png")]
  16. public var TreeBack            :Class;
  17.  
  18. protected var treeFront        :DisplayObject;
  19. protected var treeBack        :DisplayObject;
  20.  
  21. protected var treeFrontMat    :MovieMaterial;
  22. protected var treeBackMat    :MovieMaterial;
  23.  
  24. protected var treeMatList    :MaterialsList;
  25.  
  26. protected var treeCube        :Cube;
  27. protected var _height        :Number = 175;
  28. protected var _width        :Number = 191;
  29. protected var _container    :DisplayObject3D;
  30.  
  31. public function Tree():void
  32. {
  33.  
  34. treeMatList     = new MaterialsList();
  35. treeFront        = new TreeFront();
  36. treeBack         = new TreeBack();
  37.  
  38. //Tree Materials
  39. treeFrontMat     = new MovieMaterial(treeFront, true);
  40. treeBackMat     = new MovieMaterial(treeBack, true);
  41.  
  42. treeFrontMat.allowAutoResize = false;
  43.  
  44. treeFrontMat.animated = true;
  45.  
  46. treeMatList.addMaterial( treeFrontMat, "front" );
  47. treeMatList.addMaterial( treeBackMat, "back" );
  48.  
  49. treeCube     = new Cube(treeMatList, _width, 0, _height, 6, 6, 6);
  50.  
  51. var bend:Bend = new Bend(treeCube);
  52.  
  53. bend.quickBend(1, .1);
  54.  
  55. addChild(treeCube);
  56.  
  57. }
  58.  
  59. public function get height():Number
  60. {
  61. return _height;
  62. }
  63. public function get width():Number
  64. {
  65. return _width;
  66. }
  67.  
  68. }
  69.  
  70. }

Papervision Collada – Spongebob SquarePants

Spongebob SquarePants

View Collada Spongebob in Papervision

I had some time on my hands this weekend and decided to mess around with loading Collada models with Papervision. I snagged a few models from Google Sketchup and went to town. Also tried to work in some OOP instead of just having one huge papervision file. I really need to clean up the source but rest assured the full source will be posted soon.

Basic lesson is that you can load a Collada file with just actionscript (packaged as a zip or just the dae file)

Actionscript:
  1. //Load zipped dae file
  2. protected function loadKMZ():void
  3. {
  4.     kmz = new KMZ();
  5.     kmz.load("model/spongebob_squarepants.zip");
  6.     kmz.addEventListener(FileLoadEvent.LOAD_ERROR, onKmzError);
  7.     kmz.addEventListener(FileLoadEvent.LOAD_COMPLETE, onKmzLoaded);
  8.    
  9.     //Scale if needed
  10.     kmz.scale = 20;
  11.     container.addChild(kmz);
  12. }
  13.  
  14. //load the dae file
  15. protected function loadDAE():void
  16. {
  17.     dae = new DAE();
  18.     dae.load("model/spongebob_squarepants.dae");
  19.     dae.addEventListener(FileLoadEvent.LOAD_ERROR, onDaeError);
  20.     dae.addEventListener(FileLoadEvent.LOAD_COMPLETE, onDaeLoaded);
  21.     container.addChild(dae);
  22. }

Adobe Flash CS3 Shortcuts – Publish with no preview – Macbook (pro) Mac but Vista / XP users

Keyboard Mac

I realize this is no great secret in the flash world (changing your keyboard shortcuts). The default setting is (SHIFT F12). Like most Flash Developers / Designers we adapt to our surroundings. If that be using a PC / Mac / someone else's fla / code / etc.  Over the past few months I was presented with several projects where I had to compile multiple fla files. This is not too bad until you do cntrl+enter wait for the preview - close it - ctrl+enter review the changes and start the process over again. So I finally started to use (SHIFT F12) but depending on when I rebooted or changed my apple prefs I kept adjusting my volume and long story short it was getting to be a pain.

I personally like using CTRL and Backspace (DELETE on mac keyboard). The only drawback is that you may accidentally delete something. :/ But 99.9% of the time its uber quick.

To get to the menu just go to "Edit" > "Keyboard Shortcuts..."   - Duplicate the current set. The "Publish" option that does not also generate a preview is under "File" and about 1/2 ways down.

Keyboard shortcuts

Hope this helps.

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

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

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

Papervision Popup Book : Source Code To Follow Shortly

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.

Download : FLA - AS & SOURCE

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

1) Papervision 2.0

2) Tweener

Here is a link to my quick version

Controlling a Papervision Cube

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.

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

Papervision 2.0 – Getting started from a simple starting example

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:

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
  31. scene.addChild(plane)
  32.  
  33. //7) Create a loop for rendering your animation
  34. this.addEventListener(Event.ENTER_FRAME,render);
  35. function render(e:Event):void
  36. {
  37. //Add some simple animation
  38. plane.rotationY += 2; //Could also be plane.yaw(2);
  39. //Render the scene
  40. renderer.renderScene(scene,camera,viewport,true);
  41. }

Don't forget to download the latest Papervision code

The great thing is that if you build this once into a nice clean class, you can just keep re-using that class as your papervision starting place. Then you can do what you do best, create and have fun!

Start with this and add a cube or different materials and animations. Then toss in some Tweener code to get some cool movement effects. In a few days you'll have some amazing things.

Papervision 2.0 – Exploding and Rebuilding an Image

[kml_flashembed movie="image-explode.swf" height="300" width="550" /]

I took some time last week to have some fun with Papervision. The goal was to just take an image (any image) and have it explode into pieces and then rebuild it. While searching around for code or tutorials I have only found a few where the items on the stage go back into a controlled state. So over the next few weeks I am going to try to create a few examples of things that could be used IN a website rather than having the Papervision BE the website. I am not sure that makes sense. While I love experiments I like to have things I can use on everyday websites. This example I probably be using when I launch my new site. It's just something to break away from the ole fade in and out motion.

If you want to test this code on your own computer you will need to download a few things first. :)

1) Papervision 2.0

2) Foomonger's Code (Call Later)

3) Tweener

4) The Source

Actionscript:
  1. package
  2. {
  3. import flash.display.*;
  4. import flash.events.*;
  5. import flash.geom.Matrix;
  6. import flash.geom.Point;
  7.  
  8. import caurina.transitions.*
  9.  
  10. import com.foomonger.utils.Later;
  11.  
  12. import org.papervision3d.cameras.FreeCamera3D;
  13. import org.papervision3d.materials.BitmapFileMaterial;
  14. import org.papervision3d.materials.MovieMaterial;
  15. import org.papervision3d.objects.DisplayObject3D;
  16. import org.papervision3d.objects.primitives.Plane;
  17. import org.papervision3d.render.BasicRenderEngine;
  18. import org.papervision3d.scenes.Scene3D;
  19. import org.papervision3d.view.Viewport3D;
  20.  
  21. public class PVImageExplode extends MovieClip
  22. {
  23. private var viewport        :Viewport3D;
  24. private var scene            :Scene3D;
  25. private var camera            :FreeCamera3D;
  26.  
  27. private var block            :BitmapFileMaterial;
  28. private var movieBlock        :MovieMaterial;
  29.  
  30. private var blocksArray    :Array;
  31. private var planeArray        :Array;
  32. private var clips_array        :Array;
  33.  
  34. private var renderer        :BasicRenderEngine;
  35.  
  36. private var __holder        :D isplayObject3D;
  37. private var __startCamZ        :Number;
  38.  
  39. private var __homePage        :MovieClip;
  40. private var __grass            :D isplayObject;
  41. private var __grassHolder    :MovieClip;
  42.  
  43. private var __col            :Number;
  44. private var __rows            :Number;
  45. private var __blockWidth    :Number;
  46. private var __blockHeight    :Number;
  47.  
  48. private var __yawAmount        :Number = 0;
  49.  
  50. public function PVImageExplode()
  51. {
  52. init()
  53. }
  54.  
  55. private function init():void
  56. {
  57. createChildren();
  58. size();
  59.  
  60. initPapervision();
  61. initMaterials();
  62. initObjects();
  63. initEvents();
  64. }
  65.  
  66. //-----------------------------------------------------------------------
  67. //Adds image to the stage to be then broke apart
  68. //-----------------------------------------------------------------------
  69.  
  70. protected function createChildren():void
  71. {
  72.  
  73. __grassHolder            = new MovieClip();
  74. __grass                = new GrassItem();
  75. __grassHolder.visible    = false;
  76. __grassHolder.addChild(__grass)
  77.  
  78. addChild(__grassHolder);
  79.  
  80. }
  81.  
  82. protected function size():void
  83. {
  84. __col            = 4;
  85. __rows            = 10;
  86.  
  87. }
  88.  
  89. //-----------------------------------------------------------------------
  90. //Papervision init setup
  91. //-----------------------------------------------------------------------
  92.  
  93. private function initPapervision():void
  94. {
  95. viewport                        = new Viewport3D(1000,600,false,true,false);
  96. addChild(viewport);
  97.  
  98. scene                            = new Scene3D();
  99. camera                            = new FreeCamera3D();
  100. renderer                        = new BasicRenderEngine();
  101.  
  102. camera.zoom = 11;
  103. __startCamZ = -6000
  104.  
  105. }
  106.  
  107. //-----------------------------------------------------------------------
  108. //Papervision materials setup
  109. //-----------------------------------------------------------------------
  110.  
  111. private function initMaterials():void
  112. {
  113. blocksArray = [];
  114.  
  115. clips_array            = new Array();
  116.  
  117. var __w:int            =Math.ceil(__grassHolder.width / __col);
  118. var __h:int            =Math.ceil(__grassHolder.height / __rows);
  119.  
  120. __blockWidth    = __w;
  121. __blockHeight    = __h;
  122.  
  123. var matrix            :Matrix;
  124. var bitmap_data        :BitmapData;
  125. var point            :P oint;
  126. var clip            :MovieClip;
  127. var columns            :Number             = __col;
  128. var cellWidth        :Number             = __blockWidth;
  129. var cellHeight        :Number             = __blockHeight;
  130. var cellX            :Number
  131. var cellY            :Number
  132. var bx                :Number
  133. var by                :Number
  134. var bitmap            :Bitmap
  135.  
  136. for (var i:int=0; i <(__rows * __col); i++)
  137. {
  138.  
  139. cellX        = i % columns;
  140. cellY        = Math.floor(i / columns);
  141.  
  142. bitmap_data            = new BitmapData(__w,__h,true,0x00FFFFFF);
  143. matrix                = __grassHolder.transform.matrix;
  144.  
  145. bx = (cellX * cellWidth);
  146. by = cellY * cellHeight;
  147.  
  148. matrix.translate(-__w * cellX, -__h * cellY);
  149.  
  150. bitmap_data.draw(__grassHolder,matrix);
  151. clip = new MovieClip();
  152. clips_array.push(clip);
  153. clip.id = i;
  154. addChild(clip);
  155.  
  156. point = new Point(__grassHolder.x + __w * cellX, __grassHolder.y + __h * cellY);
  157.  
  158. bitmap =new Bitmap(bitmap_data);
  159. clip.addChild(bitmap);
  160.  
  161. clip.visible = false;
  162. clip.x = point.x;
  163. clip.y = point.y;
  164. }
  165.  
  166. for(var k:uint = 0;k<clips_array.length;k++)
  167. {
  168. movieBlock = new MovieMaterial(clips_array[k],true);
  169. movieBlock.doubleSided = true;
  170. blocksArray.push(movieBlock);
  171. }
  172.  
  173. }
  174.  
  175. //-----------------------------------------------------------------------
  176. //Papervision objects setup (planes etc)
  177. //-----------------------------------------------------------------------
  178.  
  179. private function initObjects():void
  180. {
  181.  
  182. planeArray = [];
  183.  
  184. __holder        = new DisplayObject3D();
  185. __holder.x        = -420;
  186. __holder.y        = 280
  187.  
  188. scene.addChild(__holder);
  189.  
  190. for(var k:uint = 0;k<blocksArray.length;k++)
  191. {
  192. var plane:Plane = new Plane(blocksArray[k],__blockWidth,__blockHeight,3,3);
  193.  
  194. var columns:Number        = __col;
  195. var cellWidth:Number    = __blockWidth;
  196. var cellHeight:Number    = -__blockHeight;
  197. var cellX:Number        = k % columns;
  198. var cellY:Number        = Math.floor(k / columns);
  199.  
  200. plane.x = (cellX * cellWidth);
  201. plane.y = cellY * cellHeight;
  202.  
  203. planeArray.push({plane:plane,pX:plane.x,pY:plane.y,pZ:plane.z,pR:plane.rotationY})
  204.  
  205. __holder.addChild(plane);
  206. }
  207. Later.call(this, explode, 500, true);
  208. }
  209.  
  210. //-----------------------------------------------------------------------
  211. //Start enterframe render event
  212. //-----------------------------------------------------------------------
  213.  
  214. public function initEvents():void
  215. {
  216. this.addEventListener(Event.ENTER_FRAME,renderEvent);
  217. }
  218.  
  219. //-----------------------------------------------------------------------
  220. //Killin it
  221. //-----------------------------------------------------------------------
  222.  
  223. public function killEvents():void
  224. {
  225. this.removeEventListener(Event.ENTER_FRAME,renderEvent);
  226. }
  227.  
  228. //-----------------------------------------------------------------------
  229. //Render the stage
  230. //-----------------------------------------------------------------------
  231.  
  232. protected function renderEvent(e:Event):void
  233. {
  234. for(var i:uint = 0; i<planeArray.length;i++)
  235. {
  236. var plane = planeArray[i].plane;
  237.  
  238. plane.yaw(__yawAmount);
  239.  
  240. }
  241.  
  242. renderer.renderScene(scene,camera,viewport);
  243. }
  244.  
  245. protected function resumeYaw():void
  246. {
  247. __yawAmount = 10;
  248. }
  249.  
  250. //-----------------------------------------------------------------------
  251. //The explosive magic (could be on a button click instead of later calls)
  252. //-----------------------------------------------------------------------
  253.  
  254. protected function explode(e:Event = null):void
  255. {
  256. for(var i:uint = 0; i<planeArray.length;i++)
  257. {
  258. var plane = planeArray[i].plane;
  259. var __x:Number = Math.random() * 3000 - 1000;
  260. var __y:Number = Math.random() * 1000 - 500;
  261. var __z:Number = Math.random() * 1000 - 500;
  262. var __rY:Number = Math.random()* 720;
  263.  
  264. Tweener.addTween(plane,{x:__x,y:__y,z:__z,rotationY:__rY,transition:"easeInOutQuint",time:1})
  265. }
  266.  
  267. Tweener.addTween(camera,{z:__startCamZ,x:1000,y:-400,transition:"easeInOutQuint",time:1,onComplete:resumeYaw})
  268.  
  269. Later.call(this, putBackTogether, 5000, true);
  270. }
  271.  
  272. //-----------------------------------------------------------------------
  273. //The Humpty Dumpty
  274. //-----------------------------------------------------------------------
  275.  
  276. protected function putBackTogether(e:Event = null):void
  277. {
  278. Tweener.addTween(camera,{z:-1000,x:0,y:0,transition:"easeOutQuint",time:.3})
  279. __yawAmount = 0;
  280. for(var i:uint = 0; i<planeArray.length;i++)
  281. {
  282. var plane:Plane = planeArray[i].plane;
  283. var __x:Number = planeArray[i].pX
  284. var __y:Number = planeArray[i].pY
  285. var __z:Number = planeArray[i].pZ
  286. var __rY:Number = planeArray[i].pR
  287.  
  288. Tweener.addTween(plane,{x:__x,y:__y,z:__z,rotationY:__rY,delay:.3,transition:"easeInOutQuint",time:1})
  289. }
  290. Later.call(this, explode, 5000, true);
  291. }
  292.  
  293. }
  294. }


Follow papervision2 on Twitter

RSS Feed