This tutorial will show you how to create slide controls that let you change the volume and panning of sound objects in a Flash.
I have written this in the tradition of Object Oriented Programming and skipped most of the gory details behind the code and assume
that everyone has their favorite ActionScript Reference manual close at hand.
To make it as simple as possible, I've broken it into four parts:
Creating the slider
Adding ActionScript to the slider
Creating and linking the sound object
Displaying the slider values
All set? Let's go!
<%BRK %>
Creating the slider
Part 1: Create a button
The first job will be to create a slide controller. To do this, we will be embedding a button instance inside
a movie clip (to create a dragable button) and then embed that movie clip in another movie clip (to create the slider).
Here's how it's done.
Note: The following steps should be not performed on the main timeline stage, but from within the library in edit symbol mode.
First, open the library and create a button symbol and name it button body. A small square (about 30 x 30) will do just fine.
Note: Size is not the issue at this point, but make sure that you center it to the stage!
While you're here, add over and down states the button and change the fill color of each.
Part 2: Create a drag button
Next we need to make the button dragable. To do this we will need to embed an instance of the button in a movie clip.
Again, open the library and create a new movie clip and name it drag button. Now, drag an instance of button body
onto the drag button stage and center it.
On the stage, right click on the button instance and select Actions to open the Object Actions Panel. Click in the
Object Actions Panel and add this ActionScript to the button instance:
Part 3: Create a slider
Now that we have a dragable button, we can create a slide controller by embedding drag button in another movie clip.
Again, in the library, create another movie clip and name it slider. Create an additional layer in slider
and name bottom layer bar and the top layer button.
Select the bar layer and draw a horizontal line. Use the info panel to make it exactly 100 pixels wide and use the align
panel to center it to the stage, both horizontally and vertically.
Select the button layer and drag an instance of the drag button movie clip onto the stage. Use the
info panel to resize it to 11 x 11 and use the align panel to center it to the stage, both horizontally and vertically.
It should look like this: (minus the orange stuff)
In order to finish our slider, we need to do one more thing, give the instance a name.
Select the drag button instance and use the instance panel to name it drag.
It should look like this:
The slider should now be complete.
Note: All of this embedding so far should have been done in the movie clip symbols
in the library, not on the main timeline. At this point there should be nothing on the main timeline stage.
<%BRK %>
Adding ActionScript to the slider
Now that we've finished creating the slider, we can exit the symbol edit mode and go back to the main timeline (ctrl+e or click Scene 1).
Create 2 additional layers and name them text, sliders and scripts.
It should look like this:
Select the sliders layer and 2 instances of the slider movie clip onto the stage. Position them so one is above the other
and align them vertically to the stage. Select the top slider instance and use the instance panel to give it the name panSlider.
Select the bottom slider instance and use the instance panel to give it the name volSlider.
Now we just have to add some ActionScript to the slider instances. Right click on the volSlider instance, select Actions
to open the Object Actions Panel and insert the following ActionScript.
Next, right click on the panSlider instance, select Actions
to open the Object Actions Panel and insert the following ActionScript.
The sliders are ready for action. Now we need to create a sound object to control.
<%BRK %>
Creating and linking the sound object
There are a couple of significant changes in Flash 5 when it comes to dealing with audio files. One is the Sound object,
which allows for much greater control of audio, thus allowing us to change the volume and pan values and the other is
the way Library symbols can now be exported to the movie without being placed on any frame using the linkage potion.
We'll start with linkage.
This tutorial uses a small wav file called tack1 which has already been imported. Open the Library and right click
on tack1 to open the dropdown menu and select linkage.
This opens the Symbol Linkage Properties dialog box. Select the Export this symbol radio button and type in myMuzak.
This identifier allows us to reference the sound symbol in the same way that naming a movie clip instance allows you to control
its properties.
The last thing we need to do is create a sound object. This sort of initialization should be done on the first frame of the
movie.
Double click on frame 1 of the scripts layer to open the Frame Actions Panel and enter the following:
The first line creates a sound object called 'mySound'.
The second line links 'myMuzak' to 'mySound'.
The third line tells 'mySound' to start at the beginning of the audio file and loop 999 times.
Test the movie. You should be able to change the volume and the pan values by moving the sliders.
<%BRK %>
Displaying the slider values
As a final touch, let's add a couple dynamic text fields to display the current volume and pan slider values.
Create 2 dynamic text fields and give one variable the name panAt...
and the other volAt.
Test the movie. You should now have 2 text fields that constantly update the volume and pan slider values.
Tutorials Home
