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

Vertical Sliders with Macromedia Flash MX

by Diego Park
In this tutorial we are going to implement a simple vertical slider with Macromedia Flash MX. For this, we use the same concept of the last two tutorials.


Dragging the button

We learned how to drag the button on the horizontal axis with the startDrag() function. We are going to use this same function but with different parameters to show a different behaviour.

First, you would want to change the orientation of the movie clip line, as the orientation of the button too. We suggest to rotate it 90º counter-clockwise. The button should point in the upper direction.

Once you performed the changes, it is time to edit the movie clip movie. In the main scene, edits its actions by right-clicking and selecting Actions from the menu. Please write:

onClipEvent (load)

{

	inity=_y;

	maxy=100;

}


As previous versions, the maximum displacement is 100 pixels. But because we want to move the slider up and down, we are interested in hold the initial position of the Y-axis. This is what the variable inity does.

Let us edit the actions of the button now. For this, double-click on the movie clip and select the button inside the movie clip. Edits its actions and insert:

on (press)

{

	startDrag(this,

			  false,

			  _x,

			  inity-maxy,

			  _x,

			  inity);

}



on (release)

{

	stopDrag();

}


The second event handler should be familiar to you. So let us analyse the first event handler, which is very similar to previous ones.

Please remember the different parameters of the function startDrag(). The first one indicates the path of the target. This parameter is needed, while others are optional. The second parameter, a Boolean, is a flag that tells if the target should be centred to the mouse position or just locked where the user clicked --false, as in this example. The other parameters are the left, top, right and bottom limits of the virtual box.

Because we do not want to drag the target on X-axis, the third and fifth parameters are equal --there is no variation on the X component. Please remember lower values on the Y-axis indicates upper section of the screen, inity-maxy represents the top limit, since.


Conclusion

Re-using previous tutorials and introducing trivial modifications, we developed a vertical slider.
[Download File][Page 1]
Visit our forums to discuss / post your problems.