Este documento introduce ActionScript 3.0, el lenguaje de programación utilizado en Flash. Explica que ActionScript nos da control total sobre una película Flash y permite realizar interacciones. Incluye ejemplos básicos de código ActionScript para botones, como ir a un fotograma específico o abrir una página web al hacer clic. También cubre conceptos como importar clases, agregar escuchadores de eventos a objetos y modificar propiedades con ActionScript.
2. INTRODUCCIÓN A ACTIONSCRIPT 3.0 (I)
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.
Todo lo referente a este curso hace referencia a la versión
3 de ActionScript. Si buscas información sobre ActionScript
2.0, te recomendamos el curso de Flash CS3, en el que
resolvemos los mismos ejemplos, pero con AS 2.0.
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, 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.
Vamos a ver muchas de estas funciones en este curso, pero antes recomendamos tener
claros ciertos conceptos relacionados con la programación. Para ello, recomendamos
echar un vistazo a nuestro tema básico .
4. EJEMPLOS DE ACTIONSCRIPT 3.0 (I)
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 (evento){},
onClipEvent(event){}, object.onEvent = función(){} ,
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.
Muchas de las funciones que explicaremos se pueden
insertar total o parcialmente desde el panel Fragmentos de
código.
5. 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í.
Veamos algunos de ellos:
6. 1 import flash.events.MouseEvent;
2 miBoton.addEventListener(MouseEvent.CLICK,
funcionAlHacerClick);
3
4
5function
funcionAlHacerClick(event:MouseEvent):void
6{
7 this.gotoAndPlay(15);
8}
Esta acción provoca que al hacer clic en el botón
vayamos directamente al Fotograma número 15 de
la película.
7. FOTOGRAMA N° 1 :FOTOGRAMA 15
Utiliza la sentencia import para especificar el
nombre completo de la clase, de modo que el
compilador de ActionScript sepa dónde encontrarlo.
En este momento queremos importar la clase
MouseEvent, le especificamos la clase de flash que
debe importar:
import flash.events.MouseEvent;
La segunda línea indicamos qué tiene que suceder
(el evento) para que se realice la función que
indicamos "funcionAlHacerClick".
En la tercera línea ya indicamos nuestra función y
dentro escribimos lo que queremos que pase al
hacer clic en el botón.
8. 1 import flash.events.*;
2 import flash.net.*;
3 miBoton.addEventListener(MouseEvent.CLICK,
miFuncion);
4var miURL:URLRequest = new
URLRequest("http://www.aulaclic.es");
5 function miFuncion(event:MouseEvent):void
6{
7 navigateToURL(miURL, "_blank");
8}
Esta acción provoca que al pulsar un botón se abra una
nueva página web en nuestro navegador por defecto y
nos muestre la página www.aulaclic.es
9. ABRIENDO EL NAVEGADOR ..
La primera línea, la segunda y la tercera tienen la misma
función que en el caso anterior
La cuarta línea creamos una variable nueva para pasarle la
web a la cual queremos que nos lleve al pulsar el botón.
1 import flash.events.*;
2 miBoton.addEventListener(MouseEvent.CLICK,
miFuncion);
3 function miFuncion(event:MouseEvent):void
4{
5 r1.width=350;
6}
Esta acción provoca que al pulsar un botón se modifiquen las
propiedades del objeto cuyo nombre de instancia aparece
delante de la propiedad.
10. CAMBIANDO EL TAMAÑO
La primera línea y la segunda tienen la misma
función que en el caso anterior
En la tercera línea definimos la función y podemos
ver la propiedad .width (anchura), vemos que hay
un operador de asignación ( = ), luego deducimos
que vamos a asignar una anchura determinada a
un objeto. ¿Qué anchura? Pues 350, que es la
cantidad que aparece en la parte derecha de la
expresión. ¿Y a qué objeto? Al que va delante del
".", o lo que es lo mismo, al afectado por la
propiedad.
Por tanto, al pulsar el botón vamos a modificar la
anchura del objeto r1, que pasará a ser de 350 px.
11. NAVEGACIÓN - ACTIONSCRIPT (I)
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í.
12. A LO LARGO DEL TEMA UTILIZAREMOS ESTE
EJEMPLO PARA ILUSTRAR LA TEORÍA DE FORMA
GUIADA.
13. 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.
14. 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.
15. LUEGO, CREAMOS OTRA CAPA PARA PODER
INSERTAR LAS ACCIONES QUE NECESITARÁN
NUESTROS BOTONES.
.
É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.
16. 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.
miBoton.addEventListener(MouseEvent.CLICK, miFuncion);
function miFuncion(e:MouseEvent):void
{
//código de la función
}
Puedes ver los todos los eventos de ratón en este avanzado . Los
eventos de ratón no sólo afectan a botones, pueden ser capturados
por cualquier objeto de visualización (MovieClips, controles de
formulario, imágenes, etc...).