Esta pequeña clase, a través de algunos arrays de ceros y unos, dibujar en una tabla elementos encendidos o apagados. Para que se entienda mejor veamos un ejemplo:
La idea es simple, creamos una clase llamada PixelPanel, la cual recibe como parametros 4 cosas:
- table: es un array múltiple con 0 y 1. El cero indica q ese cuadrado no se vea, y el uno indica que sí se vea.
- link: es el nombre(linkeaje) del MovieClip que usaremos como "pixel".
- separación: es la distancia entre los MovieClip que usamos en pixeles.
- duración: el tiempo que tarda en generar la imagen en segundos.
class PixelPanel extends MovieClip { // var duracion : Number; var link : String; var tabla : Array; var separacion : Number; var j : Number; public function PixelPanel () { this.j = 0; } private function depth () : Number { return j ++; } // public function init (_tabla : Array, _link : String, _separacion : Number, _duracion : Number) : Void { this.duracion = _duracion * 1000; this.link = _link; this.tabla = _tabla; this.separacion = _separacion; // for (var i : Number = 0; i < tabla.length; i ++) { for (var u : Number = 0; u < tabla [i].length; u ++) { var tmp : MovieClip = this.attachMovie (this.link, "item_" + i + "_" + u, depth ()); tmp._x = (tmp._width + separacion) * u; tmp._y = (tmp._height + separacion) * i; tmp.gotoAndStop ("off"); tmp.estado = this.tabla [i][u]; tmp.tiempo = getTimer (); tmp.duracion = random (this.duracion); tmp.onEnterFrame = function () { if (getTimer () - this.tiempo >= this.duracion) { if (this.estado == 1) { this.gotoAndStop ("on"); } this.onEnterFrame = null; } }; } } } public function cambio (_tabla : Array) : Void { this.tabla = _tabla; for (var i : Number = 0; i < tabla.length; i ++) { for (var u : Number = 0; u < tabla [i].length; u ++) { var tmp : MovieClip = this ["item_" + i + "_" + u]; tmp.estado = this.tabla [i][u]; tmp.tiempo = getTimer (); tmp.duracion = random (this.duracion); tmp.onEnterFrame = function () { if (getTimer () - this.tiempo >= this.duracion) { if (this.estado == 1) { this.gotoAndStop ("on"); } else { this.gotoAndStop ("off"); } this.onEnterFrame = null; } }; } } } public function off () : Void { for (var i : Number = 0; i < this.tabla.length; i ++) { for (var u : Number = 0; u < this.tabla [i].length; u ++) { var tmp : MovieClip = this ["item_" + i + "_" + u]; tmp.gotoAndStop ("off"); } } } }
Expliquemos un poco la clase.
Tenemos tres métodos. El primero se llama init y lo que hace es crear la grilla o tabla duplicando los MovieClips y ubicando su línea de tiempo (la del MC) en la etiqueta “off”, por lo que no se verá nada.
Dentro del tiempo que le pasamos como parámetro de duración empezarán a aprecer los movies ubicando la línea de tiempo de los mismos en la etiqueta “on”, donde puede haber una animación como es el caso de ejemplo donde hay una pequeña animación del cuadradito.
Otro de los métodos se llama cambio y se le pasa un único parametro, que es un array con la nueva imagen que queremos generar. Con éste metodo podemos llamarlo varias veces con un setInterval para que cada x tiempo cambie de imagen (como en el ejemplo).
Acá les dejo las lineas de código y los array que usé para este ejemplo, así se termina de entender como funciona la clase. Sólo deben colocarlas en el primer keyframe de una pelicula de Flash, una vez puesto el archivo PixelPanel.as con la clase en la misma carpeta del .FLA
array1 = [ [1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,0,0,1,1,1,0,1,1,1,0], [1,0,0,0,1,0,0,0,0,1,0,0,1,0,1,0,0,1,0,0,0,1,0,0,0], [1,1,0,0,1,1,1,0,0,1,0,0,1,0,1,0,0,1,1,0,0,1,1,1,0], [1,0,0,0,0,0,1,0,0,1,0,0,1,0,1,0,0,1,0,0,0,0,0,1,0], [1,1,1,0,1,1,1,0,0,1,0,0,1,1,1,0,0,1,1,1,0,1,1,1,0] ]; array2 = [ [1,0,1,0,1,0,0,1,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0], [1,0,1,0,1,1,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0], [1,0,1,0,1,0,1,1,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0], [1,0,1,0,1,0,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0], [1,1,1,0,1,0,0,1,0,1,0,1,0,1,0,1,0,1,0,0,0,0,0,0,0] ]; array3 = [ [1,1,1,0,1,1,1,0,1,0,1,0,1,1,1,0,1,1,1,0,1,1,1,0,1], [1,0,1,0,1,0,1,0,1,0,1,0,1,0,0,0,1,0,1,0,1,0,1,0,1], [1,1,1,0,1,1,1,0,1,0,1,0,1,1,0,0,1,1,1,0,1,1,1,0,1], [1,0,0,0,1,1,0,0,1,0,1,0,1,0,0,0,1,0,1,0,1,0,1,0,0], [1,0,0,0,1,0,1,0,1,1,1,0,1,1,1,0,1,1,1,0,1,0,1,0,1] ]; array4 = [ [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] ]; animacion_mc.init(array1, "item_mc", 2, 1); setInterval(proxima, 3000); i = 1; function proxima(){ if(i == 4){ i = 1; }else{ i++; } animacion_mc.cambio(eval("array"+i)); }
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Publica tu comentario
El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro
Entra al foro y participa en la discusión
o puedes...
¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?
Inicia sesión
¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?
Registrate