How to drag and drop in Flash
Author: Bill Trikojus
| |
 |
Document setup
|
| |
| |
OK here is a drag and drop tutorial for Flash MX. The finished movie should look like this -
Start by opening Flash. Make a new file and set the Frame rate to 21.
Draw a circle.
Select the circle and hit F8 to convert it to a Movie Clip (MC) - name it circle_mc.
Also give the circle_mc on the stage an instance name of circle_mc.
Make a new Layer and name it "actions"
On frame 1 of the actions layer put this -
circle_mc.onPress=function(){
startDrag(this);
}
circle_mc.onRelease=circle_mc.onReleaseOutside=function(){
stopDrag();
}
OK now save your movie as dragndrop.fla and go Control/Test Movie.
You should be able to drag your cicle around - if you can't then you've done something wrong.
|
| |
 |
Actions
|
| |
| |
OK underneath the action actions you already have on frame 1 add this - //the variables below will store the clips starting position
circle_mc.myHomeX=circle_mc._x;
circle_mc.myHomeY=circle_mc._y;
circle_mc.onMouseDown=function(){
//this variable tells us if the mouse is up or down
mousePressed=true;
}
circle_mc.onMouseUp=function(){
mousePressed=false;
}
circle_mc.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(mousePressed==false){
this._x-=(this._x-this.myHomeX)/5;
this._y-=(this._y-this.myHomeY)/5;
}
}
Paste this into flash and then have a read of the code comments.
OK test your movie again and you will see that you can drag your circle around but when you let go of the mouse the circle moves back to its starting position with a smooth motion.
|
| |
 |
Create a target
|
| |
| |
OK now we want to check where the circle is bring dropped. Start by creating a new layer and dragging the new layer below the layer that has the circle_mc on it. Now draw a big circle down the bottom right hand corner of the stage. Select the circle you have just drawn and convert it to a movie clip - name it target circle and give it an instance name of targetCircle. Double click on the target MC to go inside it. Put a stop action on both first and second frames. Create a new keyframe for the circle in frame 2 (hit F6) and give it a different fill colour.
Now go back to the main timeline and change the onRelease actions to this -
circle_mc.onRelease=circle_mc.onReleaseOutside=function(){
stopDrag();
if (this._droptarget == "/targetCircle") {
this.onTarget=true;
_root.targetCircle.gotoAndStop(2);
}else{
this.onTarget=false;
_root.targetCircle.gotoAndStop(1)
}
}
and the if statement in the enterFrame actions to this
if(mousePressed==false&&this.onTarget==false){
Still with me? Ok test the movie again and watch what happens when you drag the circle around - both on and off the target.
|
| |
 |
Positioning within a target
|
| |
| |
OK what else?? hmm maybe when we drag the circle on to any part of the target, we want the circle to move to the center of the target. Ok let's do that.
Change all the actions on frame 1 to this -
circle_mc.onPress = function() {
startDrag(this);
};
circle_mc.onRelease = circle_mc.onReleaseOutside=function () {
stopDrag();
if (this._droptarget == "/targetCircle") {
this.onTarget = true;
_root.targetCircle.gotoAndStop(2);
} else {
this.onTarget = false;
_root.targetCircle.gotoAndStop(1);
}
};
//the variables below will store the clips starting position
circle_mc.myHomeX=circle_mc._x;
circle_mc.myHomeY=circle_mc._y;
//the variables below will store the clips end position
circle_mc.myFinalX = targetCircle._x;
circle_mc.myFinalY = targetCircle._y;
circle_mc.onMouseDown = function() {
//this variable tells us if the mouse is up or down
mousePressed = true;
};
circle_mc.onMouseUp = function() {
mousePressed = false;
};
circle_mc.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 (mousePressed == false && this.onTarget == false) {
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 (mousePressed == false && this.onTarget == true) {
this._x -= (this._x-this.myFinalX)/5;
this._y -= (this._y-this.myFinalY)/5;
}
};
Test the movie again and watch what happens (or look away and cross your fingers - it's up to you...).
|
| |
 |
Drag multiple objects
|
| |
| |
Now the code above if fine if you just want to drag and drop one object, but things can get pretty messy if want to be able to drag multiple around. So, rather than just duplicate the code we already have for each mc, lets make a function that will give an mc the drag and drop functionality you have already seen. Copy the function below and replace all the code on frame 1 of your movie:
function dragSetup(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);
} 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;
}
};
}
So now we have a function that we can call to setup as many dragable objects as we want. When you call the function you must provide 2 parameters - the clip that you want to be dragable and the target for that clip. Add this to the bottom of your code
dragSetup(circle_mc,targetCircle);
Using this function will keep your code much cleaner when dragging multiple objects. Option drag out a copy of targetCircle and circle_mc and change the copies instance names to targetCircle2 and circle2_mc. Now to give circle2_mc the same functionality as circle_mc, all you have to do is add this line of code
dragSetup(circle2_mc,targetCircle2);
Much cleaner than duplicating all that code!!
You can download the finished source files for this tutorial here
To learn more about dragging and dropping in Actionscript 1.0 check out 'ActionScript for Flash MX: The Definitive Guide ' by Colin Moock.
|
Back
Like this? Click a link below to share it...
Comments
2008-04-12: Dustin Lafleur said:I am attempting to use this code in a multiple drag and drop situation. I would like to use the following section of this code but it does not seem to work when dealing with multiple objects.
if (eval(this._droptarget) == targ) {
this.onTarget = true;
_root.targ.gotoAndStop(2);
} else {
this.onTarget = false;
_root.targ.gotoAndStop(1);
}
2008-04-13: Bill Trikojus said:in the dragSetuo function try adding an extra line where the position variables are set
clip.targ=targ;
then in the if statement you posted above try
if (eval(this._droptarget) == this.targ) {
2008-04-24: Albert said:Hello, your tutorial is realy-realy great! Also your explanation of multiple drag and drop situation. But I have problem what I can't figure out. In my application what I trying to write you can drag and drop letters to 14 targets. But the letters must snap on the targets, not a big problem you will think. ;-) But you can drop each letter of one of the 14 targets. So you can drop the letter "E" on the first target but also on the second, third, and so on targets.
Still with me? ;-)
Do you know a sollution to my problem?
2008-04-24: Bill Trikojus said:You can snap a dragged object to the clip it is dropped on by checking the _droptarget
eg
someClip.onRelease=function(){
stopDrag();
theClipIWasDroppedOn=eval(this._droptarget);
this._x= theClipIWasDroppedOn._x;
this._y= theClipIWasDroppedOn._y;
}
Hope that helps
2008-04-25: Albert said:Wow that's great and just what I was looking for! Is there also a way to achive some smoothness, like the way you show in your example?
I have come up with this solution but that wouldn't work. :-P
letter_a.onRelease=function(){
stopDrag();
theClipIWasDroppedOn=eval(this._droptarget);
this._x= (theClipIWasDroppedOn._x)/5;
this._y= (theClipIWasDroppedOn._y)/5;
}
2008-04-25: Bill Trikojus said:on the right track but you need to start an enterframe script to make it ease to the target
eg
letter_a.onRelease=function(){
stopDrag();
theClipIWasDroppedOn=eval(this._droptarget);
this.onEnterFrame=function(){
this._x-= (this._x-theClipIWasDroppedOn._x)/5;
this._y-= (this._y-theClipIWasDroppedOn._y)/5;
}
}
If you are using Flash 8 or 9 check out the Tweener class - makes easing easier
cheers
2008-05-08: Dustin Lafleur said:Thanks Bill,
Your help was very useful.
I do have another question though. Is it possible to re purpose this code so that a single movie clip can have dual targets.
2008-05-08: Bill Trikojus said:Sure. Just add another parameter to the function
function dragSetup(clip, targ1,targ2) {
then check both targets when you drop the clip
if (eval(this._droptarget) == targ1 || eval(this._droptarget) == targ2) {
|| means OR
cheers
2008-05-20: curtis redden said:This is really good, but how do i make it so that when the correct target is chosen it can play a movie clip once object is dropped?
Like when the user drops the object onto the wrong target it will explode or something like that. how do i do this
2008-05-20: Bill Trikojus said:Well in the onRelease you have
if (eval(this._droptarget) == targ) {
this.onTarget = true;
_root.targ.gotoAndStop(2);
} else {
this.onTarget = false;
_root.targ.gotoAndStop(1);
}
just add another gotoAndPlay in there. Assuming that the movieclip you want to play is the one being dragged, and assuming that you have a couple of frame labels set up inside that movieclip, it would be something like
if (eval(this._droptarget) == targ) {
this.onTarget = true;
_root.targ.gotoAndStop(2);
this.gotoAndPlay('correct');
} else {
this.onTarget = false;
_root.targ.gotoAndStop(1);
this.gotoAndPlay('incorrect');
}
cheers
2008-05-21: Dave said:Hi,
I use this AS in a clip and it wasn't dropped on my target. I put this lines:
clip.targ=targ;
if (eval(this._droptarget) == this.targ)
It targets but now the circle doesn't move back. This is my code:
clip.targ=target;
case_gratuit_mc.onPress = function() {
startDrag(this);
case_gratuit_mc.gotoAndPlay(2);
};
case_gratuit_mc.onRelease = case_gratuit_mc.onReleaseOutside=function () {
stopDrag();
case_gratuit_mc.gotoAndPlay(1);
if (this._droptarget == this.targ) {
this.targ = true;
case_gratuit_mc.gotoAndPlay(3);
//targetCircle.gotoAndStop(2);
} else {
this.targ = false;
//targetCircle.gotoAndStop(1);
}
};
//the variables below will store the clips starting position
case_gratuit_mc.myHomeX=case_gratuit_mc._x;
case_gratuit_mc.myHomeY=case_gratuit_mc._y;
//the variables below will store the clips end position
//circle_mc.myFinalX = 443;
//circle_mc.myFinalY = 294;
case_gratuit_mc.onMouseDown = function() {
//this variable tells us if the mouse is up or down
mousePressed = true;
};
case_gratuit_mc.onMouseUp = function() {
mousePressed = false;
};
case_gratuit_mc.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 (mousePressed == false && this.onTarget == false) {
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 (mousePressed == false && this.onTarget == true) {
this._x -= (this._x-this.myFinalX)/5;
this._y -= (this._y-this.myFinalY)/5;
}
};
Thx for some help.
2008-05-21: Bill Trikojus said:not sure what you are trying to do that is different to the tutorial but there is definately issues with your targ variable - at one point it is a movieclip and another it is a boolean (true or false);
trace targ in your on release
case_gratuit_mc.onRelease = case_gratuit_mc.onReleaseOutside=function () {
stopDrag();
trace(this.targ)
trace(this._droptarget);
case_gratuit_mc.gotoAndPlay(1);
//here the targ var is a movieclip
if (this._droptarget == this.targ) {
//and here it is a boolean - so which is it? Should this be onTarget?
this.targ = true;
case_gratuit_mc.gotoAndPlay(3);
//targetCircle.gotoAndStop(2);
} else {
this.targ = false;
//targetCircle.gotoAndStop(1);
}
};
If you can't get it working please post it on
actionscript.org .
2008-05-24: Monte said:This is a GREAT tutorial. Exactly what I was looking for. My question is about integrating a Tween class into this code.
I usually use TweenLite, but I was going to test with the included Macromedia Tween class and got a syntax error just trying to import it into the code.
I want to use the Tween class to send the clip back to starting position with an Elastic or Back ease, and the successfully dragged clip will Alpha to zero and move off screen (say, _x:1000).
How would this work and what code to replace?
Thanks again!
2008-05-24: Bill Trikojus said:well I'm I'm not sure why you are getting that syntax error but you should check out the new
easing tutorial I just made.
The code to integrate the Tween class would look like this
import mx.transitions.Tween;
import mx.transitions.easing.*;
function dragSetup(clip, targ) {
clip.onPress = function() {
startDrag(this);
};
clip.onRelease = clip.onReleaseOutside=function () {
stopDrag();
if (eval(this._droptarget) == targ) {
var tx:Tween=new Tween(this,'_x',Elastic.easeOut,this._x,this.myFinalX,1,true);
var ty:Tween=new Tween(this,'_y',Elastic.easeOut,this._y,this.myFinalY,1,true);
targ.gotoAndStop(2);
} else {
var tx:Tween=new Tween(this,'_x',Elastic.easeOut,this._x,this.myHomeX,1,true);
var ty:Tween=new Tween(this,'_y',Elastic.easeOut,this._y,this.myHomeY,1,true);
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;
}
dragSetup(circle_mc,target_mc)
Also see attached
drag and drop with tween class example.
cheers
2008-05-29: Laura Sullivan said:Thanks Bill, Thats been really helpful.
My problem is kind of complicated, i have applied the tutorial to parts of my animation and it has worked a treat! thanks!
my problem comes in two parts
the target needs to be the result of a movie clip, which is activated on press of the item to be dragged.
so i've got the item moving, i just cant work out how to get it to activate the movie clip and target
the other part is the same, except that the item to be dragged is revealed at the end of another movie clip being played.
i have the item appearing fine, and it shows an active link when rolled over but i cant get the code to apply to it..
is such a request feasible or should i just simplify the scene?
2008-05-29: Bill Trikojus said:Hi Laura
I'm not sure I understand the issue here but to activate the 'drag-ability' of one movieclip when another is clicked and drag you could do something like this
movieclip1_mc.onPress=function(){
this.startDrag();
dragSetup(movieclip2_mc,target_mc)
}
Does that make sense? You just delay calling the dragSetup function until the first movieclip is clicked
cheers
2008-06-06: Gerald Kaute said:Hi. I can't see my post here so I´ll repeat it.
I copied the code into the root and most stuff works BUT the target bit doesn't - ie: Doesn't stop dragging.
//onClipEvent (enterFrame) {
stop();
dragSetup(_root.hamburger2,_root.box1);
dragSetup(_root.hamburger1,_root.box1);
function dragSetup(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;
gotoAndPlay(2);
} else {
this.onTarget = false;
trace(failure);
}
};
//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;
}
};
}
2008-06-06: Bill Trikojus said:Code looks fine. You may have a depth issue that is preventing the onRelease from firing when you have dragged over the target
2008-06-11: Chris said:hey, this is really nice, but what I need to do is the following:
I have a true false quiz with five questions. Next to each question is a box. Off to the side are two draggable boxes, one labeled true, the other false. How do I use multiple instances of the same boxes so that the user can drag the corrosponding answer to the correct box next to each question??? I'm also looking for some kind of feed back that gives the user two attempts at the question.
Thanks in advance for your help.
2008-06-11: Bill Trikojus said:The dragSetup function is designed to exactly what you are describing in the first part of your question - that is assign drag and drop to multiple instances (can be instances of the same movieclip) and assign them different targets. So you should just be able to say
dragSetup(true1_mc,target1_mc);
dragSetup(false1_mc,target1_mc);
dragSetup(true2_mc,target2_mc);
dragSetup(false2_mc,target2_mc);
//etc
regarding the 2 chances (which seems a little strange given that this is a true or false quiz but anyway) you could create a counter in each target that tracks how many attempts have been made. I would need to see all your quiz code but it would be something like
function dragSetup(clip, targ) {
//start counter
targ.numAttempts=0;
clip.onPress = function() {
startDrag(this);
this.beingDragged=true;
};
clip.onRelease = clip.onReleaseOutside=function () {
stopDrag();
this.beingDragged=false;
if (eval(this._droptarget) == targ) {
//you need your own code here to determine if answer was correct or not
if(answerCorrect && targ.numAttempts<2){
this.onTarget = true;
_root.targ.gotoAndStop(2);
}else{
targ.numAttempts++
}
} 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;
}
};
}
cheers
2008-06-24: Gerald Kaute said:All works well on its own but NOT when loaded into another movieclip.
trace(eval(this._droptarget)); is undefined when I load this into an emptymovieclip called container_mc2
stop();
fscommand ("fullscreen", "true");
fscommand ("showmenu", "false");
fscommand ("allowscale", "TRUE");
this._lockroot = true;
_root.createEmptyMovieClip("Background_mc", _root.getNextHighestDepth());
_root.soundBG = new Sound(Background_mc);
_root.soundBG.loadSound("BGmusic.mp3" , true);
_root.soundBG.start(0, 999999);
_root.soundBG.setVolume(30);
dragSetup(_root.cat_mc,_root.catShadow_mc);
dragSetup(_root.dog_mc,_root.dogShadow_mc);
dragSetup(_root.bird_mc,_root.birdShadow_mc);
dragSetup(_root.cow_mc,_root.cowShadow_mc);
// dragSetup(_root.circle2,_root.box1);
// dragSetup(_root.hamburger1,_root.box2);
function dragSetup(clip, targ) {
clip.onPress = function() {
startDrag(this);
//_root.createEmptyMovieClip("objectSound_mc");
//_root.objectSound = new Sound(objectSound_mc);
//var sound:String = clip;
//var aFile:String = "/sounds/" + sound + ".mp3";
//_root.objectSound.loadSound( aFile, 0 );
//trace(aFile);
//_root.objectSound.loadSound("/sounds/cat_mc.mp3" , true);
//_root.objectSound.start(0, 999999);
//_root.objectSound.setVolume(100);
//_root.createEmptyMovieClip("objectSound_mc",-1)
this.beingDragged=true;
};
clip.onRelease = clip.onReleaseOutside=function () {
stopDrag();
this.beingDragged=false;
trace(eval(this._droptarget));
trace(targ);
if (eval(this._droptarget) == targ) {
this.onTarget = true;
trace("yeah");
}
}
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;
}
}
}
var mouseListener:Object = new Object();
mouseListener.onMouseMove = function(){
crosshair._x = _xmouse;
crosshair._y = _ymouse;
};
Mouse.hide();
Mouse.addListener(mouseListener);
2008-06-24: geraldkaute said:Yes, I forgot to say that somebody mentioned lockroot - but that doesn't solve the prob although its supposed to. Also something about _parent.
I can't make it work.
2008-06-24: Bill Trikojus said:Yes lockroot should fix it. What version of flash are you publishing as? In any case, it is better to fix the actual problem which is the absolute paths - these need to be made relative (straight to the object you are targeting).
eg
//absolute path
dragSetup(_root.cat_mc,_root.catShadow_mc);
//relative path
dragSetup(cat_mc,catShadow_mc);
//relative path
dragSetup(_parent.cat_mc, _parent.catShadow_mc);
not sure which relative path is correct (if either) but the point is you need to provide the path directly from the location of the code to the object you wish to target
hope that helps
cheers
2008-07-01: Silverkrown said:Thanks for the code. How would I change it so there is no color change just the drop target. I want them to be able to drag the image and if it isn't in the correct area snap back but if it is in the correct drop area just stay there? Sorry if this doesn't make sense but I am new to flash. Also it has to be relative, I can't call the root.
2008-07-01: Bill Trikojus said:to remove the colour change jusr get rid of
_root.targ.gotoAndStop(2);
to make that relative just get rid of _root
Lots of tutes available on paths - couple of good ones on actionscrpt.org
cheers
2008-08-05: loop said:I want a button with onRelease and if clip = dropped on targ1 , punten_txt++ How do I do that?
2008-08-20: Oliver Allen said:Hi. Really awesome tutorial!
I have been trying to acheive the same as Dustin Lafleur in regards to multiple targets. I would like to be able to drag an object across the stage and have it move to the centre of whatever target it is currently over (like in the tutorial) but with multiple target areas. (I hope you understand what I mean).
I tried using: doing what you mentioned:
"Sure. Just add another parameter to the function
function dragSetup(clip, targ1,targ2) {
then check both targets when you drop the clip
if (eval(this._droptarget) == targ1 || eval(this._droptarget) == targ2) {"
..but unfortunately it doesn't seem to work at all.
Can you suggest what I may be doing wrong.
Much thanks and appreciation.
Ollie
2008-08-20: Bill Trikojus said:I have uploaded a
drag and drop with multiple targets example - I hope it helps
cheers
2008-08-20: Oliver Allen said:Thanks Bill, that's great.
Unfortunately I am now having yet another problem: The objects I am dragging are large. I would rather that; if the objects position is within the target when the mouse is released (instead of the mouse release being within the target) then this is when the object will align to the target.
I hope you understand what I mean.
To explain myself further; the targets in my flash file are off the stage therefore a mouse release canot be detected. This is why I need the object's position (on mouse release) to determine which target it is in and will align to.
Many thanks.
Ollie
2008-08-20: Bill Trikojus said:I'm afraid I don't understand. _droptarget does return the object that the dropped object is touching - it doesn't have anything to do with where the mouse is released. If your targets are all off the stage, I don't see how you can see "if the objects position is within the target when the mouse is released ...then this is when the object will align to the target.". It sounds like you might need to use hitTest() instead of _droptarget
I hope that helps
2008-09-08: Durogista said:hi bill,
im new to flash and im currently using flash 8 pro. and im having a problem regarding the the object to be dragged. i want the object to be locked inside the target and then create a reset button for it. can u show me how to code it?
thanks in advance bill
Durogista
2008-09-08: Bill Trikojus said:Hi Durogista
Topics that are quite different to the tutorial should probably be discussed at a forum like actionscript.org because you can upload example files etc. BAsically you need to set some extra parameters in the call to startDrag() that defines the area that the object can be dragged with
All the best
2008-09-20: kay said:Hi, your tutorials on drag & drop scenarios has been beneficial. However I’m having difficulties trying to reset the dragable objects to there original positions.
Do I need to write a reset function? Can you shed some light on how I do this.
I’ve attached the source code below.
function dragSetup(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);
} else {
this.onTarget = false;
_root.targ.gotoAndStop(1);
}
};
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() {
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;
}
};
}
dragSetup(circle_mc,targetCircle);
dragSetup(circle2_mc,targetCircle2);
reset1.onRelease = function (){
circle_mc._x = circle_mc.myHomex;
circle_mc._y = circle_mc.myHomey;
}
stop();
Any help I will be greatly appreciated.
2008-09-20: Bill Trikojus said:You have typos on the var names
eg
circle_mc.myHomex
should be
circle_mc.myHomeX
cheers
2008-09-21: kay said:Thanks for the swift response, it now works.
What i like to know is, how easy is it to start a animation within the movie clips once it has been drop onto the target.
2008-09-21: Bill Trikojus said:Kay for some reason your comments are posting multiple times. Please don't refresh the window after posting.
What you want to do is pretty simple. In the dragSetup function, when you have detected that you have dropped on the target, tell the clip taht was just dropped to gotoAndPlay something
eg
if (eval(this._droptarget) == targ) {
this.onTarget = true;
_root.targ.gotoAndStop(2);
this.gotoAndPlay(2);
} else {
this.onTarget = false;
_root.targ.gotoAndStop(1);
}
cheers
2008-09-23: kay said:Sorry about that, thanks for the information it works, another question. What if I want to target a few more draggable Movie clips, to gotoAndPlay frame 2 without effect the other movie clips frames.
2008-09-24: Bill Trikojus said:hi Kay
I would need more info such as whether or not you want to target the same clips whenever an object is dropped. Probably best if you post this on a flash forum such as actionscript.org
Cheers
2008-09-26: ziotoo4 said:Hi Bill!
I have a problem with this script. I see you already gave an answer to my same question, but, since i am a real newbie, i can't get a grip on the solution.
I am trying to make a draggable slider, with 3 stations: Low, medium, and high.
Like this: Low---Med---High.
I have a movie clip that can be moved only on the x axis (horizontally). So far, no problems. But how can i make the slider move to the nearest station when i drop it?
Basically, i managed to understand your code for single target/single MC or N targets/N movie clips...but how can i change it to N targets/1 movie clip? What lines should i change? why?
Please be as clear as you can, cause, as i said before, i'm only 15 Y.O. and therefore i'm a newbie ;-)
Thanks! Fede, from Italy
2008-09-26: Bill Trikojus said:Hi Fede from Italy
Probably easiest to just check out this
drag and drop with snap example.
Hope it helps
cheers
2008-09-26: fede said:Thanks Bill!
This is perfect, but it has an issue: The moving of the green bar is not smooth: it just skips back to the station. I was able to do so; but the problem was the smooth move....
How can i do to add the tween?
Thanks! Fede
2008-09-26: Bill Trikojus said:No problem. Check out the easing with actionscript tutorial - should be quite simple to apply the concepts in that to get the bar easing to the target rather than snapping.
Cheers
2008-09-27: Fede said:Hi Bill; still me. I tried to modify your code because the file you gave me wasn't really what i was looking for.
Now, I have 3 MC: Circle_mc, targetcircle1 and targetcircle2. The code is like this:
circle_mc.onPress = function() {
startDrag(this);
};
circle_mc.onRelease = circle_mc.onReleaseOutside=function () {
stopDrag();
if (this._droptarget == "/targetCircle1") {
this.onTarget = true;
_root.targetCircle1.gotoAndStop(2);
}
else if (this._droptarget == "/targetCircle2") {
this.onTarget2 = true;
_root.targetCircle2.gotoAndStop(2);
} else {
this.onTarget = false;
_root.targetCircle.gotoAndStop(1);
}
};
//the variables below will store the clips starting position
circle_mc.myHomeX = circle_mc._x;
circle_mc.myHomeY = circle_mc._y;
//the variables below will store the clips end position
circle_mc.myFinalX = 450;
circle_mc.myFinalY = 250;
circle_mc.myFinalX2 = 110;
circle_mc.myFinalY2 = 286;
circle_mc.onMouseDown = function() {
//this variable tells us if the mouse is up or down
mousePressed = true;
};
circle_mc.onMouseUp = function() {
mousePressed = false;
};
circle_mc.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 (mousePressed == false && this.onTarget == false) {
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 (mousePressed == false && this.onTarget == true) {
this._x -= (this._x-this.myFinalX)/5;
this._y -= (this._y-this.myFinalY)/5;
}
else if (mousePressed == false && this.onTarget2 == false) {
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 (mousePressed == false && this.onTarget2 == true) {
this._x -= (this._x-this.myFinalX2)/5;
this._y -= (this._y-this.myFinalY2)/5;
}
};
Now, i can drop the circle on each target, and if i drag it away it will go back to it's starting position. But if i put in, let's say, on targetcircle1, then i won't be able to drag it on targetcircle2. Why? I assume the error to be in the second part of the code...but...what's the problem? Sorry for being such a bad student---
Thanks in advance,
Fede
2008-09-27: Bill Trikojus said:Hi Fede
this question should probably be posted on a forum as it is difficult to work through more complex issues in this comments area, but I'll have one more guess. I think when you detect that you have dropped on target1, for example, you need to make sure that you set the onTarget2 variable back to false
eg
circle_mc.onRelease = circle_mc.onReleaseOutside=function () {
stopDrag();
if (this._droptarget == "/targetCircle1") {
this.onTarget = true;
this.onTarget2 = false;
_root.targetCircle1.gotoAndStop(2);
}
else if (this._droptarget == "/targetCircle2") {
this.onTarget2 = true;
this.onTarget = false;
_root.targetCircle2.gotoAndStop(2);
} else {
this.onTarget = false;
this.onTarget2 = false;
_root.targetCircle.gotoAndStop(1);
}
};
give that a shot
cheers
2008-09-27: fede said:Thanks bill, you are a genius!
The problem was: Since there was no chance for onTarget2 to be false, the circle would never switch back to his starting pos after being dragged on target1...
The code, if anyone needs it, is:
circle_mc.onPress = function() {
startDrag(this);
};
circle_mc.onRelease = circle_mc.onReleaseOutside=function () {
stopDrag();
if (this._droptarget == "/targetCircle1") {
this.onTarget = true;
_root.targetCircle1.gotoAndStop(2);
} else if (this._droptarget == "/targetCircle2") {
this.onTarget2 = true;
_root.targetCircle2.gotoAndStop(2);
} else {
this.onTarget = false;
this.onTarget2 = false;
_root.targetCircle.gotoAndStop(1);
}
};
//the variables below will store the clips starting position
circle_mc.myHomeX = circle_mc._x;
circle_mc.myHomeY = circle_mc._y;
//the variables below will store the clips end position
circle_mc.myFinalX = 450;
circle_mc.myFinalY = 250;
circle_mc.myFinalX2 = 110;
circle_mc.myFinalY2 = 286;
circle_mc.onMouseDown = function() {
//this variable tells us if the mouse is up or down
mousePressed = true;
};
circle_mc.onMouseUp = function() {
mousePressed = false;
};
circle_mc.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 (mousePressed == false && this.onTarget == false && this.onTarget2 == false) {
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 (mousePressed == false && this.onTarget == true) {
this._x -= (this._x-this.myFinalX)/5;
this._y -= (this._y-this.myFinalY)/5;
} else if (mousePressed == false && this.onTarget2 == true) {
this._x -= (this._x-this.myFinalX2)/5;
this._y -= (this._y-this.myFinalY2)/5;
}
};
Thanks again Bill!
fede
Post a comment
Garbage posts and SPAM will be deleted.
