ACTIONSCRIPT 3.0

Giovanny Lombana Sayo11-01 J.T20-02-13

Introducción a ActionScript 3.0 ¿Qué es el ActionScript?

El ActionScript es el lenguaje de programación que ha utilizado Flash desde sus comienzos, y que por supuesto, emplea Flash CS5. A grandes rasgos, podemos decir que el ActionScript nos permitirá realizar con Flash CS5 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 temas sólo vamos a ver una pequeña introducción a ActionScript 3 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 CS5.

Características generales 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 Java script.

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.

ActionScript 3 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 estos lenguajes, cada versión se acerca más. Así, la versión 3.0 utilizada en Flash CS5 es mucho más potente y mucho más "orientada a objetos" que su anterior versión 2.0.

La sintaxis ActionScript presenta muchísimos parecidos con el Java script o PHP; si estamos familiarizados con estos lenguajes, la sintaxis y el estilo de ActionScript nos resultarán muy familiares. Las diferencias entre Java Script y ActionScript las podemos encontrar en la ayuda que acompaña al Flash CS5.

En la mayor parte de las ocasiones, será necesario "programar". Flash CS5 pone a nuestra disposición una biblioteca de funciones, clases y métodos (de momento entenderemos esto como "código ActionScript que realiza una función determinada") ya implementadas que realizan lo que buscamos, bastará con colocarlas en el lugar adecuado.

El panel Acciones

En Flash CS5, el Panel Acciones sirve para programar scripts con ActionScript, por tanto lo aquí introduzcamos le afectará de menor o mayor medida. 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  (en el nombre de la pestaña de la zona de la derecha y en la zona izquierda en el apartado Selección actual).

El Panel Acciones de Flash CS5, no tiene únicamente un modo de edición. Podemos utilizar el , en el que en vez de escribir directamente, seleccionamos los distintos elementos desde listas. Puede resultar útil al principio, cuando aún no estamos familiarizados, pero nos limita mucho al escribir.

Cuando ya tenemos cierta soltura nos encontraremos más cómodos con el Asistente de script desactivado, lo que nos permite escribir directamente el código. Este último modo nos dará más libertad y agilidad si sabemos qué hacer, pero también es más fácil que cometamos errores.

En la parte superior encontramos herramientas que nos ayudarán. Veamos las más útiles:

 Buscar: Busca un texto en el código. Útil, por ejemplo, si queremos buscar en todos los sitios que empleamos un objeto.

 Revisar sintaxis. Comprobará errores en la sintaxis, normalmente que hayamos olvidado cerrar paréntesis o corchetes. Si encuentra alguno, nos mostrará un mensaje como el siguiente:

En el panel Errores de compilador se mostrarán los errores indicando la capa, fotograma y línea. Podemos ir al lugar del error haciendo doble clic.

 Formato automático. Al escribir en cualquier lenguaje, es muy importante hacerlo ordenadamente y con el formato adecuado. Este botón lo hace automáticamente, siempre que no haya errores de sintaxis.

 Cuando tenemos mucho código, nos resultará más cómodo si contraemos ciertas partes. Con estos botones, podemos, de izquierda a derecha, contraer el espacio entre llaves, contraer la selección o expandir todo.

 Cuando estamos programando, es frecuente que queramos comentar un fragmento de código para que no se ejecute o que queramos añadir comentarios descriptivos. Con estos botones, podemos comentar el texto seleccionado, o descomentarlo.

Los operadores y expresiones Entrando un poco más a fondo en la sintaxis y el manejo del ActionScript,

vamos a comenzar hablando de los operadores y de las expresiones, por ser la parte más elemental de una acción de ActionScript (y de cualquier otro lenguaje de programación).

Un operador es un tipo de carácter que realiza una acción especial dentro de una expresión de ActionScript. Una expresión no es más que un conjunto de operadores, variables y constantes relacionados entre sí de un cierto modo.

Por ejemplo: x = 3 ; --> Es una expresión cuyo resultado será asignarle a la variable ' x '

el valor 3 (que es una constante). A partir de este punto, la variable x vale 3. y = 5 + x ; --> Es una expresión cuyo resultado será asignarle a la variable

' y ' la suma de la constante 5 y la variable ' x ' que sabemos que vale 3 (porque le hemos asignado este valor antes). Por tanto, el resultado de esta expresión es asignarle 8 a y. También se puede considerar como asignar a y el valor de la expresión 5 + x

Flash nos permite usar multitud de operadores, vamos a comentar los más comunes. El lector puede acceder a los demás (y a estos) desde el Panel Acciones en la carpetaElementos de lenguaje → Operadores. Vamos a clasificar los operadores tal y cómo lo hace Flash.

Otros Elementos del lenguaje ( ) : Paréntesis. Sirven, como es de esperar, para agrupar

términos y dar preferencias en las operaciones (al igual que en matemáticas). También se usa, como ya vimos, para pasar parámetros a funciones o acciones.

" " : Comillas. En ActionScript, todo lo que va entre comillas, pasa a considerarse una cadena de caracteres. Así por ejemplo, mientras que x representa una variable con un valor determinado, si escribimos "x", estamos escribiendo en realidad el carácter o la letra "x". Por tanto, podremos añadirlo a una palabra, compararlo con otras letras, escribirlo por pantalla etc.. pero ya no será una variable.

//: Comentario de línea. Indica que el texto a partir de ahí, y en esa línea, es un comentario, y no se ejecutará como código.

/* ....... */: Comentario de bloque. Cualquier texto de una o más líneas encerrado entre estos caracteres es un comentario, y no se ejecutará como código.

Los objetos

Los Objetos, como ya hemos visto en el tema básico, los objetos son instancias de una determinada clase. Esto es, son representantes de una clase ya definida. Cada objeto tiene las propiedades y métodos propios de la clase, y normalmente son independientes unos de otros. Así, son objetos, por ejemplo, un botón, un clip de película, un gráfico o un sonido... es decir, que prácticamente todo es un objeto en Flash CS5.

Vamos a ver los objetos más usados en Flash y una breve descripción de cada uno de ellos. Como ya se ha explicado en el tema básico, cada objeto tiene una serie de Propiedades (que veremos después), unos Métodos y eventos, que dan funcionalidad a los objetos. Cuando un componente de Flash pasa a ser un objeto, automáticamente pasa a tener todas las propiedades definidas por Flash para ese objeto y pasa a reaccionar ante los Métodos y eventos que tiene definidos. Podemos encontrar una lista con todas las propiedades, métodos y Acciones.

Objeto "Button" (Botón)Los objetos de tipo Botón es un tipo de MovieClip especialmente pensado para que el usuario interactúe con él, permitiéndonos diferenciar entre sus estados, y crear una apariencia para cada uno.Cuando nos interese que una imagen que hayamos diseñado se comporte como un botón, bastará convertirla a botón (del modo visto en el capítulo correspondiente) y ya podremos usar los eventos típicos de un botón. Objeto "MovieClip" (Clip de Película)Cuando necesitemos crear una película Flash dentro de otra película, pero no queramos tener 2 ficheros separados ni molestarnos en cargar una película u otra, deberemos crear un objeto movieclip. Entre sus propiedades especiales destaca que los objetos "clip de película" tienen, internamente, una línea de tiempos que corre independiente de la línea de tiempos de la película principal de Flash, lo que nos permite crear animaciones tan complejas e independientes como queramos (podemos crear tantos clips de película dentro de otros como queramos, por ejemplo). Realmente, toda nuestra película es un Movie Clip. Objeto "Display Object" (Objeto de visualización)

Objeto "Sound" (Sonido) y SoundChanel (Canal de sonido)Los objetos sonidos no son visuales, y por tanto, no podremos ver como quedan en los fotogramas, al igual que haríamos con un botón o un clip de película. Deberemos controlarlos, por tanto, desde el Panel Acciones y usando ActionScript. Tienen multitud de métodos especiales, muy potentes y útiles, podemos parar un sonido, crear un bucle, darle efectos sonoros etc... Utilizando el canal de sonido, podremos pararlo, ajustar el volumen, etc.Podríamos, por ejemplo, crear un objeto de tipo sonido y después hacer que al pulsar un botón suene. (Más adelante se verá algún ejemplo de uso de sonidos). Objeto "Mouse" (Ratón)El objeto mouse es uno de los objetos de Flash que ya está definido por Flash, pues hace referencia al ratón de Windows (al que manejará el usuario que vea nuestra película). Si lo usamos, podremos acceder a las propiedades del ratón de Windows, tipo de cursos, efectos asociados, detección de su posición etc...Vale la pena insistir en que su manejo no es análogo al de otros objetos como el botón, pues podemos crear tantos botones como queramos y hacer con ellos lo que decidamos, pero el objeto Mouse es único y actúa sobre el ratón del PC del usuario que vea nuestra película. Se puede decir que es un objeto "externo" que permite que otras partes del Sistema Operativo interactúen con nuestra película Flash. Por tanto, es muy potente. Objeto "Math" (Matemáticas)Es uno de los múltiples objetos "abstractos" de Flash, ni es visual, ni parece que corresponda a nada existente en el sistema (como el objeto "Mouse"). Su función es muy importante, pues nos permite usar fórmulas matemáticas de modo muy sencillo. En el tema siguiente veremos algún ejemplo de su uso. Objeto "String" (Cadena)Es otro objeto peculiar, pues corresponde a un tipo de datos. Los strings o cadenas son secuencias de caracteres. Si definimos una secuencia de caracteres como objeto de tipo String, podremos usar los métodos que Flash implementa sobre ellas: Seleccionar subcadenas de letras, buscar una determinada letra en una palabra, convertir la palabra a letras mayúsculas y un largo etc...

Ejemplos de ActionScript 3.0  Ejemplos de uso del código ActionScript

Los Botones (objeto Button para Flash CS5) tienen mucha utilidad siempre que queramos que nuestra película interactúe con el usuario. Dado que esto va a ser prácticamente siempre, es conveniente estudiar y entender bien algunos códigos típicos que tendremos que usar para conseguir nuestros propósitos.

En realidad, los botones se comportan como cualquier símbolo. A todos les podemos aplicar eventos, ya que lo que hacemos es asociarlos normalmente al clic del ratón. Los botones tienen la ventaja de que nos permiten representar distintos estados, mejorando la percepción de interactividad.

Sonidos con ActionScript 3

Aunque la idea de objeto no suele llevarnos a pensar en un sonido, en Flash CS5 los sonidos también son objetos y podemos manejarlos usando adecuadamente ActionScript. Veamos unos cuantos códigos muy comunes y un completo ejemplo de cómo usarlos:

 El objeto MATH

Como ya sabemos, los objetos no visibles también se controlan con ActionScript. Vamos a ver algunos ejemplos del funcionamiento del objeto Math y cómo sacarle partido.

x = Math.random(); El método random del objeto Math genera un número aleatorio entre 0 y 1.

En este caso, el resultado lo almacenamos en la variable x, para poder usarlo después...

Las utilidades de este método son muchas, generar claves secretas, passwords, números de lotería etc...

  x = Math.round(4.3); El Método "round" REDONDEA el parámetro introducido eliminando la parte

decimal del mismo. Aunque nuestra configuración utilice la coma para separar los decimales, en Flash debemos utilizar el punto.

En el ejemplo, x pasaría a valer 4.   x = Math.max(5 , 2); El Método "max" obtiene el valor máximo entre 2 números. En el ejemplo, x pasaría a valer 5.

Fotograma 1: En el Fotograma 1 se calculan los bytes totales que ocupa la película. Después pasamos al Fotograma 2.

Fotograma 2: Cada vez que accedamos al Fotograma 2, nuestro código ActionScript averigua los bytes que llevamos cargados en memoria y los compara con los totales (que se hallaron en el Fotograma 1 y no vuelven a averiguarse, pues no varían). Si ya está toda la película cargada, vamos al fotograma 4 y comenzamos a reproducir la película, sino, pasamos al fotograma 3

Fotograma 3: El Fotograma 3 volverá a mandar la cabeza lectora al fotograma 2. Haciendo este ciclo, damos tiempo al ordenador a ir cargando poco a poco la película, hasta que llegue un momento que esté toda cargada y pasemos al Fotograma 4. El cálculo del porcentaje es un "adorno" que nos permitimos, pues con un poco más de esfuerzo averiguamos cuánta película llevamos cargada y la mostramos por pantalla de un modo elegante (en porcentaje) haciendo la espera del usuario menos aburrida.

Fotograma 4: Aquí comienza la película... (Ya no se volverá nunca a ninguno de los fotogramas anteriores). 

Abajo mostramos el resultado. La película se comenzará a cargar al pulsar el botón. El código insertado es el que se muestra arriba, no hay NADA MÁS. Tan sólo se han añadido unos textos y unas imágenes para aumentar el tamaño de la película, de lo contrario la carga sería demasiado rápida y no llegaría a verse.

También se ha insertado el texto dinámico que muestra el porcentaje.

 Navegación - ActionScript  Introducción

En este tema veremos los puntos más importantes en los que te podrás apoyar para realizar tus animaciones en Flash usando ActionScript.

Esta unidad, la de Navegación, está especialmente orientada a la web, pues veremos cómo crear elementos que te ayudarán más tarde a crear tus propias presentaciones, secciones, etc. Todo ello apoyado con animaciones y vinculadas entre sí.

A lo largo del tema utilizaremos este ejemplo para ilustrar la teoría de forma guiada.

Los Botones

Uno de los elementos que más nos van a ayudar a la hora de añadir interactividad en el diseño son los botones.

En el ejemplo nos hemos ayudado de los botones para crear la navegación entre las diferentes secciones.

Así que el primer paso, después de haber creado la interfaz de la película en una capa, será crear e insertar los botones en una nueva capa para trabajar con mayor facilidad.

Para asignarle una acción a un botón es necesario darle un nombre de instancia. Para ello (y como hemos visto en unidades anteriores) escribimos el nombre que queramos (al cual nos referiremos más tarde para llamar al botón) en el Inspector de Propiedades, en este caso lo hemos llamado equipo.

Luego, creamos otra capa para poder insertar las acciones que necesitarán nuestros botones, abrimos el Panel Acciones y añadiremos el código que deberá realizar el botón.

Ésta es la parte más importante pues deberemos decidir a qué evento responderá el botón. Existen varios eventos que son capturados en Flash, nombraremos los más importantes (echa un vistazo a la sección Controladores de evento del panel Fragmentos de código).:

MouseEvent.CLICK: ejecuta la acción al hacer clic con el ratón.. MouseEvent.MOUSE_DOWN: ejecuta la acción al presionarse el botón.

MouseEvent.MOUSE_UP: ejecuta la acción al soltarse el botón (después de haberlo presionado).

MouseEvent.MOUSE_OVER: ejecuta la acción al desplazar el cursor dentro del botón

MouseEvent.MOUSE_OUT: ejecuta la acción al desplazar el cursor fuera del botón.

Nota: ActionScript diferencia entre mayúsculas y minúsculas, por lo que si escribes, por ejemplo, mouse_up no será reconocido.

Para capturar el evento tenemos que añadir un escuchador que se encargue de estar pendiente de si sucede ese evento, al elemento correspondiente. En nuestro caso, al botón. Además del evento, debemos de indicar el nombre de una función, que será el código que se ejecute al producirse el evento.

Por tanto, si no hemos creado ya esa función, la tenemos que definir, con el mismo nombre y pasándole como parámetro el evento. Como siempre, entre las llaves {} introduciremos el código que queremos que ejecute la función.

Controladores de la línea de tiempo

Una vez insertados los botones y definidos los eventos sobre los que deben actuar, tendremos que decidir qué queremos que hagan.

De esta forma podremos crear dinamismo entre nuestras secciones.

Imagina que tenemos la siguiente línea de tiempo:

Observa la capa Contenido. En ella se encuentran todo el contenido de las secciones.

De esta forma, si no aplicásemos ninguna acción sobre la línea de tiempo, todas las secciones se ejecutarían una seguida de la otra. Lo que queremos conseguir es que se ejecute la primera (para mostrar la sección principal) y el cabezal se pare hasta nueva orden (para mostrar la segunda).

Para ello utilizaremos la función stop(). Esta función sirve para parar el cabezal de la

línea de tiempo donde sea colocada. Así que seleccionamos el último fotograma de la sección y abrimos el Panel Acciones.

De esta forma, al hacer clic sobre ese botón, el cabezal de reproducción se desplazará hasta el fotograma que tiene la etiqueta "Encuéntranos" y reproducirá a partir de allí.

Si añadimos un stop() en el último fotograma de la segunda sección, cuando éste se reproduzca se parará y el contenido permanecerá estático en espera de una nueva orden.

  Existe otra forma, muy útil, para nombrar los

fotogramas. Del mismo modo que dábamos un nombre de instancia a un botón lo haremos con un fotograma.

Basta con introducir una Etiqueta de fotograma para poder remitir el cabezal a éste:

Además de estos controladores podemos utilizar también:

gotoAndStop(fotograma), que situará el cabezal en el fotograma indicado y parará la reproducción.

play(), que hará que la reproducción prosiga en el fotograma en el que se encuentre el cabezal.

prevFrame(), que hará que el cabezal retroceda al fotograma anterior al que nos encontramos.

nextFrame(), que hará que el cabezal avance al fotograma siguiente al que nos encontramos.

Las escenas

Flash permite el uso de escenas para separar diferentes temas en una sola película. Se suelen utilizar sobre todo en animaciones, donde una parte de la acción transcurre sobre un fondo y la siguiente sobre otro completamente diferente.

De este modo podemos usar las escenas para representar diferentes secciones muy diferentes en nuestra película, por ejemplo, crear una escena para el cargador, otra para la película principal y una tercera para una sección que se diferencie completamente del resto y nos sea más cómodo trabajar con ella independientemente.

A pesar del hecho de que las escenas se trabajan como líneas de tiempo diferentes, al crear el archivo SWF éstas se alinean en orden reproduciéndose una detrás de otra.

Por ello, al publicar el documento los fotogramas de las escenas se numerarán respecto a esto. Es decir, si tenemos una primera escena que va del fotograma 1 al 50, la segunda escena comenzará en el fotograma 51.

Todo esto hace que las escenas, en algunos casos estén desaconsejadas por las siguientes razones:

El uso de escenas obliga al usuario a descargar el documento en su totalidad, a pesar de que es posible que no navegue por todas las secciones. Existe la posibilidad, como veremos más adelante, de cargar en cualquier momento archivos SWF para reproducirlos en la pantalla principal. De esta forma emularíamos el uso de las escenas cargando diferentes documentos dependiendo de la sección a mostrar.

Cuando añadimos ActionScript a nuestras escenas el resultado puede ser, a veces, imprevisible. Como hemos explicado anteriormente, al crearse un archivo con una línea de tiempo continua las acciones a realizar pueden ser inesperadas.

En el Panel Escena (ábrelo desde Ventana → Otros paneles → Escena) podrás ver las escenas actuales de la película.

 Los Movie clip

En el tema de Clips de Película vimos que se tratan de objetos con línea de tiempo propia.

Podemos utilizarlos para incluir elementos en nuestra película con una animación independiente. De este modo aunque la película principal esté detenida el clip seguirá actuando según su propio cabezal de reproducción.

Existen métodos para manejar la línea de tiempo de los clips, idénticas a las anteriores, y que veremos a continuación.

Lo primero que deberemos aprender es a acceder a las propiedades y métodos de los objetos. Esto es un recurso muy utilizado pero a la vez es muy sencillo. Lo veremos con un ejemplo.

Queremos que al pulsar un botón el movieclip avance en su línea de tiempo hasta su fotograma 20.

Fíjate en cómo hemos escrito la función. Primero hemos señalado el clip sobre el que queremos actuar escribiendo su nombre de instancia:

Si observas tenemos dos movieclips en la película, uno de ellos llamado estrella, y el otro detalle. La línea de tiempo de estos movieclips tendría este aspecto:

Las variables

Las variables son contenedores donde podremos almacenar información para trabajar con ella. Esta información puede ser modificada y leída.

Aunque parece un concepto muy complejo su uso es bastante sencillo. En ActionScript existen muchos tipos diferentes de variables, de hecho en una

variable podemos guardar cualquier tipo de objeto. Vamos a ver ahora los más comunes, los que emplearemos para guardar texto, números o valores booleanos (verdadero - falso):

Boolean: o booleano, puede almacenar sólo dos valores, o true (verdadero) o false (falso). 

Number: puede almacenar números enteros o decimales, positivos o negativos. El signo decimal en ActionScript es el punto (.). Podrás realizar operaciones matemáticas con estas variables.

String: puede almacenar cadenas de caracteres, es decir, un conjunto de caracteres alfanuméricos. Las variables de tipo String deben ir entre comillas dobles ("cadena") o ('cadena').

Array: en los arrays o matrices podemos almacenar distintos valores en distintas posiciones. A estas posiciones accedemos con un índice numérico (utilizando 0 para la primera posición) que indicamos entre corchetes tras el nombre del array (nombreArray[3]=valor;). Puedes ver un ejemplo práctico de los arrays en este básico

Al hacer clic en el movieclip estrella se evalúa la variable estrella_activada si ésta es verdadera (true) entonces permite que se realicen las acciones. En caso contrario, sale de la condición.

Al entrar en la condición se desplazan los cabezales y se modifica el valor de la variable a falso para que la próxima vez que intente entrar no puedan ejecutarse las acciones.

En el click del clip detalle se evalúa de nuevo la variable. Esta vez debería estar en false porque si el detalle está fuera es porque ya se ha hecho clic sobre la estrella y ha pasado por el anterior bloque.

A medida que vayamos avanzando iremos usando otras variables de diferentes tipos. Verás que su uso no difiere mucho al que hemos explicado ahora.

Antes de terminar con este tema deberíamos ver algo muy importante: el ámbito de las variables.

Esto es, el sitio donde puedan utilizarse las variables. Nota: Para explicar el ámbito de las variables utilizaremos la

función trace(variable); que envía el contenido de la variable al Panel Salida, lo que nos permitirá ver el valor que va tomando. Puedes abrir este panel desde Ventana → Salida.