Sound Control
|
|
- This tutorial shows you how to let the visitor choose which music to hear, or which sound to play upon a mouse event. The clip is independant of location and can be placed anywhere in the movie. It is suited for menus and other uses where you don't need to stream sound due to file size. This example is 26KB with five short sounds.
- Draw a square on the main stage and convert it into a movie clip, I called mine selectorClip. The square just serves as a handy object to convert into a new clip without leaving the chain of clips. As you can tell you are seeing the finished product here.
- Double click the new clip to edit it. Convert the original vector square again into another movie clip, I called mine soundClip.
- Click the new movie clip, and attach the code shown in the image to it. Remember that there is a difference between attaching code to a clip and attaching code to a layer. When it is attached to a layer a small "a" is visible on the time line. When code is attached to a clip you must first select the clip to view the code. Certain types of ActionScript must be attached to a movie clip, such as "onClipEvent".
- The code tells the Flash player to initialize the variable "whichSound" to 2. This variable will tell the playhead where to go, the number corresponds to which frame the playhead gets sent to. More on that later. Double click the clip to go deeper into the heirachy of clips you are creating.
|
|
- Here's an example of what the finished clip will contain when you're done.
- Each sound is in its own clip, layer, and frame.
- Other layers have code, graphics, and volume controls.
- Notice that there is no sound clip on the timeline until frame 3.
|
|
- Create a new movie clip for each sound. Import each separate sound into each separate movie clip. In the sound layer, make a blank keyframe in frame 1 and put the sound in frame 2. Add enough frames for the length of the sound.
- Make a keyframe in a code layer's first frame and enter the code shown.
- The code first stops the movie, then checks that the correct button was pressed. If everything is OK the sound starts playing.
- The variable "whichSound" also determines which frame the player goes to. That is why sound_5 plays when the variable is 7. With the 2 empty frames before any sounds are reached, it means sound_5 will be found in frame 7.
|
|
- In the last frame I have the sound set to go back to frame 2 and loop the sound. No code is needed if you are only playing the sound once. It will loop back to frame 1 and stop.
|
|
- The image to the right shows the code attached to button number one for playing the first sound.
- The code sets "whichSound" to 3, which is the frame number where the first sound is sitting.
- But first it sends the playhead to frame 1 of the timeline to stop any currently playing sounds.
|
|
- The code tells the player to stop any currently playing sounds then continues playing.
|
|
- When it reaches frame 2 it stops the movie.
- The next line of code checks to see if the variable "whichSound" is greater than 2 which would mean a button has been pressed. Remember that two is the default we set it to when the movie loaded.
- If it is greater, the code sends the playhead to the frame number specified by what the variable "whichSound" was set to. It was set to a number from 3 to 7 depending upon which button was pressed.
|
|
- I stuck keyframed stops in frames 3 through 7 although the code that sends the playhead to the correct frame is a "go to and stop" action. One of them is going to catch it.
- That's it for the sound controller. If you want to add volume control read on.
|
|
Volume Control
|
- I wanted the volume slider to be either draggable, or able to go where the mouse pointer is clicked if it is within the range of the hotspot I made for the button that detects clicks.
- The slider is a movie clip, with a button clip inside that reacts to mouse events. Be sure to give it an instance name in the Instance tool panel. I named mine "volumeControl".
- Attatched to the slider knob movie clip is code that sets and updates any mouse input.
- The first "onClipEvent" event handler runs when the slider movie clip is first loaded. In this instance it runs once.
- In order to control sounds you must use a constructor in the form of "new sound();". This creates an object we can use that has built-in controllers used for setting volume, balance, and other sound settings.
- We won't specify a target although you can within the paranthesis.
- If you don't specify a target, the methods you can use with sound objects will control all sounds playing.
- Next we use the sound objects method "setVolume" to set the volume to 50%.
- The next 4 lines are arguments that specify the range that the clip can be dragged. A clips initial position starts at (0, 0) as far as the startDrag action is concerned.
- Setting both "top" and "bottom" arguments to zero, the value of the movie clips "_y" position, keeps the clip from being able to be dragged vertically.
- The "left" and "right" "_x" settings give it a horizontally draggable range of -50 (to the left) to 50 (to the right), which is a distance of 100 pixels.
- The second "onClipEvent" handler updates the volume level if the slider has been moved. The "dragging" variable is set to "true" by one of the control buttons when a click event has been made by the user.
- The sound object sets the volume by adding the current _x position of the slider clip to 50.
- At the far right _x would be 50, so the volume would be set to 50 + 50, or 100.
- At the far left _x would be -50, so the volume would be set to 50 + -50, or 50 minus 50.
- This gives us a range of zero to one hundred percent volume.
|
|
- Inside the slider movie clip is a button, Attached to the button is code that detects mouse events.
- When the on(press) event handler detects a button press, it makes the slider clip draggable using the "startDrag" action.
- The clip is only draggable within the limits we set for it earlier.
- The next handler is a combination of "on(release)" and "on(releaseOutside)". The combination lets the slider clip know the mouse button has been released even if it is outside the range of the buttons hotspot.
- It uses the "stopDrag" action to stop the sliders ability to be dragged by the mouse.
- It then sets the "dragging" variable to false to let the parent clip know the slider is not being moved any more.
|
|
- On a layer below the draggable volume slider is a button with only a hit area defined. This button detects any mouse clicks within the hotspot and moves the slider to the mouse's "_x" position.
- Be sure you gave the volume slider movie clip an instance name so that this code can act on it. Here it's called "volumeControl". Click the clip then enter a name for it under the "Instance" tab on the "Effects" panel.
- Before acting on a mouse click the code checks first to see it the mouse's "_x" position is in range of the button.
- Like the draggable slider's code, the "dragging" variable is also set so that the "onClipEvent" handler will know it should change the volume.
|
|
- That's about it for now, but be sure to explore other ways of using sound in your movies as well as other methods of controlling them.
- Below is the more involved code used in this tutorial if you want to copy and paste it.
|
Selector Buttons:
on (release)
{
whichSound=3;
gotoAndPlay(1);
}
|
Slider:
onClipEvent(load)
{
s = new sound();
s.setVolume(50);
top=_y;
bottom=_y
left=_x-50;
right=_x+50;
}
onClipEvent(enterFrame)
{
if(dragging==true)
{
s.setVolume(50+_x);
}
}
|
Click Detect Button:
on(press)
{
if(_xmouse > -50 and _xmouse < 50)
{
volumeControl._x = _xmouse;
volumeControl.dragging=true;
}
}
on(release, releaseOutside)
{
volumeControl.dragging=false;
}
|
Slider Button:
on(press)
{
startDrag("", false, left, top, right, bottom);
dragging=true;
}
on(release, releaseOutside)
{
stopDrag();
dragging=false;
}
|
|
