Página inicial

Unidad 19. Flash. Navegación (IV).


Los MovieClips

 

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

Podemos utilizarlos para incluir elementos en nuestra película con una animación independiente. De este modo aunque la película principal esté detenida el clip seguirá actuando según su propio cabezal de reproducción.

Existen métodos para manejar la línea de tiempo de los clips, idénticas a las anteriores, y que veremos a continuación.

Lo primero que deberemos aprender es a acceder a las propiedades y métodos de los objetos. Esto es un recurso muy utilizado pero a la vez es muy sencillo. Lo veremos con un ejemplo.

Queremos que al pulsar un botón el movieclip avance en su línea de tiempo hasta su fotograma 20. El código que deberemos escribir en el botón será el siguiente:

on (release) {

	miClip.gotoAndPlay(20);

}

Fíjate en cómo hemos escrito la función. Primero hemos señalado el clip sobre el que queremos actuar escribiendo su nombre de instancia:

Nombre de instancia

Y después de añadir un punto hemos indicado la función que se ejecutará.

ActionScript 3

import flash.events.*;

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

 

function miFuncion(event:MouseEvent):void

{

miClip.gotoAndPlay(20);

}

 

De esta forma (y como hemos visto en temas anteriores) podemos acceder a todas las propiedades del clip. Escribiendo esta línea haremos que el clip se haga invisible:

on (release) {

	miClip._visible = false;

}
ActionScript 3

import flash.events.*;

miBoton.addEventListener(MouseEvent.CLICK, miFuncion);

 

function miFuncion(event:MouseEvent):void

{

miClip._visible = false;

}

 

Para hacerlo un poco más complicado podríamos encontrarnos en el siguiente supuesto. Imagina que tenemos un movieclip llamado clipPadre. Dentro de este clip de película tendremos más símbolos y uno de ellos puede ser otro movieclip llamado clipHijo.

¿Cómo accedemos a las propiedades y funciones de clipHijo? Muy fácil. Suponiendo que estamos trabajando desde la película principal donde tenemos insertado el clipPadre, escribiremos lo siguiente:

clipPadre.clipHijo.play();

Así haremos que la reproducción de clipHijo se reaunde.

Pero, ¿qué pasa si queremos ejecutar la orden desde dentro de clipPadre? Imagina que dentro del movieclip hay un botón y el clip clipHijo. Queremos que al pulsar el botón se reproduzca el fotograma 20 de clipHijo, entonces deberíamos escribir lo siguiente en las acciones del botón:

on (release) {

	clipHijo.gotoAndPlay(20);

}

Como puedes ver esta vez no hemos mencionado a clipPadre en la línea de código. No es necesario porque ya nos encontramos dentro de él.

También podemos referenciarnos a elementos superiores utilizando la palabra reservada _parent. De este modo si nos encontrásemos dentro de clipHijo y quisiésemos avanzar al fotograma 20 de clipPadre deberíamos escribir:

this._parent.gotoAndPlay(20);

Donde this indica el clip donde nos encontramos y _parent hace que nos coloquemos en el nivel inmediatamente superior.

De esta forma, sólo deberemos escribir la ruta de contenedores o padres hasta llegar al objeto del cual queremos modificar o ejecutar un método.

 

Por lo demás, el funcionamiento de un clip no se diferencia en nada a la línea de tiempos de cualquier otra película. Podemos etiquetar los fotogramas de igual modo para llamarlos directamente por su nombre:

miClip.gotoAndStop("etiqueta");

Y saltar de fotograma a fotograma para manejar las animaciones de la forma en que nosotros queramos.

 

Igual que vimos antes con los botones, los movieclips tienen manejadores que nos permitirán ejecutar código dependiendo de los eventos que se produzcan sobre ellos.

Los que más utilizaremos serán:

Estos manejadores de eventos se deben de utilizar con el controlador onClipEvent. Veamos un ejemplo:

onClipEvent (mouseUp) {

	this._visible = true;

}

Este bloque de código debe situarse en las acciones del movieclip (igual que hacemos con los botones). Es por ello que al referirnos a la propiedad _visible escribimos antes this para referenciar el clip en cuestion.

this siempre hará referencia al objeto donde se encuentre la variable.

Nota: Estos manejadores son tan válidos para movieclips como para la película general en sí, pues podríamos considerar que una película es un movieclip más grande.

 

También existen modos de capturar estos eventos sin tener que escribir el código dentro del movieclip.

Sería de la siguiente forma:

miClip.onPress = function() {

	miClip.play();

}

Estos eventos tienen que asociarse con una función (veremos este concepto en el punto siguiente). Pero de esta forma podemos escribir el código directamente sobre el fotograma y controlar cuando se ejecuta una acción sobre el movieclip.

En el ejemplo, el clip comenzará a reproducirse en cuanto se haga clic sobre él.

Veamos el conjunto de eventos más importantes para los movieclips:

Obviamente, existen muchos más eventos que podrás aprender en este tema avanzado.

 

Veamos el ejemplo:

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:

Linea de Tiempo de estrella

Linea de tiempo de Detalle

Como puedes ver tenemos una cuarta capa que se llama acciones. Allí colocaremos las acciones que se asociarán a este fotograma:

estrella.onPress = function() {

	estrella.gotoAndPlay("desaparece");

	detalle.gotoAndPlay("aparece");

}
ActionScript 3

import flash.events.*;

estrella.addEventListener(MouseEvent.CLICK, funcion_desaparece);

 

function funcion_desaparece(event:MouseEvent):void

{

estrella.gotoAndPlay("desaparece");

detalle.gotoAndPlay("aparece");

}

 

Este código hará que cuando se presione el clip estrella se desplacen los cabezales en los clips detalle y estrella a las etiquetas de fotogramas que se indican.

Para hacer desaparecer el clip detalle incluiremos el siguiente fragmento de código:

detalle.onPress = function() {

	estrella.gotoAndPlay("aparece");

	detalle.gotoAndPlay("desaparece");

}

Esto hará algo parecido a lo anterior, cuando se presione el clip detalle los cabezales de ambas películas se desplazarán a las respectivas etiquetas de fotograma.

ActionScript 3

import flash.events.*;

detalle.addEventListener(MouseEvent.CLICK, funcion_aparece);

 

function funcion_aparece(event:MouseEvent):void

{

estrella.gotoAndPlay("aparece");

detalle.gotoAndPlay("desaparece");

}

 



 


© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Septiembre - 2007.