Archive for the 'Intermediate' Category

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

Published
by
Charlie
on September 9, 2008
in AS3, Adobe, Expert, Flash, Intermediate, Papervision, Particle, Particle Field, Primitive, Source Code and Tutorials
. 1 Comment

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:

PLAIN TEXT
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

PLAIN TEXT
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:

PLAIN TEXT
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

PLAIN TEXT
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

PLAIN TEXT
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:Number =  height * 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

PLAIN TEXT
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

PLAIN TEXT
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 with 3D Physics WOW engine (Getting started)

Published
by
Charlie
on September 9, 2008
in 3D Physics, AS3, Expert, Flash, Intermediate, Papervision, Source Code, Tutorials and WOW Engine
. 2 Comments

Papervision with WOW Engine

Today I decided to create this simple example that used Papervision and the 3D physics WOW Engine. It is actually quite simple. Basically all that happens is you setup your objects for papervision (5 minutes) - setup your objects for the wow engine (5 mintues) then when you render - you just attach the movements of the WOW objects to your Papervision objects. (5 more minutes or less and you're DONE)

So taking out 3D and Papervision all together here is what is happening. Let's say you setup an enterframe and then assign a movieclips x and y positions to your mouse x and y position. SAME Exact thing happening here. Except you are attaching the x y and z properties of a papervision object to a wow object. Pretty simple! I'll take corrections if I am wrong since I have spent all of 30 minutes playing around with it.

Here is a quick sample of what goes on when rendering:

PLAIN TEXT
Actionscript:
  1. sphere.x    = wowSphere.px;
  2. sphere.y    = -wowSphere.py;
  3. sphere.z    = wowSphere.pz;

Not too hard right.

Here is the ActionScript code for creating a simple sphere boucing on the stage. Source code is below. (Basically a modified example shown on the WOW site)

Main.as

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3. import com.cs54.papervision.PV3DSceneWOW;
  4. import flash.display.Sprite;
  5.  
  6. public class Main extends Sprite
  7. {
  8. protected var papervisionSceneWOW:PV3DSceneWOW
  9.  
  10. public function Main():void
  11. {
  12. papervisionSceneWOW = new PV3DSceneWOW();
  13. papervisionSceneWOW.init(stage.stageWidth, stage.stageHeight)
  14. addChild(papervisionSceneWOW);
  15. }
  16. }
  17. }

PV3DSceneWOW.as:

PLAIN TEXT
Actionscript:
  1. package com.cs54.papervision
  2. {
  3.  
  4. import flash.events.Event;
  5. import fr.seraf.wow.core.data.WVector;
  6. import fr.seraf.wow.core.WOWEngine;
  7. import fr.seraf.wow.primitive.WBox;
  8. import fr.seraf.wow.primitive.WOWPlane;
  9. import fr.seraf.wow.primitive.WSphere;
  10. import org.papervision3d.materials.ColorMaterial;
  11. import org.papervision3d.materials.utils.MaterialsList;
  12. import org.papervision3d.materials.WireframeMaterial;
  13. import org.papervision3d.objects.DisplayObject3D;
  14. import org.papervision3d.objects.primitives.Plane;
  15. import org.papervision3d.objects.primitives.Sphere;
  16.  
  17. public class PV3DSceneWOW extends PaperBase
  18. {
  19.  
  20. protected var displayContainer    :DisplayObject3D;
  21. protected var holder            :DisplayObject3D
  22. protected var sphere            :Sphere;
  23. protected var wireframeMat        :WireframeMaterial;
  24. protected var wow                :WOWEngine
  25. protected var wowSphere            :WSphere
  26. override public function init(vpWidth:Number = 800, vpHeight:Number = 600):void
  27. {
  28.  
  29. super.init(vpWidth, vpHeight);
  30. default_camera.y = 300;
  31. }
  32.  
  33. override protected function createChildren3D():void
  34. {
  35. super.createChildren3D();
  36.  
  37. wireframeMat                 = new WireframeMaterial(0, 100, .2);
  38. wireframeMat.doubleSided     = true;
  39. sphere                         = new Sphere(wireframeMat, 100);
  40. default_camera.zoom         = 40;
  41.  
  42. default_scene.addChild(sphere);
  43.  
  44. setupWow();
  45. createGround();
  46. createWOWSphere();
  47. }
  48.  
  49. public function setupWow(): void
  50. {
  51. //this is the physics engine
  52. wow=new WOWEngine(.3);
  53. wow.collisionResponseMode = wow.STANDARD;
  54.  
  55. //setup the gravity
  56. wow.addMasslessForce(new WVector(0,50,0));
  57. }
  58.  
  59. public function createGround(): void
  60. {
  61. //we create a ground on the physics engine
  62. var ground:WOWPlane             = new WOWPlane(0,0,0);
  63. ground.elasticity                =.35;
  64. ground.friction                    =2;
  65.  
  66. wow.addParticle(ground);
  67.  
  68. // we create the ground on the render engine so we start by setup the material...
  69. var material:WireframeMaterial    = new WireframeMaterial(0,100,1)
  70. material.doubleSided            = true
  71.  
  72. var plane:Plane                 = new Plane(material , 1000, 1000, 5, 5 );
  73. plane.rotationX                    =-90
  74.  
  75. default_scene.addChild(plane);
  76. }
  77.  
  78. public function createWOWSphere(): void
  79. {
  80. wowSphere = new WSphere(0,-900,100,100,false,0.1);
  81. wowSphere.elasticity = 0;
  82.  
  83. wowSphere.friction=3320;
  84. wow.addParticle(wowSphere);
  85.  
  86. sphere.x    =-wowSphere.px;
  87. sphere.y    =-wowSphere.py;
  88. sphere.z    =-wowSphere.pz;
  89. }
  90.  
  91. override protected function processFrame():void
  92. {
  93. super.processFrame();
  94.  
  95. wow.step()
  96.  
  97. sphere.x    = wowSphere.px;
  98. sphere.y    = -wowSphere.py;
  99. sphere.z    = wowSphere.pz;
  100.  
  101. }
  102. override protected function renderEnterFrame(ThisEvent:Event):void
  103. {
  104. super.renderEnterFrame(ThisEvent);
  105.  
  106. }
  107.  
  108. }
  109.  
  110. }

The paper base that I reuse:
Based off of this example

PLAIN TEXT
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. }

SOURCE CODE

Don't forget to download the latest Papervision Great White Branch.

Papervision Double Sided Plane (err sorta) :/

Published
by
Charlie
on September 1, 2008
in AS3, Adobe, Double Sided Plane, Expert, Flash, Intermediate, OOP, Papervision, Papervision Plane, Source Code, Tutorials and Uncategorized
. 2 Comments

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:

PLAIN TEXT
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:

PLAIN TEXT
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

Published
by
Charlie
on August 31, 2008
in AS3, Adobe, Collada, Expert, Intermediate, Model, OOP, Papervision and Source Code
. 0 Comments

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)

PLAIN TEXT
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

Published
by
Charlie
on August 14, 2008
in Adobe, Beginner, Flash and Intermediate
. 4 Comments

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.

Controlling a Papervision Cube

Published
by
Charlie
on May 4, 2008
in AS3, Adobe, Flash, Intermediate, Papervision, Source Code and Tutorials
. 2 Comments

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

Papervision 2.0 – Getting started from a simple starting example

Published
by
Charlie
on May 4, 2008
in AS3, Adobe, Intermediate, Papervision and Tutorials
. 9 Comments

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
  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.

You and a Tween should get a room!

Published
by
Charlie
on October 24, 2007
in Intermediate
. 0 Comments

If you're not using the Tween Class that flash provides, today is a great day to start. ESPECIALLY if your code looks something like this:

PLAIN TEXT
Actionscript:
  1. oldBustedTween(350);
  2.  
  3. function oldBustedTween(val:Number)
  4. {
  5. this.onEnterFrame = function()
  6. {
  7. if(Math.abs(myShape._x - val)<1)
  8. {
  9. myShape._x = val;
  10. this.onEnterFrame = null;
  11. }
  12. else
  13. {
  14. myShape._x += (val - myShape._x)*.2;
  15. }
  16. }
  17. }

At least this is how I used to move objects around. Today, and for the past several years you have had the Flash Tween Class available to you. It does all the work as you see above only it is much simpler to read.

After creating a new flash document follow these steps:

1) Create a shape and make it into a movieclip

2) Give your movieClip an instance name of myShape

3) Add this actionscript to frame 1

PLAIN TEXT
Actionscript:
  1. import mx.transitions.easing.*;
  2. import mx.transitions.Tween;
  3.  
  4. myAwesomeTween(350)
  5.  
  6. function myAwesomeTween(val:Number)
  7. {
  8. var myTween = new Tween(myShape, "_x", Strong.easeOut, myShape._y, val, .9, true);
  9. }

4) Save and test your movie.

Not too shabby right!

Basically the tween class is taking in all the information you give it and running all the calculations for you. Here is a closer look at each part.

From the help docs it looks like this :

Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )

My longer version:

1) Name of movieClip instance
Such as myShape

2) What do you want me to do
_x - _y - _alpha

3) When I do it what kind of effect
Use - Strong.easeOut / Regular.easeOut / Strong.easeIn etc.

4) Where do you want me to start
Use a number

5) Where do you want me to end up
Use a number

6) How fast in seconds or frames (see 7)
Use a number such as .5 or 10

7) Use seconds (if you put false it will assume you are counting in frames instead of seconds)
true or false

var myTween = new Tween(1, 2, 3, 4, 5, 6, 7)

PLAIN TEXT
Actionscript:
  1. var myTween = new Tween(myShape, "_x", Strong.easeOut, myShape._y, val, .9, true);

Once you start using the Tween class you will never go back. It is one of the easiest ways to get things to move. It also has ton's of other cool features to get the effects you want. Test out out.

Download the fla

Check out this site for a more in depth discussion of the Tween Class.

http://www.kirupa.com/developer/actionscript/tween.htm


Follow papervision2 on Twitter

RSS Feed