ACTION SCRIPT 3.0. Indice

Transcripción

1 ACTION SCRIPT 3.0 Indice 1. Introducción 2. Propiedades, Métodos y Eventos 3. Variables, tipos de datos, operadores 4. Funciones 5. Estructuras de control: if y switch 6. Gestión de eventos 7. Clase Date 8. Control de la línea de tiempo 9. Control de clip de película 10. URL Request 11. Display List o Lista de visualización 12. Cargar archivos externos / Loader 13. Vídeo 14. Sonido

2 1. Introducción ActionScript es un lenguaje de programación orientado a objetos (OOP), utilizado especialmente en aplicaciones web animadas realizadas en el entorno Adobe Flash. Permite generar aplicaciones web con animación e interactividad. 1.1 Programacion orientada a objetos ActionScript es una programación orientada a objetos ya que mediante el código podemos controlar el comportamiento de los objetos creados en Flash, ya sea generados desde la interfaz o desde el código. Desde la interfaz podemos modificar el aspecto, comportamiento y asignar eventos a las instancias de clips de película, botones, campos de texto. También podemos controlar la línea de tiempo (frames, escenas) Podemos crear objetos directamente mediante código y establecer sus propiedades y comportamientos. Estos objetos son instancias de las clases. 1.2 Funcionamiento básico del código Un programa informático es simplemente una lista de instrucciones paso a paso que se dan al equipo para que las lleve a cabo una a una. Cada una de las instrucciones se denomina sentencia. En ActionScript cada sentencia finaliza con un punto y coma. clip.play();

3 1.3 Comentarios en el código Podemos insertar comentarios en el código, sin que este sea interpretado como tal. Hay dos maneras de hacerlo: Precediendo el texto de dos barras // comentario Cerrando el texto entre barra y asterisco /*comentario*/ 1.4 Trace El metodo trace nos sirve para mostrar la información que queremos comprobar al ejecutar la película. Los datos se ven en el panel Salida, y solo los podemos ver si tenemos abierta la pelicula en Flash. Trace(clip.x) En el panel de salida indicará el valor numérico de la posición del clip de película llamado clip. 2. Propiedades, Métodos y Eventos En la programación orientada a objetos de ActionScript, hay tres tipos de características que puede contener cualquier clase, o cualquier objeto: * Propiedades * Métodos

4 * Eventos Estos elementos se utilizan conjuntamente para administrar los elementos de datos que utiliza el programa y para decidir qué acciones deben llevarse a cabo y en qué orden. 2.1 Propiedades Cada objeto tiene sus propiedades específicas. Un objeto Song (canción) puede tener propiedades denominadas artist (artista) y title (título); la clase MovieClip tiene propiedades como rotation (rotación), x, width (anchura) y alpha (alfa). Esta línea de código mueve el objeto MovieClip denominado clip a la coordenada x = 100 píxeles. x es una propiedad del movie clip. clip.x = 100; Este código altera la escala horizontal del objeto MovieClip square para hacerlo 1,5 veces más ancho: square.scalex = 1.5; Observa la estructura común: se utiliza una variable (square, triangle) como nombre del objeto, seguida de un punto (. ) y del nombre de la propiedad (x, rotation, scalex ). El punto, denominado operador de punto, se utiliza para indicar el acceso a uno de los elementos secundarios de un objeto. El conjunto de la estructura (nombre de variable-punto-nombre de propiedad) se utiliza como una sola variable, como un nombre de un solo valor en la memoria del equipo. 2.2 Métodos Un método es una acción que puede llevar a cabo un objeto. Por ejemplo, si se ha creado un símbolo de clip de película en Flash con varios fotogramas clave y animación en la línea de tiempo, ese clip de película podrá reproducirse, detenerse o recibir

5 instrucciones para mover la cabeza lectora a un determinado fotograma. Este código indica al objeto MovieClip denominado "peli" que inicie su reproducción: peli.play(); Esta línea hace que el objeto MovieClip denominado "peli" deje de reproducirse (la cabeza lectora se detiene como si se hiciera una pausa en un vídeo): peli.stop(); Este código hace que un objeto MovieClip denominado "peli" mueva su cabeza lectora al fotograma 1 y deje de reproducirse (como si se rebobinara un vídeo): peli.gotoandstop(1); Como puede verse, para acceder a los métodos, se debe escribir el nombre del objeto (una variable), un punto y el nombre del método seguido de un paréntesis, siguiendo la misma estructura que para las propiedades. El paréntesis es una forma de indicar que se está llamando al método, es decir, indicando al objeto que realice esa acción. Algunos valores (o variables) se incluyen dentro del paréntesis para pasar información adicional necesaria para llevar a cabo la acción. Estos valores se denominan parámetros del método. Por ejemplo, el método gotoandstop() necesita saber cuál es el fotograma al que debe dirigirse, de modo que requiere un solo parámetro en el paréntesis. Otros métodos como play() y stop() no requieren información adicional porque son descriptivos por sí mismos. Sin embargo, también se escriben con paréntesis. 2.3 Eventos

6 Se ha descrito un programa informático como una serie de instrucciones que el ordenador lleva a cabo paso a paso. Algunos programas informáticos sencillos no son más que eso: unos cuantos pasos que el ordenador ejecuta, tras los cuales finaliza el programa. Sin embargo, los programas de ActionScript se han diseñado para continuar ejecutándose, esperando los datos introducidos por el usuario u otras acciones. Los eventos son los mecanismos que determinan qué instrucciones lleva a cabo el ordenador y cuándo las realiza. Básicamente, los eventos son acciones que ActionScript conoce y a las que puede responder. Muchos eventos se relacionan con la interacción del usuario (hacer clic en un botón, presionar una tecla del teclado, etc.) pero también existen otros tipos de eventos. Por ejemplo, si se usa ActionScript para cargar una imagen externa, existe un evento que puede indicar al usuario cuándo finaliza la carga de la imagen. En esencia, cuando se ejecuta un programa de ActionScript, Adobe Flash Player simplemente espera a que ocurran determinadas acciones y, cuando suceden, ejecuta el código ActionScript que se haya especificado para tales eventos. Ejemplos de eventos: Eventos de interacción del usuario, es decir, asociados al Mouse: Presionar (CLICK): Se produce al hacer clic con el ratón sobre el botón, mientras el puntero se encuentra sobre el botón. Equivalente a MOUSE_DOWN. Liberar (MOUSE_UP): Se produce al soltar el botón del ratón mientras el puntero se encuentra sobre la instancia de botón. Situar sobre objeto (MOUSE_OVER): Se produce al desplazar el puntero del ratón sobre el botón.

7 Situar fuera de objeto (MOUSE_OUT): Se produce al desplazar el puntero del ratón fuera del botón. Mover el ratón (MOUSE_MOVE) Se produce al mover el ratón dentro de un área especificada anteriormente. Puede ser el escenario (Stage) o un área restringida (por ejemplo, un clip de película) Otros eventos no relacionados con el Mouse son: ENTER_FRAME, COMPLETE, ON_LOAD 3. Variables 3.1 Definición de variable: Una variable es una forma de almacenar información en la memoria del ordenador cuyo contenido es susceptible de variar a lo largo de la ejecución de la película Flash. Las variables nos sirven para almacenar datos. Una variable es un nombre al cual le asignamos un valor. Este valor puede variar en función del código que hayamos elaborado. Para almacenar las variables y diferenciarlas unas de otras les damos un nombre, que se llama identificador. Este identificador hace que una variable sea única y no podamos confundirla con las otras. La estructura de una variable es variable = valor. Variable es el nombre único, valor puede ser cualquier valor. Empleamos la asignación mediante el signo = para declarar variables.

8 Este signo aquí no expresa igualdad, sino asignación. Guardamos o le damos a la variable dicho valor. La declaración de variables debe hacerse en las primeras líneas de código. Requisitos del identificador: Emplear números y letras del alfabeto inglés No pueden empezar por un número No pueden contener espacios Se distinguen las mayúsculas y minúsculas nombreusuario, nombre_usuario, usuario1 3.2 Tipos de datos Las variables pueden almacenar tres tipos de datos: - Valores numéricos: en este caso el valor es numérico. Se pueden realizar operaciones matemáticas con estos valores. edad= 18; - Cadenas de texto o "string". Siempre irán entre comillas. En este caso el valor es un string o cadena de caracteres. Se interpreta como un texto.

9 nombre="paloma"; Crédito 3 Realización Multimedia edad="18"; - Valores boleanos : true / false espanyol= true; 3.3 Tipos de datos: int, Number, String, Boolean Podemos declarar una variable del siguiente modo: var edad:int= 23; > int nos indica que esta variable almacena un número entero var nombreusuario:string="pepe Perez"; > string indica que esta variable almacena una cadena de texto var pi:number= ; > Number indica que esta variable almacena un número entero o fracción (decimales) var activo:boolean= true; > Boolean indica que esta variable almacena un valor Booleano de true o false 3.4 Constantes Las constantes, al igual que las variables, permiten el almacenamiento de valores en la memoria del ordenador. Sin embargo, a diferencia de las variables, estos valores no pueden cambiar durante la ejecución del programa. Por eso se llaman constantes. const Max_Vidas=3;

10 3.5 Operaciones con variables Podemos realizar operaciones matemáticas con las variables que almacenan valores numéricos. Los operadores matemáticos nos sirven para realizar operaciones matemáticas como sumar, restar, multiplicar y dividir.

11 Las operaciones de incremento y decremento nos sirven para aumentar o disminuir progresivamente un valor.

12 También podemos realizar operaciones con variables que almacenan cadenas de caracteres o String.

13 Los operadores lógicos establecen relaciones de igualdad o comparación. Nos servirán para las estructuras de control. 4. Funciones Las funciones son un conjunto de sentencias o instrucciones agrupadas. Cada vez que llamemos a una función, se ejecutarán todas las acciones que están incluidas en dicha función. Para ejecutar una función, debemos definirla previamente. Es lo que se llama declarar una función.

14 Para declarar una funcion indicamos su nombre, precedido de la palabra function. De esta manera establecemos que el posterior código es una función. Despues escribimos las sentencias o pasos de la función entre llaves. function reproducir_clip(evt.mouseevent) Clip.x=4; Clip.y=30; clip.play(); } 5. Estructuras de control Las instrucciones se ejecutan por orden secuencial siguiendo las líneas de código. Este orden se llama flujo. Podemos cambiar el orden del flujo con estructuras de control. 5.1 Estructura condicional sencilla La condición if Sirve para comprobar un valor o condición. Si se cumple esta condición, se ejecutarán las instrucciones. Si no se cumple, no se llevarán a cabo. La estructura es la siguiente: si(condicion) { instrucciones; } En el siguiente código ocultamos un clip sólo en el caso de éste que sea visible.

15 if(clip.visible=true) { clip.visible=false; } 5.2 Estructura condicional doble if, else En este caso podemos establecer dos acciones diferentes. En caso de que se cumpla la condición se ejecutaran unas acciones, y en caso de que no, otras. si (condicion) { instrucciones si se cumple la condición } sino { instrucciones si no se cumple la condición } En el siguiente código hacemos que un clip varíe su posición x en el escenario con un incremento, pero lo limitamos en la posición x = 300. Si se cumple la condición de que el clip esté en la posición x de 300 píxeles, el clip se situa en posición x=0. if (clip.x<=0) ) { clip.x++; }else) { clip.x=0; } 5.3 Estructuras de control SWITCH Para ActionScript 3 existe un condicional muy utilizado en varios lenguajes de programación, y es precisamente el condicional SWITCH. Permite realizar distintas acciones dependiendo del resultado que nos arroje la condición que hayamos establecido.

16 Utilización del condicional SWITCH Para utilizar este condicional debemos empezar por escribir en una nueva línea la palabra clave switch. Posteriormente, entre paréntesis, debemos poner la condición de la cual queremos conocer el resultado, la cual puede ser una variable, una operación, etc. Abrimos las llaves y ponemos cada uno de los casos con la palabra case, seguido de dos puntos, y las acciones que queremos realizar. Los casos deben estar separados por la palabra clave break para que estos no se ejecuten todos de forma contínua. switch (condición) { case a://acciones que se ejecutan si el resultado de la condición es a break; case b://acciones que se ejecutan si el resultado de la condición es b break; } Utilización de DEFAULT default funciona en el condicional switch como else funciona en el condicional if. Define lo que hará el condicional switch por defecto si no se cumple una de las condiciones mencionadas. No es un elemento requerido, es decir, podemos no utilizarlo, pero es de gran utilidad. Supongamos que en el ejemplo anterior queremos que si no se cumple ninguna condición, es decir, si el resultado no es 1, ni 2, ni 3 ni 4, realice otra acción sin importar que número sea. Para esto nos sirve DEFAULT:

17 switch (mivariable){ case 1: trace("mivariable es 1"); break; case 2: trace("mivariable es 2"); break; case 3:trace("miVariable es 3"); break; case 4: trace("mivariable es 4"); break; default: trace("mivariable es OTRO NÚMERO"); break; } Crédito 3 Realización Multimedia Cuando el número almacenado en la variable sea diferente a los definidos en cada condición, ejecutará las acciones estipuladas en default. Múltiples casos con las mismas acciones Si queremos el mismo resultado en distintos casos, podemos agrupar casos para no escribir las mismas acciones en cada uno. Esto lo hacemos escribiendo los casos en líneas seguidas sin utilizar break. Al final, ponemos las acciones. switch(letra) {case "a": case "b": trace("es a o b"); break; case "c": case "d": case "e": trace("es c, d o e"); break; default:trace("no es una opción válida"); break;}

18 6. Gestion de eventos Los eventos se gestionan empleando el método addeventlistener. Mediante este método detectamos el evento en el objeto al que se ha añadido el detector. Cuando se detecta un evento, se ejecuta una función con aquellos pasos que hayamos definido en ella. Ejemplo de evento en un botón: Asignamos un detector de eventos a una instancia en el escenario. En los parámetros del método addeventlistener indicamos el tipo de evento de Mouse: CLICK, MOUSE_MOVE, MOUSE_OVER, MOUSE_OUT, MOUSE_MOVE Después definimos la función que se ejecutará cuando ocurra el evento. Boton.addEventListener(MouseEvent.CLICK, haceralgo) Function haceralgo(evt:mouseevent):void{ pasos; } 6.1 Evento Enter_Frame El evento Enter_Frame se asigna a la escena principal o a un MovieClip. Nos sirve para detectar el evento de leer un frame de la línea de tiempo. La función asociada a este evento se ejecutará cada vez que la cabeza lectora de la línea de tiempo entre en un nuevo frame. Nos sirve para realizar acciones que se ejecutarán repetidamente, en un número de frames por segundo.

19 La funcion haceralgo se ejecutara 12 veces por segundo si nuestra película esta a 12 fps. El evento lo asociamos al Stage, que es el escenario principal. stage.addeventlistener(event.enter_frame, haceralgo) Function haceralgo(evt:event):void{ pasos; } 7. Clase Date En muchas ocasiones nos encontramos con la necesidad de utilizar fechas, horas y segmentos de tiempo dentro de la programación en ActionScript 3. Para ello empleamos la clase Date. 7.1 La clase Date La clase Date nos permite conocer fácilmente datos como Fecha y Hora del momento en el que se ejecuta una acción, o en que se utiliza una aplicación. La clase Date tiene como punto de comparación de fechas las 00:00 del 1 de enero de 1970, y por lo tanto, cualquier acción con dicha clase tiene esta fecha como punto de partida. Para conocer su formato, podemos escribir el siguiente código: var fecha:date=new Date(); trace(fecha); En el panel de salida, nos devolverá fecha y hora actuales en el siguiente formato (en Inglés): Día de la semana (Sun-Sat) / Mes(Jan-Dec) / Día del mes (1-31) / Hora actual (hh:mm:ss) / Zona Horaria (GMT) / Año (AAAA) Wed Nov 18 14:57:40 GMT

20 7.2 Métodos la Clase date La clase Date nos ofrece la información de fecha y hora mediante los siguientes métodos:.getdate() Devuelve el día del mes 1-31.getDay() Devuelve el día de la semana, 0 = domingo, 6=Sábado.getFullYear() Devuelve el año en 4 digitos (1978).getHours() Devuelve la hora actual 0-23.getMilliseconds() Devuelve los milisegundos actuales getMinutes() Devuelve los minutos actuales 0-59.getMonth() Devuelve el mes actual 0 = Enero 11=Diciembre.getSeconds() Devuelve los segundos actuales0-59.gettime() Devuelve los milisegundos transcurridos desde el 1 de enero de 1970.getTimezoneOffset() Devuelve la diferencia en minutos entre la hora actual y la hora universal UTC 8. Control de la línea de tiempo Para controlar la línea de tiempo podemos emplear los siguientes metodos: Play() Stop() GotoandPlay(1) el parámetro indica el número de fotograma GotoandStop(2) el parámetrio indica el número de fotograma

21 Si queremos controlar la línea de tiempo de un movieclip, debemos indicar su nombre de instancia: clip.play(); clip.stop(); clip.gotoandplay(); clip.gotoandstop(); 9. Control de un clip de película Modificamos mediante código las propiedades de un clip que hemos creado previamente en el escenario o bien dinámicamente desde la biblioteca. Propiedades de un clip de película:.x > posición x del clip en el escenario. Valor numérico en píxeles.y > posición y del clip en el escenario. Valor numérico en píxeles.witdh > ancho del clip. Valor numérico en píxeles.height > alto del clip. Valor numérico en píxeles.scalex > escala del clip en x. Valor numérico de 0 a 1..scaleY > escala del clip en y. Valor numérico de 0 a 1..rotation > angulo de rotación del clip. Valor numérico en grados de 0 a 360.alpha > transparencia del clip. Valor numérico de 0 a 1. 0 es transparencia total, 1 opacidad total..visible > establece si el clip es visible en el escenario o está oculto. Valor booleano: true indica que es visible, false que esta oculto.

22 Importante: la instancia debe tener un nombre de instancia que indicaremos en el panel Propiedades Por ejemplo: Tengo una instancia en el escenario llamada cuadrado. cuadrado.width=200; cuadrado.width=300; cuadrado.x=30; cuadrado.y=20; cuadrado.visible=true; cuadrado.alpha=0.5; El clip cuadrado tiene un ancho de 200 píxeles, un alto de 300 píxeles. Esta situado en el escenario en las coordenadas x=30 y=20. Es visible y su transparencia es del 50% 10. URLrequest El objeto URLRequest nos permite almacenar una ruta URL. Lo emplearemos para crear un hipervínculo. En URLRequest determinamos la ruta del vínculo. function irapaginadegoogle(event:mouseevent){ var googleurl:urlrequest = new URLRequest(" navigatetourl(googleurl); } boton.addeventlistener(mouseevent.click, irapaginadegoogle);

23 11. Display List (Lista de visualización) Permite crear y organizar elementos visuales en la pantalla. Los objetos se almacenan en la biblioteca y se generan instancias dinámicamente en el escenario Display Object En Actionscript 3.0 tenemos la posibilidad de trabajar con varios tipos de display objects. - MovieClip: los MovieClips incluyen linea de tiempo, y las propiedades y métodos asociados. Por ejemplo MovieClip incluye los métodos play(), stop(), gotoandplay(), nextframe(), etc... y las propiedades currentframe, currentlabel, scenes, totalframes, etc... - Sprite: es como un MovieClip pero sin linea de tiempo. Es decir, un Sprite puede utilizarse como contenedor de objetos, almacenar variables, y recibir eventos. Lo único que no se puede hacer es manipular su linea de tiempo, ya que no tiene. - Shape: como un Sprite pero sin interactividad de ratón ni teclado. Tampoco pueden contener objetos de visualización secundarios. Se suelen utilizar para dibujar dentro de ellos, ya que poseen el atributo graphics.

24

25 11.2 Métodos de la clase Display List addchild(): Agrega un hijo a la lista de visualización. addchildat(): Agrega un hijo, pero nosotros le decimos en que lugar. Indicamos la posicion de profundidad, desde 0. addchildat(): Agrega un hijo, pero nosotros le decimos en que lugar, es decir la posicion de profundidad. numchildren: Nos permite saber cuantos hijos tiene un contenedor. getchildat(): Nos dice que objeto esta ocupando la posición que le indiquemos removechildat(): Saca del contenedor el objeto le indiquemos. micontenedor.removechildat(1); setchildindex(): Cambia la posicion de un hijo a donde nosotros le indiquemos getchildindex(): Nos dice en que posición esta un hijo En el siguiente ejemplo se crean dos objetos de tipo Sprite y se añaden a la lista de visualización, dentro de un objeto contenedor. Para ello se crea tres Sprites: uno llamado contenedor, otro circulo y otro cuadrado. var contenedor:sprite = new Sprite(); stage.addchild(contenedor); var circulo:sprite= new Circulo(); circulo.x = 20; circulo.y = 10;

26 contenedor.addchild(circulo); var cuadrado:sprite = new Cuadrado(); cuadrado.x = 90; cuadrado.y = 20; contenedor.addchild(cuadrado); Crédito 3 Realización Multimedia 12. URL Loader Es un objeto que nos permite cargar en el escenario archivos externos que pueden ser: Películas:.swf Imágenes:.jpg,.png,.gif var loader1:loader = new Loader(); loader1.load(new URLRequest("peli.swf")); loader1.x=20 loader1.y= Vídeo Podemos trabajar con vídeo de tres formas: Video incrustado: Consiste en incluir el vídeo en la línea de tiempo. Se aconseja emplear archivos pequeños, pues esta opción aumenta considerablemente el tamaño de la película. Se emplea para sincronizar el video con una animación en la línea de tiempo.

27 Descarga progresiva: En este caso se vincula el vídeo externo a la película Flash, y se carga en el momento en el que reproducimos la película. En la descarga progresiva el vídeo se reproducirá según se va descargando. Video Streaming: Para reproducir vídeo en streaming se necesita un servidor especial, como Adobe Flash Media Server. El usuario puede ver cualquier momento del vídeo sin que este se haya descargado previamente. Permite la reproducción en directo de un video Control del vídeo con AS3 En función del sistema que empleemos para reproducir el vídeo (descarga progresiva o vídeo sreaming) utilizaremos diferentes clases. Vídeo streaming: Emplearemos la clase NetConnection, NetStream y video Descarga progresiva: Emplearemos la Clase FLVPlayBack Nos centraremos en el uso del componente FLVPlayBack. La clase FLVPlayBack se encuentra en la categoría de componentes de Flash. El componente lo encontraremos en Ventana > Componentes.

28 Podemos hacer dos cosas: Opción 1. arrastrar el componente a la Biblioteca y añadir una instancia mediante código. import fl.video.flvplayback; var flv:flvplayback = new FLVPlayback(); flv.width = 320; flv.height = 240; flv.x = 30; addchild(flv); flv.play("mipeli.flv"); Si queremos detener la reproducción del vídeo: flv.stop(); Si queremos reproducir el vídeo en un segundo concreto de la linea de tiempo de dicho vídeo: flv.seek(5) Opción 2. Crear una instancia del componente FLVPlayBack en el escenario y darle un nombre de instancia en el panel de propiedades. Luego emplearemos sus métodos como en el ejemplo anterior asignándolos al nombre de la instancia del componente.

29 14. Sonido Para trabajar con sonido utilizamos el objeto Sound y Sound Channel. El objeto Sound es el contenedor de un sonido, es decir, un archivo de audio en formato.mp3. Puede estar en la biblioteca o ser un archivo externo. Cuando reproducimos el sonido mediante el método play(), creamos un canal que nos permite controlar el sonido. Para ello ccreamos un objeto SoundChannel. Creamos un objeto sonido y lo vinculamos a un archivo externo llamado misonido.mp3 var music: Sound = new Sound(); var canalmusica: SoundChannel; music.load(urlrequest( misonido.mp3 ) Para controlar el sonido lo haremos en el objeto SoundChannel que hemos denominado canalmusica. canalmusica=music.play(1,2); canalmusica.stop() El método play() admite dos parámetros: el primero indica el segundo de comienzo del sonido, el segundo el número de loops o repeticiones.