Monday, February 12, 2007

Draggin objects in flash using a custom function

here is the script that i wrote as a little tutorial type thing because some people were interested in having draggable objects... if you would like a copy of the .fla file i would be more than happy to give you one. as it would probably help you to understand this code more thoroughly.

otherwise you can follow my shawdy instruction below to create your own fla file

1. make a circle and a rectangle (it's best if their different colors) and convert each into it's own movieclip symbol (select the circle press "F8" select movieclip and give the symbol a name, then do the same for the rectangle)

2. Delete Everything from the stage. in your library you should have 2 movie clip symbols

3. draw a new rectangle (make it a different color than the circle) select the rectangle and press "F8" and once again select movie clip and give the symbol a name. then select the rectangle again and in the properties window give it an instance name of "rectangle2_mc"

4. double click on the rectangle on the stage. this will allow you to change the content of your movie clip. (make sure you are in the movie clip by looking above the timeline).

5. Drag a copy of your circle onto your rectangle.

6. select the circle and give it an instance name of "cirlce2_mc"

7. go back to your main timeline by clicking on SCENE 1 (it's above the timeline)

8. on the stage there should be the instance "rectangle2_mc" and there should be 3 movie clips in your library. (the rectange, the circle, and the other rectangle with the circle inside it)

9. drag a copy of the rectangle onto the stage. and give it an instance name of "rectangle_mc"

10. drag a copy of the circle onto the stage and give it an instance name of "circle_mc"

11. double check that on your stage you have an instance of each of the three movieclips in your library on the stage and that they have the proper instance names.

12.Create a new layer. Name it actions and LOCK IT!

13. select the first keyframe of the actions layer and open the actions window
(F9 on pc, alt+F9 for mac)

14. Paste in the action script below.



//this block of code outlines the start drag function
//this means that every time you call dragIt; (the function below) it will
//exicute the block of code, which does two things. First it
//it exicutes the startDrag(this); command and then
//it exicutes a second function contained within the first
//that runs the stopDrag(); comand when the draggable item
//is released
// it is important also to note that "this" refers to whichever instance is calling //the function "dragIt".

function dragIt()
{
startDrag(this);
this.onRelease = function()
{
stopDrag();
}
}

// this will probobly make more sense when you see how it works...

//Lets use the function!
//we must state what !"""INSTANCE"""! on the stage will exicute the function
// and when. the code below simply states that on "pressing" the instance //"rectangle_mc"
//it will exicute the dragIt function. this means that as long as the mouse button is //pressed down you will be able
//to drag rectangle_mc all over the stage. and when you release the mouse button.. //you won't

rectangle_mc.onPress = dragIt;

//the advantage to using a function to start the dragging
// is that you can apply it to ANY instance of ANY movieclip
// on the stage (or within another movie clip) without
//writing out all the code again.

// for example i have placed an instance of a circle onto the
//stage and called it circle_mc. to make this circle dragable
//all i have to do is put the following bit of code
circle_mc.onPress = dragIt;

//however if you have an instance of one movie clip inside another movie clip
//in order to drag the internal movieclip arround you must refer to it directly
//luckily this is quite an easy process
//the code below says that on pressing the instance circle2_mc (which is inside of //the movie clip rectangle 2
//which has an instance on the stage called rectangle2_mc) circle2_mc will become //dragable within rectangle2_mc
rectangle2_mc.circle2_mc.onPress = dragIt;


I hope this is of some help to some of you. if you have any questions or would like a copy of the .fla file feel free to email me at
geoffinwood@gmail.com

2 comments:

Geoff Inwood said...

regarding this post in the script that i provided the "//" tells flash that that line is a comment and not to try and interpret it as code, cutting and pasting my code from the blog may or may not organize these markers properly... so... if you copy and paste the code double check that each "//" falls on an new line in the action script window.

sorry if this created any issues.

- geoff

Judith Doyle said...

Thanks so much, Geoff. This is excellent!