Category Archives: MovieClip

3D Ring

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:

Also posted in 3D, Graphics, UI, arrays, motion, sortOn | Tagged , , | 3 Comments

QuickBox2D Skinning

Actionscript:
  1. import com.actionsnippet.qbox.*;
  2.  
  3. var sim:QuickBox2D = new QuickBox2D(this);
  4.  
  5. sim.createStageWalls({lineAlpha:0,fillColor:0x000000})
  6. sim.addBox({x:3, y:3, width:3, height:3, skin:BoxSkin});
  7. sim.addCircle({x:3, y:8,radius:1.5,  skin:CircleSkin});
  8. sim.addPoly({x:6, y:3, verts:[[1.5,0,3,3,0,3,1.5,0]], skin:TriangleSkin});
  9.  
  10. sim.addBox({x:6, y:3, width:3, height:3, skin:BoxSkin});
  11. sim.addCircle({x:6, y:8,radius:1.5,  skin:CircleSkin});
  12. sim.addPoly({x:12, y:3, verts:[[1.5,0,3,3,0,3,1.5,0]], skin:TriangleSkin});
  13.  
  14. sim.start();
  15. sim.mouseDrag();

You'll need this fla to run this snippet since the graphics are in the library. This snippet shows how to easily use linkage classes as the graphics for your rigid bodies. This was actually one of the first features I implemented in QuickBox2D.


Take a look at the swf here...

Also posted in Box2D, QuickBox2D, motion | Tagged , , , , | 33 Comments

Matrix() 3 Point Skew

Actionscript:
  1. [SWF(width=500, height=500, backgroundColor=0xFFFFFF, frameRate=30)]
  2.  
  3. var box:Sprite = createSprite("Rect", 0, 0, 100, 100, 0xFF0000);
  4.  
  5. var d0:Sprite = drag(createSprite("Ellipse",  -5, -5, 10, 10));
  6. d0.x = d0.y = 200;
  7.  
  8. var d1:Sprite = drag(createSprite("Ellipse",  -5, -5, 10, 10));
  9. d1.x = 200
  10. d1.y = 300;
  11.  
  12. var d2:Sprite = drag(createSprite("Ellipse",  -5, -5, 10, 10));
  13. d2.y = d0.y;
  14. d2.x = 300;
  15.  
  16. addEventListener(Event.ENTER_FRAME, onLoop);
  17.  
  18. function onLoop(evt:Event):void {
  19.  
  20.     var m:Matrix = new Matrix();
  21.     m.scale((d2.x - d0.x) / 100,(d1.y - d0.y) / 100);
  22.     m.translate(d0.x, d0.y);
  23.    
  24.     m.c =  (d1.x - d0.x) / 100
  25.     m.b =  (d2.y - d0.y ) / 100
  26.    
  27.     box.transform.matrix = m;
  28. }
  29.  
  30. function createSprite(shape:String, xp:Number, yp:Number, w:Number, h:Number, col:uint=0x444444):Sprite {
  31.     var s:Sprite = new Sprite();
  32.     s.graphics.beginFill(col);
  33.     s.graphics["draw" + shape](xp, yp, w, h);
  34.     addChild(s);
  35.     return s;
  36. }
  37.  
  38. function drag(target:*):*{
  39.     target.addEventListener(MouseEvent.MOUSE_DOWN, function(evt:MouseEvent){ evt.currentTarget.startDrag(); });
  40.     return target;
  41. }
  42.  
  43. stage.addEventListener(MouseEvent.MOUSE_UP, function(){ stopDrag() });

The above creates a red rectangle that can be skewed by dragging 3 points. Why is this so cool you ask?

This is why (move your mouse)

The above was written in flash 7, before the Matrix object existed. So in order to create it I used this technique from Eric Lin.

Also posted in DisplayObject, matrix | Tagged , | Leave a comment

Senocular’s Two Sided 3D Clip

CLICK HERE FOR TODAY'S SNIPPET

In a recent kirupa thread, senocular posted an very useful snippet to aid in the creation of a two sided 3D MovieClip. The thread also contains an in depth description of polygon winding.

Description of Polygon Winding

I created a navigation demo using this technique.

Here is the source for the above demo

UPDATE
Justin Windle of soulwire has written a nice class called PaperSprite that uses this technique. The class is worth checking out - it's nicely designed... read more about it here.

Also posted in 3D | Tagged , , , | 4 Comments