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

Sliders with Macromedia Flash MX

by Diego Park



Objects

Please create a button. You can use the one included in the source code (Figure 1).


IMAGE


Figure 1. You may develop a button remembering it is going to be used as slider.

The next object we are going to use it a line indicating the path of our slider. We decided to create a simple line of 100 pixels width (Figure 2). Of course you can improve it. For example, you can insert little marks indicating different positions.


IMAGE


Figure 2. The path-indicator is our movie clip called line.

The movie clip movie is fairly the most important (Figure 3). As you may guess, we are going to encapsulate the button inside this movie clip. And we are going to insert a text field, which displays the percentage of the slider position --0% obviously indicates the initial position and 100%, the maximum.


IMAGE


Figure 3. This movie clip includes the button and a text field, which displays the current position of the mouse.

Then, after creating the movie clip, you need to drag the button from the Library window to the current stage. Please right-click on the instance of the button, select Actions and write:





on (press)

{

        startDrag(this,[]

                          false,

                          initx,

                          _y,

                          initx+maxx,

                          _y);

}



on (release)

{

        stopDrag();

}


The method startDrag() drags the movie clip indicated in the first parameter (this in our case, the same movie clip). As we explained in previous tutorials, the following parameters are optional. However, because we want to simulate a slider, we are going to set these values. The Boolean is used to determine if the movie clip has to be locked to its center. And we insert false because we want to start drag the button exactly where the user clicked. The next four parameters are the virtual limits of the button. The variables initx and maxx are going to be defined in Scene 1. init holds the initial X-position of the button. It is useful to determine if the user can -or cannot- move the button to left (0%). And it is used to set the right margin of the button (100%): init+maxx. This means that the user cannot move the button more than maxx-pixels on the X-axis from the initial position –initx. Note both top and bottom limits are the current Y-position of the object. This means that the user cannot move the button up or down. Then, our slider is hard-coded to behavior as horizontal slider. You can use different variables to make it more flexible and allow horizontal or vertical sliders alike.

And the second handler releases the capture of the dragging. As you can see, it is fairly simple. Let us now edit the text field. We want to show a variable that tells the current position of the slider. It means that we are going to use dynamic texts. In the Var field please insert posx. This is the name of a variable telling the percentage moved --from 0% to 100%. Note the indicator will move with the button, since it is included in the same movie clip.

It is time to go to Scene 1 and drag the movie clip movie from the Library window. After the creation of the instance, please edit its actions and insert:





onClipEvent (load)

{

 initx=_x;

 maxx=100;

}



onClipEvent (mouseMove)

{

 posx=Math.round(_x-initx)+"%";

}


We are creating the two variables that we used before. The initial position is where the movie clip is when it is loaded. Because our line is 100 pixels-width, it is reasonable that maxx was 100.

The variable posx is the current position of the slider and it is used to display a text. Note we used the event mouseMove we need to up-to-date the variable only if the user moves the mouse. Of course, you can modify the variable every iteration (enterFrame), but it is not needed.

The operation _x-initx returns the distance from the initial to the current position in floating points. So we need to convert it to integers using the method round(). After this, we concatenate this number with the string "%", casting posx to string. Finally, the text displayed has the form n%, where n is an integer in [0, 100].


Conclusion

Using really basic symbols and methods we developed a useful slider for user-interfaces. For example, you can develop a system that changes the alpha, position or color of certain object. Or you can use this core to change the general volume of your presentation or game.
[Download File][Page 1]
Visit our forums to discuss / post your problems.