Cómo crear un botón en Flash con una animación

Una vez abierto el nuevo documento, pinchamos en Menú/Archivo/Importar/Importar a escenario y buscaremos en nuestro equipo la imagen que vayamos a utilizar para convertirla en botón.

Seguidamente, vamos a convertir nuestra imagen en botón, para ello, pinchamos en Menú/Modificar/Convertir en símbolo y en la nueva ventana tras escribir el nombre que queramos que tome nuestro botón, seleccionamos el tipo botón y aceptamos clickando en ok.

El siguiente paso será hacer doble clic en nuestra imagen (ya convertida en botón) y nos aparecerá en la pantalla un cuadro como este en el que podremos personalizar nuestro botón. Nosotros queremos que en Reposo el botón esté en negro, por ello, no haremos ninguna modificación del estado reposo.

Si quisiéramos que al pasar el ratón por nuestro botón no cambie de forma, pulsaríamos la tecla F6 y el botón se copiaría de Reposo a Sobre trasladando las mismas características, es decir, seguirá estando negro.

Pero como queremos que cambie a color naranja, pinchamos en Menú/Archivo/Importar/Importar a escenario y elegimos misma la imagen pero con otro color de fondo.

En este paso podríamos haber creado el cambio de color del botón en el mismo programa Flash y hubiéramos conseguido un resultado similar.

Para insertar la nueva imagen del botón, nos situamos sobre el cuadro de reposo y presionamos la tecla F7, (para añadir un fotograma vacio y poder importar el nuevo diseño).

Para finalizar con el botón, pulsamos F6 para trasladar las mismas características a la Zona Activa, (ya que la zona activa será del mismo tamaño que el botón).

También podemos clickar la herramienta del cuadrado y dibujar un rectángulo que incluya nuestro botón, indicando la zona en la que podremos pinchar para que funcione nuestro botón.

El color que elijamos no es relevante ya que no se verán, sino que sólo sirve para indicar la zona de funcionamiento.

El siguiente paso será incluir la animación que queramos incluir en nuestro botón. Nosotros hemos elegido nuestro logo que se hará más grande cuando pasemos por encima de nuestro botón.

Lo primero será crear una nueva capa, que crearemos pinchando en el botón marcado, la cual podremos cambiar el nombre donde aparece Capa 2 o dejarla así.

Tendremos que llevar a cabo los mismos pasos que con el botón de la capa 1. Al querer que aparezca el logo al pasar el ratón por encima pulsamos directamente F7 (al pulsar F7 lo que hace es incluir un fotograma vacío para posteriormente incluir la animación), porque en Reposo no queremos que aparezca nuestra animación.

Situándonos en el cuadro Sobre, importamos la imagen que queramos usar para la animación de la misma forma que hicimos con la imagen que hace de botón en Menú/Archivo/Importar/Importar a escenario.

Para poder animar la imagen que acabamos de importar, la convertimos en clip de película, para ello pinchamos en Menú/Modificar/Convertir en símbolo y en la ventana que nos aparecerá elegimos el tipo de clip de película y aceptamos.

Una vez convertido en clip de película, hacemos doble click sobre la imagen y se nos abrirá la línea del tiempo de la película con la imagen ubicada en el fotograma uno.

Para marcar la duración de nuestra animación nos situamos sobre el frame 5 y pulsamos la tecla F6 para copiar el fotograma del frame 1.

Para conseguir que la imagen tenga el efecto de hacerse grande vamos a modificar el tamaño en el fotograma 1. Para ello, nos posicionamos en el fotograma 1,seleccionamos la herramienta marcada y modificamos su tamaño.

Por último, para darle fluidez, nos posicionamos en cualquiera de los fotogramas y pinchamos en Menú/Insertar/Línea del tiempo/Crear interpolación de movimiento.

Volvemos a nuestra escena pinchando en la ventana correspondiente. En caso de no tenerla abierta pulsamos MAYUS+F2 y hacemos doble click en escena para volver a la línea del tiempo del botón y el clip de película. También podemos seleccionar nuestra escena desde la ventana bibioteca (en caso de que no la tengamos abierta, podemos abrirla pulsando CTL+L).

Como queremos que el efecto se mantenga, estando sobre la Zona Activa pulsamos F5.

Si queremos que nuestra animación se haga grande y pare, y que no continúe en bucle tendremos que indicarlo en la ventana acciones. En caso de no tenerla abierta podremos buscarla en el menú de ventana o simplemente pinchar F9.

Haremos doble click en la imagen que nos sirve de animación y se abrirá una línea del tiempo como la de la imagen. Nos colocamos en el último fotograma y en acciones seleccionamos Acciones/Funciones globales/Control de la línea del tiempo/stop comprobando que aparece el comando de stop en la parte de la derecha como en la imagen.

Además como queremos que nuestro botón nos lleve a una página web tendremos que copiar el mismo comando que aparece en la imagen cambiando lo que aparece de color verde entre paréntesis por la página a la que queremos que nos lleve.

Tras todos los pasos sólo quedará guardar el documento como archivo de flash. Pinchamos en Menú/Archivo/Exportar/Exportar película, comprobamos que en la ventana que se nos abre esté seleccionado el tipo .swf de Película Flash

El resultado final es el que aparece aquí debajo: