AS3 Drawing API examples

OK, so with ActionScript 3.0 drawing API you can draw almost anything. You can use straight or curved lines, solid colors or gradients and more. I have been searching for some interesting drawing examples but almost everyone will show you single example and that's it.

In order to feel comfortable with this library I needed some practice, so here they are - some basic shapes with AS3 drawing library.

shape 1 ActionScript class:

package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape1 extends MovieClip {
  
  public function shape1() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(100,160);
   this.graphics.lineTo(100,100);
   this.graphics.lineTo(120,100);
   this.graphics.lineTo(120,120);
   this.graphics.lineTo(140,120);
   this.graphics.lineTo(140,100);
   this.graphics.lineTo(160,100);
   this.graphics.lineTo(160,160);
   this.graphics.lineTo(140,160);
   this.graphics.lineTo(140,140);
   this.graphics.lineTo(120,140);
   this.graphics.lineTo(120,160);
   this.graphics.endFill();
  }
 }
}

shape 2 ActionScript class:

package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape2 extends MovieClip {
  
  public function shape2() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(130,100);
   this.graphics.lineTo(140,120);
   this.graphics.lineTo(160,120);
   this.graphics.lineTo(150,140);
   this.graphics.lineTo(110,140);
   this.graphics.lineTo(100,120);
   this.graphics.lineTo(120,120);
   this.graphics.endFill();
  }
 }
}

shape 3 ActionScript class:

package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape3 extends MovieClip {
  
  public function shape3() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(120,100);
   this.graphics.lineTo(150,100);
   this.graphics.lineTo(170,140);
   this.graphics.lineTo(100,140);
   this.graphics.endFill();
  }
 }
}

shape 4 ActionScript class:

package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape4 extends MovieClip {
  
  public function shape4() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(100,110);
   this.graphics.lineTo(110,100);
   this.graphics.lineTo(120,110);
   this.graphics.lineTo(130,100);
   this.graphics.lineTo(140,110);
   this.graphics.lineTo(150,100);
   this.graphics.lineTo(160,110);
   this.graphics.lineTo(160,150);
   this.graphics.lineTo(100,150);
   this.graphics.endFill();
  }
 }
}

shape 5 ActionScript class:

package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape5 extends MovieClip {
  
  public function shape5() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(130,100);
   this.graphics.lineTo(150,110);
   this.graphics.lineTo(160,130);
   this.graphics.lineTo(150,150);
   this.graphics.lineTo(130,160);
   this.graphics.lineTo(110,150);
   this.graphics.lineTo(100,130);
   this.graphics.lineTo(110,110);
   this.graphics.endFill();
  }
 }
}

Best way to do this is to draw your shapes on paper with coordinate system in place, but remember not Cartesian system but Flash coordinate system with (0,0) point started in top left corner of the Stage.

These shapes don't have to be simple. If we take last shape, number 5 and just keep adding new lines, we can get shape number 6.

package {
 
 import flash.display.MovieClip;
 import flash.display.Graphics;
 
 public class shape6 extends MovieClip {
  
  public function shape6() {
   
   this.graphics.lineStyle(1, 0x000000);
   this.graphics.beginFill(0xe6e6e6);
   this.graphics.moveTo(130,100);
   this.graphics.lineTo(150,110);
   this.graphics.lineTo(160,130);
   this.graphics.lineTo(150,150);
   this.graphics.lineTo(130,160);
   this.graphics.lineTo(110,150);
   this.graphics.lineTo(100,130);
   this.graphics.lineTo(110,110);
   this.graphics.endFill();
   
   this.graphics.beginFill(0xeffffff);
   this.graphics.moveTo(120,120);
   this.graphics.lineTo(140,120);
   this.graphics.lineTo(140,140);
   this.graphics.lineTo(120,140);
   this.graphics.endFill();
  }
 }
}

This kind of drawing we used to call 'turtle graphics'.
Next time some examples including curves and gradients.


*_*