Galeria de imagenes en Flash, clab

Introducción

Este tutorial mostrara la forma de usar el codigo de la galeria de imagenes clab_Gallery de Cristalab, de modo que sea facilmente integrable en cualquier proyecto web.
No pretende ser una guia completa de construcción de una galeria de imagenes ya que considreamos, el codigo original de clab_Gallery satisface esa neecsidad, sin embargo si se daran las pautas generales del funcionamiento interno de la galeria de imagenes.

El codigo de la galeria es liberado bajo licencia GNU/GPL, por lo tanto es software libre de codigo abierto y descarga gratuita; las preguntas acerca de su funcionamiento y soporte al foro; si modificas o añades codigo que contribuya en algo a la galeria, por favor envialo a su autor original en [email protected] quien lo incluira en la galeria, tal como reza la licencia GPL.

Bueno, ya sin tanto rodeo y en un modo mas ameno iniciemos el tuto de la galeria de imagenes clab_Gallery

Consideraciones iniciales y puesta a punto

Debes usar Flash MX 2004 para que la galeria funcione, ya que usamos tecnicas avnzadas como programación orientada a objetos, MovieClipLoaders y otras caracteristicas solo disponibles en MX 2004.

Descarga el archivo .ZIP adjunto a este tutorial y descomprimelo en alguna carpeta; en tu explorador debe verse algo similar a esto:

Vista en el explorador de los archivos de clab_Gallery

Lo primero que haremos es decirle a Flash que busque archivos de clase en esa carpeta llamada "cristalab", lugar donde se almacenan las clases que usa la galeria.

Para esto, dentro de Flash MX 2004 abrimos galeria.fla y vamos al menu File -> Publish Settings, y en la solapa Flash nos aseguramos que en el menu ActionScript Version diga ActionScript 2.0 y clickemos el boton Settings, desplegara un cuadro de dialogo donde oprimiendo el boton con el icono + crearemos una nueva entrada que quede como en esta grafica:

Vista del cuadro de dialogo de ruta de clases para la galeria

El archivo XML

La base de nuestra galeria es un archivo XML donde se encuentran los datos a cargar, com cantidad de imagenes o titulo de nuestra galeria, haciendo mas facil el proceso de desarrollo y adaptación; este es el archivo imagenes.xml:

<galeria>
	<cantidad>29</cantidad>
	<titulo>Freddie Gallery</titulo>
	<ruta>http://www.cristalab.com/files/ejemplos/galeriaOOP</ruta>
</galeria>

Asi si, por ejemplo, quisieramos cargar 16 imagenes y llamar a nuestra galeria Fotos de mi familia, y la ruta donde tengo las imagenes (Ver punto mas adelante) fuera http://www.mipagina.com/galeria modificariamos el archivo de esta manera:

<galeria>
	<cantidad>16</cantidad>
	<titulo>Fotos de mi familia</titulo>
	<ruta>http://www.mipagina.com/galeria</ruta>
</galeria>

Ubicación y detalles de las fotografias

Para conservar la estructura original, crearas dentro de la carpeta que colocaste en la etiqueta ruta del archivo XML una carpeta llamada images donde crearas otras dos carpetas llamadas normal y mini, en mini iran los thumbnails (Pequeñas imagenes) de las fotografias mientras que en normal iran las fotos originales.
Las fotos no tienen restricción de tamaño, pero las miniaturas NO pueden superar los 77 pixeles de ancho por 90 pixeles de alto, ten en cuenta eso cuando estes generandolas

Si necesitas una guia aqui puedes descargar las imagenes de ejemplo (No incluidas en el .zip)

El nombre de las imagenes miniatura (dentro de la carpeta mini) sera miniX.jpg donde X es el numero de la imagen, recuerde que se numero va de 1 hasta la cantidad que especifico en el XML, asi mismo, las fotos normales deben nombrarse (Dentro de la carpeta normal) como X.jpg donde X es ... lo mismo :D

Deben ser JPGs y no deben ser JPGs progresivos, si no, no cargaran.

Estructura del codigo de clab_Gallery v1.0

Recordamos que el codigo esta en ActionScript 2.0, si tienes algun problema con el, puedes leer el Tutorial de ActionScript 2.0
El codigo de la galeria esta divido en 4 clases, dentro de la carpeta cristalab/galeria las encontraras:

Imagenes: Encargado de la gestión principal de la galeria, carga de thumbnails y analisis del XML; tambien controla la cantidad de paginas de la galeria
Mini: Carga, precarga y administra los thumbnails (Imagenes pequeñas)
Foto: Carga, precarga y administra el popup interno de Flash donde se muestran las fotos
Preloader: Dibuja todas las precargas de la pelicula

Tu tambien puedes apoyar!

Estas son las bases necesarias para poder hacer funcionar la galeria de imagenes de Cristalab clab_Gallery, pero aun se puede mejorar mucho mas, si modificas en algo el codigo, puedes aportarlo para beneficio de la comunidad.
Espero disfrutes montando la galeria como nosotros disfrutamos creando este codigo para ti, para nuestra comunidad.

The Cristalab Team
Info: [email protected]

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

Descargar Archivo

Galeria de imagenes en Flash, clab_Gallery v1.0