2. ¿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. Profundizar en el conocimiento de este lenguaje
queda por cuenta del lector. Recomendamos seguir la
estupendaAyuda incluida en Flash CS5.
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 Javascript.
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 Javascript o PHP; si estamos
familiarizados con estos lenguajes, la sintaxis y el estilo de ActionScript nos resultarán muy familiares.
Las diferencias entre JavaScript 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.
4. PANEL DE 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).
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.
Revisar sintaxis. Comprobará errores en la sintaxis,
normalmente que hayamos olvidado cerrar paréntesis o
corchetes.
6. El panel Fragmentos de código
Este panel nos resultará muy útil, ya que incluye las funciones
básicas. Por ejemplo, los eventos de botones siempre se
escriben de la misma forma. Desde la
secciónControladores de eventos del panel, podemos
introducir este código, y sólo modificar la parte necesaria.
Pero además accediendo a sus opciones encontramos
opciones muy interesantes:Lo más destacado es que
podemos crear nuestros propios fragmentos de código, con
intruscciones que usemos habitualmente.
Además podemos exportarlas e importarlas a otras
instalaciones del programa.
7. 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.
8. 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.
9. OperadorDescripciónEjemplo=Asigna a la variable de la
izquierda el valor de la derechavariable vale 3;
variable = 5;
variable vale 5;+=Suma con asignación. Le añade a la
variable el valor de la derecha.variable vale 3;
variable += 5;
variable vale 8;-=Resta con asignación. Le resta el valor de
la derecha.variable vale 3;
variable -= 5;
variable vale -2;*=Multiplicación con
asignación.variable vale 3;
variable *= 5;
variable vale 15;/=División con asignaciónvariable vale 15;
variable /= 5;
variable vale 3;
10. OperadorDescripciónEjemplo>Mayor que6 > 5 da
verdadero.<Menor que6 < 5 da falso.>=Mayor o igual
que6 >= 5 da verdadero.<=Menor o igual que6 >= 6 da
verdadero.==Igual'hola' == 'hola' da
verdadero.!=Distinto'hola' != 'hola' da falso.
11. 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.
12. 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 MovieClip.
13. Objeto "DisplayObject" (Objeto de visualización)Esta
clase engloba a todos los objetos que podemos ver en
nuestra película, como los Clips de película y botones, y
define las propiedades y métodos comunes para todos
ellos.
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).
14. 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.
15. 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...
Objeto "Loader" (Cargador) y Objeto "URLLoader"
(Cargador de información)Los objetos Loader nos
permitirán cargar archivos para mostrarlos (imágenes,
archivos swf, etc...) en nuestra película, mientras que los
objetos URLLoader nos permitirán cargar información de
archivos (archivos de texto, XML, páginas web...).
16. Las acciones - métodos comunes
Flash CS5 llama acciones a lo referente al código ActionScript, lo que
nos permite dar comportamientos a los objetos.
Estas acciones son funciones predefinidas de ActionScript, es decir:
Flash CS5 las crea, y nosotros sólo tenemos que usarlas de la manera
que se nos indica. No tenemos que definir las funciones ni nada por el
estilo, ni siquiera necesitamos saber cómo están hechas... Lo
importante es que están listas para usar, lo que facilita el uso de este
lenguaje de programación y sobre todo, haga muy rápido comenzar a
programar.
Por supuesto, cuando tengamos más conocimientos, veremos que no es
difícil completar estas acciones ya creadas con las nuestras propias.
Explicaremos las Acciones más importantes, y a medida que avancemos
en el curso, añadiremos algunas más. Para una referencia más
completa, recomendamos mirar la ayuda del programa.
17. Acciones - Control de película
Estas acciones se emplean, como su nombre indica, para
controlar el flujo de nuestra película, esto es, para indicar a Flash
en todo momento qué fotograma tiene que mostrar, cuándo
tiene que parar, dónde seguir etc...
Estas acciones son métodos de la clase MovieClip. Podemos
aplicarlas a cualquier MovieClip de nuestra película, siguiendo el
siguiente formato:nombreMovieClip.accion();. Si escribimos la
función directamente, es decir, si no indicamos el
objeto, estamos haciendo referencia a la película general.
Veamos las más importantes para entenderlas mejor:
gotoAndPlay: Esta acción será, probablemente la que más
usemos durante la realización de nuestras películas. La acción
que realiza consiste en mover la cabeza lectora al fotograma que
le indiquemos. La cabeza lectora es lo que determina qué
fotograma de nuestra película se está reproduciendo en cada
momento. Si, por ejemplo, lo movemos del fotograma 1 al 25, lo
que veremos instantáneamente será el fotograma 25 y la película
continuará reproduciéndose a partir de ahí.
18. gotoAndPlay: Esta acción será, probablemente la que más usemos durante la realización
de nuestras películas. La acción que realiza consiste en mover la cabeza lectora al
fotograma que le indiquemos. La cabeza lectora es lo que determina qué fotograma de
nuestra película se está reproduciendo en cada momento. Si, por ejemplo, lo movemos
del fotograma 1 al 25, lo que veremos instantáneamente será el fotograma 25 y la película
continuará reproduciéndose a partir de ahí.Sintaxis:
gotoAndPlay(escena, fotograma):
escena: Nombre de la escena a la que queremos enviar la cabeza lectora. Debe ir entre
comillas dobles.
fotograma: Número o nombre del fotograma al que queremos enviar la cabeza lectora. Si es
un nombre (una etiqueta), debe ir entre comillas dobles, si es un número, no.
Ejemplo:
miClip.gotoAndPlay("Escena2", 7); → Esta acción lleva la cabeza lectora al fotograma 7 de
la escena llamada "Escena2" del MovieClip con el nombre de instanciamiClip.play: Da
comienzo a la reproducción de la película o la continúa desde el punto detenido.Sintaxis:
play();
No tiene Parámetros.Ejemplo:
this.play(); → Inicia la reproducción del objeto actual.stop: Detiene la reproducción de la
película. Se puede usar en un fotograma, cuando queramos detenernos en él (porque es
un menú, por ejemplo), en un botón, (para que detenga la película), etc..Sintaxis:
stop();
No tiene Parámetros.
19. PROPIEDADES DE LOS OBJETOS DE
VISUALIZACION
Los Métodos y Propiedades suelen ser específicos de cada objeto, y su
estudio requeriría un nuevo curso completo, (recomendamos consultar
la ayuda incorporada en el Flash CS5 cuando surjan dudas), pero hay
bastantes propiedades de los objetos que son comunes a muchos de
ellos. Vamos a ver las más utilizadas, que afectan a los objetos de
visualización, que son con los que trabajaremos habitualmente.
Hay que entender que las clases se heredan. Es decir, una clase
genérica, tiene subclases más concretas. Las sublaceses, tienen todos
los métodos y propiedades de la clase de la que heredan, y además
agregan sus propios métodos y funciones.
Los objetos que se visualizan en Flash, pertenecen a la
clase DisplayObject. A su vez, los clips de película pertenecen a la
clase MovieClip, que es una subclase de la anterior. Por tanto, todos
los MovieClip tendrán los métodos y propiedades de DisplayObject,
pero no al revés.
20. EJEMPLOS DE ACTION SCRIPIT 3,0
Vamos a mostrar los usos más característicos de código ActionScript en los
diferentes objetos existentes en Flash CS5. De este modo lo comprenderemos
mejor y porqué no, nos ahorraremos trabajo al tener ya hechos aquí muchos de
los códigos que usaremos en nuestras películas. Mostraremos el código y a
continuación, una explicación del mismo.
Algunas cosas que debemos de tener en cuenta si estamos familiarizados con la
programación en ActionScript 2, es que con ActionScript 3.0 no podemos
utilizar:
alert()
La forma de tratar eventos, como on (event){}, onClipEvent(event){},
object.onEvent = function(){} , addListener , etc. La forma de tratarlos ahora es
agregando un escuchador al objeto, con el método addEventListener,
indicando el evento, y una única función de escucha.
Guiones bajos ( _ ) antes del nombre de las propiedades.
Variables globales (_global).
_root y _parent para acceder a elementos superiores.
21. Código ActionScript para botones
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.
Para tener el código organizado, es mejor crear una nueva
capa e insertarlo ahí.
22. Código ActionScript para Clips de
película
Los Clips de Película (objeto MovieClip) son películas
dentro de películas. Pueden tener código AS dentro de
sí mismos, aunque suele ser más común que algún otro
código externo (situado en fotogramas) les haga
referencia. Para que el código que contengan los clips
de película sea válido, éstos deben tener algún evento
de clip asociado (Load, KeyDown etc) que determine
cuándo se ejecutará este código (al cargarse el clip, al
pulsar alguna tecla ...)
23. Sonidos con ActionScript 3,0
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.
Ahora que ya sabemos controlar los sonidos mediante
ActionScript, veamos un ejemplo que reúne todo lo visto
anteriormente.
En este ejemplo:
- Tenemos un único fotograma con 3 botones. En este
fotograma tenemos insertado el Código 1.
- Los 3 botones tienen distintas funcionalidades:
- En el botón rojo, está insertado el Código 2
- En el botón azul, está insertado el Código 3
- En el botón verde, está insertado el Código 4
24. 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.
25. Creación de un cargador o
preloader
Vamos a analizar el código de un cargador o preloader para acabar de
afianzar nuestros conocimientos de ActionScript:
Los cargadores o preloaders sólo son necesarios cuando las películas
adquieren un tamaño considerable y resulta inviable visionar la película
sin tenerla toda cargada (porque se atasca, aparecen partes incompletas
etc...). Vamos a suponer pues, que tenemos una película con 150
fotogramas. Los 3 primeros los reservaremos para crear nuestro
cargador. En el Fotograma 4 comienza la película.
Nota: Junto a cada línea hemos insertado comentarios (texto entre los
símbolos /* y */) que son líneas que Flash reconoce como tales y que no
tiene en cuenta a la hora de ejecutar el código (es como si no
existieran). Se usan para clarificar y explicar el código que escribamos y
para eso lo usaremos a continuación. Les cambiaremos el color para
aclarar que es un comentario. Evidentemente no son necesarios en el
código que finalmente insertemos en nuestra película.
26. 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. 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.