Drag and Drop Initiates Action Effect
In this Flash tutorial you will first create a symbol (object) that you can drag and drop around the screen. Next you will create a drop zone area that will cause the symbol (object) to react when it is dropped into the target area by performing a hit test. As always the completed source file is included.
Download the source file: drag_n_drop.fla
This Flash tutorial will be presented in a step-by-step format. Even though the source file and the example includes two different drop areas, I will only be teaching how to make one of them.
You should be able to figure out how to make more are completing this Flash tutorial.
Set up the Timeline
1. Open Flash, create a new Flash Document and create three layers labelled (from top to bottom): Actions, drag_me symbol, landing area.
Creating a drag - able symbol in Flash:
2. On the first frame of the ‘drag_me symbol’ layer, draw whatever it is that you want to be you drag and drop object, I used my cartoon head. Use the selection tool to select your entire drawing and turn it into a movieclip symbol. You can do this by clicking Modify>Convert to symbol (or using the shortcut key: F8).
3. Name your movieclip (the instance name) ‘drag_me’. The instance name is located in the properties panel.
4. We have to edit the movieclip, so double-click on the movieclip and you will be in editing mode. Notice the little crosshairs in the top-left corner of your graphic, we want these to be in the exact middle of your graphic. So select your graphic and move it until the crosshairs is in the middle. This is important for when we perform the hit test later. When your done, go back to the main timeline by double-clicking outside of you graphic.
5. On the first frame of the ‘Actions’ layer. Add the following actions, which will allow your movieclip to be drag and drop (ed):
// drag while mouse is pressed.
drag_me.onPress = function() {startDrag(this, false);
}
// stop dragging when mouse button is released.
drag_me.onRelease = function() {stopDrag();
}
// stop dragging when mouse is released outside,
// just to make sure the object gets released.
drag_me.onReleaseOutside = function() {stopDrag();
}
Test your movie and see if it works.
Create the landing area
6. On the first frame of the ‘landing area’ layer, draw a landing area. I used a circle and a square. After you have drawn the landing area convert it into a movieclip the same way you did in step 2. Name your movieclip circleHit (instance name) or whatever you want, but I have used circleHit in my source file. You also have to edit this movieclip to make the crosshairs appear in the center on the symbol like you did in step 4.
7. Now for the tricky part. You have to create a hit test so that you can perform an action when the ‘drag_me’ clip is dragged into the landing area. The reason you centered the two movieclips you made is so that when we get their x and y position we will be refering to the center of the movieclip symbol rather than the top left. The following actionscript will define the target area that we will trigger the actions:
// calculate circle hit area
C_hitLeft_x = circleHit._x - 6;
C_hitTop_y = circleHit._y + 6;
C_hitRight_x = circleHit._x + 6;
C_hitBottom_y = circleHit._y - 6;
8. Next we define the conditions for a hit using an if…then statement in the drag_me.onRelease function:
drag_me.onRelease = function() {
stopDrag();
// if drag_me is in the circle hit area then make it black
if (this._x < C_hitRight_x && this._x > C_hitLeft_x && this._y < C_hitTop_y && this._y > C_hitBottom_y) {this.gotoAndStop(5); // perform some action.
}
else {this.gotoAndStop(1); // else do nothing
}
In my source file I have made my ‘drag_me’ movieclip a little more diverse. I basically just change its qualities throughout the timeline so that on Frame 5, I put a stop() action and made the symbol completely black. That is why my action is this.gotoAndStop(5). I decided to leave this out of the tutorial because ideally you can perform any action you want at this step, I’ll leave that up to you. Following is the complete actionscript for this tutorial, all of these actions should be placed in the first frame of the Actions layer.
// calculate circle hit area
C_hitLeft_x = circleHit._x - 6;
C_hitTop_y = circleHit._y + 6;
C_hitRight_x = circleHit._x + 6;
C_hitBottom_y = circleHit._y - 6;drag_me.onPress = function() {
startDrag(this, false);
}
drag_me.onRelease = function() {
stopDrag();
// if drag_me is in the circle hit area then make it black
if (this._x < C_hitRight_x && this._x > C_hitLeft_x && this._y < C_hitTop_y && this._y > C_hitBottom_y) {this.gotoAndStop(5);
}
else {this.gotoAndStop(1);
}
}
drag_me.onReleaseOutside = function() {
stopDrag();
}
Your done, thank-you for participation in the My Flash Resource Tutorial.
