Flash MX 2004: Creación de botones animados y reproductor de sonidos
Escrito por elMax

Publicado:0/00/2003
  Actualizado:0/00/2003
Página personal 

Introducción (aclaraciones)

Lo primero deciros que el tutorial lo realizaré utilizando Macromedia Flash MX 2004 Español, última versión y sin duda la mejor de este programa de diseño de animaciones vectoriales.  Todo se realizará desde el Professional (si estás en formato normal y quieres cambiar al prefessional debes dirigirte al menú superior del programa Ayuda » Cambiar a Flash MX Professional).  Para descargar este magistral software (versión shareware de caducidad de 30 días) haz click aquí (este mismo setup incluye Macromedia Flash Player 7, que será necesario para ver nuestras creaciones).


Conceptos básicos (si eres principiante, antes de comenzar con el tutorial lee esto)

Para poder llevar acabo este tutorial antes debemos aprender un conjunto de ejercicios que serán de nuestra importancia a lo largo del desarrollo de este.

Empezando por lo mas básico, para crear un nuevo fotograma debemos seleccionar en el que nos encontramos con el botón derecho del mouse y acto seguido seleccionar la opción Insertar fotograma clave (crearemos uno idéntico al que hemos seleccionado).



Una de las cosas que más usaremos (no en el tutoral, sino en el uso diario del software) será la biblioteca.  En esta aparecerán todos los objetos importados, botones, clips de películas, gráficos, etc. y este no aparece automáticamente al inicio del programa.  Por lo tanto debemos abrirlo nosotros tecleando Ctrl+L.  Esta aparecerá a la derecha (junto a componentes, mezclador de colores, etc.).



Cuando usemos este programa debemos intentar tener abierto la opción Propiedades, ya que desde esta podremos modificar las, lógicamente, propiedades del documento (color de fondo, tamaño, sonido, etc.), textos (fuente, tamaño, color, etc.), imágenes (tamaño, colorear al blanco y negro, bordes, etc.), etc.



En las tres primeras versiones de este programa, se trataba dar al usuario la opción de crear animaciones para su página web.  A partir de la 4 Macromedia comienza con el ActionScript.  Este lenguaje nos da la oportunidad de dar a nuestros fichero .swf contenidos dinámicos para hacer de ellos un atractivo mucho mas amplio al que tuviera antes de que apareciera este tipo de código de programación.

Como habrán podido comprobar mediante el título de este tutorial, aprenderemos a crear botones animados y un reproductor de sonidos.  En los dos casos necesitamos saber como crear un botón en Flash MX 2004.  Los botones son símbolos que se utilizan para enviar a una capa, fotograma, etc. en el mismo documento flash o bien a una dirección URL mediante acciones.  Estas son un amplio conjunto de códigos en lenguaje ActionScript que permitirán a objetos, símbolos, etc. una seria de funciones (enviar al navegador -mediante getURL-, controlar la línea de tiempo, controlar los clips de película, y un largo etcétera).


»Pantalla de acciones (parte inferior de la pantalla)

Empezando con la práctica, para crear un botón lo primero que hemos de hacer es dirigirnos en el menú superior a Insertar » Símbolo y una vez ahí especificamos el nombre que deseamos ponerle y seleccionamos la opción Botón (si esta no se muestra abriremos la biblioteca y haremos sobre click sobre él).  En este momento se nos abrirá una nueva pantalla en el que nos encontramos con la creación del botón.  Si nos fijamos ya no están los fotogramas sino los sectores en los que se dividirá nuestro símbolo.  Primeramente nos encontramos en Reposo.  Aquí dibujaremos, importaremos una imagen o lo que tengamos en mente para dar la forma defecto del botón (es decir, la que se verá en la pantalla antes de pasar el mouse por encima).  Para pasar a Sobre seleccionamos con el botón derecho Reposo y hacemos click en Insertar fotograma clave.  Esta opción determinará la forma que tendrá el botón al pasar el ratón por encima.  Volvemos a hacer lo mismo pero con sobre para crear un fotograma en Presionado, que será la forma en la que se verá el botón al ser pulsado sobre él.  Cuando lo hayamos terminado nos dirigimos a la escena principal, abrimos la biblioteca, seleccionamos el botón (aparecerá con el nombre que usted le haya dado) y lo arrastramos al escenario.  Para ver como te ha quedado dirígase a Archivo » Vista previa de publicación » Predeterminado (HTML)/Flash/HTML y seleccionamos la forma de verlo que mejor nos parezca.


ver("resultado");

Seguro que no estas conforme, ¿cierto?.  Yo tampoco lo estaría.  Claro, quieres darle un toque de atractivo a tu botón añadiéndole... quizá... ¿sonido? Pues para eso estoy yo aquí en este momento escribiendo esta línea de texto, para mostrarte como agregarle sonido a tu botón.  Será muy sencillo, lo único que tenemos que hacer es dirigirnos a Sobre, acto seguido iremos a Archivo » Importar » A la biblioteca y buscamos e importamos el sonido.  Ahora vamos a propiedades y en la parte donde pone Sonido: Ninguno mediante el menú desplegable (donde pone ninguno vamos) seleccionamos el sonido que hemos importado.  Si queremos que al pulsar sobre el botón también suene el mismo sonido pues vamos a Presionado y seleccionamos el sonido en vez de ninguno.  Si queremos que suene en presionado otro, pues lo importamos a la biblioteca y lo seleccionamos en el menú desplegable.  Muy importante en los dos casos es el número de veces que suene el sonido.  Esta configurado por defecto para que suene una vez, pero si queremos que suene por ejemplo 5 veces, justo debajo de la opción Sonido y Efectos, se encuentra Sinc. con dos apartados: Evento y Repetir.  Esto no lo tocamos y a la derecha de estos dos hay un cuadro de texto en el que pondrá el número 1, aquí insertamos en número de veces que queremos que se repita el sonido.


ver(
"resultado");

Bueno, y digo yo que para que nos sirve un botón si no lo vinculamos a nuestro sitio web, algún documento de nuestra web, a alguna web a la que quieras vincular, etc.  Será muy sencillo.  No dirigiremos a la escena (salimos del botón).  Una vez allí no seleccionamos nada (y si hay algo seleccionado lo deseleccionamos manualmente).  Ahora abrimos la opción Acciones - Fotograma e insertamos el siguiente código:

boton.onRelease = function(){
getURL
("URL", "destino");
}

Bien, en URL pondremos la dirección a la que queremos que vincule el botón (ej: http://www.ayuda-internet.net) y destino podremos poner:

_Self: Para abrir la web en el mismo marco
_Top: Para abrir la web en toda la página (si hay, por ejemplo, 2 marcos desaparecerán)
_Blank: Para abrir la URL en una nueva ventana
_Parent: Para abrir la URL en el marco principal

Un resultado podría ser:

boton.onRelease = function(){
getURL
("http://www.ayuda-internet.net", "_blank");
}

ver("resultado");

Es muy importante que este código lo inserten en Acciones - Fotograma y NO en Acciones - Botón.  Si lo insertan en Acciones - Botón dará error y el vinculo no funcionará.

En el caso de que haya más de un botón debemos agregar en las acciones de cada uno de los botones el siguiente código:

on (release) {
getURL
("URL","destino");
}


Debe poner la URL y el destino que quiera para el botón seleccionado.

Una vez aprendido estos datos podremos comenzar con el tutorial.  Si algo de esto no le sale contacte conmigo por:

eMail: elmax_ai@hotmail.com
iRC-Hispano.org: Nick: elMax (para hacerme query escriba /query elMax)

En el caso que no estubiera dirígase al canal #Ayuda_Internet y digan su duda (pueden conectar desde la sección JavaChat de esta misma web).