Galeria de imagenes en Flash, clab_Gallery v1.0
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 webmaster@cristalab.com 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: webmaster@cristalab.com
Información adicional
Ejemplo del tutorial
Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros
Artículos Relacionados
