Unidad 4

JOSSELINE CAMARGO DEL ANGEL

4. MANIPULAR BOTONES4.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:


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.

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.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.


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 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.


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().


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.

Unidad 4

Documents

Transcript of Unidad 4