# Tutorial (API DRAWING 2)

**URL:** <https://forum.kirupa.com/t/tutorial-api-drawing-2/176233>\
**Category:** Uncategorized\
**Created:** [January 21, 2006, 9:17pm UTC](https://forum.kirupa.com/t/tutorial-api-drawing-2/176233 "2006-01-21T21:17:49Z")\
**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, 9:17pm UTC](https://forum.kirupa.com/t/tutorial-api-drawing-2/176233/1 "2006-01-21T21:17:49Z")

</div>

[CENTER] **API TUTORIAL 2** [/CENTER]

So this is version 2 of API. If you have not read the first one then read it here: [http://www.kirupa.com/forum/showthread.php?t=206309](http://www.kirupa.com/forum/showthread.php?t=206309)  
So in this tutorial I will explain how to make two boxes and make them dragable and connect them with a line.  
So lets get started:  
We made one box in the first tutorial…we need another one so we will create it:

ActionScript Code:  
[FONT=Courier New][LEFT]\</p\>  
\<p\>this.[COLOR=#0000ff]createEmptyMovieClip[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>this.[COLOR=#0000ff]createEmptyMovieClip[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_/_\</p\>  
\<p\>BOX 1\</p\>  
\<p\>_/_[/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]_/_\</p\>  
\<p\>BOX 2\</p\>  
\<p\>_/_[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_[//boxtwo.lineStyle](https://boxtwo.lineStyle)(thickness,0xCOLORCODE)\</p\>_[/COLOR]  
\<p\>[COLOR=#808080]_//You must have the 0x before you put the color code\</p\>_[/COLOR]  
\<p\>boxtwo.[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]_[//boxtwo.beginFill](https://boxtwo.beginFill)(0xCOLORCODE)\</p\>_[/COLOR]  
\<p\>boxtwo.[COLOR=#0000ff]beginFill[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Sets the fill inside the boxtwo to yellow\</p\>_[/COLOR]  
\<p\>[COLOR=#808080]_//This will move the boxtwo so that you can start drawing (x,y)\</p\>_[/COLOR]  
\<p\>boxtwo.[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\>boxtwo.[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\>boxtwo.[COLOR=#0000ff]lineTo[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Move 20 x and stay at 20 y\</p\>_[/COLOR]  
\<p\>boxtwo.[COLOR=#0000ff]lineTo[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Stay at 20 x and move up to 0 y\</p\>_[/COLOR]  
\<p\>boxtwo.[COLOR=#0000ff]lineTo[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Go back to origanal spot\</p\>_[/COLOR]  
\<p\>[COLOR=#808080]_//Moves the boxtwo to 100 x\</p\>_[/COLOR]  
\<p\>boxtwo.[COLOR=#0000ff]\_x[/COLOR] = [COLOR=#000080]200[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_//Moves the boxtwo to 100 y\</p\>_[/COLOR]  
\<p\>boxtwo.[COLOR=#0000ff]\_y[/COLOR] = [COLOR=#000080]200[/COLOR]\</p\>  
\<p\>  
[/LEFT]  
[/FONT]

So now that we have 2 boxes we want to make them dragable:  
We learnt how to create functions in the other tutorial so we create two dragable functions

ActionScript Code:  
[FONT=Courier New][LEFT]\</p\>  
\<p\>[COLOR=#808080]_//On Press start dragging the box\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]onPress[/COLOR] = [COLOR=#000000] **function** [/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]\</p\>  
\<p\> box.[COLOR=#0000ff]startDrag[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>[COLOR=#000000]}[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_//On Release stop dragging the box\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]onRelease[/COLOR] = [COLOR=#000000] **function** [/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]\</p\>  
\<p\> box.[COLOR=#0000ff]stopDrag[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>[COLOR=#000000]}[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_//On Press start dragging boxtwo\</p\>_[/COLOR]  
\<p\>boxtwo.[COLOR=#0000ff]onPress[/COLOR] = [COLOR=#000000] **function** [/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]\</p\>  
\<p\> box.[COLOR=#0000ff]startDrag[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>[COLOR=#000000]}[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_//On Release stop dragging the box\</p\>_[/COLOR]  
\<p\>boxtwo.[COLOR=#0000ff]onRelease[/COLOR] = [COLOR=#000000] **function** [/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]\</p\>  
\<p\> boxtwo.[COLOR=#0000ff]stopDrag[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>[COLOR=#000000]}[/COLOR] \</p\>  
\<p\>  
[/LEFT]  
[/FONT]

So test your movie and you will see that both the boxes are dragable.  
Now we need to create a line to go in-between the boxes so add this to the top of the script

ActionScript Code:  
[FONT=Courier New][LEFT]\</p\>  
\<p\>this.[COLOR=#0000ff]createEmptyMovieClip[/COLOR]COLOR=#000000[/COLOR] \</p\>  
\<p\>  
[/LEFT]  
[/FONT]

So now that we have the line we need to draw again:  
(Read the comments)

ActionScript Code:  
[FONT=Courier New][LEFT]\</p\>  
\<p\>[COLOR=#808080]_//When you move your mouse activate this function\</p\>_[/COLOR]  
\<p\>this.[COLOR=#0000ff]onMouseMove[/COLOR] = [COLOR=#000000] **function** [/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]\</p\>  
\<p\> [COLOR=#808080]_//If there was another line created clear it\</p\>_[/COLOR]  
\<p\> line.[COLOR=#0000ff]clear[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\> [COLOR=#808080]_//Sets the properties\</p\>_[/COLOR]  
\<p\> line.[COLOR=#0000ff]lineStyle[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\> [COLOR=#808080]_//Move to box x +10 and y +10\</p\>_[/COLOR]  
\<p\> line.[COLOR=#0000ff]moveTo[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\> [COLOR=#808080]_//Move to box x +10 and y +10\</p\>_[/COLOR]  
\<p\> line.[COLOR=#0000ff]lineTo[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\> [COLOR=#808080]_//Update it immediately \</p\>_[/COLOR]  
\<p\> [COLOR=#0000ff]updateAfterEvent[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>[COLOR=#000000]}[/COLOR]\</p\>  
\<p\>&nbsp;\</p\>  
\<p\>  
[/LEFT]  
[/FONT]

Now you have a line in the middle of the boxes. You can drag the boxes and it will update the line after you moved it!  
So your final code would be:

ActionScript Code:  
[FONT=Courier New][LEFT]\</p\>  
\<p\>this.[COLOR=#0000ff]createEmptyMovieClip[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>this.[COLOR=#0000ff]createEmptyMovieClip[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>this.[COLOR=#0000ff]createEmptyMovieClip[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_/_\</p\>  
\<p\>BOX 1\</p\>  
\<p\>_/_[/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]_/_\</p\>  
\<p\>BOX 2\</p\>  
\<p\>_/_[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_[//boxtwo.lineStyle](https://boxtwo.lineStyle)(thickness,0xCOLORCODE)\</p\>_[/COLOR]  
\<p\>[COLOR=#808080]_//You must have the 0x before you put the color code\</p\>_[/COLOR]  
\<p\>boxtwo.[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]_[//boxtwo.beginFill](https://boxtwo.beginFill)(0xCOLORCODE)\</p\>_[/COLOR]  
\<p\>boxtwo.[COLOR=#0000ff]beginFill[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Sets the fill inside the boxtwo to yellow\</p\>_[/COLOR]  
\<p\>[COLOR=#808080]_//This will move the boxtwo so that you can start drawing (x,y)\</p\>_[/COLOR]  
\<p\>boxtwo.[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\>boxtwo.[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\>boxtwo.[COLOR=#0000ff]lineTo[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Move 20 x and stay at 20 y\</p\>_[/COLOR]  
\<p\>boxtwo.[COLOR=#0000ff]lineTo[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Stay at 20 x and move up to 0 y\</p\>_[/COLOR]  
\<p\>boxtwo.[COLOR=#0000ff]lineTo[/COLOR]COLOR=#000000[/COLOR] [COLOR=#808080]_//Go back to origanal spot\</p\>_[/COLOR]  
\<p\>[COLOR=#808080]_//Moves the boxtwo to 100 x\</p\>_[/COLOR]  
\<p\>boxtwo.[COLOR=#0000ff]\_x[/COLOR] = [COLOR=#000080]200[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_//Moves the boxtwo to 100 y\</p\>_[/COLOR]  
\<p\>boxtwo.[COLOR=#0000ff]\_y[/COLOR] = [COLOR=#000080]200[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_//On Press start dragging the box\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]onPress[/COLOR] = [COLOR=#000000] **function** [/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]\</p\>  
\<p\> box.[COLOR=#0000ff]startDrag[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>[COLOR=#000000]}[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_//On Release stop dragging the box\</p\>_[/COLOR]  
\<p\>box.[COLOR=#0000ff]onRelease[/COLOR] = [COLOR=#000000] **function** [/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]\</p\>  
\<p\> box.[COLOR=#0000ff]stopDrag[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>[COLOR=#000000]}[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_//On Press start dragging boxtwo\</p\>_[/COLOR]  
\<p\>boxtwo.[COLOR=#0000ff]onPress[/COLOR] = [COLOR=#000000] **function** [/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]\</p\>  
\<p\> boxtwo.[COLOR=#0000ff]startDrag[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>[COLOR=#000000]}[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_//On Release stop dragging the box\</p\>_[/COLOR]  
\<p\>boxtwo.[COLOR=#0000ff]onRelease[/COLOR] = [COLOR=#000000] **function** [/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]\</p\>  
\<p\> boxtwo.[COLOR=#0000ff]stopDrag[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>[COLOR=#000000]}[/COLOR]\</p\>  
\<p\>[COLOR=#808080]_//When you move your mouse activate this function\</p\>_[/COLOR]  
\<p\>this.[COLOR=#0000ff]onMouseMove[/COLOR] = [COLOR=#000000] **function** [/COLOR]COLOR=#000000[/COLOR] [COLOR=#000000]{[/COLOR]\</p\>  
\<p\> [COLOR=#808080]_//If there was another line created clear it\</p\>_[/COLOR]  
\<p\> line.[COLOR=#0000ff]clear[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\> [COLOR=#808080]_//Sets the properties\</p\>_[/COLOR]  
\<p\> line.[COLOR=#0000ff]lineStyle[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\> [COLOR=#808080]_//Move to box x +10 and y +10\</p\>_[/COLOR]  
\<p\> line.[COLOR=#0000ff]moveTo[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\> [COLOR=#808080]_//Move to box x +10 and y +10\</p\>_[/COLOR]  
\<p\> line.[COLOR=#0000ff]lineTo[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\> [COLOR=#808080]_//Update it immediatly \</p\>_[/COLOR]  
\<p\> [COLOR=#0000ff]updateAfterEvent[/COLOR]COLOR=#000000[/COLOR]\</p\>  
\<p\>[COLOR=#000000]}[/COLOR]\</p\>  
\<p\>  
[/LEFT]  
[/FONT]

Cya, Crayon-Inc!