Internet Cross Logo
Internet Cross your one stop web tutorial website
Search Internet Cross Shop:

Dynamic Control Path with Macromedia Flash MX

by Diego Park
In this tutorial we are pleased to introduce a new Macromedia Flash MX tutorial to develop a dynamic control path. For this, we are going to draw a nice mouse and a piece of cheese. Every time the user clicks on the movie clip, a piece of cheese appears in this position and the little mouse runs to eat it. In this way, we generate a dynamic path every time the left mouse button is pressed.


The Mouse & The Cheese

To begin, we have set the movie clip at 500 x 300 pixels, with a frame rate of 30 fps. We are going to draw a really simple movie clip, a piece of cheese:

IMAGE


Then, we need a mouse to eat this cheese, so we draw:

IMAGE


We recommend drawing the body first, centering it, and finally adding the tail. With this procedure we align our mouse with its center of gravity. In the other way -to draw the body and the tail and then align the entire mouse, we distribute the center along the thorough mouse body, which can be fairly inappropiated.

Although both of them are movie clips, they look different. This is because the second one has parameters, which makes it a component. To add parameters to the movie clip, select it (mouse in this case) and press the right button of the mouse:

IMAGE


Once we have selected Component Definition from the menu, you might see:

IMAGE


Add parameters using the cross button. The three parameters are numbers, where speed represents the speed or scalar of the mouse, and the other two are to hold the destination point, separated in the two components, X and Y. This value is up-to-dated every time the user clicks on the screen. For now, assign 0 to these two values.

Let us return to the main scene. We need a single frame, called objects:

IMAGE


Drag the cheese movie clip and allocate it using the Align tools (Ctrl+K). It is not important where you place it, but it makes cleaner work. Then, drag the mouse movie clip from the Library window to the objects layer. Remember the order in which you drag the movie clips is important because in this way we are sure the mouse movie clip will be over the cheese movie clip if they are overlapped.

Instance the movie clip component as mouse from the Properties window:

IMAGE


In this window you will see the parameters. Now please change the two parameters left in 0, x_dest and y_dest to _x and _y respectively. Then, the first value of the variables is the current position of the movie clip mouse. You can change the speed parameter to higher values. The higher it is, the mouse will look hungrier.


ActionScript

It is time to edit the script lines of the two movie clips. Please press the right button of the mouse over the movie clip cheese, select Actions and insert:

onClipEvent (load)
{
_x=_root.mouse._x;
_y=_root.mouse._y;
}

onClipEvent (mouseDown)
{
_x=_root._xmouse;
_y=_root._ymouse;
}

Then, we see it handles two events. The first one places the movie clip in the mouse position. This is why we have said the position of the movie clip was not important. And because the cheese movie clip was dragged first, it will be placed under the mouse.

The other event handler places the cheese where the mouse, the device, left button was pressed. It is important to add _root. before _xmouse and _ymouse.

The final result is the impression that a piece of cheese appears in the mouse position every time the user clicks on the screen.

Now let us edit the mouse actions:

onClipEvent (mouseDown)
{
x_dest = _root._xmouse;
y_dest = _root._ymouse;
}

onClipEvent (enterFrame)
{
x = _x-x_dest;
y = _y-y_dest;
_rotation = -Math.atan2(x, y)/(Math.PI/180);

if (Math.sqrt(x*x+y*y)>speed)
{
_y -= speed*Math.cos(_rotation*(Math.PI/180));
_x += speed*Math.sin(_rotation*(Math.PI/180));
}
}

The first event handler updates the two parameters we have defined to hold the destination point.

The other event handler calculates the mouse rotation and then moves the mouse to the destination. Then, every 1/30 second of the frame rate, the movie clip does this calculation.

The two variables x and y are the difference between the current position of the movie clip and the destination. If you want, this is the deltaX (or x1-x0) and deltaY (y1-y0).

Please analyze the next line. We know that:

tan(alpha) = deltaY/deltaX, then
alpha= atan(deltaY/deltaX).

You might be wondering why we have put x and then y (atan2(x, y)). This is because of the Macromedia Flash measurement system. Remember X-values increase to right and Y-values increase to bottom (contrary to Mathematical axis convention). And the rotation is from the vertical position (or if you want, the Y-axis), positive to right and negative to left. This is because we invert the parameters of atan2 and then we negate the value of the angle (-Math.atan2(...)). Remember atan2 and trigonometric functions in general return radians, while the _rotation property is measured in degrees. To convert the one to another system we use

degree=radians/(pi/180), or
degree=radians*180/pi, or
degree=radians*57.2958

It would be correct any of the various ways shown above.

Then, we check if we are close enough to the destination. Note how Math.sqrt(x*x+y*y) is the distance from the current position of the mouse to the destination (Phytagorean theorem). We check the value against the speed because this amount is the scale, say, how fast the mouse approaches to the final point. As we have learned before, the other lines make the mouse advance in the correct direction according to the rotation.

The final result is:


IMAGE



Conclusion

We have learned how to implement a simple mouse listener that moves a movie clip according to the position of the mouse. Although this method is not the most attractive, it is an approximation of what we are going to do. An extended version of this version can be used in games to move a character along the screen, as we are going to see in next tutorials.
[Download File][Page 1]
Visit our forums to discuss / post your problems.