Este documento explica cómo crear y programar botones en Flash. Describe los pasos para crear un botón básico cambiando su color en los diferentes estados. También explica cómo programar acciones a los botones como abrir páginas web, controlar una película en curso mediante funciones como stop(), e incluir sonido al pulsar un botón. Finalmente, indica que operar los botones solo requiere hacer clic sobre ellos para ejecutar la acción programada.

1. JOSSELINE CAMARGO DEL ANGEL
4. MANIPULAR BOTONES
4.1 CREAR BOTONES
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:

2. JOSSELINE CAMARGO DEL ANGEL
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

3. JOSSELINE CAMARGO DEL ANGEL
estado Sobre.
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.

4. JOSSELINE CAMARGO DEL ANGEL
4.2.Programar propiedades de los botones.
Pueden programarse diversas funciones en los botones, las cuales
aparecen al hacer clic derecho sobre ellos, algunas propiedades de los
botones son: Agregar efectos en la línea del tiempo, insertar acciones: los
botones cumplen una acción determinada, por ejemplo, que al hacer clic
sobre el botón se proceda a ver la animación automáticamente.
¿Qué es el ActionScript?
El ActionScript es el lenguaje de programación que ha utilizado
Macromedia Flash desde sus comienzos, y que por supuesto, emplea Flash MX
2004. A grandes rasgos, podemos decir que el ActionScript nos permitirá
realizar con Flash MX 2004 todo lo que nos propongamos, ya que nos da el
control absoluto de todo lo que rodea a una película Flash. Absolutamente de
todo.
Sin embargo, en estos dos temas sólo vamos a ver una pequeña
introducción a ActionScript que servirá para sentar las bases que permitirán
empezar a trabajar con ActionScript. Enseñar a programar con ActionScript
requeriría otro curso completo.Profundizar en el conocimiento de este lenguaje
queda por cuenta del lector. Recomendamos seguir la estupenda Ayuda
incluida en Flash MX 2004.

5. JOSSELINE CAMARGO DEL ANGEL
Todo lo referente a este capítulo hace referencia a la versión 2 de
ActionScript, última versión de este lenguaje de programación lanzada por
Macromedia e incorporada en Flash MX 2004.
Características generales del ActionScript
Como ya hemos comentado, el ActionScript es el lenguaje de
programación propio de Flash, tal y como el Lingo lo es de Macromedia
Director, por ejemplo. El ActionScript está basado en la especificación ECMA-
262, al igual que otros lenguajes como Javascript.
El ActionScript es, como su nombre indica, un lenguaje de script,
esto quiere decir que no hará falta crear un programa completo para conseguir
resultados, normalmente la aplicación de fragmentos de código ActionScript a
los objetos existentes en nuestras películas nos permiten alcanzar nuestros
objetivos.
El ActionScript es un lenguaje de programación orientado a
objetos, tiene similitudes, por tanto, con lenguajes tales como los usados en el
Microsoft Visual Basic, en el Borland Delphi etc... y aunque, evidentemente, no
tiene la potencia de un lenguaje puramente orientado a objetos derivado del C o
del Pascal como los anteriores, cada versión se acerca más a un lenguaje de
este tipo. Así, la versión 2.0 recientemente estrenada en el Flash MX 2004 es
mucho más potente y mucho más "orientado a objetos" que su anterior versión
1.0
El ActionScript presenta muchísimos parecidos con el Javascript;
si conoce Javascript, la sintaxis y el estilo de ActionScript le resultarán muy
familiares. Las diferencias entre ambos lenguajes las puede encontrar en la
ayuda que acompaña al Flash MX 2004.
En la mayor parte de las ocasiones, no será necesario
"programar" realmente, Flash MX pone a nuestra disposición una impresionante
colección de "funciones" (de momento entenderemos "funciones" como
"código ActionScript que realiza una función determinada") ya implementadas
que realizan lo que buscamos, bastará con colocarlas en el lugar adecuado.
Vamos a ver muchas de estas funciones en este curso, pero antes
recomendamos tener claros ciertos conceptos relacionados con la
programación. Para ello, échadle un vistazo a nuestro tema básico.
El Panel Acciones
En Flash MX 2004, el Panel Acciones sirve para programar scripts con
ActionScript. Esto es, que todo lo que introzcamos en dicho Panel se verá
reflejado después en nuestra película. Debemos tener claro desde un principio
que el Panel Acciones puede hacer referencia a Fotogramas u objetos, de
modo que el código ActionScript introducido afectará tan sólo a aquello a lo que
referencia el Panel. Por ejemplo, en la imagen inferior, se puede distinguir que
el Panel Acciones hace referencia al Fotograma 1 de la Capa 1.
El Panel Acciones se divide en 2 partes, a la izquierda tenemos una ayuda
facilitada por Flash que nos da acceso de un modo rápido y muy cómodo a
todas las acciones, objetos, propiedades etc... que Flash tiene predefinidos.
Estos elementos están divididos en carpetas, que contienen a su vez más

6. JOSSELINE CAMARGO DEL ANGEL
carpetas clasificando de un modo eficaz todo lo que Flash pone a nuestra
disposición. Para insertarlos en nuestro script bastará con un doble clic sobre el
elemento elegido.
Posteriormente veremos con detalle los distintos elementos de este Panel.
A la parte derecha tenemos el espacio para colocar nuestro script, aquí
aparecerá lo que vayamos insertando. También incluye herramientas de
utilidad, como la búsqueda de palabras, la posibilidad de insertar puntos de
corte, la herramienta Revisar Sintaxis y la ayuda de Flash para ActionScript.
El Panel Acciones de Flash MX 2004, al contrario que el de Flash MX, tiene
únicamente un modo de edición, que tiene mucho más en común con el Modo
Experto de Flash MX que con el Modo Normal.
Dado que Flash MX 2004 ha eliminado el Modo Normal de edición de scripts,
los usuarios más novatos no contarán con la ayuda que proporcionaba este
modo de trabajo, y tendrán que usar desde un princio el único panel existente.
El Panel acciones es, por tanto, idóneo cuando ya tenemos experiencia
programando con ActionScript, típicamente cuando ya no comentamos errores
de Sintaxis y conozcamos bien las Acciones y Opciones que nos suministra
Flash.
La libertad de este modo es total y por tanto, también lo es la posibilidad de
comenter fallos, para asegurarnos de que nuestro script es correcto, al entrar
en Modo Experto nos aparecerá un icono con el siguiente aspecto: Al
pulsarlo Flash revisa nuestro código en busca de posibles errores,
indicándonos, en su caso, la línea que presente el error y en qué consiste éste.
Es un fallo común pasarse horas buscando porqué nuestra película no
funciona correctamente y que el motivo sea que un error de sintaxis ha
invalidado todo el código existente en un fotograma, que actua como si no
hubiera NADA DE CÓDIGO en él. Pongamos pues, mucha atención en esto y
revisemos el código concienzudamente.

7. JOSSELINE CAMARGO DEL ANGEL
4.3.Programar acciones de los botones.
Acciones en los botones
Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones, como
a otros elementos de Flash 8 vamos a comentar dos de las más comunes:
1) Abrir una página web. Con esto conseguiremos abrir una página cualquiera de internet
(o una película Flash), lo que nos servirá para irnos desplazando por webs que contengan más
de una página, o permitir al usuario descargarse archivos entre otras cosas.
Para añadir una acción a un botón es necesario el uso de ActionScript (en el tema 17 se
tratará con mayor profundidad).
Por lo tanto, los pasos a seguir serán los siguientes:
1. Selecciona el botón haciendo clic sobre él, pues es a él al que irá asociada la
acción.
2. Abre el panel Acciones haciendo clic en su pestaña o desde el menú Ventana →
Acciones.
3. Haz clic en el botón Asistente de script.
4. En el marco de la izquierda haz clic sobre Funciones globales →
Navegador/Red → getURL.
5. Al seleccionar el comando getURL (que se encarga de crear un link a una página
web) se mostrarán sus respectivas opciones en la derecha del panel. Rellena los
campos URL con la página a la cual quieres vincular el botón y selecciona en que
ventana quieres que se abra el link en el desplegable Ventana (_blank abrirá el link en
una página nueva).
6. Cierra el panel de Acciones y el botón estará listo. Has añadido una acción a tu
botón.
2) Controlar una película en curso. Si estamos reproduciendo una película Flash y
queremos permitir que el usuario la detenga, la ponga en marcha, avance, retroceda ...
Por ejemplo, para detener una película en curso simplemente debemos hacer que nuestro
botón en cuestión aparezca en el escenario de dicha película, seleccionarlo, y abrir el panel de
acciones, activando posteriormente la función Stop().

8. JOSSELINE CAMARGO DEL ANGEL
Tras hacer esto, deberíamos cambiar como hicimos en la animación anterior el momento
en el que se debe ejecutar la función, seleccionando el evento Presionar.
Arriba mostramos cómo debería quedar el panel de acciones del botón.
Ahora cada vez que presionemos este botón se detendrá la película en la que está incluido.
De forma muy parecida actuaríamos para otras acciones de control.
Incluir sonido en un botón
Si nuestras páginas van a tener sonido, el sonido en los botones es una parte
fundamental. Podemos hacer, por ejemplo que se activen sonidos al pulsar un botón.
Para ello, simplemente debemos editar nuestro botón y seleccionar el fotograma
Presionado. Ahora debemos insertar el sonido. Por ejemplo podríamos importar uno desde
nuestro disco duro o bien tomar alguno que ya tengamos en la biblioteca.
4.4. Operar botones.
Operar botones es muy sencillo, basta con hacer clic sobre ellos y se
realizará la acción previamente establecida.