2. 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
3. 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,
4. 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
5. 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.
6. 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
7. 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
8. 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.
9. 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.
10. 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
11. 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
12. 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:
13. 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.
14. 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.
15. 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
16. 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.
17. 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
18. 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.
19. 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.
20. 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.
21. 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:
22. 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:
23. 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
24. 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