Monthly Archives: November 2008

Loader, Centering, Smoothing

Actionscript:
  1. var image:Loader = new Loader();
  2. image.load(new URLRequest("http://www.shapevent.com/sketchbook/wp-content/uploads/avalanche.jpg"));
  3. image.x = stage.stageWidth / 2;
  4. image.y = stage.stageHeight / 2;
  5. addChild(image);
  6.  
  7. image.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
  8. function onComplete(evt:Event):void {
  9.    
  10.     // CENTER THE IMAGE
  11.     image.content.x = -image.content.width / 2;
  12.     image.content.y = -image.content.height / 2;
  13.    
  14.     // BITMAP SMOOTHING
  15.     Bitmap(image.content).smoothing = true;
  16.     image.contentLoaderInfo.removeEventListener(Event.COMPLETE, onComplete);
  17. }
  18.  
  19.  
  20. // scale the image with the mouse to demonstrate smoothing and scaling from the center
  21. addEventListener(Event.ENTER_FRAME, onLoop);
  22. function onLoop(evt:Event):void {
  23.     image.scaleX = image.scaleY = mouseX / stage.stageWidth;
  24. }

This is really two snippets combined. How to scale the content of a Loader from the center:

Actionscript:
  1. // CENTER THE IMAGE
  2. image.content.x = -image.content.width / 2;
  3. image.content.y = -image.content.height / 2;

and how to smooth a jpg, png etc... that has been loaded dynamically into your swf:

Actionscript:
  1. // BITMAP SMOOTHING
  2. Bitmap(image.content).smoothing = true;

Posted in Uncategorized | 2 Comments

Reset Registration Point

Actionscript:
  1. // display object target, value - "center" or "upperLeft"
  2. function setRegistration(dsp:DisplayObjectContainer, v:String):void {
  3.     var i:int;
  4.     var child:DisplayObject;
  5.     var b:Rectangle=getBounds(dsp);
  6.     for (i = 0; i <dsp.numChildren; i++) {
  7.         child=dsp.getChildAt(i);
  8.         child.x+=b.x*-1;
  9.         child.y+=b.y*-1;
  10.     }
  11.     if (v=="center") {
  12.         dsp.x+=dsp.width/2;
  13.         dsp.y+=dsp.height/2;
  14.         for (i = 0; i <dsp.numChildren; i++) {
  15.             child=dsp.getChildAt(i);
  16.             child.x-=dsp.width/2;
  17.             child.y-=dsp.height/2;
  18.         }
  19.     } else if (v == "upperLeft") {
  20.         if (dsp.parent) {
  21.             b=getBounds(dsp.parent);
  22.             dsp.x=b.left;
  23.             dsp.y=b.top;
  24.         }
  25.     }
  26. }
  27.  
  28. // example:
  29. // (make a MovieClip and fill it with, text, shapes etc...)
  30.  
  31. setRegistration(clip, "center");
  32. // registration(clip, "upperLeft");
  33.  
  34. addEventListener(Event.ENTER_FRAME, onLoop);
  35. function onLoop(evt:Event):void {
  36.     clip.rotation+=1;
  37. }

Teaching beginner flash... I've noticed people always get confused about the registration point. They think they should be able to move it with the IDE or ActionScript. I always say "You can't change the registration point, you can only change the position of graphical elements in relationship to it." Anyway, as a sort of joke one day after class I wrote the above function... it changes the registration of any DisplayObjectContainer to either "center" or "upperLeft".

To test this code out, fill a MovieClip with a bunch of different things (text, graphics, scribbles)... give it a strange registration point and then run the above code on it. You'll be able to tell that the registration has changed by the way the clip rotates. Although I haven't been able to break this function, I think it's possible that it doesn't work under all circumstances.

Using reparenting is a more elegant solution to this issue. Maybe I'll post that in the next couple days.

Posted in DisplayObject, display list | Tagged , , | 2 Comments

Skew DisplayObject

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

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

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

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

new Sprite() One-liner

Actionscript:
  1. var s:Sprite = Sprite(addChild(new Sprite()));

A way to make a new sprite, add it to the display list and store a reference to it.

Figured this out on my own... but have since seen it around on a few flash blogs here and there... thought it deserved a post.

Posted in instantiation, one-liners | Tagged | Leave a comment

Alphabet with Base36 and Binary

Actionscript:
  1. var canvas:BitmapData=new BitmapData(280,100,false,0xefefef);
  2. addChild(new Bitmap(canvas));
  3.  
  4. // pixel alphbet in base36
  5. var alphabet:Array=["", "67erkgi", "e3j6dss", "75rue4u", "c5ltok8", "75s2tji", "75s2tjk", "75rugj2", "95yfnf6", "21blls4", "10nt5xo", "973it1u", "85aef4u", "59lu6nl", "cnz0hbn", "67ej51o", "67eq49c", "67ej53e", "67eq7gy", "66978m4", "6ywdqpw", "95y780c", "53b00as", "8nmdpyi", "5374thm", "53avnus", "6xsfdam"];
  6.  
  7. function drawBase36(num:String, xp:int, yp:int):void {
  8.     // convert base36 to binary
  9.     num=parseInt(num,36).toString(2);
  10.     while (num.length <35) {
  11.         num="0"+num;
  12.     }
  13.     // draw letter
  14.     for (var i:int= 0; i<35; i++) {
  15.         if (num.charAt(i)=="1") {
  16.             canvas.setPixel(i % 5 + xp, int(i / 5) + yp, 0x000000);
  17.         }
  18.     }
  19. }
  20.  
  21. // draw the entire alphabet
  22. for (var i:int = 0; i<alphabet.length; i++) {
  23.     drawBase36(alphabet[i], i * 10,10);
  24. }
  25.  
  26. // draw some words
  27. var words:Array=[0,1,3,20,9,15,14,19,14,9,16,16,5,20,0,9,19,0,3,15,4,5];
  28. for (i = 0; i<words.length; i++) {
  29.     drawBase36(alphabet[words[i]], i * 10,30);
  30. }

I had lots of fun writing this. If you run it in your timeline it will draw this:


... along with the message stored in this array [0,1,3,20,9,15,14,19,14,9,16,16,5,20,0,9,19,0,3,15,4,5].

Binary can be used for representing small images. For every 0 draw white for every 1 draw black. So when the base36 numbers are converted to binary, the 1's and 0's are used to draw each letter.

An interesting side note is that counting in binary to some very high numbers will enumerate all possible two color images at a given size. There are tons of projects related to this... here is one I found with a quick google search: every icon

I also found the wikipedia entry on base36 to be interesting. Apparently base36 can be called hexatridecimal, sexatrigesimal, hexatrigesimal or alphadecimal.

Posted in BitmapData, pixel manipulation, strings | Tagged , , , , | 2 Comments

2D Z-Sort

Actionscript:
  1. var shapes:Array = new Array();
  2.  
  3. for (var i:int = 0; i<300; i++){
  4.     var s:Shape = new Shape();
  5.     s.x = Math.random()* stage.stageWidth;
  6.     s.y = Math.random()* stage.stageHeight;
  7.     s.graphics.lineStyle(0,0x000000);
  8.     s.graphics.beginFill(0xCCCCCC);
  9.     s.graphics.drawCircle(0,0, Math.random()*s.y / 5);
  10.     shapes.push(s);
  11. }
  12.  
  13. // comment this out to remove sorting
  14. shapes.sortOn("width", Array.NUMERIC);
  15.  
  16. for (i = 0; i<shapes.length; i++){
  17.     addChild(shapes[i]);
  18. }

This uses Array.sortOn() to do some basic z-sorting based on the width property of some circle shapes.

Posted in arrays, sortOn | Tagged , | Leave a comment

Set Multiple Properties

Actionscript:
  1. // set multiple properties of an Object
  2. function setProps(o:*, props:Object):void{
  3.     for (var key:String in props){
  4.          o[key] = props[key];
  5.     }
  6. }
  7.  
  8. // example:
  9.  
  10. var s:Sprite = new Sprite();
  11. s.graphics.beginFill(0);
  12. s.graphics.drawRect(0,0,10,10);
  13. addChild(s);
  14.  
  15. // set some properties
  16. setProps(s, {x:100, y:100, scaleX:2, scaleY:2, rotation:45});

This was inspired by tweening engines like TweenLite.

Basically the same thing using a with statement:

Actionscript:
  1. with(s) x = 100, y = 100, scaleX = 2, scaleY = 2, rotation = 45;

Posted in Object, properties | Leave a comment