Parallax fp10

Actionscript:
  1. [SWF(backgroundColor=0x000000, width = 800, height = 600)]
  2.  
  3. // this is a trick to keep the 3D texture quality up...
  4. // try setting it right off the bat and you'll notice that the
  5. // Shapes look pixilated
  6. setTimeout(function():void{ stage.quality="low"}, 500);
  7.  
  8. var matrix:Matrix = new Matrix();
  9. matrix.createGradientBox(600, 600, 0, -450, -450);
  10.  
  11. var boxNum:int = 30;
  12. var boxes:Array = [];
  13. for (var i:int = 0; i<boxNum; i++) boxes[i] = makeBox();
  14.  
  15. var dx:Number = 0, dy:Number = 0;
  16. onLoop();
  17. addEventListener(Event.ENTER_FRAME, onLoop);
  18.  
  19. function onLoop(evt:Event=null):void {
  20.     dx += (mouseX - dx) / 4;
  21.     dy += (mouseY - dy) / 4;
  22.     for (var i:int = 0; i<boxNum; i++){
  23.         var box:Shape = boxes[i];
  24.         box.z = 400 - i * 20;
  25.         box.x = dx;
  26.         box.y = dy;
  27.         box.rotation = i + getTimer() / 10;
  28.     }
  29. }
  30.  
  31. function makeBox():Shape{
  32.     var box:Shape = Shape(addChild(new Shape()));
  33.     box.x = stage.stageWidth/2;
  34.     box.y = stage.stageHeight/2;
  35.     box.z = 1;
  36.     with (box.graphics){
  37.          beginGradientFill(GradientType.RADIAL, [0xFFFFFF, 0x333333], [1,1], [0, 255], matrix, SpreadMethod.PAD);
  38.         drawRect(-100, -100, 200, 200);
  39.         drawRect(-70, -70, 140, 140);
  40.     }
  41.     return box;
  42. }

This snippet draws 30 gradient box shapes, gives them different z values and then moves them based on the mouse. This technique is good if you just want a few layers of parallax motion - I got carried away and you'll notice that if you add more boxes it begins to slow down pretty quick.


Have a look at the swf....



I first used this technique for this small interactive drawing...

Something interesting I noticed about fp10 3D DisplayObjects is that if you set the stage.quality to low right off the bat, the display objects look pixelated... but if you wait a few milliseconds, you end up with less pixelation and you still get a speed boost from the low quality - I think it must have something to do with the way the 3D textures are handled by the player...

Tomorrow I think I'll post a version of this that uses IGraphicsData and Utils.projectVectors()... should be a huge speed boost...

This entry was posted in 3D, motion and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

One Comment

  1. Posted June 18, 2010 at 9:02 am | Permalink

    How did you skin that guy? That’s the creapiest thing I’ve ever seen but I love it. Is it possible to skin the example above?

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*