1

Escuela de Arte y Superior de Diseño Fernando EstévezDepartamento de Medios Informáticos

IntroducciónEl ActionScript es el lenguaje de programación de Ado-be Flash (originariamente de Macromedia) que nos permite, a grandes rasgos, incorporar interactividad a una animación flash.En la historia de la plataforma Flash se han desarrolla-do tres versiones de ActionScript, la 1.0, 2.0 y 3.0, cada una más potente y compleja que la anterior. En estos apuntes nos centraremos en la 2.0 que nos ofrecerá con creces los recursos necesarios para crear cualquier tipo de interfaz gráfica basada en Flash.

Crear un archivo Flash con ActionScript 2.01. Al abrirse la aplicación Adobe Flash lo primero que nos encontramos es la ventana de Inicio, en la sección Crear nuevo hacemos click en ActionScript 2.0 y listo, el archivo creado estará configurado para esta versión del lenguaje.

Cambiar de versión de ActionScriptSi al abrir un archivo Flash nos hemos olvidado de se-leccionar versión de ActionScript con la queremos tra-bajar y necesitamos cambiarla, podemos remediarlo.1. Deseleccionamos cualquier objeto o fotograma de flash, sólo tenemos que hacer click en cualquier espa-cio vacío del escenario (o teclear Esc en PC).

Adobe Flash CS4ActionScript 2.0 para novatos.

2. Nos dirigimos al Panel de Propiedades (imagen an-terior), a la sección PUBLICAR. Aquí podemos ver qué versión de ActionScript tenemos, si queremos cam-biarla por otra hacemos click en Editar..., se abrirá la ventana Configuración de publicación.

En la pestaña Flash, desplegamos la persiana Script: y seleccionamos la versión que vayamos a utilizar.

La ventana de ActionScriptPara acceder a la ventana de ActionScript o Acciones hacemos click en la persiana Ventana > Acciones (F9).

Podemos cerrar el asistente de programación hacien-do click en el botón que se remarca en la imagen an-terior.

Dónde y cómo escribimos el código deActionScriptEl código lo escribimos, como ya se imaginarán, en la Ventana de Acciones, pero antes de teclearlo tenemos que saber dónde colocarlo, y disponemos de tres “ha-

2

bitáculos”, en un Fotograma, en un Clip de Película o en un Botón.1. Para asegurarnos de que lo colocamos en el lugar correcto primero tenemos que seleccionar el objeto (fotograma, clip o botón). 2. Comprobarlo en la ventana de acciones, esta nos lo chivateará si observamos bien la etiqueta de la venta-na.

Si seleccionamos un objeto en el que no se puede co-locar ninguna acción nos lo mostrará en la Ventana de Acciones de esta forma.

3. Una vez que estemos bien seguros empezamos a te-clear código. Esta comprobación en básica ya que el ActionScript para fotogramas, clips o botones tienen “estructuras” diferentes y los de unos no funcionan en los otros.

Acciones para controlar la Línea de TiempoDe ahora en adelante llamaremos Acciones al código de ActionScript.Las acciones para básicas para controlar la línea de tiempo son las siguientes (las acciones se tiene que es-cribir tal cual las pongo aquí, respetando mayúsculas y minúsculas, y siempre separadas unas de las otras con punto y coma; si estas palabras claves del código están bien escritas se remarcarán en azul o granate, el resto de los caracteres permanecerán en negro):

- Para el avance del lector de la línea de tiempo.stop();

- Pone en marcha el lector de la línea de tiempo.play();

- Hace un salto a un fotograma determinado y para el lector de la línea de tiempo en ese fotograma.gotoAndStop();Entre los paréntesis tecleamos el número del fotogra-ma al que queremos que salte, puede ser hacia delan-te o hacia atrás:Por ejemplo, gotoAndStop(34);

- Hace un salto a un fotograma determinado y el lec-tor sigue avanzando en la línea de tiempo desde ese fotograma.gotoAndPlay();Entre los paréntesis tecleamos el número del fotogra-ma al que queremos que salte, puede ser hacia delan-te o hacia atrás:Por ejemplo, gotoAndPlay(18);

- Retrocede un fotogramaprevFrame();

- Avanza sólo un fotogramanextFrame();

Acciones para cambiar parámetros en losClip de PelículaHasta ahora habíamos animado las propiedades de los clip de película (y otros objetos) mediante la He-rramienta de Transformación Libre, de Selección y de propiedades de Color en combinación con las inter-polaciones. Con ActionScript podemos hacer lo mis-mo sin animaciones interpoladas, las acciones de las propiedades de clip de películas (y botones) son las siguientes:

- Hace visible un clip o botón si el valor es true y invisi-ble si es false. _visible = true o false;

- Controla la transparencia, si el valor es 0 es invisible, si es 100 totalmente opaco (y si es, por ejemplo 50, pues tendrá una transparencia del 50%)._alpha = (valores entre 0 y 100);

- Posición con respecto al eje y (el vertical), hay que tener en cuenta las dimensiones del escenario. _y = (numérico);

- Posición con respecto al eje x (el horizontal), hay que tener en cuenta las dimensiones del escenario. _x = (numérico);

3

- Ancho del objeto en porcentaje, con al valor 100 el objeto permanece igual, con 200 será el doble y con 50 la mitad. _yscale = (numérico);

- Altura del objeto en porcentaje, con al valor 100 el objeto permanece igual, con 200 será el doble y con 50 la mitad. _xscale = (numérico);

- Altura del objeto en píxeles. _width = (numérico);

- Altura del objeto en píxeles. _height = (numérico);

- Grados de rotación del clip. _rotation = (numérico);

Cómo variar los parámetros de un Clip de Película con Acciones En el apartado anterior he enumerado las propie-dades del clip que puedo variar mediante acciones, sólo falta saber cómo.Desde un Fotograma:1. Darle al Clip de Película un Nombre de Instan-cia, cada clip (o botón) necesita una denominación propia para que Adobe Flash sepa a quien dirigir las acciones por lo que tenemos que diferenciarlos con nombres “propios” o de instancia.Seleccionamos el clip de película.2. No dirigimos al Panel de Propiedades.

Y en la casilla donde vemos escrito <Nombre de ins-tancia>, tecleamos el nosotros elijamos para ese clip.

IMPORTANTE: El Nombre de Instancia debe respe-tar ciertas reglas de escritura:

- No puede tener espacios, los debemos sustituir por barras bajas, cuadrado_rojo.- No puede tener caracteres especiales, ni eñes, ni til-des, ni nada parecido (sólo números y letras). - Un nombre de instancia no puede empezar por un número, esto no es correcto, 1_cuadrado; la forma co-rrecta es así, cuadrado_01.- Recomiendo escribir todo en minúsculas, ya que para el ActionScript una b minúscula es diferente a una B mayúscula.Si respetáis estas reglas se evitarán muchos proble-mas.3. El clip ya tiene nombre propio, ahora tenemos que colocar el código en un fotograma, para lo cual tene-mos que crear un Fotograma Clave Vacío y seleccio-narlo (debemos tener una capa sólo para las acciones).4. Comprobamos que en la pestaña de Ventana de ac-ciones nos especifica que estamos seleccionando un fotograma.

Y empezamos a escribir el código, pero debemos saber cuál es la sintaxis correcta de este lenguaje de progra-mación para que funcione correctamente. En este caso particular es la siguiente:

nombre_de_instacia.propiedad = valor;

Primero el nombre de instancia del clip, seguido de un punto y luego la propiedad que necesitamos del apar-tado anterior, por ejemplo:cuadrado_rojo._rotation = 90;

Qué significa, que al clip que hemos llamado cuadra-do_rojo le damos una rotación de 90 grados. Además de la rotación podemos añadirle mas de una acción, dos, tres o diez.

O también podemos colocar acciones para diferentes clip de películas siempre y cuando sus nombres de ins-tancia sean diferentes (ver imagen siguiente).

4

Controlar la Línea de Tiempo o las propieda-des de un Clip de Película desde un BotónPara poder hacer lo que nos muestra el enunciado de este apartado sólo tenemos que colocar las acciones de los apartados anteriores en un botón pero añadién-dole la sintaxis propia de estos, que es la siguiente:

on (evento){ acción 01; acción 02; ...}

Las acciones que contienen un botón siempre empie-zan con un “on”, a continuación un evento de ratón entre paréntesis, una llave {, en los renglones siguien-tes ponemos las acciones separadas de puntos y co-mas, y cerramos con otra llave }.Un ejemplo:

Los eventos de ratón son las acciones que podemos hacer con un botón en combinación con el cursor y los clicks. Los más utilizados son press, release, rollOver y rollOut, y qué significan, cuando utilizamos press la ac-ción que tengamos en el botón de flash se reproducirá al hacer click en él, release cuando soltemos el botón del ratón, rollOver cuando pasemos el cursor por enci-ma del botón sin hacer click y rollOut cuando quitemos el cursor encima del botón.IMPORTANTE: No olvidemos que cuando vayamos a escribir código en un botón comprobemos en la venta-na de acciones que lo tenemos seleccionado.

Animaciones fluidas con ActionScriptPara hacer animaciones fluidas sin necesidad de utili-zar interpolación os daré un pequeño código que lo co-locaremos en el clip de película que queramos animar.1. Convertimos en Clip de Película el objeto que quera-mos animar sin interpolaciones.2. Le asignamos un Nombre de Instancia.3. Seleccionamos el clip y nos dirigimos a la Ventana de Acciones, asegurémonos que en la pestaña de esta ventana nos indica que tenemos seleccionado un clip.

4. Colocamos el siguiente código:

onClipEvent (enterFrame){ _x += (posicionX - _x) / 8;}

Esta es la sintaxis para un clip de película, siempre em-piezan por onClipEvent..., a continuación el evento en-tre paréntesis (sólo veremos enterFrame), se abre la llave, dentro estarían las acciones y cerramos con la llave.

La acción que va entre llaves (_x += (posicionX - _x) / 8;) es un algoritmo que nos permite la animación sin utilizar interpolación, y os la explico:En donde ahora está la propiedad de posición en el eje horizontal (_x) y que se repite dos veces, la podemos sustituir por cualquiera de las propiedades del aparta-do Acciones para cambiar parámetros en los Clip de Película (excepto la propiedad _visible, que sólo tiene dos valores).posicionX es una variable que tenemos que crear nosotros, puede ser cualquier palabra que respete las mismas reglas de escritura que el Nombre de Instancia (excepto las que se remarquen en azul o granate, con por ejemplo variable, pero sí podemos utilizar varia-ble1 o variable_01). Cada propiedad de clip que que-ramos variar debe tener su propia variable.El número 8 marca la velocidad de la animación, cuan-to menor es este número la animación es más rápida (sustitúyanlo por 2 y por 50, lo podrán verificar).

5. Por dar un ejemplo, vamos a animar un rectángu-lo desde un punto a otro del escenario y que además rote 90 grados.Como vimos en los apartados anteriores, creamos un rectángulo (en la posición x=50 e y=50), lo convertimos en clip, le damos un nombre de instancia (por ejem-

5

plo: rectangulo_01), lo seleccionamos y colocamos la siguiente acción desde la ventana de acciones:

onClipEvent (enterFrame){ _x += (posicionX - _x) / 8; _y += (posicionY - _y) / 8; _rotation += (giro - _rotation) / 8;}

Observamos que en tenemos un algoritmo diferente para cada propiedad que queramos animar, en este caso la posición x con la propiedad _x, la posición y con la propiedad _y, y la rotación con la propiedad _ro-tation. Y evidentemente he creado tres variables dife-rentes, posicionX, posicionY y giro (podrían ser otras, posX, posY y vuelta).

6. Ahora sólo falta dar un valor a esas variables, eso lo podemos hacer desde un fotograma clave o desde un botón.Si las colocamos en un fotograma haríamos lo siguien-te para ver su funcionamiento: Primero añadimos fo-togramas a esta animación (hasta, por ejemplo, 60), creamos una capa para las acciones (la deberíamos llamar Acciones o Scripts), en esa capa creamos un fo-tograma clave vacío (por ejemplo en el 20), lo seleccio-namos y tecleamos las acciones.La sintaxis sería la siguiente:

rectangulo_01.posicionX = 400;rectangulo_01.posicionY = 250;rectangulo_01.giro = 90;

Nombre de Instancia del clip que queremos animar, punto (.), la variable que habíamos creado para cada propiedad, un igual (=) y el valor (vemos que hay un valor para cada variable).Al publicar la película flash veremos que el rectángulo se mueve hacia esos valores y gira 90 grados.

Probar esto: Crear otro fotograma clave vacío en esa capa (Acciones o Scripts) y colocar el siguiente código:

rectangulo_01.posicionX = 50;rectangulo_01.posicionY = 50;rectangulo_01.giro = 0;

Si todo está bien, el rectángulo volverá a su posición original.Si lo hacemos desde un botón sería de la siguiente ma-nera:Creamos un botón (convertir en símbolo > Botón), lo seleccionamos y verificamos que en la pestaña de la ventana acciones vemos Acciones - botón, y teclea-mos el siguiente código (antes de publicar la película deberíamos borrar las acciones de los fotogramas, ya que nos entorpecerían el trabajo):

on (press){ rectangulo_01.posicionX = 400; rectangulo_01.posicionY = 250; rectangulo_01.giro = 90;}

Si lo observamos bien, vemos que la única diferencia de este código, además de estar en un botón, es que la asignación de valores a las variables está encerrado por un evento de botón y las llaves (respetando la sin-taxis de los botones).Si publicamos la película y todo está en su sitio al hacer click en el botón el rectángulo se moverá igual que en el ejemplo anterior pero sólo cuando nosotros haga-mos ese click.Si creamos un segundo botón y le asignamos el si-guiente código (el del segundo fotograma), el objeto volverá a su sitio original al hacer click en este.

on (press){ rectangulo_01.posicionX = 50; rectangulo_01.posicionY = 50; rectangulo_01.giro = 0;}

Pues esto es todo, de momento.