00:00
00:00
Newgrounds Background Image Theme

ravchka just joined the crew!

We need you on the team, too.

Support Newgrounds and get tons of perks for just $2.99!

Create a Free Account and then..

Become a Supporter!

As: Volume Slider Tutorial

5,533 Views | 8 Replies
New Topic Respond to this Topic

As: Volume Slider Tutorial 2005-07-04 16:47:30


AS: Main

OVERVIEW

This tutorial will use the concepts found in AS: Sound It will cover how to utilize the Sound() object to make a play/pause button and a volume control.

First you need to pick out your song and import it to the library. Find the song in the library and right-click it. Click on linkage and then check the box that says "export for actionscript". You'll notice the "identifier" bar light's up. Put any name in there, something easy to type and remember. Just call it "mySong" to keep it easy.

Now, go to the first frame of the main timeline, which is where we're going to type our script. We need to tell Flash that we're making a new Sound() object. The way to do this is pretty simple:

theSong = new Sound();

Now, notice I put "theSong". That's how we're going to identify our Sound object from now on. Right now flash only knows that "theSong" is a sound object, but it doesn't know what song we want it to point to, so we have to tell it what song we want:

theSong.attachSound("mySong");

We just attached "mySong" (the one you imported to the library) to "theSong". So anytime we tell "theSong" to play, flash will play "mySong". Get it?

Now, we don't want 'theSong' to play right now at the beginning of the movie, so we will make a play button and a stop button for the song.

Make a button and give it the instance name of "pButton", without the quotes. Do the same for a stop button and call it "sButton", again, without the quotes.

Now, we're going back to the first frame of the main timeline to create some functions for our buttons. First we need to make our play button play the song.

pButton.onRelease=function(){
theSong.start(0,0);
}

We're telling the song to start at second number 0 of the song, and it will loop 0 times, therefore only playing once through. If you want it to play more than that, change the number. If you want it to loop forever you can add this little function:

theSong.onSoundComplete=function(){
theSong.start(0,0);
}

That just says that when the song is done, it will play again, therefore looping forever.

*NOTE: You can make a pause button very easily by making the play button a movie clip with two frames. One frame will be the play button, the second frame will be the pause button. Give both of them instance names and reference them inside the movie clip. Write a simple function like the one above for the pause button and have it define a variable as the number of seconds the sound has been playing. You cna do this by using the Sound() object method of "position"

Example: songPosition = theSong.position

This will define "songPosition" as the number of miliseconds the song has been playing. You can then use this as the starting point for the song when using theSong.star(songPosition, 0). This way, you can pause the song and then return the the exact spot.

If this needs more clarifying, just ask. I didn't go into grave detail because it is not the focus of this tutorial.

*END NOTE

Now, we need to make the stop button work.

sButton.onRelease=function(){
theSong.stop("mySong");
}

We're telling our sound object "theSong" to stop playing the song "mySong". Pretty basic.

Well, our song now works and plays and stops. Now we just need to adjust the volume.

Let's make a line. Make it straight up and down for simplicity's sake, and give it the instance name of "slideRail", again without the quotes.

Now make the actual slider that will slide up and down the slide raile. Give it the instance name of "slider" Now stick the slider on top of the slide rail, so it looks like a volume adjuster. It doesn't matter where it's at, just as long as it look decent.

Now, go back to the first frame of the main timeline, where we have all of our code. We need to tell the slider to let us drag it, but only so far. For this we will use "startDrag".

We're going to make this very dynamic so you can movie it anywhere without the code screwing up. To do this we need to define how high the slideRail is, and how long it is. We'll use getBounds() for simplicity. To use getBounds() we need to define our bouding variable. We'll call it slideRailBound

slideRailBound = slideRail.getBounds(_root);

The _root just tells us that we are doing this in respect to the main timeline's coordinates.

Now to actually make our slider draggable.

slider.onPress = function() {
slider.startDrag(false, slideRail._x, slideRailBound.yMin, slideRail._x, slideRailBound.yMax);
};

Notice we did onPress=function(){ } this time. We did that because we want the person to be able to release the slide button and have it stop dragging. startDrag(lock, left, top, right, bottom) We basically set where the slider can and cannot be dragged. We said that the slider can't be dragged beyond the top of teh slideRail or the bottom of the slideRail, and that we can't movie it off of the slideRail whatsoever.

To stop draggin the slider we say:

slider.onRelease = function() {
slider.stopDrag();
};
slider.onReleaseOutside = function() {
slider.stopDrag();
};

We say that if the user releases the mouse button whether the mouse is over the button or not, that the slider will stop dragging with the mouse.

Now to make the slider's position actually mean something.

_root.onEnterFrame = function() {
theSong.setVolume(slideRailBound.yMax-slider._y);
};

We're saying that Flash needs to continuously set the volume of the theSong to the position of the slider, relative to the slideRail. If you move the slider up, the song gets louder, if you movie it down, it gets softer. To set the initial volume of the song to 100, you can say:

_root.onLoad = function() {
theSong.setVolume(100);
slider._y = slideRailBound.yMin;
slider._x = slideRail._x;
};

We'll set the volume of theSong to 100 and also put the slider at the 100 position. We'll also stick the slider right on the slideRail so it doesn't look shitty. Basically, you can put the slider anywhere and it will cling to the slideRail from the start.

That's the end of AS: Volume Slider Tutorial. This entry was written for Flash MX at a previous date and was written to answer a question of a user in this forum. It is meant as a guide. This concepts written above can also be used to set the balance and position of a song.

Questions? Just Ask


I could surely die

If I only had some pie

Club-a-Club Club, son

BBS Signature

Response to As: Volume Slider Tutorial 2005-07-04 16:57:42


That's pretty cool. I was thinking of adding one of these to the Options menu of my game. This will help a lot!


BBS Signature

Response to As: Volume Slider Tutorial 2006-03-29 06:58:11


Nice tutorial u got here ... but that's not exactly what i'm looking for...tough i think i'm going to use this one ... do u got some more tutorials ?

Response to As: Volume Slider Tutorial 2006-03-29 07:05:27


Response to As: Volume Slider Tutorial 2006-03-29 07:49:20


on topic : How can u make the "slider" to go on an oval line and still modifing the volume right ?

Response to As: Volume Slider Tutorial 2006-03-29 07:50:21


Tween it.


BBS Signature

Response to As: Volume Slider Tutorial 2006-03-29 08:26:32


lol , ok i tween it ...but it will just play endlesly ...from one state to another ...if u ment something else...reply

Response to As: Volume Slider Tutorial 2006-03-29 08:55:00


thanks a bunch!!

Response to As: Volume Slider Tutorial 2006-03-29 11:49:04


is it possible to have the slider control the whole sound coming from the computer, same way paltalk does?


WEBSITE

BLOG ~ Dont fuck around with my dog. All that I can see I steal. ~

NG FFR ~ Automatic for the people.

BBS Signature