Curso de ActionScript

Transcripción

1 Curso de ActionScript ActionScript, el lenguaje de creación de scripts de Flash, permite crear películas con elementos interactivos. La película se puede configurar para que ejecute scripts que respondan a eventos de usuario como pueden ser hacer clic en el botón del ratón o presionar una tecla. Una visión general de ActionScript El lenguaje ActionScript de Flash 5 admite los siguientes tipos de datos: cadena, número, booleano, objeto y clip de película. Los distintos tipos de datos les permiten utilizar diferentes tipos de información en ActionScript. Puede definir funciones con parámetros que devuelven valores. Esto le permite volver a utilizar los bloques de código en los scripts. Puede utilizar los objetos predefinidos para acceder y manipular ciertos tipos de información: El objeto Sound le permite agregar sonidos a una película y controlar los sonidos en una película a medida que se reproduce. Por ejemplo, puede ajustar el volumen o el balance. El objeto Mouse le permite ocultar el cursor estándar para que pueda utilizar un cursor personalizado. El objeto MovieClip le permite controlar clips de película sin utilizar una acción envolvente como telltarget. Puede llamar a un método como play, loadmovie, o duplicatemovieclip desde un nombre de instancia utilizando la sintaxis de punto. Los Clips inteligentes tienen scripts internos que el usuario, u otro autor, puede cambiar sin utilizar el panel Acciones. Puede pasar valores a un Clip inteligente por medio de los parámetros de clip que puede definir en la Biblioteca. Panel de Acciones Para escribir scripts se utiliza el panel Acciones. Dicho panel permite asignar el script a un fotograma de la línea de tiempo principal o a la línea de tiempo de cualquier clip de película, o bien a un botón o clip de película en el Escenario. Flash ejecuta acciones en momentos diferentes, dependiendo del elemento al que estén asociadas: Las acciones asociadas con fotogramas se ejecutan cuando la cabeza lectora accede a dicho fotograma.

2 Las acciones asociadas con botones se encuentran encerradas en acciones controladoras. Las acciones asociadas con clips de película se encuentran encerradas en acciones controladoras onclipevent. Este panel vale para cada uno de los diferentes tipos de acciones asociados a los distintos tipos de elementos a los que están asociados. En este curso, vamos a trabajar con las Acciones básicas, Acciones, algunas Funciones y los Objetos Mouse y Sound contenidos en el panel de Acciones. Haremos ejercicios prácticos al final de cada uno de estos apartados. Acciones Básicas Las siguientes acciones básicas son modos comunes de control para la interacción del usuario en una película: gotoandplay (gotoandplay(escena, fotograma);).- Envía la cabeza lectora al fotograma especificado en una escena y reproduce a partir de ese fotograma. Si no se especifica escena, la cabeza lectora va el fotograma especificado en la escena actual. Desde las pestañas de Escena, Tipo y Fotograma podemos configurar el acceso a las escenas por medio del nombre con el que las dotamos, acceder a los fotogramas, no por los números, sino por los rótulos que les ponemos o incluso ir al siguiente o al anterior sin tener la necesidad de conocer los números de Fotograma.

3 Play (Play ( );).- Desplaza la cabeza lectora hacia delante en la línea de tiempo. Stop (Stop ( );).- Detiene el clip de película que se está reproduciendo actualmente. La utilización más corriente de esta acción es para controlar los clips de película con botones. stopallsounds (stopallsounds ( );).- Detiene todos los sonidos que se están reproduciendo actualmente sin detener la cabeza lectora. Los sonidos establecidos en flujo continuarán reproduciéndose mientras la cabeza lectora se mueve sobre los fotogramas en los que se encuentran. telltarget (telltarget (destino) { sentencia };).- Aplica las instrucciones especificadas en el argumento sentencias a la Línea de tiempo especificada en el argumento destino. Asigna telltarget a botones que detienen o inician los clips de película en otras partes del Escenario. También puede hacer que los clips de película vayan a un fotograma concreto de dicho clip. Acciones duplicatemovieclip (duplicatemovieclip(destino, nuevo_nombre, profundidad);).- Crea una instancia de un clip de película mientras se reproduce la película. Los clips de película duplicados siempre comienzan en el fotograma 1, sin tener en cuenta en que fotograma estaba el clip de película original. Las variables del clip de película principal no se copian en el clip de película duplicado. Si se elimina el clip de película principal también se elimina el clip de película duplicado. Utilice la acción o el método removemovieclip para eliminar una instancia de clip de película creada con duplicatemovieclip. El nivel de profundidad es el orden de apilamiento que determina como aparecen cuando se superponen los clips de película y otros objetos. Al primer clip de película que cree o la primera instancia que arrastre al Escenario, se le asigna una profundidad de nivel 0. Debe asignar a cada clip de película sucesivo o duplicado un nivel de profundidad diferente para evitar que sustituya a películas en los niveles ocupados o al clip de película original. El ejemplo más claro de esta acción es sin duda el ejemplo de clip de película duplicado contenido en las muestras que el Flash 5 contiene. Nosotros vamos a realizar este mismo ejercicio paso a paso, porque es una forma muy clara y bonita de aprender a usar estas acciones tan compliacadas.

4 removemovieclip(removemovieclip(destino);).- Elimina una instancia de clip de película creada con los métodos attachmovie o duplicatemovieclip del objeto MovieClip o con la acción attachmovie. setproperty (setproperty(destino, propiedad, expresión) ).- Cambia la propiedad de un clip de película mientras se reproduce la película. startdrag (startdrag(destino);).- Hace que el clip de película destino se pueda arrastrar mientras se reproduce la película. Sólo un clip de película puede arrastrarse al mismo tiempo. Una vez que se ha ejecutado una acción startdrag, el clip de película permanece arastrable hasta que se detiene específicamente por una acción stopdrag o hasta que se llama a una acción startdrag de otro clip de película. stopdrag ( stopdrag ( ); ).- Detiene la operación de arrastre actual. Funciones getproperty ( getproperty (nombre_instancia, propiedad); ).- Devuelve el valor de la propiedad especificada para la instancia de clip de película. int ( int (valor); ).- convierte un número decimal en su valor de número entero más cercano. Number ( Number (expresión); ).- Convierte el argumento "x" en un número y devuelve un valor. random ( random (valor); ).- Devuelve un número entero aleatorio entre 0 y el número entero especificado en el argumento valor.

5 Ejercicios Ejercicio 1.- Controlador de fotogramas: Para moverse a través de la película, hay que manejar las acciones gotoandplay, Start y Stop. En este ejercicio vamos a ver cuatro tipos de botones que controlan el avance o retroceso de las páginas de la película. Primero debemos hacer un fondo base en el que vamos a colocar los botones, los clip de película que queramos para adornar nuestro proyecto y los textos que vamos a colocar. En el fotograma clave en la línea de tiempo, le abrimos el panel de acciones y le añadimos la acción de Stop. Esta acción permite el control de la línea de tiempo a nuestro antojo, moviéndonos por la película por medio los botones y no una reproducción incontrolada. En este fotograma colocamos, por ejemplo, un texto de presentación. Seguidamente vamos a añadir otro fotograma clave a continuación del primero, al que también colocaremos una acción Stop y seguiremos configurando el nuevo texto de este fotograma. El trabajo quedaría de la siguiente manera: Para programar los botones, primero hay que distinguir que hay dos tipos de botones, los que avanzan o retroceden de uno en uno, o los que te situan al principio o al final de la película. Para crear los botones vamos a seguir los siguientes pasos: Cree los botones que vamos a utilizar. Seleccione el clip de película en el escenario. Seleccione Ventana > Acciones para abrir el panel Acciones de objeto. En la lista de la Caja de herramientas, seleccione gotoandplay y arrastrelo a la ventana Script. Desplegamos la pestaña de Tipo y seleccionamos Fotograma Siguiente. En lugar de aparecer escrita la acción gotoandplay aparece nextframe( ); Para el botón de retroceder uno elegimos Fotograma Anterior. En lugar de aparecer escrita la sentencia gotoandplay aparece prevframe( ); Para el botón de inicio elegimos gotoandplay (1). Para el botón de final elegimos gotoandplay (5). En mi caso son cinco fotogramas claves los que hay. Ejercicio 2.- Control de Movimiento de un Clip de Película: En este ejercicio vamos a trabajar con las acciones de telltarget, Play y Stop para los clip de películas. Vamos a crear un clip de película animado. Vamos a hacer una bola que de la sensación de respiración. Lo primero es dibujar una esfera en el fotograma, la que convertimos en clip de película. Creamos la interpolación de movimiento para el clip. Ahora trasformaremos el clip de película en una instancia para poder trabajar con ella. Siempre hace falta trabajar con instancias cuando usamos la acción de telltarget. Nos colocamos sobre la bola y le damos al botón derecho. En la pestaña de paneles escogemos instancia y aparecerá una paleta como la siguiente:

6 En la pestaña de nombre, escribimos el nombre con el que vamos a conocer a la instancia. A esta instancia la vamos a llamar "bola". No es lo mismo instancia que nombre del clip de película Esto es una manera de crear un objeto virtual en flash. Ahora creamos dos botones, uno para parar el movimiento y otro para reanudarlo. La configuración de los dos botones es muy parecida. Para el botón de parar, seleccionamos el panel de acciones y pinchamos en la acción de telltarget, en la pestaña de "destino" pondremos el nombre de la instancia que hemos creado, pero empezando por una barra inclinada (/bola). seguidamente seleccionamos la acción Stop del panel de acciones básicas. Para el botón de reanudar la animación en lugar de Stop elegimos Play. Así nos tiene que quedar la configuración de los botones de la siguiente manera: on (release){ telltarget ("/bola"){stop( );}} on (release){telltarget ("/bola"){play( );}} Ejercicio 3.- Clip de película duplicado: Este ejercicio es bastante complejo; aquí usaremos las acciones duplicatemovieclip, removemovieclip, setproperty y nos adelantamos a dar las funciones getproperty y setvariable y el operador de cadena add. Primero creamos un clip de película rectángulo, que gire y cambie de colores, para que se vea mas claramente los efectos de duplicatemovieclip. Accedemos al panel de instancia y lo llamamos "caja". Vamos a crear hasta un máximo de 10 elementos iguales en la película. Vamos a tener que declarar una variable "n" con la que vamos contando el numero de elementos que vamos creando, y que también nos va a servir para llamar a las nuevas instancias que vamos creando durante la película, ya que durante la ejecución no podemos acceder a ellas. En la primera capa abrimos el panel de acciones, seleccionamos la acción setvariable, con lo que declaramos e inicializamos la variable "n". Botones.- Vamos a usar dos botones, uno para crear un nuevo clip de película y otro para eliminarlos. Botón de añadir clip: lo primero que hay que hacer en este botón es declarar una variable con las que vamos nombrando las instancias nuevas. Como la variable n es una variable numérica, lo que tenemos que hacer es pinchar en setvariable, declarando la variable ctot, que toma el valor "caja" y le añadimos el número n-ésimo que hace falta. Esta acción queda de la siguiente manera: ctot = "caja" add n; Hay que habilitar la opción de expresión a la derecha de la pestaña de valor, ya que no trabajamos con un número sino con una cadena de caracteres. Ahora añadimos la acción de duplicatemovieclip y en la pestaña de destino ponemos caja, en la de Nmb (nombre) ponemos ctot, y en la profundidad colocamos n.

7 Cambiamos la posición de la nueva instancia que hemos creado por medio de la acción setproperty, en la que el destino es ctot, la propiedad es _x(x Position) y el valor es la posición actual de la instancia más el numero de clip que hemos creado por la anchura del clip, para que no se nos superpongan unas con otras. Seguidamente aumentaremos en uno el valor de la variable "n". La progamación del botón será la siguiente: on (press){ ctot = "caja" add n; duplicatemovieclip ("caja", ctot, n); setproperty (bn, _x, Number(getproperty(bn, _x)) + Number(n*(getproperty(bn, _width)))); n = Number(n) +1; } Botón de quitar clip: Con este botón vamos a ir quitando los clip de películas que hemos ido haciendo, pero nos vamos a quedar con el primero que hemos ceado. Para esto hay que evaluar cual es el número de clip de película que hay en la pelíacula con una sentencuia "if" que nos diga si nos queda un sólo clip o más. Después disminuiremos la variable "n" y quitaremos la instancia n-ésima del sistema. Esto nos debe quedar de la siguiente manera: on (press){ if (Number(n)>1){ n = n-1; ctot = "caja" add n; removemovieclip (ctot);} } Ejercicio 4.- Campo de Texto desplazable.- Puede utilizar las propiedades scroll y maxscroll para crear un campo de texto desplazable. En el panel Opciones de texto, puede asignar una variable a cualquier campo de texto establecido como Introducción de texto o Texto dinámico. El campo de texto actúa como una ventana que indica el valor de esa variable. Cada variable asociada con un campo de texto tiene una propiedad scroll y una propiedad maxscroll. Puede utilizar estas propiedades para desplazar texto en un campo de texto. La propiedad scroll devuelve el número de la línea superior visible en un campo de texto y puede establecerla o recuperarla. La propiedad maxscroll devuelve la línea superior visible de un campo de texto cuando la línea inferior está visible, puede leer, pero no establecer esta propiedad. Para crear un campo de texto con desplazable: Arrastre un campo de texto al Escenario. Seleccione Ventana > Paneles > Opciones de texto. Elija Introducción de texto en el menú emergente. Introduzca el nombre de variable text en el campo Variable. Arrastre la esquina inferior derecha del campo de texto para cambiar el tamaño del campo de texto. Seleccione Ventana > Acciones. Seleccione el fotograma 1 en la Línea de tiempo principal y asigne una acción set variable que establezca el valor de text.

8 Seleccione Ventana > Bibliotecas comunes > Botones y arrastre un botón hasta el Escenario. Pulse Alt y arrastre el botónpara crear una copia. Seleccione el botón superior y elija Ventana > Acciones. Arrastre la acción set variables desde la caja de herramientas hasta la ventana Script en el panel Acciones. Introduzca text.scroll en el cuadro Variable. Introduzca text.scroll -1 en el cuadro Valor y active la casilla de verificación Expresión. Seleccione el botón de flecha hacia abajo y asigne la siguiente acción set variables : text.scroll =text.scroll+1; Seleccione Control > Probar película para comprobar el campo de texto desplazable. Ejercicio 5.- Detección de Colisiones entre dos clip de películas.- Para realizar la detección de colisión en dos clips de película: Arrastre dos clips de película al Escenario y asígneles los nombres de instancia mchitarea y mcdrag. Cree un campo de texto en el Escenario e introduzca status en el cuadro Variable opciones de texto. Seleccione mchitarea y elija Ventana > Acciones. Haga doble clic sobre evaluate en la caja de herramientas. Introduzca el siguiente código en el cuadro Expresiones seleccionando elementos de la caja de herramientas: _root.status=this.hittest(_root.mcdrag); Seleccione la acción onclipevent en la ventana Script y elija enterframe como el evento. Seleccione mcdrag y elija Ventana > Acciones. Haga doble clic sobre startdrag en la caja de herramientas. Active la casilla de verificación Bloquear ratón en el centro. Seleccione la acción onclipevent en la ventana Script y elija el evento Mouse down. Haga doble clic sobre stoptdrag en la caja de herramientas. Seleccione la acción onclipevent en la ventana Script y elija el evento Mouse up. Seleccione Control > Probar película y arrastre el clip de película para comprobar la detección de colisión.