Monthly Archives: May 2010

3D Ring

By Zevan | May 3, 2010
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 500, height=500)]
  2. var ring:MovieClip = createRing();
  3. ring.x = stage.stageWidth / 2;
  4. ring.y = stage.stageHeight / 2;
  5. addChild(ring);
  6.  
  7. function createRing(sectionNum:int = 30):MovieClip{
  8.     var container:MovieClip = new MovieClip();
  9.     container.circles = [];
  10.     container.theta = 0;
  11.     container.thetaDest = 0;
  12.     var step:Number = (Math.PI * 2) / sectionNum;
  13.     for (var i:int = 0; i<sectionNum; i++){
  14.         var c:MovieClip = new MovieClip();
  15.         with (c.graphics){
  16.             lineStyle(0,0x000000);
  17.             beginFill(0xCCCCCC);
  18.             drawCircle(0,0,20);
  19.         }
  20.         c.thetaOffset = step * i;
  21.         container.addChild(c);
  22.         container.circles.push(c);
  23.     }
  24.     container.addEventListener(Event.ENTER_FRAME, onRun);
  25.     return container;
  26. }
  27. function onRun(evt:Event):void {
  28.     var container:MovieClip = MovieClip(evt.currentTarget);
  29.     var num:int = container.circles.length;
  30.     for (var i:int = 0; i<num; i++){
  31.         var c:MovieClip = container.circles[i];
  32.         var angle:Number = container.theta + c.thetaOffset;
  33.         c.x = 200 * Math.cos(angle);
  34.         c.y = 100 * Math.sin(angle);
  35.         c.scaleX = (100 + c.y) / 120 + 0.2;
  36.         c.scaleY = c.scaleX;
  37.     }
  38.     container.circles.sortOn("y", Array.NUMERIC);
  39.     for (i = 0; i<num; i++){
  40.         container.addChild(container.circles[i]);
  41.     }
  42.     if (container.mouseX <-100){
  43.         container.thetaDest -= 0.05;
  44.     }
  45.     if (container.mouseX> 100){
  46.         container.thetaDest += 0.05;
  47.     }
  48.     container.theta += (container.thetaDest  - container.theta) / 12;
  49.    
  50. }

This snippet shows how to create a 3D ring navigation using sine and cosine. Have a look:

Posted in 3D, Graphics, MovieClip, UI, arrays, motion, sortOn | Tagged , , | 3 Comments

Propeller Sketch

By Zevan | May 3, 2010
CLICK HERE TO COPY
Actionscript:
  1. makeFlyer();
  2.  
  3. function makeFlyer():void{
  4.     var thing:MovieClip = new MovieClip();
  5.     thing.x = 200;
  6.     thing.y = 200;
  7.    
  8.     addChild(thing);
  9.    
  10.     var prop:Shape = new Shape();
  11.     with (prop.graphics){
  12.         lineStyle(0,0x000000);
  13.         beginFill(0x000000);
  14.         moveTo(-100,0);
  15.         curveTo(-100, -30, 0, 0);
  16.         curveTo(100, 30, 100, 0);
  17.         curveTo(100, -30, 0, 0);
  18.         curveTo(-100, 30, -100, 0);
  19.     }
  20.     prop.scaleX = prop.scaleY = 0.5;
  21.     var container:MovieClip = new MovieClip();
  22.     //container.x = -50;
  23.     container.addChild(prop);
  24.     container.scaleY = 0.6;
  25.     thing.addChild(container);
  26.    
  27.     var body:Shape = new Shape();
  28.     with (body.graphics){
  29.         lineStyle(0, 0x000000);
  30.         beginFill(0x000000);
  31.         lineTo(0,80);
  32.         drawCircle(0,80,10);
  33.     }
  34.     thing.addChild(body);
  35.     thing.velX = 0;
  36.     thing.velY = 0;
  37.     thing.posX = thing.x;
  38.     thing.posY = thing.y;
  39.     thing.theta = 0;
  40.     thing.prop = prop;
  41.     thing.addEventListener(Event.ENTER_FRAME, onRun);
  42. }
  43. function onRun(evt:Event):void{
  44.     var t:MovieClip = MovieClip(evt.currentTarget);
  45.     t.prop.rotation += 10
  46.     t.velY = 3 * Math.cos(t.theta);
  47.     t.velX = 3 * Math.sin(t.theta / 2);
  48.     t.theta += 0.05
  49.     t.posX += t.velX;
  50.     t.posY += t.velY;
  51.    
  52.     t.x = t.posX;
  53.     t.y = t.posY;
  54. }

This snippet creates a small flying object that moves with sine and cosine.


Have a look at the swf...

Posted in motion | Tagged , , | 2 Comments