http://www.guiasytutoriales.es/flash/botones.

htm

Flash - Botones
Los botones de flash son objetos gráficos a los que podemos asignar diferentes estados
(normal, sobre, presionado...) y que cuando los pulsemos (o pasemos por encima), se
ejecuten determinadas acciones.

Para crear un botón podemos primero dibujarlo, por ejemplo en el estado de reposo, y
después convertirlo en símbolo; para ello, una vez seleccionado, elegimos el menú:
"Insertar-Convertir en símbolo". Debemos escribirle un nombre, y elegir el
comportamiento de Botón.

Como somos de Salamanca, vamnos a hacer un típico "Botón Charro":

Si abrimos la biblioteca ("Ventana-Biblioteca"), veremos que ya aparece dentro.

Ahora debemos diseñar los diferentes estados del botón, editando el símbolo. Para ello,
haremos doble clic en el icono del botón (en la biblioteca), o bien "botón derecho-
Editar", apuntando al botón que aparece en la escena.

En la línea de tiempos veremos que estamos modificando el botón, no la escena:

Podemos apreciar que en vez de fotogramas normales, como cualquier animación de
flash, disponemos de cuatro fotogramas "especiales":

es donde colocaremos el botón con su aspecto nortmal,

Reposo
es decir, cuando no está siendo apuntado por el ratón.
es el aspecto que tendrá cuando el ratón se pasa por
Sobre
encima, pero sin pulsar.
se trata del botón mientras estamos pulsando el ratón
Presionado
en él.
aquí definimos la zona donde el botón responderá al
ratón. Podemos crear un circular, pero que se active en
una zona rectangular, por ejemplo. Es muy importante
Zona
en los textos, puesto que si no se crear una zona activa,
activa
sólo se detecta el ratón cuando está encima del trazo del
texto en sí, no en el espacio entre letras, ni en el medio
de una letra "O", por ejemplo.

Para crear diferentes efectos en cada estado, podemos hacerlo de una forma fácil pero
efectiva, partiendo del mismo dibujo, y cambiando sólo el tono de color, por ejemplo.

También podríamos trabajar con diferentes capas para crear otros objetos dentro de
cada estado, por ejemplo, en "sobre" podemos crear el típico "letrero" de fondo
amarillo, donde aparece una frase explicando el resultado de pulsar el botón, o una
pequeña animación del mismo botón, por ejemplo, cambiando su tamaño, rotándolo,
etc...

Primero debemos insertar un fotograma clave en la posición "Sobre".

Para hacer que aparezca más tenue al pasar el ratón por encima, en el panel de
efectos, eligiendo los parámetros que aparecen en esta imagen:

Insertando otro fotograma clave en la posición "Presionado", podemos hacer otro

cambio con estos parámetros, para darle otro efecto:

Si lo deseamos, podemos asignar una zona activa, creando en dicha posición un

fotograma clave, pero en este caso, no es necesario...

Veamos a continuación los diferentes estados del botón, después de los cambios
realizados:

Para usar el botón, basta con insertarlo desde la biblioteca a la escena.

Ahora podemos ver cómo asignar interactividad al botón

 Flash - Animación
Por animación entendermos que los objetos que aparecen en la pantalla cambien de
posición, tamaño, aspecto, color, que giren, se deformen, etc...

Tipos de Animación

En Flash existen tres tipos de animación:

 fotograma a fotograma
 interpolación de movimiento
 interpolación de forma

En la animación fotograma a fotograma, debemos dibujar cada uno de los

fotogramas de la animación uno por uno, al estilo de las clásicas películas de dibujos
animados. Permite una gran flexibilidad, pero a costa de un elevado esfuerzo. Además,
el archivo debe almacenar los cambios de cada fotograma.

La animación por interpolación consiste en crear dos objetos diferentes, cada uno
de ellos en fotogramas claves no contiguos, y hacer que Flash dibuje automáticamente
los pasos intermedios. En este caso, el archivo sólo almacena los estados inicial y final.

La animación por interpolación de movimiento es que la debemos elegir cuando

los objetos de los dos fotogramas claves sólo se diferencian en su posición, escala o
rotación

La animación por interpolación de forma ese diferencia en que gradúa el cambio

de la forma del objeto, realizada a través de la manipulación de sus puntos de control
bezier. También permite cambiar el color.

Consideraciones

Se llaman Fotogramas Clave a los que contienen cambios en la forma o posición del
objeto

Para que un objeto se muestre en pantalla en un fotograma determinado, debe

crearse un fotograma (no clave). Se mostrará así: . El
rectángulo blanco significa que no ha habido cambios de forma ni posición.

Podemos mover los fotogramas clave o los del rectángulo para cambiar los puntos
de inicio o fin de la animación.

Podemos variar la velocidad de toda la animación en "Modificar-película-Veloc

Fotogramas": nº de fotogramas/seg.

Podemos copiar un fotograma clave y pegarlo en otra posición para volver a esa
situación después de haberla cambiado.
Cómo Crear Animaciones

Para crear una interpolación de movimiento, el mejor método es seguir

exactamente los siguientes pasos:

1. Crear el objeto en el fotograma clave inicial

2. Crear interpolación de movimiento (con el botón derecho)
3. Insertar un fotograma clave al final
4. Mover el objeto en el fotograma clave final (y/o escalarlo, y/o rotarlo)

Si todo ha salido bien, se verá así:

En cambio, si falta el fotograma clave final, será

así:

Y si lo que falta es crear la interpolación,

veremos:

Para crear una interpolación de forma, el mejor método es seguir exactamente los
siguientes pasos:

1. Crear el objeto en el fotograma clave inicial

2. Crear interpolación de forma (en la paleta "Fotograma", elegir interpolación:
"Forma")
3. Insertar un fotograma clave al final
4. Modificar el objeto en el fotograma clave final

Si todo ha salido bien, se verá así:

Para crear un fundido de color, seguiremos los mismos pasos que en la

interpolación de forma, pero en este caso debemos asignar diferentes colores a los
fotogramas inicial y final. OJO: antes, hay que "separar" el texto.

Posibles problemas en las animaciones por interpolación:

 Antes de animar mediante el panel "Fotograma" un objeto con borde (por

ejemplo, un rectángulo o una elipse), o uno que esté formado por varios
objetos, debemos agruparlos ("Modificar-Agrupar"). Si elegimos "crear una
interpolación de movimiento usando el botón derecho, Flash agrupa
automáticamente los objetos seleccionados.
 No podemos animar independientemente cada letra de una palabra a no
ser que las distribuyamos en diferentes capas (cada letra en una capa)
 No podemos cambiar el color de un texto gradualmente si no está convertido
a gráfico. ("Modificar-Separar")
  Si dos objetos van a animarse de formas diferentes, es mejor colocar cada
uno en una capa diferente.
 Si queremos hacer una interpolación de forma y movimiento a la vez,
debemos elegir la de forma.
 Si sólo deseamos cambiar la posición, rotación o escala (tamaño), no
debemos hacer una interpolación de forma. En su lugar, elegiremos una
interpolación de movimiento.

Cómo crear una línea a través de la cual se moverá el objeto:

1. Crear el objeto en el fotograma clave inicial

2. Agregar una Guía de Movimiento (con el botón derecho encima del nombre de
la capa)
3. Crear interpolación de movimiento (con el botón derecho apuntando al
fotograma inicial)
4. Insertar un fotograma clave al final
5. Mover el objeto en el fotograma clave final (y/o escalarlo, y/o rotarlo)
6. En la capa guía, crear un trazado (con el pincel, la pluma, el lápiz, el óvalo e el
rectángulo)
7. Insertar un fotograma clave en la capa guía, al final
8. Arrastrar el objeto en cada fotograma clave hasta que ajuste con el comienzo o
fin del movimiento trazado.
9. Si deseamos que la forma gire a la vez que el trazado, debemos elegir "Orientar
según trazado" en la paleta fotograma, en el fotograma inicial.
10. Podemos ocultar el trazado de guía ocultando la capa que lo contiene (botón del
ojo)

Cómo cambiar el color de un texto gradualmente:

Veamos cómo hacer el famoso efecto de "fade in" o "fade out" (desvanecimiento) de
un texto, que cambiará de color poco a poco, del color de fondo a otro, o de otro al
color del fondo (o entre dos colores cualesquiera)

1. Crear el objeto en el fotograma clave inicial, con el color inicial

2. Separar el texto ("Modificar-Separar")
3. Crear interpolación de forma (en la paleta "Fotograma", elegir interpolación:
"Forma")
4. Insertar un fotograma clave al final
5. Cambiar el color del objeto en el fotograma final
¿Cómo hacer un giro de 360º o más?

Si intentamos hacer una interpolación de movimiento para un objeto que deseamos

girar 360º, o incluso varias vueltas, veremos que no funciona mediante el método
normal, puesto que Flash realizará el cambio por el camino más corto. Si lo hemos
girado 380º, Flash sólo girará 20 (380-360). Si la rotación es múltiplo de 360º, el
objeto vuelve a quedar en la misma posición en la que estaba, por lo que no se girará
nada en absoluto.

El método adecuado para rotar una vuelta o más es:

1. Crear el objeto en el fotograma clave inicial

2. Crear interpolación de movimiento (con el botón derecho apuntando al
fotograma inicial)
3. En la paleta "Fotograma", elegir Rotar: "CMR" para que gire en el sentido de las
agujas del reloj, o CCRM, en el contrario.
4. En la paleta "Fotograma", elegir el número de vueltas completas
5. Insertar un fotograma clave al final
 Flash - Películas Interactivas

¿Qué son y para qué sirven?

Son aquella que permiten que el usuario decida el flujo de los acontecimientos,
en respuesta al uso de botones en la pantalla, o cuando la película llega a determinado
fotograma. Por ejemplo: cuando el usuario hace clic (u otro evento) sobre un botón, se
abre una página web en otra ventana, o se detiene la película, o se mueve a un
número de fotograma determinado. También se pueden mover objetos, teclear datos
en formularios y enviarlos, etc...

Fash dispone incluso de un completo lenguaje de programación propio

llamado ActionScript, aunque las acciones más habituales y útiles se pueden usar
perfectamente sin conocer dicho lenguaje ni tener conocimientos de programación.

Flash permite controlar varios eventos, y asignarles diferentes acciones, pero

también podemos indicar que la reproducción debe detenerse al llegar a un fotograma
determinado, para que el usuario decida dónde seguir mediante un botón. Es
decir, podemos acciones a botones o a fotogramas.

EVENTOS
de Ratón
Presionar: (clic) presionar el botón del ratón mientras el puntero
se encuentra sobre el botón.
Liberar (predeterminado): liberar el botón del ratón mientras el
puntero se encuentra sobre el botón. Esto configura el
comportamiento estándar de hacer clic.
Liberar fuera: liberar el botón del ratón cuando el puntero no se
encuentra sobre el botón.
Situar sobre objeto: (mouse over) desplazar el puntero sobre el
botón.
Situar fuera de objeto: (mouse out) desencadena la acción al
desplazar el puntero fuera del botón.
Arrastrar sobre: desencadena la acción al presionar el botón del
ratón mientras el puntero se encuentra sobre el botón, se
desplaza fuera del botón y, a continuación, vuelve a desplazarse
sobre el botón.
Arrastrar fuera: desencadena la acción cuando el botón del
ratón se presiona con el puntero sobre el botón y, a continuación,
el puntero se desplaza fuera del botón.
de Teclado
Presión de tecla: al presionar la tecla especificada. Si selecciona
esta opción, debe introducir la tecla en el cuadro de texto.
 ACCIONES Básicas (hay muchas más)
Go To (Ir A): Saltar a un fotograma o a una escena
Play (Reproducir) y Stop (Detener): Reproducir y detener
películas.
Toggle High Quality: (Conmutar alta calidad): ajusta la calidad a
alta.
Detener todos los sonidos: todos los sonidos se silencian.
GetURL (Obtener URL): Saltar a un URL diferente
FSCommand: Controlar Flash Player que está reproduciendo una
película
LoadMovie (Cargar película) y UnloadMovie (Descargar
película)
Tell Target: (Indicar destino) Controlar otras películas o clips de
películas.
If Frame Is Loaded:Comprobar si se ha cargado un fotograma o
no. Para el típico "cargando..."
On Mouse Event: Asignar un evento de ratón o una tecla de
teclado que desencadene la acción.
Aspecto de la paleta de acciones:

Las acciones se pueden asignar mediante el panel Acciones, que se muestra

eligiendo el menú: "Ventana-Acciones".

Todas las acciones están en inglés, incluso en la versión en castellano del

programa. Están organizadas en categorías.

Algunas acciones requieren el uso de diversos parámetros; por ejemplo, para la

acción GoTo (ir a) debemos indicar el número de fotograma al que ir, y podemos elegir
si además, queremos reproducir desde dicho sitio.
NOTA: Algunas acciones no se pueden probar en la ventana de edición de Flash, pero
sí cuando usamos el menú "Control - Probar Película" (o pulsando Control-Intro). Las
acciones de fotograma pueden funcionar si está activada la opción "Habilitar acciones
de fotogramas simples" del menú "Control".

Cómo asignar una acción a un botón:

1. Seleccionar el botón
2. Abrir el panel de Acciones ("Ventana-Acciones")
3. Pulsar el símbolo + del panel de acciones (o doble clic sobre la acción).
4. Elegir el tipo de evento que causará la acción (aparecen debajo)

Cómo asignar una acción a un Fotograma:

1. Seleccionar el fotograma (debe ser un fotograma clave)

2. Abrir el panel de Acciones ("Ventana-Acciones", o doble clic sobre el fotograma)
3. Pulsar el símbolo + del panel de acciones (o doble clic sobre la acción).

Es conveniente colocar todas las acciones en una misma capa, para mayor comodidad,
y debe estar

Podemos borrar acciones seleccionándolas y haciendo clic en el botón - ó en la tecla

"Supr".
Ejemplos de acciones útiles:
¿Qué queremos? ¿Cómo se hace?
Repetir una serie de En el fotograma final, insertamos la
fotogramas (bucle) acción GoTo (Ir A) e indicamos el número del
fotograma inicial. (OJO: debemos poner botones
en todo el fragmento, para que el usuario pueda
salir del bucle.
Mostrar una animación En el fotograma anterior a la animación,
cuando el usuario lo insertamos la acción Stop (Detener), y colocamos
desee. en el mismo fotograma, un botón al que
asignamos la acción Play (reproducir)
Detener la animación En todo el fragmento donde se pueda detener,
cuando el usuario lo colocamos un botón al que asignamos la
desee acción Stop (Detener). Debemos mostrar también
un botón Play (reproducir), si queremos que se
pueda continuar.
Mostrar una página web En el fotograma/s deseado/s, insertamos la
al pulsar un botón. acciónGetURL (Conseguir URL) e indicamos la
dirección de la página web deseada (local -
datos.htm- o remota www.cursos2001.com), y la
ventana o marco donde queremos abrirla.
Mostrar una animación Asignar al botón la acción "On Mouse Event,", e
cuando el usuario pase el indicar "Situar Sobre Objeto". A continuación,
ratón sobre un botón insertar la acción "GoTo" y teclear el número de
fotograma donde comienza dicha animación.

Importante: Si permitimos parar la animación mediante un botón, debemos añadir

otro botón para continuarla. Hay que prever todas las situaciones para no dejar al
usuario sin posibilidad de elegir (excepto si deseamos que la animación se desarrolle
sin intervención del usuario)