INTRODUCCIÓN A

ACTIONSCRIPT 3.0 (I)Ana maría morales cortes.

11-01

  introducción:. ¿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.

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

Características:

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.

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.

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.

Panel de control se divide en dos partes: panel de acciones. El Panel Acciones se divide en 2 partes, a la izquierda

tenemos una ayuda facilitada por Flash que nos da acceso de un modo rápido y muy cómodo a todas las acciones, objetos, propiedades etc... que Flash tiene predefinidos. Estos elementos están divididos en carpetas, que contienen a su vez más carpetas clasificando de un modo eficaz todo lo que Flash pone a nuestra disposición. Para insertarlos en nuestro script bastará con un doble clic sobre el elemento elegido.

Herram

ientas

de

ayudas

:

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.

Aunque la sintaxis sea correcta, puede que al probar nuestra película se sigan produciendo errores (errores de compilación). Por ejemplo porque accedemos a una propiedad de un objeto que no existe, o nos hemos equivocado al escribir el nombre de una variable.

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

Lo más destacado es que podemos crear nuestros propios fragmentos de código, con instrucciones que usemos habitualmente.

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 prog

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

ramación).

Operadores de Comparación

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.

Operadores AritméticosOperador Descripción Ejemplo+ Suma 5 + 5 = 10- Resta 5 - 5 = 0* Multiplicación 5 * 5 = 25/ División 5 / 5 = 1% Resto o Módulo 10%8 = 2

++ Incremento. Suma 1 al valor

valor++ equivaldría a valor = valor + 1

-- Decremento. Resta 1 al valor

valor-- equivaldría a valor = valor - 1

Operador de asignatura:Operador Descripción Ejemplo

=

Asigna a la variable de la izquierda el valor de la derecha

variable 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ón

variable vale 15;variable /= 5;variable vale 3;

 

 Operadores lógicos.Operador Descripción Ejemplo

&&

And (Y) Devuelve verdadero si los dos valores son verdaderos

(6 > 5) && (1==1) devuelve verdadero(6 > 5) && (1==0) devuelve falso

||

Or (O) Devuelve verdadero si alguno de los valores es verdadero

(6 > 5) || (1==1) devuelve verdadero(6 > 5) || (1==0) devuelve verdadero(6 > 6) || (1==0) devuelve falso

!

Not (Negado) Devuelve verdadero si el valor era falso, y al revés.

!(9 > 2) devuelve falso!(9 ==9) devuelve falso

Orden de precedencia

Orden de precedenciaNegación (!) / Incremento (++) / Decremento (--)Multiplicación (*) / División (/) / Resto (%)Suma (+) / Resta (-)Relacionales mayor - menor (>, <, >=, <=)Igualdad (==) / Desigualdad (!=)And lógico (&&)Or lógico (||)Asignación (=, +=, -=...)

 Los objetos

 Esto es, son representantes de una clase ya definida. Cada objeto tiene las propiedades y métodos propios de la clase, y normalmente 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. son independientes unos de otros.

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 estado crear una apariencia para cada uno.

Objeto "MovieClip" (Clip de Película)

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.

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"

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.

 Objeto "Mouse" (Ratón)

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.

Objeto "String" (Cadena) 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

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...).

 Las acciones - métodos comunes 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.

Las acciones son métodos de los objetos (funciones internas a estos), por lo que no todas están disponibles para todos los objetos.

Definiremos las acciones escribiendo su cabecera (nombre + parámetros con un nombre genérico) para después explicar qué es cada parámetro.

 Acciones - Control de película 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.

 Acciones - Navegador / Red fullscreen (true o false): Si se activa pone nuestra película a pantalla

completa. Muy útil para presentaciones en CD-Rom, por ejemplo. allowscale (true o false): Controla el redimensionamiento de los

objetos insertados en la película cuando el usuario estira los bordes de la misma (o de la página web en la que se encuentre) ¿Queremos mantener las proporciones? Este comando nos permite controlarlo.

showmenu (true o false): Si has visto el menú que aparece al pulsar el botón derecho del ratón sobre una película Flash, seguro que has pensado en hacerlo desaparecer ... puede que no interese que los usuarios puedan moverse a sus anchas por nuestra película. Ejecutando esta sentencia del modo adecuado (false), podremos ocultarlo.

trepallkeys (true o false): Sirve para detectar las pulsaciones de todas las teclas durante la reproducción de nuestras películas.

exec (ruta de la aplicación): Ejecuta una aplicación desde el reproductor.

quit (ninguno): Cierra el reproductor Flash.

 Propiedades de los objetos de visualización 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.

ejemplos

Ejemplos de uso del código ActionScript

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.

. Código ActionScript para botones 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.

El objeto MATH

x = Math.random();

x = Math.round(4.3);

x = Math.max(5 , 2);

 Creación de un cargador o preloader 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.

navegaci

ón

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í.

 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.

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.

Controladores de la línea de tiempo

 Las escenas

 Los Movie Clips

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

 Navegación - ActionScript (V) Event.ADDED ("added") - Se produce cuando el movieclip se

añade a la lista de visualización de un contenedor (contenedor.addChild(miClip)).

Event.ENTER_FRAME ("enterFrame") - Se produce cuando la cabeza lectora entra en un fotograma, pero también se produce constantemente si sólo hay un fotograma o si la reproducción está parada. En este caso, depende de la velocidad del MovieClip. Por ejemplo, un MovieClip que se reproduce a 24 FPS produce este evento 24 veces por segundo. Recuerda este evento porque es muy útil.

Event.EXIT_FRAME ("exitFrame") - Igual que el anterior, pero se produce al salir del fotograma.

Event.REMOVED ("removed") - Se produce cuando el MovieClip se quita de la lista de visualización de un contenedor (contenedor.removeChild(miClip)).

 

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

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. 

 

 Las funciones

Como habrás visto en los ejemplos anteriores, una función es un bloque de código que podemos utilizar en cualquier parte del archivo, siempre que haya sido definida en el mismo o en un fotograma anterior. Si definimos una función dentro de otra tendrá un ámbito local, como ocurría con las variables.

Contenedores y listas de visualización La lista de visualización es cómo están ordenados los objetos dentro

del contenedor, y establece el orden de apilamiento de los objetos.  Los contenedores: En nuestra película podemos tener cuatro tipos de contenedores: La escena (stage). Es el contenedor general de nuestra película. Todo

lo que se ve, está dentro de la escena. Loader. Nos permite cargar un archivo externo en él. Lo veremos en el

siguiente apartado. MovieClip. Aunque normalmente no lo tratamos como tal, un

MovieClip contiene un archivo SWF con una línea de tiempo propia. Por ejemplo, dentro de él podemos acceder a los distintos símbolos que lo forman.

Sprite. Es como una carpeta, a la que podemos ir añadiendo y quitando objetos. Podemos crear tantos sprites como queramos.

El que más utilizaremos como contenedor será el Sprite, aunque en muchos casos lo hagamos directamente sobre la escena.