Monthly Archives: November 2008

Isometric Box

Actionscript:
  1. stage.frameRate = 30;
  2.  
  3. for (var i:int = 0; i<100; i++){
  4.     makeBoxSegment(200, 200 - i, i * 2);
  5. }
  6.  
  7. function makeBoxSegment(xp:Number, yp:Number, col:uint):Sprite {
  8.     var isoBox:Sprite = Sprite(addChild(new Sprite()));
  9.     with (isoBox) scaleY = .5, y = yp, x = xp;
  10.     var box:Shape = Shape(isoBox.addChild(new Shape()));
  11.     box.rotation = 45;
  12.     with (box.graphics) beginFill(col), drawRect(-50,-50,100,100);
  13.     isoBox.addEventListener(Event.ENTER_FRAME, onRotate);
  14.     return isoBox;
  15. }
  16.  
  17. function onRotate(evt:Event):void {
  18.     evt.currentTarget.getChildAt(0).rotation = mouseX;
  19. }

An isometric box that rotates with the mouseX.

Posted in DisplayObject, Graphics | Tagged , , , | 2 Comments

Multiple Keys

Actionscript:
  1. var key:Object = new Object();
  2. stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
  3. stage.addEventListener(KeyboardEvent.KEY_UP, onKeyReleased);
  4. function onKeyPressed(evt:KeyboardEvent):void {
  5.     key[evt.keyCode] = true;
  6.     key.keyCode = evt.keyCode;
  7. }
  8. function onKeyReleased(evt:KeyboardEvent):void {
  9.     key[evt.keyCode] = false
  10. }
  11.  
  12. // example
  13.  
  14. addEventListener(Event.ENTER_FRAME, onLoop);
  15. function onLoop(evt:Event):void {
  16.    
  17.     //trace(key.keyCode);
  18.      
  19.     if (key[Keyboard.LEFT]){
  20.         trace("left");
  21.     }
  22.    
  23.     if (key[Keyboard.RIGHT]){
  24.         trace("right");
  25.     }
  26.    
  27.     // keys #1, #2 and #3 are down
  28.     if (key[49] && key[50] && key[51]){
  29.         trace("one two thee");
  30.     }
  31.    
  32.     // keys #6, #7, #8 and #9 keys are down
  33.     if (key[54] && key[55] && key[56] && key[57]){
  34.         trace("six seven eight nine");
  35.     }
  36. }

The first 10 lines of code make up this snippet. This is an easy way to keep track of multiple key presses. For games, this is the only key technique I use ... wrapped up in a Singleton.

Posted in associative arrays, keys | Tagged , | 4 Comments

String.replace()

Actionscript:
  1. var words:String = "ActionSnippet.com is a website. ActionSnippet.com is a blog.";
  2.  
  3. // outputs: "ActionSnippet.com is a website. ActionSnippet.com is a blog.";
  4. trace(words);
  5.  
  6. // the "/g" tells it to replace all instances of ActionSnippet.com
  7. words = words.replace(/ActionSnippet.com/g, "SomeWebsite.com");
  8.  
  9. // outputs: SomeWebsite.com is a website. SomeWebsite.com is a blog.
  10. trace(words);

Just a quick response to a student question.

Posted in string manipulation, strings | Tagged , , | Leave a comment

Recursive Tree

Actionscript:
  1. var branches:int = 0;
  2. var maxBranches:int = 400;
  3.  
  4. graphics.lineStyle(0,0x000000);
  5.  
  6. makeBranch(300,350,100,-45,45);
  7.      
  8. function makeBranch(xp:Number, yp:Number, leng:Number, min:Number, max:Number):void {
  9.  
  10.     var endX:Number, endY:Number;
  11.     var theta:Number = (min + Math.random()*(max-min) - 90) * Math.PI / 180;
  12.      
  13.     endX = xp + leng * Math.cos(theta);
  14.     endY = yp + leng * Math.sin(theta);
  15.  
  16.     graphics.moveTo(xp, yp);
  17.     graphics.lineTo(endX, endY);
  18.    
  19.     if (branches <maxBranches) {
  20.         var newLength:Number = leng*.7;
  21.         setTimeout(makeBranch, 0, endX, endY, newLength, -90, 0);
  22.         setTimeout(makeBranch, 0, endX, endY, newLength, 0, 90);
  23.     }
  24.     branches+=2;
  25. }

Draws a tree using recursion.

Posted in Graphics, functions | Tagged , , , | Leave a comment

3D Shape

Actionscript:
  1. stage.frameRate = 30;
  2. var centerX:Number = 200, centerY:Number = 200, zpos:Number, xpos:Number, ypos:Number, depth:Number;
  3. var rotX:Number = 0, rotY:Number = 0, px:Number, py:Number, pz:Number;
  4. var cosx:Number, cosy:Number, sinx:Number, siny:Number;
  5.  
  6. var canvas:BitmapData = new BitmapData(400,400,true,0xFF000000);
  7. addChild(new Bitmap(canvas));
  8.  
  9. addEventListener(Event.ENTER_FRAME, onLoop);
  10.  
  11. function onLoop(evt:Event):void {
  12.     canvas.fillRect(canvas.rect, 0xFF000000);
  13.      rotX += (mouseX / 50 - rotX)/12;
  14.      rotY += (mouseY / 50 - rotY)/12;
  15.      
  16.      cosx = Math.cos(rotX);
  17.      cosy = Math.cos(rotY);
  18.      sinx = Math.sin(rotX);
  19.      siny = Math.sin(rotY);
  20.      for (var a:Number =0; a <6.28; a+=.1){
  21.           for (var b:Number =0; b <6.28; b+=.05){
  22.               px = 100 * Math.cos(a) * Math.cos(b) * Math.cos(b);
  23.               py = 100 * Math.sin(a) * Math.cos(b)
  24.               pz = 100 * Math.sin(b);
  25.               zpos= pz*cosx - px*sinx  ;
  26.               xpos= pz*sinx +px*cosx  ;
  27.               ypos= py*cosy - zpos*siny  ;
  28.               zpos= py*siny+ zpos*cosy ;
  29.               depth = 1/((zpos/340)+1);
  30.               canvas.setPixel((xpos * depth) + centerX, (ypos * depth) + centerY, 0xFFFFFF);
  31.           }
  32.      }
  33. }

Renders a rotating 3D shape.

Posted in BitmapData, setPixel | Tagged , , | 5 Comments

Simple Particles

Actionscript:
  1. stage.frameRate = 30;
  2. addEventListener(Event.ENTER_FRAME, onLoop);
  3. function onLoop(evt:Event):void{
  4.     if (int(Math.random()*5)==1){
  5.       for (var i:int= 0; i<10; i++) createParticle();
  6.     }
  7. }
  8.  
  9. function createParticle():void{
  10.     var s:MovieClip = new MovieClip();
  11.     s.graphics.beginFill(0);
  12.     s.graphics.drawCircle(0,0,Math.random()*10 + 2);
  13.     s.velX = Math.random()*10-5
  14.     s.velY =  Math.random()*10-5
  15.     s.posX = s.x = 200;
  16.     s.posY = s.y = 200;
  17.     addChild(s);
  18.     s.addEventListener(Event.ENTER_FRAME, onRunParticle);
  19. }
  20.  
  21. function onRunParticle(evt:Event):void {
  22.     var s:MovieClip = MovieClip(evt.currentTarget);
  23.     s.posX += s.velX;
  24.     s.posY += s.velY;
  25.     s.scaleX = s.scaleY -=  .04;
  26.     if (s.scaleX <0){
  27.         removeChild(s);
  28.         s.removeEventListener(Event.ENTER_FRAME, onRunParticle);
  29.     }
  30.     s.x = s.posX;
  31.     s.y = s.posY;
  32. }

Nothing special here. But my students are always asking me about this - in class I have them alter this code to make fire, water and abstract particle systems.

Posted in motion, random | Tagged , , , | 6 Comments

Dynamic Timeline Vars

Actionscript:
  1. this.myVar = "I am a dynamic variable";
  2. trace(this.myVar);
  3.  
  4. // trace(myVar) // will cause an error

This code will add dynamic untyped variables to the timeline. Although this example is pretty useless, it scratches the surface of an interesting topic.... by default all flash timeline code gets compiled into a giant dynamic document class that uses the undocumented addFrameScript() function. This means that all import statements on the timeline, even ones not on frame one become part of this large document class.

Posted in timeline, variables | Tagged , , | 2 Comments

Recursion Trick w/ setTimeout()

Actionscript:
  1. var counter:int = 0;
  2.  
  3. graphics.lineStyle(0,0x000000);
  4.  
  5. recursive();
  6.  
  7. function recursive():void{
  8.    
  9.     if (counter <4000){
  10.        graphics.moveTo(10,10);
  11.        graphics.lineTo(counter, 200);
  12.        counter+=4;
  13.           // don't call recursive(), use setTimeout instead
  14.        setTimeout(recursive,0);
  15.     }else{
  16.         trace(counter / 4 + " lines were drawn");
  17.     }

Be careful with this one, if you don't know what your doing you may be able to crash flash.

Anyway... if you use a recursive function in flash you may find yourself getting a stack overflow error. You can avoid this by using setTimeout():

Actionscript:
  1. // don't call recursive(), use setTimeout() instead
  2. setTimeout(recursive,0);

Of course... the stack overflow error is there for a reason, if used incorrectly you could bring the flash player to a standstill.

You can also achieve animated recursion by actually adding a delay to your setTimout() call:

Actionscript:
  1. // don't call recursive(), use setTimeout() instead
  2. setTimeout(recursive,10);

Posted in functions | Tagged , , , | Leave a comment

MovieClip.prototype

Actionscript:
  1. MovieClip.prototype.tint = function(col:uint):void {
  2.     var ct:ColorTransform = transform.colorTransform;
  3.     ct.color = col;
  4.     this.transform.colorTransform = ct;
  5. }
  6.  
  7. var circle:MovieClip = MovieClip(addChild(new MovieClip()));
  8. with (circle.graphics) {
  9.     beginFill(0x123455);
  10.     drawCircle(0,0,50);
  11.     x = 100;
  12.     y = 100;
  13. }
  14.  
  15. circle.tint(0xFF0000);

When AS3 first came out I didn't realize that prototype was still around.... This adds a function called tint() to all MovieClips. You should extend MovieClip instead of using this method.... but it's interesting to see that it's still around. There's an explanation of prototype and the AS3 namespace here.

Posted in MovieClip, color | Tagged , , , | Leave a comment

10,000 Transparent Sprites

Actionscript:
  1. stage.frameRate = 30;
  2.  
  3. var imageNum:int = 10000;
  4. var point:Point = new Point(0,0);
  5. var s:Sprite = new Sprite();
  6. s.graphics.beginFill(0xCCCCCC);
  7. s.graphics.lineStyle(0,0x000000);
  8. s.graphics.drawCircle(3,3,3);
  9. s.alpha = .1;
  10.  
  11. var nested:Sprite = new Sprite();
  12. nested.addChild(s);
  13. var image:BitmapData = new BitmapData(s.width, s.height, true, 0x00000000);
  14. image.draw(nested);
  15.  
  16. var canvas:BitmapData = new BitmapData(400,400, true, 0xFFFFFFFF);
  17. addChild(new Bitmap(canvas));
  18.  
  19. var xPos:Array = new Array();
  20. var yPos:Array = new Array();
  21. for (var i:int = 0; i<imageNum; i++) {
  22.     xPos.push(Math.random()*400);
  23.     yPos.push(Math.random()*400);
  24. }
  25.  
  26. addEventListener(Event.ENTER_FRAME, onLoop);
  27. function onLoop(evt:Event):void {
  28.     canvas.fillRect(new Rectangle(0,0,400,400), 0xFFFFFFFF);
  29.     var div:Number;
  30.     for (var i:int = 0; i<imageNum; i++) {
  31.         div  = (i / 100)+2;
  32.         xPos[i] += (mouseX - xPos[i])/div;
  33.         yPos[i] += (mouseY - yPos[i])/div;
  34.         point.x = xPos[i];
  35.         point.y = yPos[i];
  36.         canvas.copyPixels(image, image.rect, point, null, null, true);
  37.     }
  38. }

This is from my other blog but I figured it was worth posting here. It draws 10'000 transparent circles that each follow the mouse at different speeds. This is achieved using copyPixels().

Posted in BitmapData, motion | Tagged , , | 2 Comments