04 10 06

Panel Pixelar (PixelPanel)

Escrito por: WeeDo en AS2, Flash, Tutoriales

Hace mucho no escribo nada de nada, pero estuve con poco tiempo :S asi que pido perdón!
El otro día armando un banner me surgió la necesidad de crear esta pequeña clase. Lo que hace es a traves de algunos arrays de ceros y unos dibuja en una tabla elementos encendidos o apagados.
Para que se entienda mejor veamos un ejemplo:

Necesita el Flash Player 9

La idea es simple, creamos una clase llamada PixelPanel, la cual recibe como parametros 4 cosas:
table: es un array multiple con 0 y 1. El cero indica q ese cuadrado no se vea, y el uno indica que si se vea.
link: es el nombre(linkeaje) del MovieClip que usaremos como "pixel".
separacion: es la distancia entre los MovieClip que usamos en pixeles.
duracion: el tiempo que tarda en generar la imagen en segundos.

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

Clase PixelPanel:

PLAIN TEXT
Actionscript:
  1. class PixelPanel extends MovieClip {
  2.     //
  3.     var duracion:Number;
  4.     var link:String;
  5.     var tabla:Array;
  6.     var separacion:Number;
  7.     var j:Number;
  8.     public function PixelPanel() {
  9.         this.j = 0;
  10.     }
  11.     private function depth():Number {
  12.         return j++;
  13.     }
  14.     //
  15.     public function init(_tabla:Array, _link:String, _separacion:Number, _duracion:Number):Void {
  16.         this.duracion = _duracion*1000;
  17.         this.link = _link;
  18.         this.tabla = _tabla;
  19.         this.separacion = _separacion;
  20.         //
  21.         for (var i:Number = 0; i<tabla.length; i++) {
  22.             for (var u:Number = 0; u<tabla[i].length; u++) {
  23.                 var tmp:MovieClip = this.attachMovie(this.link, "item_"+i+"_"+u, depth());
  24.                 tmp._x = (tmp._width+separacion)*u;
  25.                 tmp._y = (tmp._height+separacion)*i;
  26.                 tmp.gotoAndStop("off");
  27.                 tmp.estado = this.tabla[i][u];
  28.                 tmp.tiempo = getTimer();
  29.                 tmp.duracion = random(this.duracion);
  30.                 tmp.onEnterFrame = function() {
  31.                     if (getTimer()-this.tiempo>=this.duracion) {
  32.                         if (this.estado == 1) {
  33.                             this.gotoAndStop("on");
  34.                         }
  35.                         this.onEnterFrame = null;
  36.                     }
  37.                 };
  38.             }
  39.         }
  40.     }
  41.     public function cambio(_tabla:Array):Void {
  42.         this.tabla = _tabla;
  43.         for (var i:Number = 0; i<tabla.length; i++) {
  44.             for (var u:Number = 0; u<tabla[i].length; u++) {
  45.                 var tmp:MovieClip = this["item_"+i+"_"+u];
  46.                 tmp.estado = this.tabla[i][u];
  47.                 tmp.tiempo = getTimer();
  48.                 tmp.duracion = random(this.duracion);
  49.                 tmp.onEnterFrame = function() {
  50.                     if (getTimer()-this.tiempo>=this.duracion) {
  51.                         if (this.estado == 1) {
  52.                             this.gotoAndStop("on");
  53.                         } else {
  54.                             this.gotoAndStop("off");
  55.                         }
  56.                         this.onEnterFrame = null;
  57.                     }
  58.                 };
  59.             }
  60.         }
  61.     }
  62.     public function off():Void {
  63.         for (var i:Number = 0; i<this.tabla.length; i++) {
  64.             for (var u:Number = 0; u<this.tabla[i].length; u++) {
  65.                 var tmp:MovieClip = this["item_"+i+"_"+u];
  66.                 tmp.gotoAndStop("off");
  67.             }
  68.         }
  69.     }
  70. }

Expliquemos un poco la clase.
Tenemos tres metodos. El primero se llama init y lo que hace es crear la grilla o tabla duplicando los MovieClips y ubicando su linea de tiempo (la del MC) en la etiqueta "off", por lo que no se vera nada.

Dentro del tiempo que le pasamos como parametro de duración empezarán a aprecer los movie ubicando la linea 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 metodo se llama cambio y se le pasa un único parametro, que es un array con la nueva imagen que queremos generar.
Con este 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 cogido y los array que use para este ejemplo, así se termina de entender como funsiona la clase.

PLAIN TEXT
Actionscript:
  1. 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],
  2.          [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],
  3.          [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],
  4.          [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],
  5.          [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] ];
  6.  
  7. 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],
  8.          [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],
  9.          [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],
  10.          [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],
  11.          [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] ];
  12.  
  13. 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],
  14.          [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],
  15.          [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],
  16.          [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],
  17.          [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] ];
  18.  
  19. 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],
  20.          [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],
  21.          [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],
  22.          [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],
  23.          [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] ];
  24. /**/
  25.  
  26. animacion_mc.init(array1, "item_mc", 2, 1);
  27.  
  28. setInterval(proxima, 3000);
  29.  
  30. i = 1;
  31. function proxima(){
  32.     if(i == 4){
  33.         i = 1;
  34.     }else{
  35.         i++;
  36.     }
  37.     animacion_mc.cambio(eval("array"+i))
  38. }

Espero se entienda y les haya gustado el efecto. A continuación la descarga del ejemplo.

Archivos del ejemplo

6 comentarios sobre “Panel Pixelar (PixelPanel)”

  • 1
    13 de Noviembre del 2006 - 9:30
    nico dijo:

    Hola mi nombre es nico santos ! soy recibido de diseñador web en escuela Da Vinci [estoy dando clases de flash por ahi]… ahora llevando mi propia empresa… queria pasar a felcitarte: muy buenos trabajos !!! un gran ejemplo a seguir !!! gracias por todo !!!

    saludos

  • 2
    13 de Noviembre del 2006 - 23:30
    WeeDo dijo:

    Bueno Gracias Nico por las felicitaciones….
    Yo también estudié en Da Vinci y dí clases una vez recibido ;) así que mandá saludos a todos por ahí

  • 3
    14 de Noviembre del 2006 - 8:38
    nico dijo:

    Sabia por eso te hice el comentario !!!

    saludos

  • 4
    28 de Enero del 2007 - 4:40
    ramon dijo:

    oye se ve que eres bueno!!!

    me podrias recomendar literatura impresa en español o cosas por ahi en la web, que expliquen con palitos y bolitas el actionscript?

    primero desde no cero, desde -5

    gracias, ya con tus tutoriales.

  • 5
    1 de Febrero del 2007 - 13:18
    WeeDo dijo:

    Ramon, en internet hay de todo, una pagina que es como una biblia para los desarrolladores de Flash hispanos es Cristalab (www.cristalab.com), un sitio increible y una gran comunidad.

    Tambien podes visitar www.actionscript.es que es un rejunte de los mejores sites sobre AS y Flash.

    De libros para empezar hay un libro q me sirvio mucho q se llama “ActionScript 2.0 para Flash MX” de la editorial Anaya Multimedia… es medio viejo, pero siemrpe salen libros parecidos con versiones nuevas de Flash.

    Saludos!

  • 6
    28 de Febrero del 2008 - 23:08
    poto_yeah dijo:

    ramon… te amo… sabelo sos groso

Deje un comentario