[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
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(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(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(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(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> </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(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(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(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(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!
