# Tutorial (API DRAWING)

**URL:** <https://forum.kirupa.com/t/tutorial-api-drawing/176222>\
**Category:** flash\
**Created:** [January 21, 2006, 8:21pm UTC](https://forum.kirupa.com/t/tutorial-api-drawing/176222 "2006-01-21T20:21:04Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![GPP](https://avatars.discourse-cdn.com/v4/letter/g/848f3c/32.png) [@GPP](https://forum.kirupa.com/u/GPP)\
**Post date:** [January 21, 2006, 8:21pm UTC](https://forum.kirupa.com/t/tutorial-api-drawing/176222/1 "2006-01-21T20:21:04Z")

</div>

[CENTER]**[COLOR=black][FONT=Verdana]API DRAWING[/FONT][/COLOR]**

[/CENTER]

[COLOR=black][FONT=Arial]Yes I know I have not been here for quite some time, because of school. But I have some free time now… and I’m gonna write a tutorial.[/FONT][/COLOR]

I’m surprised at how many people don’t know what API is or they don’t know how to do it. For people who don’t know what API is, it’s a actionscript component built into Flash which you can use to draw anything with actionscript! Nothing in the frame and nothing in the library! Just pure actionscript!

So lets get started:

First you will have to create a brand new movieclip. There is only 1 line involved in doing this!

ActionScript Code:  
[FONT=Courier New][LEFT]\</p\>  
\<p\>[COLOR=#808080]_//This will create an empty movieclip called box and with the depth of 1\</p\>_[/COLOR]  
\<p\>this.[COLOR=#0000ff]createEmptyMovieClip[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>  
[/LEFT]  
[/FONT]

Now you have to set the movieclips properties:

ActionScript Code:  
[FONT=Courier New][LEFT]\</p\>  
\<p\>[COLOR=#808080]_[//box.lineStyle](https://box.lineStyle)(thickness,0xCOLORCODE)\</p\>_[/COLOR]  
\<p\>[COLOR=#808080]_//You must have the 0x before you put the color code\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]lineStyle[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Sets the thickness to 1 and the line color to black\</p\>_[/COLOR]  
\<p\>[COLOR=#808080]_[//box.beginFill](https://box.beginFill)(0xCOLORCODE)\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]beginFill[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Sets the fill inside the box to yellow\</p\>_[/COLOR]  
\<p\>  
[/LEFT]  
[/FONT]

Now that we have set the properties we need to move the box somewhere to start drawing.

ActionScript Code:  
[FONT=Courier New][LEFT]\</p\>  
\<p\>[COLOR=#808080]_//This will move the box so that you can start drawing (x,y)\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]moveTo[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Move it to 0 x and 0 y\</p\>_[/COLOR]  
\<p\>  
[/LEFT]  
[/FONT]

Now we can start drawing:

ActionScript Code:  
[FONT=Courier New][LEFT]\</p\>  
\<p\>[COLOR=#808080]_//The line to method will draw a line from 0 x and 0 y (Which was set above) to the x and y you set it to move\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]lineTo[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Move from 0 x and 0 y to 0 x and 20 y\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]lineTo[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Move 20 x and stay at 20 y\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]lineTo[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Stay at 20 x and move up to 0 y\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]lineTo[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Go back to origanal spot\</p\>_[/COLOR]  
\<p\>  
[/LEFT]  
[/FONT]

Now we must move it to another location to view it better:

ActionScript Code:  
[FONT=Courier New][LEFT]\</p\>  
\<p\>[COLOR=#808080]_//Moves the box to 100 x\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]\_x[/COLOR] = [COLOR=#000080]100[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_//Moves the box to 200 y\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]\_y[/COLOR] = [COLOR=#000080]200[/COLOR]\</p\>  
\<p\>  
[/LEFT]  
[/FONT]

Now test your movie… you will see that you have created a square!

Now you want things to happen when you click on the square, right!

ActionScript Code:  
[FONT=Courier New][LEFT]\</p\>  
\<p\>[COLOR=#808080]_//When you press on the box a function is activated\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]onPress[/COLOR] = [COLOR=#000000] **function** [/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]\</p\>  
\<p\> [COLOR=#808080]_//This will make the output box say “Wow you did it!”\</p\>_[/COLOR]  
\<p\> [COLOR=#0000ff]trace[/COLOR][COLOR=#000000]([/COLOR][COLOR=#ff0000]“Wow you did it!”[/COLOR][COLOR=#000000])[/COLOR]\</p\>  
\<p\>[COLOR=#000000]}[/COLOR]\</p\>  
\<p\>  
[/LEFT]  
[/FONT]

So your final code is:

ActionScript Code:  
[FONT=Courier New][LEFT]\</p\>  
\<p\>this.[COLOR=#0000ff]createEmptyMovieClip[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_[//box.lineStyle](https://box.lineStyle)(thickness,0xCOLORCODE)\</p\>_[/COLOR]  
\<p\>[COLOR=#808080]_//You must have the 0x before you put the color code\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]lineStyle[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Sets the thickness to 1 and the line color to black\</p\>_[/COLOR]  
\<p\>[COLOR=#808080]_[//box.beginFill](https://box.beginFill)(0xCOLORCODE)\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]beginFill[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Sets the fill inside the box to yellow\</p\>_[/COLOR]  
\<p\>[COLOR=#808080]_//This will move the box so that you can start drawing (x,y)\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]moveTo[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Move it to 0 x and 0 y\</p\>_[/COLOR]  
\<p\>[COLOR=#808080]_//The line to method will draw a line from 0 x and 0 y (Which was set above) to the x and y you set it to move\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]lineTo[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Move from 0 x and 0 y to 0 x and 20 y\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]lineTo[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Move 20 x and stay at 20 y\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]lineTo[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Stay at 20 x and move up to 0 y\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]lineTo[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Go back to origanal spot\</p\>_[/COLOR]  
\<p\>[COLOR=#808080]_//Moves the box to 100 x\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]\_x[/COLOR] = [COLOR=#000080]100[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_//Moves the box to 100 y\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]\_y[/COLOR] = [COLOR=#000080]200[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_//When you press on the box a fuction is activated\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]onPress[/COLOR] = [COLOR=#000000] **function** [/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]\</p\>  
\<p\> [COLOR=#808080]_//This will make the output box say “Wow you did it!”\</p\>_[/COLOR]  
\<p\> [COLOR=#0000ff]trace[/COLOR][COLOR=#000000]([/COLOR][COLOR=#ff0000]“Wow you did it!”[/COLOR][COLOR=#000000])[/COLOR]\</p\>  
\<p\>[COLOR=#000000]}[/COLOR]\</p\>  
\<p\>  
[/LEFT]  
[/FONT]

You have made a box with a function, without the library and without drawing anything! Just pure actionscript!

Enjoy, Crayon-Inc.