Author Archive for CharliePage 3 of 3

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.

Papervision 2.0 – Exploding and Rebuilding an Image

Published
by
Charlie
on May 1, 2008
in AS3, Adobe, Expert, Flash, Papervision, Source Code and Tutorials
. 12 Comments

[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

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

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

What happened to the good-ole message board

Published
by
Charlie
on October 24, 2007
in Rants
. 6 Comments

I remember a time when you could go onto a message board, post a message and actually get an answer. Recently (within the last 2 years) whenever I go to places such as flashkit.com or other flash forums with a question I get one of three responses:

1) You're an idiot (or maybe in not so many words usually followed up by #2)

2) This has been answered a billion times, go search for it

3) no response at all

None of which were the answer to my question. I see this more and more. Is it that there are so many amazing flash people out there that all questions are beyond them. I doubt it is due to their lack of time because the next message down is thesis written about how much they hate the guy that asked a stupid question or about how great they look while coding flash.

Anyone else have this response on message boards?

I'd love to bring the days back when forum "gods" weren't jack@$$es. :)


Follow papervision2 on Twitter

RSS Feed