Comunidad de diseño web y desarrollo en internet online

Posicionar objetos en una cuadrícula con ActionScript 3

Ésta es una clase muy simple que dispone elementos traídos desde la biblioteca, y antes de haberlos duplicado, los ubica en filas y columnas. Esta clase puede ser el principio para armar galerías de fotos, botoneras, etc., ya que puede recibir tanto MovieClips como Sprites. Conseguí acabarla después de unos pequeños tropiezos, que el Gran Maestro Z supo solucionar :alabado:
Veamos, lo primero que necesitamos es un clip en la biblioteca instanciado y exportado para ActionScript.
Una vez echo esto vamos con la clase:


Nota: prestar atención a los comentarios donde se explica el código

Código :

package com.penholder.display.mc{
   //
   import flash.display.DisplayObject;
   import flash.display.MovieClip;
   //
   public class DisplayMovieClipAsGrid extends MovieClip {
      //
      private var _clip:DisplayObject; // este sera el clip que le pasaremos desde la biblioteca
      private var _n:Number;           // la cantidad de clips a duplicar
      private var _column:Number;      // cantidad de columnas
      private var _space:uint;         // la separación entre los elemntos
      private var _posX:uint;          // las posiciones tanto en x
      private var _posY:uint;          // como en y
      //
      public function DisplayMovieClipAsGrid(clip:DisplayObject, n:Number, column:Number, space:uint):void {
         
         // pasamos las propiedades del constructor
         _clip = clip;
         _n = n;
         _posX = 0;
         _posY = 0;
         _column = column;
         _space = space;
         //
         buildGrid();
      }
      //
      private function buildGrid():void {
         //
         for (var i:uint = 0; i < _n; i++) {

            /* le pasamos a un nuevo objeto del tipo DisplayObject 
                una nueva instancia del clip original en  cada vuelta del for,
                el uso del displayObecto es lo q nos permite utilizar cualquier tipo de contenedor */
            var mc:DisplayObject = new (Object(_clip).constructor); 

                // ahora los vamos ubicando separados por el parametro "space"
            mc.x = (mc.width + _space) * _posX;
            mc.y = (mc.height + _space) * _posY;
            _posX++;

            // entonces una vez que se alcanzo el numero de columnas bajamos de fila
            if (_posX == _column) {
               _posX = 0;
               _posY++;
            }
                // final mente añadimos todos los clips al contenedor
            addChild(mc);
         }
      }
   }
}


Y en el fla tendríamos:

Código :

import com.penholder.display.mc.DisplayMovieClipAsGrid;
//
var Grid:DisplayMovieClipAsGrid = new DisplayMovieClipAsGrid(new Clip(), 12, 3, 5);
addChild(Grid);

De esta forma new Clip() es el objeto instanciado con esa clase en la biblioteca.

Como se puede ver la clase permite ordenar en una cuadrícula, así como también en una sola filo o columna, bastaría con asignar la misma cantidad de objetos a duplicar como de columnas, para un alineación solo horizontal; o bien una sola columna para que se dispongan en forma vertical.

¿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?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate