Departamento de Medios Informticos

Escuela de Arte y Superior de Diseo Fernando Estvez

Adobe Flash CS4

Introduccin

ActionScript 2.0 para novatos.

El ActionScript es el lenguaje de programacin de Adobe Flash (originariamente de Macromedia) que nos permite, a grandes rasgos, incorporar interactividad a una animacin 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 ms 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 grfica basada en Flash. 2. Nos dirigimos al Panel de Propiedades (imagen anterior), a la seccin PUBLICAR. Aqu podemos ver qu versin de ActionScript tenemos, si queremos cambiarla por otra hacemos click en Editar..., se abrir la ventana Configuracin de publicacin.

Crear un archivo Flash con ActionScript 2.0

1. Al abrirse la aplicacin Adobe Flash lo primero que nos encontramos es la ventana de Inicio, en la seccin Crear nuevo hacemos click en ActionScript 2.0 y listo, el archivo creado estar configurado para esta versin En la pestaa Flash, desplegamos la persiana Script: y del lenguaje. seleccionamos la versin 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 versin de ActionScript

Si al abrir un archivo Flash nos hemos olvidado de seleccionar versin de ActionScript con la queremos trabajar y necesitamos cambiarla, podemos remediarlo. 1. Deseleccionamos cualquier objeto o fotograma de flash, slo tenemos que hacer click en cualquier espacio vaco del escenario (o teclear Esc en PC). Podemos cerrar el asistente de programacin haciendo click en el botn que se remarca en la imagen anterior.

Dnde y cmo escribimos el cdigo de ActionScript

El cdigo lo escribimos, como ya se imaginarn, en la Ventana de Acciones, pero antes de teclearlo tenemos que saber dnde colocarlo, y disponemos de tres ha-

bitculos, en un Fotograma, en un Clip de Pelcula o en un Botn. 1. Para asegurarnos de que lo colocamos en el lugar correcto primero tenemos que seleccionar el objeto (fotograma, clip o botn). 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 lnea de tiempo.

play();

- Hace un salto a un fotograma determinado y para el lector de la lnea de tiempo en ese fotograma.
gotoAndStop();

Entre los parntesis tecleamos el nmero del fotograma al que queremos que salte, puede ser hacia delante o hacia atrs: Por ejemplo, gotoAndStop(34); - Hace un salto a un fotograma determinado y el lector sigue avanzando en la lnea de tiempo desde ese fotograma.
gotoAndPlay();

Entre los parntesis tecleamos el nmero del fotograma al que queremos que salte, puede ser hacia delante o hacia atrs: Por ejemplo, gotoAndPlay(18); - Retrocede un fotograma
prevFrame(); nextFrame();

- Avanza slo un fotograma

Si seleccionamos un objeto en el que no se puede co- Clip de Pelcula locar ninguna accin nos lo mostrar en la Ventana de Hasta ahora habamos animado las propiedades de Acciones de esta forma. los clip de pelcula (y otros objetos) mediante la Herramienta de Transformacin Libre, de Seleccin y de propiedades de Color en combinacin con las interpolaciones. Con ActionScript podemos hacer lo mismo sin animaciones interpoladas, las acciones de las propiedades de clip de pelculas (y botones) son las 3. Una vez que estemos bien seguros empezamos a te- siguientes: clear cdigo. Esta comprobacin en bsica ya que el ActionScript para fotogramas, clips o botones tienen - Hace visible un clip o botn si el valor es true y invisiestructuras diferentes y los de unos no funcionan en ble si es false. los otros. _visible = true o false;

Acciones para cambiar parmetros en los

Acciones para controlar la Lnea de Tiempo

De ahora en adelante llamaremos Acciones al cdigo de ActionScript. Las acciones para bsicas para controlar la lnea de tiempo son las siguientes (las acciones se tiene que escribir tal cual las pongo aqu, respetando maysculas y minsculas, y siempre separadas unas de las otras con punto y coma; si estas palabras claves del cdigo estn bien escritas se remarcarn en azul o granate, el resto de los caracteres permanecern en negro): - Para el avance del lector de la lnea 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);

- Posicin con respecto al eje y (el vertical), hay que tener en cuenta las dimensiones del escenario.
_y = (numrico);

- Posicin con respecto al eje x (el horizontal), hay que tener en cuenta las dimensiones del escenario.
_x = (numrico);

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

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

- Altura del objeto en pxeles.

_width = (numrico);

- Altura del objeto en pxeles.

_height = (numrico);

- Grados de rotacin del clip.

_rotation = (numrico);

- No puede tener espacios, los debemos sustituir por barras bajas, cuadrado_rojo. - No puede tener caracteres especiales, ni ees, ni tildes, ni nada parecido (slo nmeros y letras). - Un nombre de instancia no puede empezar por un nmero, esto no es correcto, 1_cuadrado; la forma correcta es as, cuadrado_01. - Recomiendo escribir todo en minsculas, ya que para el ActionScript una b minscula es diferente a una B mayscula. Si respetis estas reglas se evitarn muchos problemas. 3. El clip ya tiene nombre propio, ahora tenemos que colocar el cdigo en un fotograma, para lo cual tenemos que crear un Fotograma Clave Vaco y seleccionarlo (debemos tener una capa slo para las acciones). 4. Comprobamos que en la pestaa de Ventana de acciones nos especifica que estamos seleccionando un fotograma.

Cmo variar los parmetros de un Clip de Pelcula con Acciones

En el apartado anterior he enumerado las propiedades del clip que puedo variar mediante acciones, slo falta saber cmo. Desde un Fotograma: 1. Darle al Clip de Pelcula un Nombre de Instancia, cada clip (o botn) necesita una denominacin 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 pelcula. 2. No dirigimos al Panel de Propiedades.

Y empezamos a escribir el cdigo, pero debemos saber cul es la sintaxis correcta de este lenguaje de programacin 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 <Nombre de instancia>, tecleamos el nosotros elijamos para ese clip.

Qu significa, que al clip que hemos llamado cuadrado_rojo le damos una rotacin de 90 grados. Adems de la rotacin podemos aadirle mas de una accin, dos, tres o diez.

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

O tambin podemos colocar acciones para diferentes clip de pelculas siempre y cuando sus nombres de instancia sean diferentes (ver imagen siguiente).

Animaciones fluidas con ActionScript

Controlar la Lnea de Tiempo o las propiedades de un Clip de Pelcula desde un Botn

Para hacer animaciones fluidas sin necesidad de utilizar interpolacin os dar un pequeo cdigo que lo colocaremos en el clip de pelcula que queramos animar. 1. Convertimos en Clip de Pelcula 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, asegurmonos que en la pestaa de esta ventana nos indica que tenemos seleccionado un clip.

Para poder hacer lo que nos muestra el enunciado de este apartado slo tenemos que colocar las acciones de los apartados anteriores en un botn pero aadindole la sintaxis propia de estos, que es la siguiente:
on (evento){ accin 01; accin 02; ... }

4. Colocamos el siguiente cdigo:

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

Las acciones que contienen un botn siempre empiezan con un on, a continuacin un evento de ratn entre parntesis, una llave {, en los renglones siguientes ponemos las acciones separadas de puntos y comas, y cerramos con otra llave }. Un ejemplo:

Esta es la sintaxis para un clip de pelcula, siempre empiezan por onClipEvent..., a continuacin el evento entre parntesis (slo veremos enterFrame), se abre la llave, dentro estaran las acciones y cerramos con la llave. La accin que va entre llaves (_x += (posicionX - _x) / 8;) es un algoritmo que nos permite la animacin sin utilizar interpolacin, y os la explico: En donde ahora est la propiedad de posicin en el eje horizontal (_x) y que se repite dos veces, la podemos sustituir por cualquiera de las propiedades del apartado Acciones para cambiar parmetros en los Clip de Pelcula (excepto la propiedad _visible, que slo 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 nmero 8 marca la velocidad de la animacin, cuanto menor es este nmero la animacin es ms rpida (sustityanlo por 2 y por 50, lo podrn verificar). 5. Por dar un ejemplo, vamos a animar un rectngulo desde un punto a otro del escenario y que adems rote 90 grados. Como vimos en los apartados anteriores, creamos un rectngulo (en la posicin x=50 e y=50), lo convertimos en clip, le damos un nombre de instancia (por ejem-

Los eventos de ratn son las acciones que podemos hacer con un botn en combinacin con el cursor y los clicks. Los ms utilizados son press, release, rollOver y rollOut, y qu significan, cuando utilizamos press la accin que tengamos en el botn de flash se reproducir al hacer click en l, release cuando soltemos el botn del ratn, rollOver cuando pasemos el cursor por encima del botn sin hacer click y rollOut cuando quitemos el cursor encima del botn. IMPORTANTE: No olvidemos que cuando vayamos a escribir cdigo en un botn comprobemos en la ventana de acciones que lo tenemos seleccionado.

plo: rectangulo_01), lo seleccionamos y colocamos la siguiente accin desde la ventana de acciones:

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

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

Observamos que en tenemos un algoritmo diferente para cada propiedad que queramos animar, en este caso la posicin x con la propiedad _x, la posicin y con la propiedad _y, y la rotacin con la propiedad _rotation. Y evidentemente he creado tres variables diferentes, posicionX, posicionY y giro (podran ser otras, posX, posY y vuelta). 6. Ahora slo falta dar un valor a esas variables, eso lo podemos hacer desde un fotograma clave o desde un botn. Si las colocamos en un fotograma haramos lo siguiente para ver su funcionamiento: Primero aadimos fotogramas a esta animacin (hasta, por ejemplo, 60), creamos una capa para las acciones (la deberamos llamar Acciones o Scripts), en esa capa creamos un fotograma clave vaco (por ejemplo en el 20), lo seleccionamos y tecleamos las acciones. La sintaxis sera la siguiente:
rectangulo_01.posicionX = 400; rectangulo_01.posicionY = 250; rectangulo_01.giro = 90;

Si lo observamos bien, vemos que la nica diferencia de este cdigo, adems de estar en un botn, es que la asignacin de valores a las variables est encerrado por un evento de botn y las llaves (respetando la sintaxis de los botones). Si publicamos la pelcula y todo est en su sitio al hacer click en el botn el rectngulo se mover igual que en el ejemplo anterior pero slo cuando nosotros hagamos ese click. Si creamos un segundo botn y le asignamos el siguiente cdigo (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.

Nombre de Instancia del clip que queremos animar, punto (.), la variable que habamos creado para cada propiedad, un igual (=) y el valor (vemos que hay un valor para cada variable). Al publicar la pelcula flash veremos que el rectngulo se mueve hacia esos valores y gira 90 grados. Probar esto: Crear otro fotograma clave vaco en esa capa (Acciones o Scripts) y colocar el siguiente cdigo:
rectangulo_01.posicionX = 50; rectangulo_01.posicionY = 50; rectangulo_01.giro = 0;

Si todo est bien, el rectngulo volver a su posicin original. Si lo hacemos desde un botn sera de la siguiente manera: Creamos un botn (convertir en smbolo > Botn), lo seleccionamos y verificamos que en la pestaa de la ventana acciones vemos Acciones - botn, y tecleamos el siguiente cdigo (antes de publicar la pelcula deberamos borrar las acciones de los fotogramas, ya que nos entorpeceran el trabajo):