[CENTER][CENTER][FONT=Verdana]API TUTORIAL 2[/FONT][/CENTER]
[CENTER][FONT=Verdana] [/FONT][/CENTER][/CENTER]
[FONT=Verdana]So this is version 2 of API. If you have not read the first one then read it here: [COLOR=#800080]http://www.kirupa.com/forum/showthread.php?t=206309[/COLOR][/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]So in this tutorial I will explain how to make two boxes and make them dragable and connect them with a line.[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]So lets get started:[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]We made one box in the first tutorial…we need another one so we will create it:[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]
[/FONT]
[FONT=Verdana]this.createEmptyMovieClip("box",1)[/FONT]
[FONT=Verdana]this.createEmptyMovieClip("boxtwo",2)[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]/*[/FONT]
[FONT=Verdana]BOX[/FONT][FONT=Verdana] 1[/FONT][FONT=Verdana][/FONT]
[FONT=Verdana]*/[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]//box.lineStyle(thickness,0xCOLORCODE)[/FONT]
[FONT=Verdana]//You must have the 0x before you put the color code[/FONT]
[FONT=Verdana]box.lineStyle(1,0x000000) //Sets the thickness to 1 and the line color to black[/FONT]
[FONT=Verdana]//box.beginFill(0xCOLORCODE)[/FONT]
[FONT=Verdana]box.beginFill(0xFFFF00) //Sets the fill inside the box to yellow[/FONT]
[FONT=Verdana]//This will move the box so that you can start drawing (x,y)[/FONT]
[FONT=Verdana]box.moveTo(0,0) //Move it to 0 x and 0 y[/FONT]
[FONT=Verdana]//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[/FONT]
[FONT=Verdana]box.lineTo(0,20) //Move from 0 x and 0 y to 0 x and 20 y[/FONT]
[FONT=Verdana]box.lineTo(20,20) //Move 20 x and stay at 20 y[/FONT]
[FONT=Verdana]box.lineTo(20,0) //Stay at 20 x and move up to 0 y[/FONT]
[FONT=Verdana]box.lineTo(0,0) //Go back to origanal spot[/FONT]
[FONT=Verdana]//Moves the box to 100 x[/FONT]
[FONT=Verdana]box._x = 100[/FONT]
[FONT=Verdana]//Moves the box to 100 y[/FONT]
[FONT=Verdana]box._y = 200[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]/*[/FONT]
[FONT=Verdana]BOX[/FONT][FONT=Verdana] 2[/FONT][FONT=Verdana][/FONT]
[FONT=Verdana]*/[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]//boxtwo.lineStyle(thickness,0xCOLORCODE)[/FONT]
[FONT=Verdana]//You must have the 0x before you put the color code[/FONT]
[FONT=Verdana]boxtwo.lineStyle(1,0x000000) //Sets the thickness to 1 and the line color to black[/FONT]
[FONT=Verdana]//boxtwo.beginFill(0xCOLORCODE)[/FONT]
[FONT=Verdana]boxtwo.beginFill(0xFFFF00) //Sets the fill inside the boxtwo to yellow[/FONT]
[FONT=Verdana]//This will move the boxtwo so that you can start drawing (x,y)[/FONT]
[FONT=Verdana]boxtwo.moveTo(0,0) //Move it to 0 x and 0 y[/FONT]
[FONT=Verdana]//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[/FONT]
[FONT=Verdana]boxtwo.lineTo(0,20) //Move from 0 x and 0 y to 0 x and 20 y[/FONT]
[FONT=Verdana]boxtwo.lineTo(20,20) //Move 20 x and stay at 20 y[/FONT]
[FONT=Verdana]boxtwo.lineTo(20,0) //Stay at 20 x and move up to 0 y[/FONT]
[FONT=Verdana]boxtwo.lineTo(0,0) //Go back to origanal spot[/FONT]
[FONT=Verdana]//Moves the boxtwo to 100 x[/FONT]
[FONT=Verdana]boxtwo._x = 200[/FONT]
[FONT=Verdana]//Moves the boxtwo to 100 y[/FONT]
[FONT=Verdana]boxtwo._y = 200[/FONT]
[FONT=Verdana]
[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]So now that we have 2 boxes we want to make them dragable:[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]We learnt how to create functions in the other tutorial so we create two dragable functions[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]
[/FONT]
[FONT=Verdana]//On Press start dragging the box[/FONT]
[FONT=Verdana]box.onPress = function() {[/FONT]
[FONT=Verdana] box.startDrag()[/FONT]
[FONT=Verdana]}[/FONT]
[FONT=Verdana]//On Release stop dragging the box[/FONT]
[FONT=Verdana]box.onRelease = function() {[/FONT]
[FONT=Verdana] box.stopDrag()[/FONT]
[FONT=Verdana]}[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]//On Press start dragging boxtwo[/FONT]
[FONT=Verdana]boxtwo.onPress = function() {[/FONT]
[FONT=Verdana] box.startDrag()[/FONT]
[FONT=Verdana]}[/FONT]
[FONT=Verdana]//On Release stop dragging the box[/FONT]
[FONT=Verdana]boxtwo.onRelease = function() {[/FONT]
[FONT=Verdana] boxtwo.stopDrag()[/FONT]
[FONT=Verdana]} [/FONT]
[FONT=Verdana]
[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]So test your movie and you will see that both the boxes are dragable.[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]Now we need to create a line to go in-between the boxes so add this to the top of the script[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]
[/FONT]
[FONT=Verdana]this.createEmptyMovieClip("line",3) [/FONT]
[FONT=Verdana]
[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]So now that we have the line we need to draw again:[/FONT]
[FONT=Verdana](Read the comments)[/FONT]
[FONT=Verdana]
[/FONT]
[FONT=Verdana]//When you move your mouse activate this function[/FONT]
[FONT=Verdana]this.onMouseMove = function() {[/FONT]
[FONT=Verdana] //If there was another line created clear it[/FONT]
[FONT=Verdana] line.clear()[/FONT]
[FONT=Verdana] //Sets the properties[/FONT]
[FONT=Verdana] line.lineStyle(1,0x000000)[/FONT]
[FONT=Verdana] //Move to box x +10 and y +10[/FONT]
[FONT=Verdana] line.moveTo(box._x+10,box._y+10)[/FONT]
[FONT=Verdana] //Move to box x +10 and y +10[/FONT]
[FONT=Verdana] line.lineTo(boxtwo._x+10,boxtwo._y+10)[/FONT]
[FONT=Verdana] //Update it immediately [/FONT]
[FONT=Verdana] updateAfterEvent()[/FONT]
[FONT=Verdana]}[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]
[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]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![/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]So your final code would be:[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]
[/FONT]
[FONT=Verdana]this.createEmptyMovieClip("box",1)[/FONT]
[FONT=Verdana]this.createEmptyMovieClip("boxtwo",2)[/FONT]
[FONT=Verdana]this.createEmptyMovieClip("line",3)[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]/*[/FONT]
[FONT=Verdana]BOX[/FONT][FONT=Verdana] 1[/FONT][FONT=Verdana][/FONT]
[FONT=Verdana]*/[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]//box.lineStyle(thickness,0xCOLORCODE)[/FONT]
[FONT=Verdana]//You must have the 0x before you put the color code[/FONT]
[FONT=Verdana]box.lineStyle(1,0x000000) //Sets the thickness to 1 and the line color to black[/FONT]
[FONT=Verdana]//box.beginFill(0xCOLORCODE)[/FONT]
[FONT=Verdana]box.beginFill(0xFFFF00) //Sets the fill inside the box to yellow[/FONT]
[FONT=Verdana]//This will move the box so that you can start drawing (x,y)[/FONT]
[FONT=Verdana]box.moveTo(0,0) //Move it to 0 x and 0 y[/FONT]
[FONT=Verdana]//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[/FONT]
[FONT=Verdana]box.lineTo(0,20) //Move from 0 x and 0 y to 0 x and 20 y[/FONT]
[FONT=Verdana]box.lineTo(20,20) //Move 20 x and stay at 20 y[/FONT]
[FONT=Verdana]box.lineTo(20,0) //Stay at 20 x and move up to 0 y[/FONT]
[FONT=Verdana]box.lineTo(0,0) //Go back to origanal spot[/FONT]
[FONT=Verdana]//Moves the box to 100 x[/FONT]
[FONT=Verdana]box._x = 100[/FONT]
[FONT=Verdana]//Moves the box to 100 y[/FONT]
[FONT=Verdana]box._y = 200[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]/*[/FONT]
[FONT=Verdana]BOX[/FONT][FONT=Verdana] 2[/FONT][FONT=Verdana][/FONT]
[FONT=Verdana]*/[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]//boxtwo.lineStyle(thickness,0xCOLORCODE)[/FONT]
[FONT=Verdana]//You must have the 0x before you put the color code[/FONT]
[FONT=Verdana]boxtwo.lineStyle(1,0x000000) //Sets the thickness to 1 and the line color to black[/FONT]
[FONT=Verdana]//boxtwo.beginFill(0xCOLORCODE)[/FONT]
[FONT=Verdana]boxtwo.beginFill(0xFFFF00) //Sets the fill inside the boxtwo to yellow[/FONT]
[FONT=Verdana]//This will move the boxtwo so that you can start drawing (x,y)[/FONT]
[FONT=Verdana]boxtwo.moveTo(0,0) //Move it to 0 x and 0 y[/FONT]
[FONT=Verdana]//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[/FONT]
[FONT=Verdana]boxtwo.lineTo(0,20) //Move from 0 x and 0 y to 0 x and 20 y[/FONT]
[FONT=Verdana]boxtwo.lineTo(20,20) //Move 20 x and stay at 20 y[/FONT]
[FONT=Verdana]boxtwo.lineTo(20,0) //Stay at 20 x and move up to 0 y[/FONT]
[FONT=Verdana]boxtwo.lineTo(0,0) //Go back to origanal spot[/FONT]
[FONT=Verdana]//Moves the boxtwo to 100 x[/FONT]
[FONT=Verdana]boxtwo._x = 200[/FONT]
[FONT=Verdana]//Moves the boxtwo to 100 y[/FONT]
[FONT=Verdana]boxtwo._y = 200[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]//On Press start dragging the box[/FONT]
[FONT=Verdana]box.onPress = function() {[/FONT]
[FONT=Verdana] box.startDrag()[/FONT]
[FONT=Verdana]}[/FONT]
[FONT=Verdana]//On Release stop dragging the box[/FONT]
[FONT=Verdana]box.onRelease = function() {[/FONT]
[FONT=Verdana] box.stopDrag()[/FONT]
[FONT=Verdana]}[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]//On Press start dragging boxtwo[/FONT]
[FONT=Verdana]boxtwo.onPress = function() {[/FONT]
[FONT=Verdana] boxtwo.startDrag()[/FONT]
[FONT=Verdana]}[/FONT]
[FONT=Verdana]//On Release stop dragging the box[/FONT]
[FONT=Verdana]boxtwo.onRelease = function() {[/FONT]
[FONT=Verdana] boxtwo.stopDrag()[/FONT]
[FONT=Verdana]}[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]//When you move your mouse activate this function[/FONT]
[FONT=Verdana]this.onMouseMove = function() {[/FONT]
[FONT=Verdana] //If there was another line created clear it[/FONT]
[FONT=Verdana] line.clear()[/FONT]
[FONT=Verdana] //Sets the properties[/FONT]
[FONT=Verdana] line.lineStyle(1,0x000000)[/FONT]
[FONT=Verdana] //Move to box x +10 and y +10[/FONT]
[FONT=Verdana] line.moveTo(box._x+10,box._y+10)[/FONT]
[FONT=Verdana] //Move to box x +10 and y +10[/FONT]
[FONT=Verdana] line.lineTo(boxtwo._x+10,boxtwo._y+10)[/FONT]
[FONT=Verdana] //Update it immediatly [/FONT]
[FONT=Verdana] updateAfterEvent()[/FONT]
[FONT=Verdana]}[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]
[/FONT]
[FONT=Verdana] [/FONT]
[FONT=Verdana]Cya, Crayon-Inc![/FONT]
