...
Hello there !...
After 10 days scratching my head, I manage to make my first drag an drop animation with animate cc !...
I used to work with Flash (AS2) and it was a real challenge for me...
But I still have a big problem... I want to limit the drag zone in the upper zone of my stage... so that the draggables don't cover the buttons or the score / comments...
My stage is 865 x 482.
I have 6 draggables images : d_0, d_1,... d_5
I have 6 droppables zone : box_1, box_2, ... box_5
I also put a response for each draggables and a score field...
And there is my code for the drag and drop :
// Variables
var totalscore = 6;
this.totalscore.text=totalscore;
var count=0;
this['thecount'].text = '0';
var offset;
// ???
dragRadius = 40;
//Destination Size
destHeight = 100;
destWidth = 100;
//d_0
//d_0 reponse check box
var reponse_0 = this.reponse_0;
//d_0 drop_zone
var destination_0 = new createjs.Container();
destination_0.addChild(this.box_0);
destination_0.setBounds(31, 169, 40, 40);
//d_0 on top when dragged
this.d_0.on("mousedown", function (evt) {
this.parent.addChild(this);
this.offset = {x: this.x - evt.stageX, y: this.y - evt.stageY};
if (evt.currentTarget.x === 91 && evt.currentTarget.y === 221) {
evt.remove();
} else {
//evt.currentTarget.alpha = 1;
}
});
//d_0 draggable un less in droppable
this.d_0.on("pressmove", function (evt) {
if (evt.currentTarget.x === 91 && evt.currentTarget.y === 221) {
evt.remove();
} else {
evt.currentTarget.x = evt.stageX + this.offset.x;;
evt.currentTarget.y = evt.stageY + this.offset.y;;
stage.update(); //much smoother
}
});
var that = this;
//d_0 hittest drop_zone
this.d_0.on("pressup", function (evt) {
if (intersect(evt.currentTarget, destination_0)) {
destination_0.alpha = 0.5;
evt.currentTarget.alpha = 1;
evt.currentTarget.x = 91;
evt.currentTarget.y = 221;
reponse_0.gotoAndStop(1);
count++;
that['thecount'].text = count;
stage.update(evt);
evt.remove();
} else {
reponse_0.gotoAndStop(0);
that['thecount'].text = count;
evt.currentTarget.x = evt.currentTarget.x;
evt.currentTarget.y = evt.currentTarget.y;
}
});
//// (And I repeat this code 5 times for each draggables... I only change the x ans y coordinates...) ////
//Tests if two objects are intersecting
function intersect(obj1, obj2) {
var objBounds1 = obj1.getBounds().clone();
var objBounds2 = obj2.getBounds().clone();
var pt = obj1.globalToLocal(objBounds2.x, objBounds2.y);
var h1 = -(objBounds1.height / 2 + objBounds2.height);
var h2 = objBounds2.width / 2;
var w1 = -(objBounds1.width / 2 + objBounds2.width);
var w2 = objBounds2.width / 2;
if (pt.x > w2 || pt.x < w1) return false;
if (pt.y > h2 || pt.y < h1) return false;
return true;
}
...
I add an image !...
Big thanks !!...
...
Message was edited by: Ludovic Mercier
2
Replies
Hi Ludovic Mercier,
I know this is probably more work, but maybe try writing the code in Actionscript 3.
Below is a tutorial on how to make a puzzle with AS3.
https://code.tutsplus.com/tutorials/create-a-drag-and-drop-puzzle-in-actionscript-30--active-2920
If you don't want to do that, here is code from a puzzle game I built in AS2 years ago. I put in comments to try to explain the code.
Hopefully one of these suggestions helps you out. 
youWin._visible = false;
checkContainer.check1._visible = false;
checkContainer.check2._visible = false;
checkContainer.check3._visible = false;
checkContainer.check4._visible = false;
checkContainer.check5._visible = false;
checkContainer.check6._visible = false;
checkContainer.check7._visible = false;
checkContainer.check8._visible = false;
/*****************************************/
function dragSetup1(clip, targ)
{
clip.onPress = function()
{
startDrag(this);
this.beingDragged = true;
};
clip.onRelease = clip.onReleaseOutside = function ()
{
stopDrag();
this.beingDragged = false;
if (eval(this._droptarget) == targ)
{
this.onTarget = true;
_root.targ.gotoAndStop(2);
_root.answer1.gotoAndPlay(2);
checkContainer.check1._visible = true;
if (answer1._currentframe == 2 && answer2._currentframe == 8 && answer3._currentframe == 8 && answer4._currentframe == 8 && answer5._currentframe == 8 && answer6._currentframe == 8 && answer7._currentframe == 8 && answer8._currentframe == 8)
{
youWin._visible = true;
}
}
else
{
this.onTarget = false;
_root.targ.gotoAndStop(1);
}
};
//the variables below will store the clips starting position
clip.myHomeX = clip._x;
clip.myHomeY = clip._y;
//the variables below will store the clips end position
clip.myFinalX = targ._x;
clip.myFinalY = targ._y;
clip.onEnterFrame = function()
{
//all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)
// then move the MC back to its original starting point (with a smooth motion)"
if (!this.beingDragged && !this.onTarget)
{
this._x -= (this._x - this.myHomeX) / 5;
this._y -= (this._y - this.myHomeY) / 5;
//if the circle is dropped on any part of the target it slides to the center of the target
}
else if (!this.beingDragged && this.onTarget)
{
this._x -= (this._x - this.myFinalX) / 5;
this._y -= (this._y - this.myFinalY) / 5;
}
};
}
dragSetup1(answer1,target1);
/*****************************************/
/*****************************************/
function dragSetup2(clip, targ)
{
clip.onPress = function()
{
startDrag(this);
this.beingDragged = true;
};
clip.onRelease = clip.onReleaseOutside = function ()
{
stopDrag();
this.beingDragged = false;
if (eval(this._droptarget) == targ)
{
this.onTarget = true;
_root.targ.gotoAndStop(2);
_root.answer2.gotoAndPlay(2);
checkContainer.check2._visible = true;
if (answer1._currentframe == 8 && answer2._currentframe == 2 && answer3._currentframe == 8 && answer4._currentframe == 8 && answer5._currentframe == 8 && answer6._currentframe == 8 && answer7._currentframe == 8 && answer8._currentframe == 8)
{
youWin._visible = true;
}
}
else
{
this.onTarget = false;
_root.targ.gotoAndStop(1);
}
};
//the variables below will store the clips starting position
clip.myHomeX = clip._x;
clip.myHomeY = clip._y;
//the variables below will store the clips end position
clip.myFinalX = targ._x;
clip.myFinalY = targ._y;
clip.onEnterFrame = function()
{
//all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)
// then move the MC back to its original starting point (with a smooth motion)"
if (!this.beingDragged && !this.onTarget)
{
this._x -= (this._x - this.myHomeX) / 5;
this._y -= (this._y - this.myHomeY) / 5;
//if the circle is dropped on any part of the target it slides to the center of the target
}
else if (!this.beingDragged && this.onTarget)
{
this._x -= (this._x - this.myFinalX) / 5;
this._y -= (this._y - this.myFinalY) / 5;
}
};
}
dragSetup2(answer2,target2);
/*****************************************/
/*****************************************/
function dragSetup3(clip, targ)
{
clip.onPress = function()
{
startDrag(this);
this.beingDragged = true;
};
clip.onRelease = clip.onReleaseOutside = function ()
{
stopDrag();
this.beingDragged = false;
if (eval(this._droptarget) == targ)
{
this.onTarget = true;
_root.targ.gotoAndStop(2);
_root.answer3.gotoAndPlay(2);
checkContainer.check3._visible = true;
if (answer1._currentframe == 8 && answer2._currentframe == 8 && answer3._currentframe == 2 && answer4._currentframe == 8 && answer5._currentframe == 8 && answer6._currentframe == 8 && answer7._currentframe == 8 && answer8._currentframe == 8)
{
youWin._visible = true;
}
}
else
{
this.onTarget = false;
//_root.targ.gotoAndStop(1);
}
};
//the variables below will store the clips starting position
clip.myHomeX = clip._x;
clip.myHomeY = clip._y;
//the variables below will store the clips end position
clip.myFinalX = targ._x;
clip.myFinalY = targ._y;
clip.onEnterFrame = function()
{
//all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)
// then move the MC back to its original starting point (with a smooth motion)"
if (!this.beingDragged && !this.onTarget)
{
this._x -= (this._x - this.myHomeX) / 5;
this._y -= (this._y - this.myHomeY) / 5;
//if the circle is dropped on any part of the target it slides to the center of the target
}
else if (!this.beingDragged && this.onTarget)
{
this._x -= (this._x - this.myFinalX) / 5;
this._y -= (this._y - this.myFinalY) / 5;
}
};
}
dragSetup3(answer3,target3);
/*****************************************/
/*****************************************/
function dragSetup4(clip, targ)
{
clip.onPress = function()
{
startDrag(this);
this.beingDragged = true;
};
clip.onRelease = clip.onReleaseOutside = function ()
{
stopDrag();
this.beingDragged = false;
if (eval(this._droptarget) == targ)
{
this.onTarget = true;
_root.targ.gotoAndStop(2);
_root.answer4.gotoAndPlay(2);
checkContainer.check4._visible = true;
if (answer1._currentframe == 8 && answer2._currentframe == 8 && answer3._currentframe == 8 && answer4._currentframe == 2 && answer5._currentframe == 8 && answer6._currentframe == 8 && answer7._currentframe == 8 && answer8._currentframe == 8)
{
youWin._visible = true;
}
}
else
{
this.onTarget = false;
_root.targ.gotoAndStop(1);
}
};
//the variables below will store the clips starting position
clip.myHomeX = clip._x;
clip.myHomeY = clip._y;
//the variables below will store the clips end position
clip.myFinalX = targ._x;
clip.myFinalY = targ._y;
clip.onEnterFrame = function()
{
//all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)
// then move the MC back to its original starting point (with a smooth motion)"
if (!this.beingDragged && !this.onTarget)
{
this._x -= (this._x - this.myHomeX) / 5;
this._y -= (this._y - this.myHomeY) / 5;
//if the circle is dropped on any part of the target it slides to the center of the target
}
else if (!this.beingDragged && this.onTarget)
{
this._x -= (this._x - this.myFinalX) / 5;
this._y -= (this._y - this.myFinalY) / 5;
}
};
}
dragSetup4(answer4,target4);
/*****************************************/
/*****************************************/
function dragSetup5(clip, targ)
{
clip.onPress = function()
{
startDrag(this);
this.beingDragged = true;
};
clip.onRelease = clip.onReleaseOutside = function ()
{
stopDrag();
this.beingDragged = false;
if (eval(this._droptarget) == targ)
{
this.onTarget = true;
_root.targ.gotoAndStop(2);
_root.answer5.gotoAndPlay(2);
checkContainer.check5._visible = true;
if (answer1._currentframe == 8 && answer2._currentframe == 8 && answer3._currentframe == 8 && answer4._currentframe == 8 && answer5._currentframe == 2 && answer6._currentframe == 8 && answer7._currentframe == 8 && answer8._currentframe == 8)
{
youWin._visible = true;
}
}
else
{
this.onTarget = false;
_root.targ.gotoAndStop(1);
}
};
//the variables below will store the clips starting position
clip.myHomeX = clip._x;
clip.myHomeY = clip._y;
//the variables below will store the clips end position
clip.myFinalX = targ._x;
clip.myFinalY = targ._y;
clip.onEnterFrame = function()
{
//all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)
// then move the MC back to its original starting point (with a smooth motion)"
if (!this.beingDragged && !this.onTarget)
{
this._x -= (this._x - this.myHomeX) / 5;
this._y -= (this._y - this.myHomeY) / 5;
//if the circle is dropped on any part of the target it slides to the center of the target
}
else if (!this.beingDragged && this.onTarget)
{
this._x -= (this._x - this.myFinalX) / 5;
this._y -= (this._y - this.myFinalY) / 5;
}
};
}
dragSetup5(answer5,target5);
/*****************************************/
/*****************************************/
function dragSetup6(clip, targ)
{
clip.onPress = function()
{
startDrag(this);
this.beingDragged = true;
};
clip.onRelease = clip.onReleaseOutside = function ()
{
stopDrag();
this.beingDragged = false;
if (eval(this._droptarget) == targ)
{
this.onTarget = true;
_root.targ.gotoAndStop(2);
_root.answer6.gotoAndPlay(2);
checkContainer.check6._visible = true;
if (answer1._currentframe == 8 && answer2._currentframe == 8 && answer3._currentframe == 8 && answer4._currentframe == 8 && answer5._currentframe == 8 && answer6._currentframe == 2 && answer7._currentframe == 8 && answer8._currentframe == 8)
{
youWin._visible = true;
}
}
else
{
this.onTarget = false;
_root.targ.gotoAndStop(1);
}
};
//the variables below will store the clips starting position
clip.myHomeX = clip._x;
clip.myHomeY = clip._y;
//the variables below will store the clips end position
clip.myFinalX = targ._x;
clip.myFinalY = targ._y;
clip.onEnterFrame = function()
{
//all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)
// then move the MC back to its original starting point (with a smooth motion)"
if (!this.beingDragged && !this.onTarget)
{
this._x -= (this._x - this.myHomeX) / 5;
this._y -= (this._y - this.myHomeY) / 5;
//if the circle is dropped on any part of the target it slides to the center of the target
}
else if (!this.beingDragged && this.onTarget)
{
this._x -= (this._x - this.myFinalX) / 5;
this._y -= (this._y - this.myFinalY) / 5;
}
};
}
dragSetup6(answer6,target6);
/*****************************************/
/*****************************************/
function dragSetup7(clip, targ)
{
clip.onPress = function()
{
startDrag(this);
this.beingDragged = true;
};
clip.onRelease = clip.onReleaseOutside = function ()
{
stopDrag();
this.beingDragged = false;
if (eval(this._droptarget) == targ)
{
this.onTarget = true;
_root.targ.gotoAndStop(2);
_root.answer7.gotoAndPlay(2);
checkContainer.check7._visible = true;
if (answer1._currentframe == 8 && answer2._currentframe == 8 && answer3._currentframe == 8 && answer4._currentframe == 8 && answer5._currentframe == 8 && answer6._currentframe == 8 && answer7._currentframe == 2 && answer8._currentframe == 8)
{
youWin._visible = true;
}
}
else
{
this.onTarget = false;
_root.targ.gotoAndStop(1);
}
};
//the variables below will store the clips starting position
clip.myHomeX = clip._x;
clip.myHomeY = clip._y;
//the variables below will store the clips end position
clip.myFinalX = targ._x;
clip.myFinalY = targ._y;
clip.onEnterFrame = function()
{
//all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)
// then move the MC back to its original starting point (with a smooth motion)"
if (!this.beingDragged && !this.onTarget)
{
this._x -= (this._x - this.myHomeX) / 5;
this._y -= (this._y - this.myHomeY) / 5;
//if the circle is dropped on any part of the target it slides to the center of the target
}
else if (!this.beingDragged && this.onTarget)
{
this._x -= (this._x - this.myFinalX) / 5;
this._y -= (this._y - this.myFinalY) / 5;
}
};
}
dragSetup7(answer7,target7);
/*****************************************/
/*****************************************/
function dragSetup8(clip, targ)
{
clip.onPress = function()
{
startDrag(this);
this.beingDragged = true;
};
clip.onRelease = clip.onReleaseOutside = function ()
{
stopDrag();
this.beingDragged = false;
if (eval(this._droptarget) == targ)
{
this.onTarget = true;
_root.targ.gotoAndStop(2);
_root.answer8.gotoAndPlay(2);
checkContainer.check8._visible = true;
if (answer1._currentframe == 8 && answer2._currentframe == 8 && answer3._currentframe == 8 && answer4._currentframe == 8 && answer5._currentframe == 8 && answer6._currentframe == 8 && answer7._currentframe == 8 && answer8._currentframe == 2)
{
youWin._visible = true;
}
}
else
{
this.onTarget = false;
//_root.targ.gotoAndStop(1);
}
};
//the variables below will store the clips starting position
clip.myHomeX = clip._x;
clip.myHomeY = clip._y;
//the variables below will store the clips end position
clip.myFinalX = targ._x;
clip.myFinalY = targ._y;
clip.onEnterFrame = function()
{
//all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)
// then move the MC back to its original starting point (with a smooth motion)"
if (!this.beingDragged && !this.onTarget)
{
this._x -= (this._x - this.myHomeX) / 5;
this._y -= (this._y - this.myHomeY) / 5;
//if the circle is dropped on any part of the target it slides to the center of the target
}
else if (!this.beingDragged && this.onTarget)
{
this._x -= (this._x - this.myFinalX) / 5;
this._y -= (this._y - this.myFinalY) / 5;
}
};
}
dragSetup8(answer8,target8);
/*****************************************/
/*if (theChosenOne == 1 && theChosenTwo == 2 && theChosenThree == 3 && theChosenFour == 4 && theChosenFive == 5 && theChosenSix == 6 && theChosenSeven == 7 && theChosenEight == 8)
{
trace("what up");
youWin._visible = true;
}
*/
/*if (answer1._currentframe == 2)
{
trace("what up");
youWin._visible = true;
}
*/
AdChoices