Henry lopez 11 02

68
Henry lopez 11-02 ¿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

description

what is action scrip??

Transcript of Henry lopez 11 02

Page 1: Henry lopez 11 02

Henry lopez 11-02

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

Page 2: Henry lopez 11 02

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.

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.

Page 3: Henry lopez 11 02

•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

Page 4: Henry lopez 11 02

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

Page 5: Henry lopez 11 02

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.

En la parte derecha tenemos el espacio para colocar nuestro script, el código de ActionScript. El código lo podemos insertar en cualquier fotograma clave, aunque lo más "limpio" es crear una capa para el código.

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

Page 6: Henry lopez 11 02

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.

Page 7: Henry lopez 11 02

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

Page 8: Henry lopez 11 02

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

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. Estos errores también nos aparecerán en el panel Errores de compilador. En este caso, fíjate en el número de línea del error, ya que al hacer doble clic, a veces no va al lugar correcto si el código tiene comentarios.

Page 9: Henry lopez 11 02

El panel Fragmentos de código

En Flash CS5 se ha creado un nuevo panel para ayudarnos a generar el código ActionScript: 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ón Controladores de eventos del panel, podemos introducir este código, y sólo modificar la parte necesaria.

Page 10: Henry lopez 11 02

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.

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

Page 11: Henry lopez 11 02

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

Page 12: Henry lopez 11 02

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 carpeta Elementos de lenguaje → Operadores. Vamos a clasificar los operadores tal y cómo lo hace Flash.

Operadores Aritméticos

Son los operadores empleados en operaciones matemáticas.

Operador

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. valor++

Page 13: Henry lopez 11 02

Suma 1 al valorequivaldría a valor = valor + 1

--Decremento. Resta 1 al valor

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

 

Operadores de Asignación

Asigna el valor de una variable.

Operador

DescripciónEjemplo

=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;

Page 14: Henry lopez 11 02

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;

 

Page 15: Henry lopez 11 02

Operadores de Comparación

Empleados en expresiones condicionales, devuelven un valor lógico, verdadero (TRUE o 1) si la comparación es cierta, o falso (FALSE o 0) si no lo es.

Operador

Descripción Ejemplo

> Mayor que 6 > 5 da verdadero.

< Menor que 6 < 5 da falso.

>=Mayor o igual que

6 >= 5 da verdadero.

<=Menor o igual que

6 >= 6 da verdadero.

== Igual'hola' == 'hola' da verdadero.

!= Distinto'hola' != 'hola' da falso.

Page 16: Henry lopez 11 02

Operadores lógicos.

Evalúan valores lógicos. Normalmente se emplean para comparar dos expresiones con operadores relacionales, y devuelve verdadero o falso.

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)

Page 17: Henry lopez 11 02

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

Esta posibilidad de comprobar si una expresión es igual a otra, nos será muy útil para comprobar muchas cosas durante nuestra película y en función de ellas, hacer unas cosas u otras.

Pondremos un ejemplo; imaginemos que le pedimos a un usuario que introduzca su edad en un campo de texto de nuestra película flash. A ese campo le llamamos edad_usuario. Le hacemos pulsar un

Page 18: Henry lopez 11 02

botón Continuar y en ese momento comprobamos su edad, si tiene menor de edad, le decimos una cosa, de lo contrario, le decimos otra. Bastaría con hacer algo así:

?

1

2

3

4

5

if (edad_usuario<18) {

    dar_mensaje_1();

} else {

    dar_mensaje_2();

}

Aquí lo que estamos diciendo es lo siguiente: "Si edad_usuario es menor a 18, entonces damos el mensaje 1, si no (igual o superior a 18) le damos el mensaje 2.

El significado de 'if' y 'else' lo veremos más adelante, de modo que no nos

Page 19: Henry lopez 11 02

preocupemos por no entender perfectamente el código escrito arriba. También faltaría, lógicamente, crear las funciones "dar_mensaje_1" y "dar_mensaje_2".

Orden de precedencia

Cuando en una expresión se combinan varios operadores, el orden en que se ejecutan puede variar el resultado de la expresión, por eso es muy importante saber en qué orden se ejecutarán. El orden no es aleatorio sino que sigue unas reglas de precedencia al igual que en una operación matemática.

Primero se evalúan los operadores de dentro de los paréntesis.

Cuando dos operadores están al mismo nivel, unos operadores tienen preferencia con respecto a otros, y estos se calculan primero. En el caso de que tengan la misma preferencia, se calcularán de izquierda a derecha.

Page 20: Henry lopez 11 02

En la siguiente tabla, vemos el orden de precedencia, de mayor a menor, se ejecutan primero los de mayor orden.

Orden de precedencia

Negación (!) / Incremento (++) / Decremento (--)

Multiplicación (*) / División (/) / Resto (%)

Suma (+) / Resta (-)

Relacionales mayor - menor (>, <, >=, <=)

Igualdad (==) / Desigualdad (!=)

And lógico (&&)

Or lógico (||)

Asignación (=, +=, -=...)

Otros Elementos del lenguaje

Page 21: Henry lopez 11 02

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

Page 22: Henry lopez 11 02

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

Page 23: Henry lopez 11 02

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

Page 24: Henry lopez 11 02

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" (Sonido) y SoundChanel (Canal de sonido)

Los objetos sonidos no son visuales, y por tanto, no podremos ver como quedan en

Page 25: Henry lopez 11 02

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

Page 26: Henry lopez 11 02

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

Page 27: Henry lopez 11 02

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

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.

Page 28: Henry lopez 11 02

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.

Las acciones son métodos de los objetos (funciones internas a estos), por lo que no

Page 29: Henry lopez 11 02

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

Page 30: Henry lopez 11 02

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

Sintaxis: gotoAndPlay(escena, fotograma):

o escena: Nombre de la escena a la que queremos enviar la cabeza lectora. Debe ir entre comillas dobles.

Page 31: Henry lopez 11 02

o 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 instancia miClip.

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.

Page 32: Henry lopez 11 02

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.

Acciones - Navegador / Red

Estas acciones tienen diversas funciones, describimos las más importantes:

fscommand: Esta acción, es capaz de ejecutar ciertos comandos muy potentes. Lo más cómodo es pasar a Asistente de Script (sino estábamos ya) e insertarla, nos aparecerá una pestaña con los posibles comandos que admite. Sirve para interactuar con la aplicación que reproduce la película, por ejemplo Flash Player o el navegador web, como IE o Firefox. Veamos esos comandos:

Page 33: Henry lopez 11 02

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.

Page 34: Henry lopez 11 02

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.

Todas estas alternativas, comparten modo de uso, veámoslo:

Sintaxis:fscommand(comando, [argumentos])

comando: El comando a ejecutar (fullscreen, allowscale, etc...)

argumentos: En la mayoría de los casos debemos escribir true o false, según queramos desactivar la opción o activarla. Por ejemplo, en el caso del comando quit lo dejaremos vacío.

Page 35: Henry lopez 11 02

Ejemplo:fscommand("fullscreen", "true"); -> Activa la pantalla completa.

navigateToURL() : Esta acción se emplea para abrir el navegador web e ir a la página indicada.

Sintaxis:navigateToURL(url , [ventana]);

url: Dirección web a la que queremos acceder (se abrirá una ventana). Este parámetro es un objeto del tipo URLRequest. Si queremos utilizar una dirección como cadena de texto, podemos hacerlo escribiendo new URLRequest("http://www.direccion.coms").

ventana: Parámetro OPCIONAL. Modo en el que queremos abrir la ventana (en la ventana actual (_self) en otra nueva (_blank) etc...).

Ejemplo: navigateToURL(new

Page 36: Henry lopez 11 02

URLRequest("http://www.aulaclic.es"), "_blank"); --> Abre la web de aulaClic en una ventana nueva.

load(): Este método nos permite cargar nuevas películas Flash o imágenes en nuestra película de forma dinámica (la película se cargará cuando se lo indiquemos, y no antes), en un objeto de la clase Loader, o cargar información en un objeto URLLoader. Para utilizarlo, primero tenemos que crear un objeto de este tipo.

Sintaxis:objetoCargador.load(direccion:URLRequest, [contexto]);

direccion: Dirección absoluta o relativa donde está situada la película SWF o la imagen a cargar. Es un objeto URLRequest, como en el caso de navigateToURL().

contexto: Es un parámetro opcional, en el que se indica algunas propiedades

Page 37: Henry lopez 11 02

más avanzadas que no veremos en este curso.

Ejemplo:var cargadorPeli:Loader = new Loader(); -> Creamos un objeto Loader donde cargar el archivo.cargadorPeli:Loader.load(new URLRequest("archivo.swf"));-> LLamamos al método load() para que cargue el archivo indicado.Nota: Cargamos el archivo en nuestra película, pero no lo mostramos. Para verlo, tenemos que añadir el cargador a la lista de visualización, como ya veremos, por ejemplo con addChild(cargadorPeli);.

Acciones - Condiciones

Estas acciones sirven para controlar la lógica de la película. Se puede decir que nos permiten "hablar" con Flash para indicarle lo que debe hacer ante distintas situaciones. Por ejemplo, ahora que conocemos algunas Acciones, ¿Cómo indicarle a Flash que "si la variable x = 3,

Page 38: Henry lopez 11 02

entonces vaya al fotograma 5, y si no, vaya al fotograma 10"?. Sabemos comparar, sabemos ir a los fotogramas, pero no sabemos decirle a Flash "Si pasa esto, haz una cosa, y si no, haz la otra...". Veamos cómo decírselo:

if ... else: Si partimos de que la traducción literal de if es "si..." y la de else es "si no ...", nos encontramos de repente con todas las herramientas para decirle a Flash: "si (pasa una condición) {haz esto} si no {haz lo otro}"Veamos antes que nada su sintaxis para comprenderlo mejor:

Sintaxis:if (condición) {sentencia_si_se_cumple; } else {sentencias_si_no; }

if: Indica que acción que viene a continuación entre paréntesis es una condición.

condicion: Indica una condición que debe cumplirse, es decir, debe tener

Page 39: Henry lopez 11 02

como resultado true, o lo que es lo mismo, verdadero, o lo que es lo mismo, 1. De ahí la importancia de los operadores de comparación y el valor que devuelven. La condición siempre debe de ir entre paréntesis.

sentencia_si_se_cumple;: Conjunto de acciones que sucederán si la condición se evalúa como verdadera. Estas sentencias deben de ir entre llaves. Podemos poner el bloque de código que queramos: varias líneas, objetos, otros if...

else: Especifica la alternativa si condición se evalúa a falsa. Es optativo. Si no existe, y no se cumple la condición, no se hará nada, pues no lo hemos especificado.

sentencias_si_no; Conjunto de acciones que sucederán si la condición se evalúa como falsa. Deben incluirse entre llaves.

Page 40: Henry lopez 11 02

Ejemplo:

if (x == 2) {miClip.gotoAndPlay(6); } --> Si la variable x vale 2, entonces saltamos al fotograma 6 de miClip, si no, no hacemos nada.

if (y > 7) { stop(); } else {gotoAndPlay(1); } --> si la variable y es mayor que 7, paramos la película, sino, volvemos al fotograma 1.

 

Aunque if es la más utilizada, existen otras estructuras de control, como bucles, que podemos emplear en nuestro código. Puedes verlas en este avanzado .

Ejemplos de ActionScript 3.0

Ejemplos de uso del código ActionScript

Vamos a mostrar los usos más característicos de código ActionScript en los diferentes objetos existentes en Flash

Page 41: Henry lopez 11 02

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:

1. alert()

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

3. Guiones bajos ( _ ) antes del nombre de las propiedades.

4. Variables globales (_global).

Page 42: Henry lopez 11 02

5. _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.

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

Page 43: Henry lopez 11 02

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:

?

1

2

3

4

5

6

7

8

import flash.events.MouseEvent;

  

miBoton.addEventListener(MouseEvent.CLICK, funcionAlHacerClick);

  

function funcionAlHacerClick(event:MouseEvent):void

{

     this.gotoAndPlay(15);

}

Page 44: Henry lopez 11 02

Esta acción provoca que al hacer clic en el botón vayamos directamente al Fotograma número 15 de la película.

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.

Page 45: Henry lopez 11 02

?

1

2

3

4

5

6

7

8

import flash.events.*;

import flash.net.*;

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

var miURL:URLRequest = new URLRequest("http://www.aulaclic.es");

function miFuncion(event:MouseEvent):void

{

    navigateToURL(miURL, "_blank");

}

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

Page 46: Henry lopez 11 02

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

2

3

4

5

6

import flash.events.*;

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

function miFuncion(event:MouseEvent):void

{

    r1.width=350;

}

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.

Page 47: Henry lopez 11 02

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.

Navegación – ActionScript

En este tema veremos los puntos más importantes en los que te podrás apoyar

Page 48: Henry lopez 11 02

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.

Page 49: Henry lopez 11 02

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

Page 50: Henry lopez 11 02

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.

Page 51: Henry lopez 11 02

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

Page 52: Henry lopez 11 02

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

Page 53: Henry lopez 11 02

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.

?

1

2

3

4

5

6

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

Page 54: Henry lopez 11 02

visualización (MovieClips, controles de formulario, imágenes, etc...).