We now have a fully draggable movie clip that we can release at will and seems to behave very nicely. Since he's been so good we are going to treat him to a smoother animation.

You probably know that when the frame rate of a movie is very low it is impossible to have a smooth animation, it will look slightly jumpy and there isn't much you can do about it.

The only way to smoothen an animation is either to raise the frame rate of your movie but that means that the whole movie will run at a faster frame rate, and it is not always a good thing, or the other way is to use our little friend the method updateAfterEvent

The only thing that you need to do in order to smoothen the display when your red circle is dragged is to write the following 3 lines of code :

onMouseMove = function(){ updateAfterEvent(); } redCircle.onPress = function(){ startDrag(this,true,100,75,450,325) } redCircle.onRelease = function(){ this.stopDrag(); } redCircle.onReleaseOutside = function(){ this.stopDrag(); }

Play a bit with the drag below, you will notice that it is a lot smoother and we haven't touched the frame rate (I set the original frame rate at 24fps but if you drop it at 1fps you will notice that it is still as smooth)

I am not going to go into details about updateAfterEvent since I have been explaining it in another tutorial --> see our tutorial on updateAfterEvent

Since we are now quite happy of our result we need to develop our little movie furthermore. Our little drag is not very happy since there isn't any target to release him on. Let's create one.

4. Create a 60x60 dark grey circle (fig1). Press F8, name the symbol greyCircleMC and convert it as a movie clip (fig2). Be sure to set the registration point at the center (fig2), give it the Instance name greyCircle (fig3).

fig1 fig2 fig3

What we want to do now is to find a way to detect when the red circle is dropped on the grey circle. We have two solutions one that is not so good but need to be mentioned and one that is a lot better.

Continue to next page...