Author Archive for CharliePage 2 of 3

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

Loading MD2 Models with Papervision

Code to load MD2 files below. Anyone out there want to help create simple MD2 models that work well with Papervision - or - does anyone know of a good resource to purchase already animated models? I just wanted to get a few for some blog entry's. Full credit would be given or course. I found several models this morning but after a few hours only 1 of them was of value. It happened to be the one tied to Clint Hannaford's example. :/

Once you have a good model here is the super simple code to load it:

Actionscript:
  1. var wireframeMat:WireframeMaterial = new WireframeMaterial(0x000000);
  2.  
  3. var md2:MD2 = new MD2(true); //if you get errors try using false - it may be a single frame file (no animation)
  4. md2.load("assets/test_4.md2",wireframeMat);
  5. //Add to your scene for rendering

Yeah I know.. That's it. The hard part is finding a model that doesn't suck.

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.

Gizmodo Fails to solve my iPhone problem – Created new Vodka Tonic Holder

Vodka Tonic Holder

By now I have more iPhone posts than about flash or flex but since I cannot call a client from my contact list I cannot do any flash or flex for them! I guess email would work but, dahh its more fun complaining.

Anyways, gizmodo may have come up with a solution for NEW iPhones but so far has failed to help me - and by me I mean the world. They are probably over there with their new iPhones having a "My new iPhone is working party". Lame! cause the rest of the world still suffers. :(

If this never gets solved perhaps we should come up with new ways to use our iPhones. Here is my idea

update: How to fix / activate a @#$@! new or upgrading iPhone

Evidently this might work. I am still waiting so we'll see. I am still pissed off tho!

Text from the site:

Have you tried to activate your iPhone to no avail? Are you holding a $299 brick in your hand? Here's what you do. When activating your iPhone (or just upgrading to 2.0 software), if you get an error message on your phone, DO NOT UNPLUG IT. That will restart the entire process.

Instead, just wait. Leave your phone be and don't close iTunes.

We've successfully activated five different iPhone 3Gs with error screens just by letting them sit plugged in for anywhere from 10 to 15 minutes. Hopefully that might work for you, too.

http://gizmodo.com/5024334/how-to-fix-iphone-and-iphone-3g-activation-woes

iPhone Fail! Hello 911… yes, iPhone says I can only call you now

First of all can I say I feel really stupid for actually upgrading on the first day of a software release. With Microsoft or any other company we have grown to not trust I wait weeks or months to upgrade. But this morning I am thinking... oh hey its Friday and not a lot of Flash / Flex work to do so I'll tool around with my iPhone and upgrade. OMG MY BFF DEATH! My iPhone sits in emergency only mode with no way to recover. I get a message on iTunes that says it is my fault... how rude

We could not complete your ITunes Store Request. The network connection timed out. Make sure your (ha did you get that YOUR) settings are correct and your network connection is active, THEN try again.

I don't know about you but I have tried again about 500 times. Click on party shuffle click back on iPhone. The more I do it the more pissed I get and want to throw my iPhone out the window.

I feel sorry for me but I feel more sorry for (well not really more sorry for) but kinda sorry for the people waiting in line right now to find out that they can buy a phone that is completely useless for the day or few hours of server down time. I bet some guy that this whole upgrade process was trusted to is being fired or promoted right now.

Dahhh!!!

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


Follow papervision2 on Twitter

RSS Feed