MovieClips en AS3

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.

  1. import flash.display.MovieClip;
  2. import flash.display.Graphics;

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

  1. var movie:MovieClip = new MovieClip();
  2. this.addChild(movie);
  3. movie.x = 50;
  4. movie.y = 20;

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.

  1. movie.graphics.beginFill(0x339900);
  2. movie.graphics.drawRoundRect(0, 0, 200, 30, 5, 5);
  3. movie.graphics.endFill();

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.

  1. movie.addEventListener(MouseEvent.MOUSE_OVER, myRollOver);
  2. movie.addEventListener(MouseEvent.MOUSE_OUT, myRollOut);
  3. movie.addEventListener(MouseEvent.MOUSE_DOWN, myPress);
  4. function myRollOver(obj:Event) {
  5.     movie.alpha = .5;
  6. }
  7. function myRollOut(obj:Event) {
  8.     movie.alpha = 1;
  9. }
  10. function myPress(obj:Event) {
  11.     trace("Click!!!");
  12. }

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.

  1. import flash.display.Graphics;
  2. import flash.display.MovieClip;
  3. import flash.events.MouseEvent;
  4. // creamos el movieclip
  5. var movie:MovieClip = new MovieClip();
  6. this.addChild(movie);
  7. movie.x = 50;
  8. movie.y = 20;
  9. // dibujamos una forma
  10. movie.graphics.clear();
  11. movie.graphics.beginFill(0x339900);
  12. movie.graphics.drawRoundRect(0, 0, 200, 30, 5, 5);
  13. movie.graphics.endFill();
  14. // agregamos detectores de eventos
  15. movie.addEventListener(MouseEvent.MOUSE_OVER, myRollOver);
  16. movie.addEventListener(MouseEvent.MOUSE_OUT, myRollOut);
  17. movie.addEventListener(MouseEvent.MOUSE_DOWN, myPress);
  18. // implementamos los eventos
  19. function myRollOver(obj:Event) {
  20.     movie.alpha = .5;
  21. }
  22. function myRollOut(obj:Event) {
  23.     movie.alpha = 1;
  24. }
  25. function myPress(obj:Event) {
  26.     trace("Click!!!");
  27. }

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

Cargando Flash

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

Comentarios Total 10 comentarios


Giancarlo
Publicado: 27/01/2007 12:45 am

Hola Jim, creo que el ejemplo es bastante claro. :D
Luego te explico como hacer un espectrograma en AS3 con solo 5 lineas… jajaja
Un abrazo!

Stankiewicz
Publicado: 20/03/2007 2:19 am

Hola Richard, llevo un par de horas atorado en tu blog leyendo de todo un poco, ya hasta me puse a probar tus ejemplos, pero ahora que estas hablando de AS3, me preguntaba si me podías dar una pequeña orientación para iniciar con AS3, lo que me pasa es … no se por donde empezar, que se necesita para compilar AS3??? esto tiene alguna ventaja sobre el Flash normal???

Gracias por la ayuda.

unijimpe
Publicado: 20/03/2007 9:55 pm

Bueno para desarrollar en AS3, hay dos posibilidades una de ellas es hacerla en Flex Builder que es el editor para Flex que soporta generación de AS3, la segunda posibilidad es hacerlo en Flash 9 con AS 3.0 Preview, con el cual lo puedes hacer directamente desde el editor de Flash.

Respecto a las ventajas es que ahora el lenguaje tiene funciones mucho mas potentes y se han estandarizado respecto a AS2, ahora el desarrollo usando Programación Orientada a Objetos es mas sencilla pues ya existen las características necesarias para ello.

martin
Publicado: 09/08/2007 1:39 am

Muy clara la explicacion, ojala la ayuda del flash fuera tan clara.

Mi problema es el siguiente, yo tengo 4 botones. ¿tengo que crear un funcion over, out, click para cada uno? o ¿tengo alguna manera de pasar a la funcion el boton desde donde se detecto el evento?

Muchas Gracias!

alfonsofonso
Publicado: 29/11/2007 7:08 am

me parece increible que necesitemos escribir 27 lineas de codigo para ese resultado, creo q me quedare con el flash 8

alfonsofonso
Publicado: 29/11/2007 7:08 am

supongo que lo hacen para fastidiar a los diseñadores

Cesar
Publicado: 29/04/2008 11:10 am

El codigo como ejemplo esta muy bien, pero otro buen ejemplo sería como manejar un clip de pelicula creado por nosotros en el escenario con as3. Es decir en el ejemplo dibujas el rectangulo con codigo
movie.graphics.drawRoundRect(0, 0, 200, 30, 5, 5);
pero quisiera ver un ejemplo manejando a un objeto “clip de pelicula” que hayamos dibujado en el escenario con AS3

albermillan
Publicado: 25/06/2008 10:13 am

tengo un movieclip en mi biblioteca o libreria!! y necesito llamarla al la linea de tiempo principal!! como lo hago??’ espero su ayuda!!! Gracias…

albermillan
Publicado: 25/06/2008 10:16 am

ademas q salga en una posicion X e Y determinada por mi!!!

unijimpe
Publicado: 25/06/2008 2:41 pm

Si esta en la librería, debes ponerle un nombre de clase (antes era de instancia), por ejemplo si al MovieClip lo llamas btAction lo puedes llamar como si fuera una clase.

var bt = new btAction();
bt.x = 10;
bt.y = 50;
addChild(bt);

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)