[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:
this.createEmptyMovieClip("box",1)
this.createEmptyMovieClip("boxtwo",2)
/*
BOX 1
*/
//box.lineStyle(thickness,0xCOLORCODE)
//You must have the 0x before you put the color code
box.lineStyle(1,0x000000) //Sets the thickness to 1 and the line color to black
//box.beginFill(0xCOLORCODE)
box.beginFill(0xFFFF00) //Sets the fill inside the box to yellow
//This will move the box so that you can start drawing (x,y)
box.moveTo(0,0) //Move it to 0 x and 0 y
//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
box.lineTo(0,20) //Move from 0 x and 0 y to 0 x and 20 y
box.lineTo(20,20) //Move 20 x and stay at 20 y
box.lineTo(20,0) //Stay at 20 x and move up to 0 y
box.lineTo(0,0) //Go back to origanal spot
//Moves the box to 100 x
box._x = 100
//Moves the box to 100 y
box._y = 200
/*
BOX 2
*/
//boxtwo.lineStyle(thickness,0xCOLORCODE)
//You must have the 0x before you put the color code
boxtwo.lineStyle(1,0x000000) //Sets the thickness to 1 and the line color to black
//boxtwo.beginFill(0xCOLORCODE)
boxtwo.beginFill(0xFFFF00) //Sets the fill inside the boxtwo to yellow
//This will move the boxtwo so that you can start drawing (x,y)
boxtwo.moveTo(0,0) //Move it to 0 x and 0 y
//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
boxtwo.lineTo(0,20) //Move from 0 x and 0 y to 0 x and 20 y
boxtwo.lineTo(20,20) //Move 20 x and stay at 20 y
boxtwo.lineTo(20,0) //Stay at 20 x and move up to 0 y
boxtwo.lineTo(0,0) //Go back to origanal spot
//Moves the boxtwo to 100 x
boxtwo._x = 200
//Moves the boxtwo to 100 y
boxtwo._y = 200
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
//On Press start dragging the box
box.onPress = function() {
box.startDrag()
}
//On Release stop dragging the box
box.onRelease = function() {
box.stopDrag()
}
//On Press start dragging boxtwo
boxtwo.onPress = function() {
box.startDrag()
}
//On Release stop dragging the box
boxtwo.onRelease = function() {
boxtwo.stopDrag()
}
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
this.createEmptyMovieClip("line",3)
So now that we have the line we need to draw again:
(Read the comments)
//When you move your mouse activate this function
this.onMouseMove = function() {
//If there was another line created clear it
line.clear()
//Sets the properties
line.lineStyle(1,0x000000)
//Move to box x +10 and y +10
line.moveTo(box._x+10,box._y+10)
//Move to box x +10 and y +10
line.lineTo(boxtwo._x+10,boxtwo._y+10)
//Update it immediately
updateAfterEvent()
}
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:
this.createEmptyMovieClip("box",1)
this.createEmptyMovieClip("boxtwo",2)
this.createEmptyMovieClip("line",3)
/*
BOX 1
*/
//box.lineStyle(thickness,0xCOLORCODE)
//You must have the 0x before you put the color code
box.lineStyle(1,0x000000) //Sets the thickness to 1 and the line color to black
//box.beginFill(0xCOLORCODE)
box.beginFill(0xFFFF00) //Sets the fill inside the box to yellow
//This will move the box so that you can start drawing (x,y)
box.moveTo(0,0) //Move it to 0 x and 0 y
//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
box.lineTo(0,20) //Move from 0 x and 0 y to 0 x and 20 y
box.lineTo(20,20) //Move 20 x and stay at 20 y
box.lineTo(20,0) //Stay at 20 x and move up to 0 y
box.lineTo(0,0) //Go back to origanal spot
//Moves the box to 100 x
box._x = 100
//Moves the box to 100 y
box._y = 200
/*
BOX 2
*/
//boxtwo.lineStyle(thickness,0xCOLORCODE)
//You must have the 0x before you put the color code
boxtwo.lineStyle(1,0x000000) //Sets the thickness to 1 and the line color to black
//boxtwo.beginFill(0xCOLORCODE)
boxtwo.beginFill(0xFFFF00) //Sets the fill inside the boxtwo to yellow
//This will move the boxtwo so that you can start drawing (x,y)
boxtwo.moveTo(0,0) //Move it to 0 x and 0 y
//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
boxtwo.lineTo(0,20) //Move from 0 x and 0 y to 0 x and 20 y
boxtwo.lineTo(20,20) //Move 20 x and stay at 20 y
boxtwo.lineTo(20,0) //Stay at 20 x and move up to 0 y
boxtwo.lineTo(0,0) //Go back to origanal spot
//Moves the boxtwo to 100 x
boxtwo._x = 200
//Moves the boxtwo to 100 y
boxtwo._y = 200
//On Press start dragging the box
box.onPress = function() {
box.startDrag()
}
//On Release stop dragging the box
box.onRelease = function() {
box.stopDrag()
}
//On Press start dragging boxtwo
boxtwo.onPress = function() {
boxtwo.startDrag()
}
//On Release stop dragging the box
boxtwo.onRelease = function() {
boxtwo.stopDrag()
}
//When you move your mouse activate this function
this.onMouseMove = function() {
//If there was another line created clear it
line.clear()
//Sets the properties
line.lineStyle(1,0x000000)
//Move to box x +10 and y +10
line.moveTo(box._x+10,box._y+10)
//Move to box x +10 and y +10
line.lineTo(boxtwo._x+10,boxtwo._y+10)
//Update it immediatly
updateAfterEvent()
}
Cya, Crayon-Inc!
