Hello, here is another multimedia video tutorial by arrow media. Today we are going to take a look at creating property change sliders for a movie clip. You just click and drag the mouse over the slider and the object changes it said properties. So, let's see how to create this using ActionScript 3.0. We will start with a new flash document. The very first thing we need is the object.

Draw a circle and delete its outline. Press f8 to convert it into a movie clip named object. Move its registration point to the exact center. This is the object whose properties are planned to change. So give an instance name, object underscore MC. Also name its lair as object Next thing that will appear on stage is the slider.

This slider will control the properties of the object. So we name its layer control. The controller movie clip will be created with the line and rectangle tools. The line will be the controller's drag and rectangle will be its knob. So firstly draw a line. Keep it with fixed 200 pixels.

Convert that line into a movie clip keeping the registration point and center left. Name it control. This is supposed to complete the controller inside which the track and knob will be found. Step inside it and convert that line into a new movie clip called line. Make sure it's registration point should also be at center left this lines with To be used in the ActionScript. So give it an instance name as line underscore MC, and also name its layer as line.

Similarly, on another layer, let's create the sliders knob, draw a rectangle, delete its outline. Fix the knobs with to 10 pixels and hide to 20 pixels. Also convert the knob to a movie clip, keeping the registration point that center left name it knob. This knob should move on the about track. So let's align them. Ctrl plus k is the shortcut for the Align panel.

The knob is placed on the extreme center left of the track. We still have not named the norm. So name it now. Score MC. This controller will control the alpha value of the object movie clip. So, label it alpha.

This controller will be used in the action script. So give it an instance name, alpha underscore MC. Now, everything needed is ready with us along with the instance names. Moving ahead to add action script, get a new layer for it named action. We can change the object's x y coordinates using the ActionScript. Open the action panel and start give the x value equal to 400.

And why equal to 250 You won't see the change in object position on stage, but you can see it in the output. Now, we want to drag the knob on the slider. So let's add the action script for this. Start with the function of the start drag on the mouse event. We don't want locks enter, so type false for it. The knob should be dragged only on these sliders particular path.

So let's bind it in its value. x will be zero ny will be zero drag length will be equal to the sliders weight. So use that the height will also be zero. Now, by using the event listener called the about function on the knob done. Now let's face the movie, nobody's dragging on mouse down. This drag should stop on mouse up.

So, again, open the action bundle and add a script, describe the function of stop drag and then add the mouse up event listener on the knob. Ctrl plus enter. The knob stops when the mouse is up. Similarly, dragging should stop when the mouse is rolled out of the knob. Again, open the action panel and just add an event listener on the knob to stop drag on mouse out. Guess the movie, even when the mouse is down, but moved out of the knob, the knob drag stops.

So finally, the slider is ready. Now, let's set the object's alpha value on the knobs position. For this, we have to first add a function, which will later be called on the knobs enter frame. Start with the function, this will not be a mouse event. This will depend on the knobs enter frame. So, just use event in here we have to relate the objects alpha value to the NURBS exposition.

This exposition can be seen In between zero to hundred, and the alpha value can be set in between zero to one. So the knobs exposition is to be divided by hundred. Here we complete the function now, let's call this function on the knobs enter frame event. Time to test the movie. Currently, the knobs exposition is zero That is why the objects alpha value is also zero, and so it's not visible. start dragging the knob and see, the object varies it's alpha value.

Depending on the knobs position, the object is completely visible. When the knobs position is on the highest, and the object completely hides. When the knob comes fully down. You can say we are ready with the objects alpha property slider. Similarly, we can add one more slider, which will move the object on its y axis depending on the knobs exposition. For that we need one more slider make a copy of the earlier slider and modify its level to position why.

Even modified the new sliders instance name to position y underscore MC Press f9 on the action layer to get the action panel. Already we have the object y position decided here. We even have the alphas complete script here, which will be similar to the new slider script as well. So, at first, we will name the Ready Action as alpha and about that store the objects existing y position in a variable. And now let's start with the new position why ActionScript below. Similarly, to the alpha controllers, no functions and the event listeners to start and stop drag on the slider.

We are ready with the position why controllers not functions and mouse up mouse down, mouse out event listeners to start Stop the drag of the knob on its relative slider. Let's see the output of this. The alphas knob was already moving on the track. Position wise knob is also sliding on its track correctly. Now, only the ActionScript to move the object on its y position remains open the action panel. The objects y position will depend on the knobs exposition on the slider.

This will take place on the call of the knobs on Event Frame event. So let's first add a function for this. Add the objects current position which is stored in a variable And then from that, minus the knobs x value. Now call this function on the knobs enter frame event. Test the movie. Firstly, increase the object's alpha to make it appear.

And now along with the position y now, the object is moving on its y axis, we have detected the knobs x value from the objects existing position. Similarly, we can even add that value, increase the alpha value and see the difference now. Earlier, the object was moving upwards while the knob was moving on the higher side, but this time the object is moving downwards. This difference was created by adding and subtracting the knobs x value from the objects by position. Similarly, you can add some more properties sliders here and create your own controls. You must have noticed that a single Change in the ActionScript gives you a different output.

We are sure this was a useful tutorial brought to you by our Roja media. See you in the next tutorial. Till then, keep watching and keep exploring