Creating a Volume Slider

[ LiB ]

Creating a slider can benefit your game in many ways. A slider can allow the player to adjust the overall sound level of the game. A slider in the Options menu can be used to control difficulty level controlthe higher up the slider button, the harder the game, the lower the slider button is, the easier the game.

What is a slider control anyway? If you take a look at Figure 10.8 right now, you'll notice that I broke down the slider anatomy.

Figure 10.8. The anatomy of a slider control

graphic/10fig08.gif


A slider can be vertical or horizontal. Obviously, the slider button will move vertically on the vertical slider and horizontal on the horizontally positioned slider.

Before jumping into creating slider code, let me show you how to adjust the sound's volume first. All you have to do is use the setVolume method on the Sound object with a parameter ranging from 0 to 100, with 0 being no sound and 100 meaning full blast. Check out GDA_PROG10.3.fla and the following listing.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // In this demo you are shown // how to create a sound object // so you can control sounds // from within ActionScript. // Create the new Sound object mySound = new Sound(); // Attach a sound to play from the library mySound.attachSound("beatTenOne"); // Play the sound starting at 0 pos // looping for 9,999 times. mySound.start(0, 9999); // Lower the volume mySound.setVolume(30); 

How simple can it get? The creative side of it all starts with you. This program is not interactive and dynamic enoughlet's make it more so.

Demo GDA_PROG10.4.fla starts off on the main Timeline in a similar way to the last program example, except that I added a custom control, a volume slider. See the following listing and see how similar the code is.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // In this demo you are shown // how to create a sound object // so you can control sounds // from within ActionScript. // Create the new Sound object mySound = new Sound(); // Attach a sound to play from the library mySound.attachSound("beatTenOne");  // Play the sound starting at 0 pos // looping for 9,999 times. mySound.start(0, 9999); 

Looks like the usualcreate a sound object, attach the sound, then use the start command to play it. So where is the volume code? Test and run the movie and see for yourself. The volume code is actually in a Movie Clip that responds to the mouse's position and adjusts the volume according to its on-screen positionin other words, a slider.

Listing 10.4 contains the rest of the code, which is inside that sliding clip. To see the slider, check out Figure 10.9.

Figure 10.9. The volume slider

graphic/10fig09.gif


 // The onClipEvent(load) handler // initializes all other handlers // in this Movie Clip. onClipEvent(load) {   // These properties   // are used and can be   // adjusted to where you   // want your slider min   // and max to be on the   // x axis.   this.minX = 100;   this.maxX = 300;   // Define another sound   // object to control the   // sound globally--this is   // why it's declared on _root.   _root.music = new Sound();   _root.music.setVolume(50);   // This handler is declared   // and executed for when the   // mouse clicks on the mc--   // it then flags its variable   this.onPress = function() {     this.active = true; };  // This flags the rest of the // handlers that the mouse was // released. this.onRelease = function() { this.active = false; }; // This function was also declared // for when the user releases the // mouse outside of the clip. this.onReleaseOutside = function() {   this.active = false; }; // This is the heart of it all-- // It is executed when the mouse is // moved and if pressed. this.onMouseMove = function() {   // This only executes if the mouse   // is being pressed (and flagged)   if (this.active) {         // Follow the _xmouse to         // simulate dragging.         this._x = _root._xmouse;         // Constrain this position to         // the max property that we set.         if (this._x > this.maxX) {         this._x = this.maxX;       }       // Also constrain our position       // to the min property we set.       if (this._x < this.minX) {         this._x = this.minX;       }       // Set the volume of our music object depending on what percent along       // the slider our mc is. See the text for an explanation of the formula. _root.music.setVolume(Math.floor((this._x-this.minX)/(this.maxX-this.minX)*100));      }   }; } 

It looks overwhelming, but you are more than ready for code like thisthis is the cool stuff that you can impress your novice programmer friends with!

Even though much of the code is understandable, it does include a few functions and handlers that I haven't shown you yet. These handlers are commonly used for tasks like creating sliders and other similar controls so don't be a stranger to them. Let's dive in.

Notice that all the handlers are being defined within the main handler, onClipEvent(load). This causes the clip to take a life of its own once everything is set into place.

One of the first things I did within the loading handler was initialize new variable properties that hold the minimum and maximum pixel values of where the slider can slide.

 // These properties // are used and can be // adjusted to where you // want your slider min // and max to be on the // x axis. this.minX = 100; this.maxX = 300; 

The next thing I did was create a sound object on the _root of the movie so it can be accessed anywhere . As the regular Sound constructor was used, any adjustments to the sound here will affect other sound objects as well. In other words, this Sound object will be used as a global sound control.

 // Define another sound // object to control the // sound globally--this is // why it's declared on _root. _root.music = new Sound(); _root.music.setVolume(50); 

I know you're not used to defining a function within another function, but this is possible in ActionScript, and I did so. I declared the onPress handler here; it sets a flag that tells the rest of the program that it has been clicked.

 // This handler is declared // and executed for when the // mouse clicks on the mc-- // it then flags its variable this.onPress = function() {   this.active = true; }; 

The onPress handler will only be called when the mouse clicks within the Movie Clip area. This saves you from having to use the hitTest function.

 // This flags the rest of the // handlers that the mouse was  // released. this.onRelease = function() {   this.active = false; }; 

The onRelease even handler detects when the Movie Clip is released (within the Movie Clip). This handler tells the rest of the program that the mouse has been released, so it should stop dragging the clip.

The next thing I did was use the onReleaseOutside method to prevent any weird functionality with the clip. I will be restricting the slider from following certain mouse positions ; to do so, mouse release in those off-limits areas must be detected .

 // This function was also declared // for when the user releases the // mouse outside of the clip. this.onReleaseOutside = function() {   this.active = false; }; 

The next thing I declared was the onMouseMove method. Notice that I didn't install the listenerFlash 6 allows you to declare onMouse event handlers in Movie Clips without a mouse listener. This is bad practice, though. The future version of Flash won't let you get away with missing code so don't do it. I did it to prove that Flash MX will let you get away with a lot so be careful.

 // This is the heart of it all-- // It is executed when the mouse is // moved and if pressed. this.onMouseMove = function() { 

I used the flag variable to determine if the mouse is downif it's not, Flash won't execute any commands. If it is, the program enters the following if statement:

 // This only executes if the mouse // is being pressed (and flagged) if (this.active) { 

The first obvious thing I do if the mouse is down is make the clip follow the mouse position. This would make it seem as if the user is really dragging the clip:

 // Follow the _xmouse to // simulate dragging. this._x = _root._xmouse; 

I wanted solid code, so I decided to restrict the directions in which the user can slide this Movie Clip. This is why the slider is following the mouse only on the x-axis.

 // Constrain this position to // the max property that we set.    if (this._x > this.maxX) {   this._x = this.maxX; } 

The previous if statement makes sure that the clip's current position doesn't go past the predefined maxX position. This forces it within boundaries.

The following if statement does something similar, except that it restricts the Movie Clip to the predefined minX position.

 // Also constrain our position   // to the min property we set.   if (this._x < this.minX) {   this._x = this.minX; } 

The last line of the onMouseMove function is the most important of allit uses all the information in this system to decide the volume of all the sounds being played . It's the master volume control, if you will.

 _root.music.setVolume(Math.floor((this._x-this.minX)/(this.maxX-this.minX)*100)); 

Seems very complicated, but let's break it down and you'll see how simple it really is. You know setVolume requires a parameter that goes from 0 to 100, so you already know that you have to work with percent amounts but take a look at the following visual to help you with themFigure 10.10.

Figure 10.10. Working out a fraction

graphic/10fig10.gif


If you take the position of the slider button along the slide and you divide that by the length of the slide, it returns a decimal, from 0.00 to 1.00, that can be multiplied by 100 this returns the amount in percent, along the slider, which is what we need.

For instance, if the slider button is 50 pixels along a slider bar that is 300 pixels long, then divide 50 by 300 to find out what the scalable amount is. It's roughly 0.17this number can be scaled or multiplied by 100 to return 17 percent. If this value is passed on to setVolume , it will make the volume 17, which will be a very low volume.

Experiment with a few values until you understand what's going on. In essence, I subtract minX from the current x-position to get the distance along the slider (this._x-this.minX) . This could be anything from 0 to 300, if the slider is 300 pixels long. minX is subtracted from maxX to figure out the real length of the slider (this.maxX-this.minX) let's say it's 300. The distance along the sliderlet's say it's currently 150is divided by the length of the slider ((this._x-this.minX)/(this.maxX-this.minX)) , which is now 300. This would yield 0.50, which can be multiplied by 100 to equal 50 percent. This would be the value passed on to setVolume to make your volume 50 percent. Get it?

The good part about this slider is that you can copy and drag it to any of your movies and it will work with minimal modificationwhat you choose as the graphic for the slider is up to you.

[ LiB ]


Game Development with ActionScript
Game Development with ActionScript
ISBN: 1592001106
EAN: 2147483647
Year: 2004
Pages: 162
Authors: Lewis Moronta

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net