Panel de mensajes tipo LED en Flash (Cristalab)

Estás en: Cristalab > Tutoriales > Panel de mensajes tipo LED en Flash

Panel de mensajes tipo LED en Flash

Por: WeeDo + Otros tutoriales de WeeDo + 31 de Octubre del 2006

Autor

WeeDo
clabLevel: 357
3 Tutoriales
0 Ejemplos

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.

Acá va la Clase entera, para que la vean, es muy simple:

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));
}

Información adicional

Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros

Cristalab