Art, Design, Code

Main menu

Post navigation

Tutorial: Drag and throw an object on stage

In this tutorial we will build a movie that contains a simple movieclip that allows the user to click and drag the clip, and when released exhibits some inertia and continues to move and bounce off walls like an air hockey puck.

This script is OK, but rather than smoothly picking up the puck where the mouse touched it, the puck snaps its top corner to our mouse. To alleviate this we need to subtract the mouse position relative to the puck from the mouse position relative to the stage by setting an anchor when the mouse is pressed. We won’t worry about garbage collecting this onEnterFrame because we are going to overwrite it when the mouse releases.

Note: in general you shouldn’t just leave open onEnterFrame functions running. When you get a number of onEnterFrame functions going at the same time the performance of your movie can suffer greatly or even crash. For this reason you should terminate your onEnterFrame functions when they have finished their purpose. This is called garbage collection.

Now we need a way to determine which way the mouse was moving when it released the puck. For this we can record _xmouse and _ymouse values every frame that the mouse is down and store them for use in the onEnterFrame we are going to create onRelease.

To make the calculation as to which direction to send the puck after release, we only need the mouse position one frame back, but if we were to record more frames, we could get an average direction just prior to release or even find a curve for the puck to follow. Here though we’ll just send the puck in a straight line.

The math to determine which direction the mouse was moving is a simple slope equation using two points (our current and previous mouse points) We’ll define this function for onRelease and onReleaseOutside just in case your mouse is a bit quicker than your movie.