WYDBLOG

Botones animados y con sonido en flash

Hace mucho tiempo que tenia ganas de hacer algún tutorial de Flash y que mejor ocasión de que esta no?… jeje, bueno les comento que en este tutorial tratare de enseñarles a crear botones animados parecidos a estos:

Quizás el tutorial se vea un poco difícil, pero que no cunda el pánico! es mucho mas fácil de lo que ustedes piensan, y les aseguro que seré lo mas explicativo (existe esa palabra? :P) posible para que hasta el mas nuevo en flash pueda seguirlo.



Para llevar a cabo este tutorial necesitaran descargar el siguiente archivo que contiene: la imagen de la guitarra, los 4 sonidos distintos y el archivo terminado.


1_ Abrimos nuestro programa y creamos un nuevo documento (el tamaño no es importante), luego importaremos la imagen de la guitarra (Archivo → Importar → Importar a Escenario) y convertimos la imagen en símbolo (Modificar → Convertir en símbolo) y elegimos Clip de película (Movie Clip en ingles).

2_ Aremos doble clic en el símbolo creado (al hacer doble clic en el símbolo creado, entramos en su línea de tiempo) y en la mima capa de la imagen escribimos el texto del botón y lo ubicamos en el lugar correspondiente, por ultimo seleccionamos el texto y la imagen y lo convertimos en símbolo nuevamente.

3_ Dentro del MC (Movie Clip) guitarra, crearemos una nueva capa en donde ubicaremos nuestro sonido de la siguiente forma: importaremos el sonido deseado a la biblioteca (Archivo → Importar → Importar a Biblioteca), una vez hecho esto, abriremos la biblioteca (Ventana → Biblioteca) seleccionaremos el sonido y lo arrastraremos al escenario (Importante: tiene que estar la nueva capa seleccionada), por ultimo agrandaremos la línea de tiempo unos 10 fotogramas (el sonido dura 10 fotogramas), para agrandar la línea de tiempo debemos seleccionar el fotograma al que la queremos agrandar, en este caso el numero 10 y presionar F5 o clic derecho en el fotograma y luego “insertar fotograma”.

4_ En este paso crearemos una nueva capa y la llamaremos “acciones”, aquí es donde añadiremos nuestro codigo, para hacerlo debemos seleccionar el fotograma y apretar F9 o ir a Ventana → Acciones, una vez hecho esto pegaremos este código en la nueva ventana:

Explicación:
stop(); → La película se detiene


this.onRollOver = function(){→ Al posar el mouse por encima del MC
gotoAndPlay(1); → comenzara a reproducirse desde el fotograma numero 1
}


this.onRelease = function(){→ Al hacer clic en el MC
getURL(”http://wydstudios.com/blog”,”_self”); → Ir a la pagina…
}


4_ Este debe ser uno de los pasos más sencillos, ya que ahora crearemos la animación de la guitarra. Hay distintas formas de animar objetos en flash, para esta ocasión explicare la mas sencilla de todas: la animación fotograma x fotograma.
Nos dirigiremos a la capa en donde tenemos a nuestra guitarra con el texto y seleccionaremos el fotograma numero 2, luego seleccionamos nuestro MC y lo movemos un poco mas arriba (simplemente con las flechitas). Repetimos este movimiento 2 o 3 veces y luego hacemos lo mismo pero hacia abajo, pero esta vez 4 veces aproximadamente, y por ultimo repetimos el movimiento hacia arriba 2 veces mas o menos. Asi de esta forma obtendremos nuestra animación.



Listo señores ya terminamos este tutorial, lo único queda por hacer es apretar Ctrl.+ Enter para probar que todo haya salido bien y listo xD… jeje, ya saben por cualquier duda me dejan un comentario o me contactan.
Saludos,
Lucas.