Object drag with anchor line and gravity

Well I've been messing with this type of constricting forces for some time, and I wrote this tutorial for bluesfear awhile back, but I want to make this section a little more active, so I share my knowledge with you, enjoy :)


Howdy peeps. Today Im going to explain, step by step how to create one of these bad boys:

Example

Now im just bored and I want to do something, so im gonna share with you, how to pull this off. All it really boils down to, is a couple movieclips, some basic formulas, and ingenuity, of course ;)

Step One (Creating your Object)

Obviously, for my example, I used a box. Pretty simple, but you have plenty of room to experiment, since the shape of the object being used doesn't have any control whatsoever on the effect being created. So, once you do this. Go ahead and set yourself up. Convert it first to a button (leaving out the hit state, theres no need for one) and give it an instance name of "objectD", and then converting to a movieclip, also giving THAT an instance name of "objectD". This will come into play when dealing with the accesory objects.

Step Two (Scripting your stage and object)

This part will get a tad confusing if you have little or no experience with scripting formulas. But alas, Im here to guide you, so just concentrate on what is being explained. Go back to yuor button (inside your movieclip) and slap this script on it. (F2):

Code:

---


on (press) {
    notpressed = false;
    startDrag("");
}
on (release) {
    notpressed = true;
    stopDrag();
}

---

This script observes the state in which the button portion of your object is at; whether it is being clicked on, dragged, or let go. The notpressed variable is used with another accessory object as well. The Drag functions basically allow your object to be picked up and moved.

Now let's script the movieclip portion, so just go back to the root of your stage (main) select your object, and tap ol' F2 again. Then put this script in:

Code:

---


onClipEvent (load) {
friction = 0.700000;
ratio = 0.400000;
}
onClipEvent (enterFrame) {
if (notpressed) {
speedx = (_root.centerstageX-_x)*ratio+speedx*friction;
speedy = (_root.centerstageY-_y)*ratio+speedy*friction;
_x = _x+speedx;
_y = _y+speedy;
updateAfterEvent();
}
}

---

This portion of script sets the inertia and easing property of the object into motion. The first section of clipEvent data assigns two variables: friction and ratio. The friction variable sets the friction property of your object, while the ratio sets the depreciating value in which the object will ease to a stop. The friction value can either prolong the time it takes for the object to slow down after being released, or it canshorten it a great deal by removing the elasticity or "bounce" of the object. The second section actually performs the work. The speed x and y of the object are calculated by first introducing the variables centerstage x and y minus the _x and _y pos of the object times ratio + speed x and y times friction. Then the _x and _y pos of the object are found by completing the formulas with _x and _y pos plus speed x and y. To finish it all off, an updateAfterEvent(); is used to keep everything running cleanly and smoothly.

Now all we need to do is script our stage. Go to the root of the stage, and put this in a layer (frame one) marked "actions":

Code:

---

stagewidth = 550;
stageheight = 400;
centerstageX = stagewidth/2;
centerstageY = stageheight/2;
stop();

---

Obviously, here you will have to put in the correct values, if you are using a different stage size, that is. Then the variable centerstagex and y are found by (duh) dividing the variables by 2. This keeps whatever uses that variable safely centered on the stage, a useful tactic you can use in the future :).

Step three (Introducing the accessory objects)

Now that we have finished our object and stage, lets create our extra objects. (the line, and the center point). To start thigns off, lets do our "dot" or the center point where our object will be positioned on. To do this, make your object's layer invisible, and then just make a small circle about 1x1 px, and center it on the stage. Make sure the dot has a layer of its own. Convert it to a movieclip and give it an instance name of "dot".

Secondly, lets do our line. This will serve as our makeshift anchor (visually). the line has no real leverage, as the object already has a formula of its own for inertia, all the line has to do is mimic it and stay attached. All this is is a 100 x 100 1 px line (make it diagonal). After you have made one, convert it to a graphic, and then to a movieclip. Make your registration point top left. Then give it an instance line of "line". Now put this script on it:

Code:

---

onClipEvent (enterFrame) {
    _x = _root.dot._x;
    _y = _root.dot._y;
    _xscale = _root.objectD._x-_root.dot._x;
    _yscale = _root.objectD._y-_root.dot._y;
    updateAfterEvent();
}

---

Here, the line uses the dot as a starting point, and then streches to the _x and _y pos of the object, via the _xscale and _yscale function. Again, another updateAfterEvent(); is used.

Final Words (explanation of formula and extra tips)

Okay, you're finished! All you have to do now is try it. There are alot of different techniques used in this experiment. Obviously, the line is an extra object, so if you choose not to use an anchor line, you can just remove the object altogether. If you have any problems, I have included my finished source file. All that I ask is that you use this tutorial as a learning guide and that you do not take it for your own. Embellish the source, do what you want, make something with it and show me! Id love to see it.

Source File

If you want to make it rotate like I did, just go into your drag object's button symbol, convert it to a movieclip (inside the button) then go into that movieclip, and convert it to another movieclip, then just stick this clip onto it:

Code:

---

onClipEvent (enterFrame) {
    _rotation = _rotation + 1;
}

---

Easily enough, it rotates. It takes the _rotation value from the movieclip, and then adds 1 in every frame. If you wish it to go in the other direction, make it a negative 1 instead of a plus. If you want it to rotate faster, change the value to something higher than 1.

Enjoy :)

Nice tut, i saw it on BS as well. I think this'll really help the people here. Thanks man :)

Isn't this more like Springs and Constraints?
But it is a good tutorial!

OMFG CRHIS!

hi, and nice tut

lol

wow now that im startin flash i might use this in somthin interactive... hmmm i can add collision effect and make em hit eachother... (cept i cant do walls yet... only hit reactions...well kinda heh)

*oh shit... didnt look at the date... sorry i brought up this topic... just got flash and all...*

Lol, it's good man. Good topic to be brought up :D

omg, url on source file was broken for so long...fixed now though :) Same goes for the f'ed up sample

Updated with new links. Broken again :S