unijimpe

ActionScript 3 como lenguaje de programación esta reestructurando la forma de escritura de código, lo cual conlleva a programar en otra forma lógica comparada con AS2. En esta ocasión hablaremos de los cambios que se han hecho a los MovieClips el cual es uno de los elementos esenciales de Flash.

Creando MovieClips
El primer paso para la creación es importar las clases necesarias para el manejo de MovieClips, esta clase se encuentra en el paquete flash.display, para nuestro ejemplo además importaremos las clases para realizar gráficos.

[as]
import flash.display.MovieClip;
import flash.display.Graphics;
[/as]

El siguiente paso es crear una variable del tipo MovieClip, aquí viene una de las diferencias, por defecto cuando uno crea un MovieClip hay que asignarle a que nivel pertenece, para ello utilizamos una nueva función addChild. En nuestro ejemplo le decimos que el movie que hemos creado lo colocamos en el root (this). Luego de ello lo posicionamos utilizando las coordenadas x e y (Antes era _x e _y).

[as]
var movie:MovieClip = new MovieClip();
this.addChild(movie);
movie.x = 50;
movie.y = 20;
[/as]

Dibujando en el MovieClip
Ahora que tenemos el MovieClip creado, dibujamos sobre el una forma, para ello utilizamos la clase graphics que tiene un conjunto de funciones para realizar trazados de formas. Existen varias formas en nuestro caso crearemos un cuadro con esquinas redondeadas utilizando drawRoundRect.
[as]
movie.graphics.beginFill(0x339900);
movie.graphics.drawRoundRect(0, 0, 200, 30, 5, 5);
movie.graphics.endFill();
[/as]

Agregando Interactividad
Otra de las diferencias que encontramos ahora es que ya no podemos agregar interactividad utilizando onRollOver, onRollOut, onPress, etc. Ahora tendremos que utilizar los eventos, esto utilizando addEventListener. Para ello debemos importar el paquete manejador de eventos flash.events.MouseEvent, el cual trae los siguiente detectores: CLICK, DOUBLE_CLICK, MOUSE_DOWN, MOUSE_OUT, MOUSE_OVER, entre otros.

[as]
movie.addEventListener(MouseEvent.MOUSE_OVER, myRollOver);
movie.addEventListener(MouseEvent.MOUSE_OUT, myRollOut);
movie.addEventListener(MouseEvent.MOUSE_DOWN, myPress);
function myRollOver(obj:Event) {
movie.alpha = .5;
}
function myRollOut(obj:Event) {
movie.alpha = 1;
}
function myPress(obj:Event) {
trace(«Click!!!»);
}
[/as]
Para cada evento diferente creamos un detector el cual llama a una funcion que debemos definirla, por ejemplo para cuando se hacer MOUSE_OVER nosotros definimos que debe llamarse a una funcion con nombre myRollOver la cual luego implementamos el cual cual cambia el alpha del movie al 50% (Otro cambio ahora la transparencia se maneja de 0 a 1).

Finalizando
Unimos todas la partes de nuestro código para conseguir nuestro ejemplo completo de creaciòn de MovieClips con AS3.

[as]
import flash.display.Graphics;
import flash.display.MovieClip;
import flash.events.MouseEvent;
// creamos el movieclip
var movie:MovieClip = new MovieClip();
this.addChild(movie);
movie.x = 50;
movie.y = 20;
// dibujamos una forma
movie.graphics.clear();
movie.graphics.beginFill(0x339900);
movie.graphics.drawRoundRect(0, 0, 200, 30, 5, 5);
movie.graphics.endFill();
// agregamos detectores de eventos
movie.addEventListener(MouseEvent.MOUSE_OVER, myRollOver);
movie.addEventListener(MouseEvent.MOUSE_OUT, myRollOut);
movie.addEventListener(MouseEvent.MOUSE_DOWN, myPress);
// implementamos los eventos
function myRollOver(obj:Event) {
movie.alpha = .5;
}
function myRollOut(obj:Event) {
movie.alpha = 1;
}
function myPress(obj:Event) {
trace(«Click!!!»);
}
[/as]

Les dejo el resultado de nuestro código, ojo que necesitan tener el Flash Player 9 para visualizarlo correctamente.

[SWF]http://blog.unijimpe.net/wp-content/uploads/2007/01/movieclip.swf, 300, 70[/SWF]

Para finalizar les dejo los archivos fuente para la descarga con el cual pueden ver el ejemplo funcionando y hacer sus propias pruebas.

Posts Relacionados

• Enviar email con AS3 y PHP
• Array Aleatorios en AS2
• Como utilizar Flashvars
• Google Analytics para Flash
• Lector de RSS en AS3