Adobe Flash - Action Script 2.0 Para Novatos 4b5l4v

Departamento de Medios Informáticos

Escuela de Arte y Superior de Diseño Fernando Estévez

Adobe Flash CS4

ActionScript 2.0 para novatos. Introducción

El ActionScript es el lenguaje de programación de Adobe 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 desarrollado 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.

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

Crear un archivo Flash con ActionScript 2.0

1. 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 En la pestaña Flash, desplegamos la persiana Script: y del lenguaje. seleccionamos la versión que vayamos a utilizar.

La ventana de ActionScript

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

Cambiar de versión de ActionScript

Si al abrir un archivo Flash nos hemos olvidado de seleccionar versión de ActionScript con la queremos trabajar y necesitamos cambiarla, podemos remediarlo. 1. Deseleccionamos cualquier objeto o fotograma de flash, sólo tenemos que hacer click en cualquier espacio vacío del escenario (o teclear Esc en PC). Podemos cerrar el asistente de programación haciendo click en el botón que se remarca en la imagen anterior.

Dónde y cómo escribimos el código de ActionScript

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

1

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

- 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 fotograma al que queremos que salte, puede ser hacia delante o hacia atrás: Por ejemplo, gotoAndStop(34); - Hace un salto a un fotograma determinado y el lector sigue avanzando en la línea de tiempo desde ese fotograma. gotoAndPlay();

Entre los paréntesis tecleamos el número del fotograma al que queremos que salte, puede ser hacia delante o hacia atrás: Por ejemplo, gotoAndPlay(18); - Retrocede un fotograma prevFrame();

- Avanza sólo un fotograma nextFrame();

Acciones para cambiar parámetros en los

Si seleccionamos un objeto en el que no se puede co- Clip de Película locar ninguna acción nos lo mostrará en la Ventana de Hasta ahora habíamos animado las propiedades de Acciones de esta forma. los clip de película (y otros objetos) mediante la Herramienta de Transformación Libre, de Selección y de propiedades de Color en combinación con las interpolaciones. Con ActionScript podemos hacer lo mismo sin animaciones interpoladas, las acciones de las propiedades de clip de películas (y botones) son las 3. Una vez que estemos bien seguros empezamos a te- siguientes: clear código. Esta comprobación en básica ya que el ActionScript para fotogramas, clips o botones tienen - Hace visible un clip o botón si el valor es true y invisi“estructuras” diferentes y los de unos no funcionan en ble si es false. los otros. _visible = true o false;

Acciones para controlar la Línea de Tiempo

De 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 escribir 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();

- 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);

2

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

- No puede tener espacios, los debemos sustituir por barras bajas, cuadrado_rojo. - No puede tener caracteres especiales, ni eñes, ni tildes, 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 correcta 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 problemas. 3. El clip ya tiene nombre propio, ahora tenemos que colocar el código en un fotograma, para lo cual tenemos que crear un Fotograma Clave Vacío y seleccionarlo (debemos tener una capa sólo para las acciones). 4. Comprobamos que en la pestaña de Ventana de acciones nos especifica que estamos seleccionando un fotograma.

_rotation = (numérico);

Cómo variar los parámetros de un Clip de Película con Acciones

En el apartado anterior he enumerado las propiedades 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 Instancia, 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 de Propiedades.

Y empezamos a escribir el código, pero debemos saber cuál es la sintaxis correcta de este lenguaje de programació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 apartado anterior, por ejemplo: cuadrado_rojo._rotation = 90;

Y en la casilla donde vemos escrito , tecleamos el nosotros elijamos para ese clip.

Qué significa, que al clip que hemos llamado cuadrado_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.

IMPORTANTE: El Nombre de Instancia debe respetar ciertas reglas de escritura:

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

3

Animaciones fluidas con ActionScript

Controlar la Línea de Tiempo o las propiedades de un Clip de Película desde un Botón

Para hacer animaciones fluidas sin necesidad de utilizar interpolación os daré un pequeño código que lo colocaremos en el clip de película que queramos animar. 1. Convertimos en Clip de Película el objeto que queramos 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.

Para 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éndole la sintaxis propia de estos, que es la siguiente: on (evento){ acción 01; acción 02; ... }

4. Colocamos el siguiente código:

Las acciones que contienen un botón siempre empiezan con un “on”, a continuación un evento de ratón entre paréntesis, una llave {, en los renglones siguientes ponemos las acciones separadas de puntos y comas, 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 acció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 encima 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 ventana de acciones que lo tenemos seleccionado.

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

Esta es la sintaxis para un clip de película, siempre empiezan por onClipEvent..., a continuación el evento entre 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 apartado 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 variable1 o variable_01). Cada propiedad de clip que queramos variar debe tener su propia variable. El número 8 marca la velocidad de la animación, cuanto 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ángulo 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-

4

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 _rotation. Y evidentemente he creado tres variables diferentes, 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 siguiente para ver su funcionamiento: Primero añadimos fotogramas 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 fotograma clave vacío (por ejemplo en el 20), lo seleccionamos y tecleamos las acciones. La sintaxis sería la siguiente:

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 sintaxis 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 hagamos ese click. Si creamos un segundo botón y le asignamos el siguiente 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.

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 manera: 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 tecleamos 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):

5