TUTORIAL FLASH : CONTROL DE VOLUMEN

Donmuerte

Esta vez le prestaremos un poco de atenci?n al sonido. Lo que vamos a hacer es un controlador de volumen junto con un sistema b?sico de "play" y "stop" para que sea el usuario quien decida si desea escuchar la m?sica mas baja, mas alta o si directamente no quiere escuchar nada. Poner sonido en una web puede resultar ser un arma de doble filo, pues los archivos de audio son bastante grandes y pueden alargar bastante el tiempo de carga de una p?gina web, sin embargo este problema lo podr?amos solucionar poniendo el sonido en un swf a parte, que no perjudique a la carga del resto de la pel?cula. Lo que si resultar?a un error grave ser?a no dar la posibilidad al usuario de parar el sonido, pues los sonidos de las paginas web suelen tratarse de loops que se repiten una y otra vez y que pueden llegar a desesperar a cualquiera. La primera vez el sonido puede resultar agradable y dar un toque interesante a nuestra web, pero despu?s puede que nos haga perder usuarios! Para que no os ocurra esto vamos a implementar este controlador de audio que adem?s de proporcionarnos las pautas b?sicas de control de sonido nos permitir? ofrecer al usuario una nueva aplicaci?n de control de sonido que seguro nos agradecer?.

PARTE F?SICA

Abrimos nuestro macromedia flash y nos creamos las siguientes capas:

- CAPA FONDO : Darle a vuestro controlador el dise?o que mas os guste

.

- CAPA BOTONES : Nos crearemos en esta capa dos botones, uno para empezar la reproducci?n de nuestro audio ( "play" ) y otro para detener dicha reproducci?n ( "stop" ) y les damos como nombres de instancia "playb" y "stopb" respectivamente.

- CAPA SLIDER : En esta capa representaremos el controlador de volumen. Ir a "view" y seleccionar "rulers" para que nos aparezca nuestra pantalla escalada. Una vez echo esto dibujaros un rect?ngulo alargado y finito de 100 px. ( Ayudaros de las escalas para dibujarlo ). Inmediatamente damos doble click sobre el reci?n creado rect?ngulo para seleccionarlo, damos clic bot?n derecho y lo convertimos a un movie clip, al cual le daremos nombre de instancia "slider". Colocar la cruz de referencia de slider justo en el lado inferior de nuestro rect?ngulo y centrado. A continuaci?n crearos un nuevo rect?ngulo que har? las veces de controlador. Situamos a este = que al punto de referencia de "slider" y seguidamente lo convertimos en un movie clip al cual le asignaremos el nombre de instancia "slideBar".

- CAPA TXT : Crearos un campo de texto din?mico y darle nombre de instancia "volum".

Con esto la parte f?sica estar?a lista. Para los que os hab?is liado un poco con la explicaci?n, a continuaci?n os dejo un esquema con cada elemento y su nombre de instancia:

C?DIGO

Nos creamos una nueva capa llamada acciones y en actions frame pegamos este c?digo:

//Creamos objeto sonido
bgSound = new Sound(this);
//Atacamos sonido
bgSound.attachSound("sound1");
//Empezamos reproduccion con loop de 99
bgSound.start(0, 99);
//Desactivamos boton "playb"
playB.enabled=false;
//Iniciamos nuestro controlador "sliderBar" a
// - 50 es decir situamos por la mitad
slider.slideBar._y = -50;
slider.slideBar.onEnterFrame = function() {
//Damos valor de volumen segun cordenada y
// de nuestro mc sliderBar
bgSound.setVolume(0-this._y);
//Capturamos volumen y lo pasamos al campo
//dinamico "volum"
volum = bgSound.getVolume() + "%";
};
slider.slideBar.onPress = function() {
//Damos funcion Drag a sliderBar para que
//sea movible
startDrag(this, false, this._x, -100, this._x, 0);
};
slider.slideBar.onRelease = slider.slideBar.onReleaseOutside=function () {
//Finaliza funcion drag
stopDrag();
};
stopB.onRelease = function() {
//paramos sonido
bgSound.stop();
playB.enabled=true;
stopB.enabled=false;
};
playB.onRelease = function() {
//reproducimos sonido
bgSound.start(0, 99);
playB.enabled=false;
stopB.enabled=true;
};
stop();

Comentar? las partes m?s destacadas del c?digo:

Antes de nada nos creamos un nuevo objeto sonido, lo atacamos y empezamos la reproducci?n.
bgSound = new Sound(this);
bgSound.attachSound("sound1");
bgSound.start(0, 99);

Es muy importante crear el objeto en la l?nea de tiempo "this". Esto nos evitara problemas cuando queramos cargar nuestro sonido en otra pel?cula, ya que si no especific?ramos el target se asumir?a por defecto level0.

Cuando el sonido este activo el bot?n "playb" quedar? desactivado y cuando el sonido este parado le tocara el turno de desactivarse a "stopb". Las activaciones y desactivaciones de bot?n las realizamos dando valores l?gicos a la propiedad enabled.
playB.enabled=true; //activa bot?n de play
playB.enabled=false; //desactiva bot?n de play
stopB.enabled=true; //activa bot?n de stop
stopB.enabled=false; //desactiva bot?n de stop

Continuamente se ejecutara la sentencia que se puede decir es la mas importante del c?digo, que es la que realmente introcuce el valor de volumen de sonido seg?n la coordenada _y de nuestro mc sliderBar.
slider.slideBar.onEnterFrame = function() {
bgSound.setVolume(0-this._y);
this._y nos dar? un valor negativo luego tendremos que convertirlo en positivo anteponi?ndole el signo menos. El podr?ais eliminarlo pues es un elemento redundante.

Acabamos de utilizar setVolume para introducir el volumen, pues bien ahora insertamos el getVolume para capturarlo y present?rselo en pantalla al usuario en %.
volum = bgSound.getVolume() + "%";

Seguidamente vienen dos acciones de bot?n, la primera da movilidad a "sliderBar" mediante la funci?n startDrag fijando la coordenada x y dando un recorrido a _y entre 0 y -100 y la segunda que quita la movilidad mediante stopDrag. La primera se ejecutara al presionar sliderBar y la segunda al detectarse que se a dejado de presionar el bot?n izquierdo del rat?n sobre este mc.

Las siguientes funciones simplemente se encargan del play-stop y son bastante b?sicas.

Importante: Por ultimo, que nadie se me valla, elegir un temita que os guste en mp3 o wav e importarlo a la librer?a y desde la misma hacer bot?n derecho del rat?n, seleccionar "linkage" y configurar igual que en la imagen:

Con todo esto ya estar?amos preparados para dotar a nuestra web de sonido sin espantar a nuestros usuarios.