Thursday, 12 June 2008

Drop target property

This flash tutorial will teach you about the drop target property. The drop target property evaluates an instance of a movie clip with the eval() function. This allows us to check whether an object has been dropped onto another object. This tutorial uses the same startDrag and stopDrag methods from the draggable objects tutorial. This checks to see if the object has been placed over the target object.

For this tutorial I will be using an image of a monkey and banana to demonstrate a basic drop target property. A message will be displayed when the banana is on top of the monkey.

Drop target property

Step 1

Open a new Flash document.
Import your drag and drop images onto the stage by selecting File > Import > Import to stage select your file and click ok.
If you don’t want to import object you can create your objects on the stage now.


Stage 2

Using the selection tool (V) select each object in turn and convert them into a symbol by pressing F8. Give each symbol an appropriate name, check movie clip and click ok.
Give each of your movie clips an instance name. eg monkey_mc, banana_mc.




Step 3

Now create the message to be display when your movie clip instance (banana) is evaluated by the eval() function.
Using the text tool (t) type your message on the stage, like below:



Convert your text into a symbol by pressing F8. Give your symbol an appropriate name, check movie clip and click ok.
Now give your text movie clip an instance name. eg txt_mc.
So, now you should have three movie clips on the stage with three different instance names.


Step 4

On the timeline insert a new layer called “actions”. Right click on the first frame of the actions layer and select Actions. And then enter the following code:

txt_mc._visible = false;

banana_mc.onPress = function() {
this.startDrag();
txt_mc._visible = false;
};

banana_mc.onRelease = function() {
this.stopDrag();
if (eval(this._droptarget) == monkey_mc) {
txt_mc._visible = true;
}
};

**The text message movie clip will remain invisible until it is on top on the monkey movie clip. The banana movie clip uses the startDrag and stopDrag methods. And the monkey movie clip evaluate whether the banana movie clip has been dropped on top.


Step 5

Test your movie clip Ctrl + enter. Using your mouse drag the banana on top of the monkey.



You should now know how to use the drop target property.

4 comments:

NIGHT CAT 4 December 2009 21:52  

this is AS2 or AS3? :3

iliketo 5 December 2009 09:24  

@Night cat

Actionscript 2.

Fatino :) 31 July 2011 23:15  

Hi, I'm trying to use this code, but in AS3. Is it possible? Because I got one error - "Call to a possibly undefined method eval."

Is there any way to fix this?

Thank you!

iliketo 1 August 2011 12:31  

@Fatino

This tutorial uses Actionscript 2 code, so will not work with Actionscript 3 code.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP