Sunday, 18 May 2008

Draggable objects

This flash tutorial will teach you how to create draggable objects. This effect is very simple and will only require a few lines of code. For this tutorial I made a draggable chicken but you can create whatever you wish. I will be showing you how to make the draggable object itself, not the chicken object.

Create a draggable object

Step 1

Create a new flash document.


Step 2

Create your movable object on the stage. I made a chicken but you can create whatever you wish.
Convert your object into symbol by selecting F8.
Give your symbol an appropriate name and check the movie clip button then click ok.


Step 3

Using the selection tool (v) select your movie clip and give it an instance name eg. chicken_mc.




Step 4

On the timeline, add a new layer called "actions" then select the first frame of the action layer and press F9. This opens up the actions window.



Add the following code:

chicken_mc.onPress = function () {
startDrag(this);
}

chicken_mc.onRelease = function () {
stopDrag();
}

**This piece of code is pretty self-explanatory when your draggable object is clicked by the mouse it starts the drag. And when it is released by the mouse it stops the drag.


Step 5

Test your draggable object Ctrl + Enter. Now use your mouse to click and drag and chicken.



You should now a nice draggable object.

11 comments:

S3146158 7 October 2009 at 23:53  

how to make the chicken return automaticly to its original spot after dragging?

iliketo 8 October 2009 at 03:31  

@S3146158

You have to set the x & y property of the chicken inside the onRelease function. So, you would get:

chicken_mc.onRelease = function () {
stopDrag();
chicken_mc._x = (original spot);
chicken_mc._y = (original spot);
}

Liam 14 March 2011 at 16:51  

Hey this is a really fantastic tutorial and a massive help for me. Although I am having problems getting this particular mode to work, its giving the error: Scene 1, Layer 'actions', Frame 1, Line 5 1120: Access of undefined property on_boxlight. Do you know what i am doing wrong? it seems to be unable to detect it yet iv tried editing all its properties and checked it has the same names and all. P.S i get the error when running the preview.

Thanks in advance!

Will 16 April 2011 at 06:15  

cool. how would you make the object stay in new place for next time you run flash movie?

iliketo 16 April 2011 at 10:54  

@will

To make the object go to a random location, you can do this

chicken_mc._x = Math.floor(Math.random() * Stage.width);
chicken_mc._y = Math.floor(Math.random() * Stage.height);

iliketo 16 April 2011 at 10:59  

@Liam,

make sure you have the instance name:on_boxlight on the stage.

vikolai 30 April 2011 at 09:11  

hi! Great tutorial, thank you!

I do have a question though. Is there any way to make the item draggable only from an area of said item? For instance in the above example, could you have it so the chicken was draggable by the beak only, and the rest was unclickable?

iliketo 1 May 2011 at 02:32  

@Vikolai

I suppose you could make a beak a movie clip inside the chicken movie clip and target the beak. e.g.

chicken_mc.beak_mc.onPress = function () {

}

vikolai 1 May 2011 at 04:39  

ahh of course! I had created the movie clip within the object, but neglected to direct it to the object within... In other words, I had simply forgotten the chicken_mc. part of the required code.

Thanks again!

Taha 12 October 2012 at 02:40  

nice tutorial, btw could u tell, for ex there is a nest on the stage and if we move the chicken on it can we make some action happen, u get the point, i want a script to detect if the object is placed somewhere

iliketo 12 October 2012 at 12:27  

@Taha

Take a look at this post.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP