1. GAEM 3° “C”
Unidad 4
Los símbolos de tipo Botón son los que aportan la mayor parte de la interactividad de las
películas Flash con aquel que la está visualizando. Un botón, en Flash, es igual que cualquier
botón de cualquier entorno informático, sea web o cualquier otro.
Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una
serie de acciones. También es habitual ver como este tipo de elementos reaccionan cuando se
les pasa el ratón por encima o cuando se les está pulsando, por ejemplo.
Al igual que los otros símbolos de Flash 8, los botones tienen su propia línea de tiempos. Esta
es independiente pero, sin embargo, está formada únicamente por cuatro fotogramas, uno
para cada estado posible del botón.
Reposo. Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está situado sobre
él.
Sobre. Aspecto del botón cuando situamos el puntero sobre él.
Presionado. Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado.
Zona activa. Aquí debemos indicar el área real en la que queremos que actúe nuestro botón. Esto es
importante sobre todo en botones compuestos sólo por texto como veremos más adelante.
Parece que la limitación de fotogramas podría implicar una limitación en la capacidad de
espectacularidad y utilidad de estos símbolos, pero no es así.
Los botones pueden contener a su vez otros símbolos, como clips o gráficos (también de tipo
Bitmap). La unión de las posibilidades de todos los símbolos dota a los botones de gran
espectacularidad.
Lorena Rodríguez Turrubiates

2. GAEM 3° “C”
4.1 Crear Botones.
Flash, nos permite crear botones personalizados, de manera muy rápida; a la vez nos ayuda
a darle mas vida a nuestras páginas web; en pocas palabras, nos ayuda a hacer más
atractivo nuestro sitio y lógicamente eso es lo que queremos para aumentar el número de
visitas a nuestro website.
Empecemos:
1- Primero crearemos un nuevo símbolo, haciendo la siguiente combinación de teclas:
ALT+F8.
Aparecerá el siguiente cuadro:
2- En Nombre (Name), escribe "botón 1", en Comportamiento (Behavior) selecciona la
opción Botón (Button), finalmente haz click en Aceptar (OK).
Automáticamente, seremos enviado desde la Escena 1 al escenario del símbolo "botón 1";
ahí es donde crearemos un botón que será incluido en nuestra biblioteca.
El escenario únicamente para la creación de botones, será parecido a la siguiente imagen:
Lorena Rodríguez Turrubiates

3. GAEM 3° “C”
Mira hacia la línea del tiempo (Timeline), como puedes notarlo es diferente a la línea del
tiempo de la Escena 1.
La línea del tiempo, del escenario para crear botones es parecida a la siguiente imagen:
Expliquemos el gráfico anterior:
Debemos entender que Reposo, Sobre, Presionado y Zona activa son los cuatro estados de
un botón. Veamos a continuación, qué representa cada estado.
Reposo: es cuando el mouse no está colocado sobre nuestro botón o no se ha hecho click
sobre él.
Sobre: es cuando el mouse está colocado sobre el botón, pero aún no se ha hecho click
sobre él.
Presionado: lógicamente, es cuando haces click sobre el botón.
Zona Activa: su mismo nombre lo indica, es cuando el botón está activo.
Continuemos con la creación de nuestro "botón 1".
La cabeza lectora, en la línea del tiempo tiene que estar señalando el estado de Reposo.
4- Haz click sobre la Herramienta de Rectángulo (Rectangle Tool), que se encuentra en el
Panel de Herramientas.
5- Dibuja un rectángulo en el centro del área de trabajo, y ponle el color azul.
6- Después presiona la tecla F6; ésto hará que la cabeza lectora en la línea del tiempo pase
al estado Sobre.
Lorena Rodríguez Turrubiates

4. GAEM 3° “C”
Como podrás notarlo, el botón se copia, así que no necesitarás hacer un nuevo dibujo.
7- Aún estamos en el estado Sobre, si no tienes seleccionado el botón, hazlo (con la
Herramienta Flecha y haz doble click sobre nuestro dibujo), luego dirígete a Color de
Relleno que se encuentra en la sección colores del Panel de Herramientas, y escoge el
color rojo, como se muestra a continuación:
8- Después presiona nuevamente la tecla F6, para que la cabeza lectora pase al estado
Presionado, y cambia el color de relleno de la misma forma que lo hicimos en el paso 7; y
escoge un color verde. Finalmente presiona por ultima vez F6 para pasar al estado Zona
activa, ésto hará que se copie el botón. Para este último estado, no es realmente necesario
cambiar el color de fondo.
Con los colores que hemos aplicado, haremos que el botón cambie de color, cuando se
lleven a cabo los Estados de los botones anteriormente descritos.
Nuestro botón ha sido creado, así que puedes volver a la Escena 1, abre la biblioteca y
verás que ahí esta el símbolo llamado "botón 1", podrás arrastrarlo al escenario las veces
que quieras para hacer varias copias de él.
Toma la Herramienta de Texto (A), y escribe lo que desees, después coloca el texto sobre el
botón creado; para probar la película haz la tradicional combinación de teclas CTRL +
Enter. Si después quieres ver la película en tu explorador de internet, únicamente presiona
las teclas CTRL + F12.
Lorena Rodríguez Turrubiates

5. GAEM 3° “C”
4.2. Programar propiedades de los botones Y
4.3. Programar acciones de los botones
Además de poder realizar simples animaciones, Flash nos permite agregar botones a
nuestras películas de forma que al pulsar con el ratón sobre ellos se ejecutase una acción
determinada. Esto hace que podamos dotar las películas de cierta interactividad, la cual se
ve aumentado por el hecho de que también podemos establecer una comunicación entre
los distintos clips de película que tenemos en el escenario; por ejemplo podríamos hacer
que al terminar un clip se inicie otro. ActionScript es el lenguaje de programación de scripts
de Flash y es la herramienta que nos permite realizar todo lo anterior.
En este trabajo no pretendemos abarcar todo lo que podríamos hacer con
ActionScript pero realizaremos dos ejemplos que expliquen cómo crear botones y como
programar ciertas acciones para dotar a nuestra animación de un poco de interactividad.
Ejemplo 1:
En este ejemplo veremos como crear un botón, como modificar su aspecto según su
estado y cómo utilizaríamos ActionScript para especificar acciones para el botón que
actúen sobre un cuadro de texto dinámico.
1. En un documento nuevo dibujamos un círculo de color verde con la herramienta
óvalo.
2. Con la herramienta flecha seleccionamos el óvalo haciendo doble clic.
3. Convertimos el óvalo en símbolo pulsando F8 (o Insertar → convertir en símbolo). En el
cuadro de diálogo “convertir en símbolo” le ponemos de nombre “botón”,
seleccionamos la casilla botón y pulsamos aceptar.
4. Hacemos doble clic en el botón para entrar en el modo de edición de símbolos. Si
nos fijamos en la línea del tiempo vemos que ha cambiado, mostrando ahora los
fotogramas correspondientes a los estados del botón.
5. Seleccionamos el ovalo haciendo doble clic con la herramienta flecha. Pulsamos F8
para convertirlo en símbolo pero esta activamos la casilla “Clip de película” en lugar
de Botón.
Lorena Rodríguez Turrubiates

6. GAEM 3° “C”
6. En la línea del tiempo nos situamos sobre el fotograma “sobre” e insertamos un
fotograma clave. Hacemos lo mismo con el fotograma “presionado”.
7. Cambiamos color de relleno del óvalo en cada fotograma con la herramienta bote
de tinta de forma que cada fotograma tenga un color distinto.
8. Nos situamos en el fotograma “sobre”.
9. Pulsamos doble clic en el óvalo con la herramienta flecha para seleccionarlo.
10. Lo convertimos en símbolo (F8) igual que antes pero esta vez seleccionando la casilla
“Clip de película” en lugar de “botón”.
11. Doble clic en el óvalo para editarlo. La línea del tiempo ha vuelto a cambiar.
12. Seleccionamos el fotograma 4 e insertamos un fotograma clave (F6).
13. Pulsamos Ventana → Transformar para que aparezca la ventana de transformación.
En ella escalamos al 120% fijándonos en que la casilla restringir está marcada.
14. Seleccionamos el fotograma 7 e insertamos un fotograma clave
15. Escalamos al 80%.
16. Nos situamos en un fotograma entre el 1 y el 4 y seleccionamos “forma” en el menú
“animar” del inspector de propiedades. Realizamos también la misma operación
situándonos en un fotograma entre el 4 y el 7. Si todo ha ido bien aparecerán, en la
línea del tiempo, flechas continuas entre dichos fotogramas.
17. Pulsamos en “escena1” para volver al escenario principal.
Lorena Rodríguez Turrubiates

7. GAEM 3° “C”
18. Con la herramienta texto creamos un campo de texto junto al botón. En él escribimos
“REPOSO”.
19. Con el cuadro de texto seleccionado especificamos sus propiedades en el inspector
de propiedades. Seleccionamos “texto dinámico”, “línea única” y fuente “_sans”, le
asignamos un color de letra, alineación, etc… En el campo “Var” escribimos “Texto”.
20. Ahora toca programar el script. Seleccionamos el botón y expandimos el panel
“Acciones”. (Si el panel no está visible Ventana → Acciones)
21. Vamos a Acciones → Variables y hacemos doble clic en setVariables.
Lorena Rodríguez Turrubiates

8. GAEM 3° “C”
22. En variable escribimos Texto y en valor escribimos PRESIONADO.
23. Pulsamos en la línea que pone “on (release) { ”; vemos que aparecen distintas casillas
arriba. Activamos sólo “Presionar”.
24. Nos situamos en la última línea y volvemos hacer doble clic en setVariables. Esta vez
en valor escribimos SOBRE. Las casillas que activamos esta vez es “Situar sobe objeto”
y “liberar”.
25. Doble clic en setVariables por última vez. La misma variable, en valor
escribimos REPOSO, y activamos las casillas“liberar Afuera” y “situar fuera de objeto.
26. Hemos terminado. Podemos probar la película con Control → Probar Película
Juega con el resultado final!!!
4.4. Operar botones.
Los Operadores
Una vez entendida una de las principales bases del lenguaje que son las variables, ahora
entraremos a otro de mayor importancia y son los operadores.
Puede que se pregunten por el uso de símbolos matemáticos en el código. Los símbolos se
denominan operadores en ActionScript. Los operadores calculan un valor nuevo a partir de
uno o varios valores y un operador le permite asignar un valor a una variable del código,
por ejemplo el operador de igualdad (=) permite asignar un valor a una variable:
Los operadores son caracteres que especifican cómo combinar, comparar o cambiar los
valores de una expresión. Una expresión es cualquier sentencia para la que Flash puede
calcular el resultado y que devuelve un valor. Puede crear una expresión combinando
operadores y valores, o bien llamando a una función.
Lorena Rodríguez Turrubiates

9. GAEM 3° “C”
El lenguaje ActionScript está formado por clases incorporadas, por lo que se deberá utilizar
la sintaxis correcta para formar sentencias de manera que el código se compile y funcione
correctamente en Flash. En este caso, la sintaxis se refiere a la gramática y la ortografía de
un lenguaje que le permite programar. El compilador no comprende la sintaxis incorrecta,
por lo que observará errores o advertencias en el panel Salida cuando intentes comprobar
el documento en el entorno de prueba o no se ejecutara cuando se haya exportado a SWF
el contenido. Por consiguiente, la sintaxis es un conjunto de reglas y directrices que le
ayudan a formar códigoActionScript correcto.
Lorena Rodríguez Turrubiates