Learning English Online, Free English Lessons For Everyone
_Sponsors_
___ ______

How to create a Drag and Drop Game in Flash PDF  | Print |
Tuesday, 20 September 2011 20:29

How to create a Drag and Drop Game in Flash. 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.

How to create a Drag and Drop Game in Flash

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.

Convert to symbol

Also give the circle_mc on the stage an instance name of circle_mc.

instance name

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.

2

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.

3

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.

4

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...).

5

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.

You can also download the finished source file in Actionscript 3 here

To learn more about dragging and dropping in Actionscript 1.0 check out 'ActionScript for Flash MX: The Definitive Guide' by Colin Moock.

__________________________Source: www.swinburne.edu.au_______________________

Last Updated on Tuesday, 20 September 2011 20:38
  ________


_____
We have 40 guests online

If you don't see anything in the middle of this page, you may need the latest Flash plug-in.
It only takes a few moments to
Download it FREE at Adobe.com. get adobe Flash player

Teaching English For Kids In Primary School

Stydying English Online For Everyone

Game for Kids


Home || Misterduncan|| Flash Cards || Songs For Kids|| Free Games || Learn English with GOGO|| Teaching English For Childern|| ESL/EFL Kids Course ||
Designed by Learning English Online. Designed by: Free Joomla Theme, mysql. Valid XHTML and CSS.