30 July 2009

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.

actionscript 3.0 drawing API example shapesshape 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.


*_*

5 comments:

yanji said...

Wow I would love to be able to draw and be more technically advanced. I am learning slowly but it takes time to master these things. It's great to see Bloggers like you giving us some tips and know how. This is how I have mainly picked up my knowledge on how to do things online.

flanture said...

thanks for your comment

I'm actually not some 'expert' I just post about new things I learn and Flash is definitely something I'm big fun of, that's all

about drawing, I always thought I was anti-talent for drawing, but after I read some blogs about it and seen some excellent videos on youtube I'm pretty sure anyone can learn how to draw if he/she wants to and I definitely would

thanks again

jalevy@adobe.com said...

Very nice examples! (And thanks also for the encouragement in your comment about drawing).

One way to point the Flash community to your examples would be if you put a link to it at:
http://help.adobe.com/en_US/AS3LCR/Flash_10.0/index.html

This is the ActionScript Language Reference page for the Graphics class. If you scroll way down to the bottom of the page, you’ll see an “Add Comment” button.

Thanks very much,
Jackie Levy
jalevy@adobe.com
Technical Writer - API and Developer Documentation
Adobe Systems, Inc.

jalevy@adobe.com said...

Sorry! I gave the wrong link in the above comment. The correct link to the Graphics API is:

http://help.adobe.com/en_US/AS3LCR/Flash_10.0/flash/display/Graphics.html

Jackie Levy
jalevy@adobe.com
Technical Writer - API and Developer Documentation
Adobe Systems, Inc.

Education said...

Appreciate your tips! I just used some of these techniques in my memo game on http://slicker.me/memo/

 

template by blogger templates