Monthly Archives: November 2008

Skew DisplayObject

By Zevan | November 18, 2008
CLICK HERE TO COPY
Actionscript:
  1. var box:Shape = Shape(addChild(new Shape()));
  2. with (box.graphics) beginFill(0x006666), drawRect(0,0,50,50);
  3. box.x = box.y = 100;
  4.  
  5. addEventListener(Event.ENTER_FRAME, onLoop);
  6.  
  7. function onLoop(evt:Event):void {
  8.    
  9.     var m:Matrix = box.transform.matrix;
  10.     // skew on the X
  11.     m.c = (mouseX - stage.stageWidth / 2 ) / stage.stageWidth;
  12.    
  13.     // skew on the Y
  14.     // m.b = (mouseX - stage.stageWidth / 2 ) / stage.stageWidth
  15.    
  16.     box.transform.matrix = m
  17. }

This skews a box Shape using the c and b properties of the transformation matrix. Note that these values don't match those in the IDE's transform window. This is good further reading if your interested in this topic.

Posted in DisplayObject, motion | Tagged , , | Leave a comment

Basic Tint Function

By Zevan | November 17, 2008
CLICK HERE TO COPY
Actionscript:
  1. // display object, red (0-255), green, blue, amount (0-1)
  2. function tint(dsp:DisplayObject, r:Number, g:Number, b:Number, amount:Number=1):void {
  3.     if (amount != 1) {
  4.         r *= amount;
  5.         g *= amount;
  6.         b *= amount;
  7.     }
  8.     amount = 1-amount;
  9.     var ct:ColorTransform = transform.colorTransform;
  10.     ct.redOffset = r;
  11.     ct.redMultiplier = amount;
  12.     ct.greenOffset = g;
  13.     ct.greenMultiplier = amount;
  14.     ct.blueOffset = b;
  15.     ct.blueMultiplier = amount;
  16.     dsp.transform.colorTransform = ct;
  17. }
  18.  
  19. // test out the tint function on a circle with a stroke:
  20. var circle:Shape = Shape(addChild(new Shape()));
  21. with (circle.graphics) {
  22.     lineStyle(5, 0x339999);
  23.     beginFill(0x003333);
  24.     drawCircle(0,0,50);
  25.     x = 100;
  26.     y = 100;
  27. }
  28.  
  29. // tint the circle 50% green
  30. tint(circle, 0, 255, 0, .5);

The ColorTransform object is a little confusing with its "redMultiplier, redOffset, greenMultiplier etc..." properties. Once you understand them it's not a big deal, but I still find them a bit cumbersome. So when I just want to tint a clip similar to the way you might tint a clip in the IDE... I use this tint function. Rather than taking a hexidecimal number it takes values for red, green and blue (0-255) - and an amount argument (0-1).

Posted in color | Tagged , , , | 1 Comment

Mouse Velocity

By Zevan | November 16, 2008
CLICK HERE TO COPY
Actionscript:
  1. var velocityInfo:TextField = new TextField();
  2. velocityInfo.x = 20;
  3. velocityInfo.y = 20;
  4. addChild(velocityInfo);
  5.  
  6. var prevX:Number = mouseX;
  7. var prevY:Number = mouseY;
  8. var velX:Number = 0;
  9. var velY:Number = 0;
  10.  
  11. addEventListener(Event.ENTER_FRAME, onLoop);
  12.  
  13. function onLoop(evt:Event):void {
  14.      
  15.      velX = mouseX - prevX;
  16.      velY = mouseY - prevY;
  17.      
  18.      velocityInfo.text = velX + ", " + velY
  19.      
  20.      prevX = mouseX;
  21.      prevY = mouseY;
  22. }

Wrote this in response to a question from one of my students. The next step is to use velX and velY to push objects around the screen.

Posted in motion | Tagged , , , | 5 Comments

Animate Along a Path

By Zevan | November 15, 2008
CLICK HERE TO COPY
Actionscript:
  1. stage.frameRate = 30;
  2. var pencil:Shape = new Shape();
  3. addChild(pencil);
  4.  
  5. var index:int = 0;
  6. var points:Array = new Array();
  7. var circle:Shape = new Shape();
  8. circle.graphics.beginFill(0x000000);
  9. circle.graphics.drawCircle(0,0, 5);
  10. addChild(circle);
  11.  
  12. stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  13. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  14.  
  15. circle.addEventListener(Event.ENTER_FRAME, onMoveCircle);
  16.  
  17. function onDown(evt:MouseEvent):void {
  18.     pencil.graphics.lineStyle(0,0x000000);
  19.     pencil.graphics.moveTo(mouseX, mouseY);
  20.     stage.addEventListener(MouseEvent.MOUSE_MOVE, onDraw);
  21. }
  22.  
  23. function onUp(evt:MouseEvent):void {
  24.     stage.removeEventListener(MouseEvent.MOUSE_MOVE, onDraw);
  25. }
  26.  
  27. function onDraw(evt:Event):void {
  28.     pencil.graphics.lineTo(mouseX, mouseY);
  29.     points.push(new Point(mouseX, mouseY));
  30. }
  31.  
  32. function onMoveCircle(evt:Event):void {
  33.     if (points.length>0) {
  34.         circle.x += (points[index].x - circle.x) / 4;
  35.         circle.y += (points[index].y - circle.y) / 4;
  36.         index++;
  37.         if (index==points.length) {
  38.             index=0;
  39.         }
  40.     }
  41. }

Wrote this in response to a student question. It causes a circle shape to animate along lines drawn by the user.

Posted in arrays, motion | Tagged , | 2 Comments