Snippet AS2 Menu Galeria Miniaturas XML ScrollBar

NOTA: No se que tan util le pueda ser a alguien esto pues considero que AS2 esta dando sus ultimas pataditas, asi que como que publicar un tutorial en AS2 no estaria muy bien visto, es por eso que lo pondre en aportes para que los minutos que le dedique a este codigo no se pierdan en el limbo de los post. Esto es un Snippet.

Como crear un Menu o Galeria de Miniaturas via XML con ScrollBar

Definir variables inciales

Código ActionScript :

var lista_xml:XML = new XML(); 
lista_xml.ignoreWhite = true; 
var cargador_mcl:MovieClipLoader = new MovieClipLoader(); 
cargador_mcl.addListener(this); 
var img_w:Number = 125;//Ancho de las imagenes 
var img_h:Number = 135;//Alto de las imagenes 
var img_n:Number = 3;//Numero de imagenes que se mostraran 
var img_s:Number = 10;//Separacion entre las imagenes 
var gal_x:Number = 50;//Posicion en X de la galeria 
var gal_y:Number = 100;//Posicion en Y de la galeria 

Bueno, creo que todo esta bien claro, pero por si las dudas explico "img_n", esa variable es el numero de thumbs(cajas, miniaturas) que se van a mostrar, por ejemplo si tienes 10 thumbs, img_n determinaria que solo se muestren 3 y con el scroll se puedan mostrar las otras 7, img_n en combinacion con img_w determinan el tamaño de la galeria, cuando hagas pruebas cambia el valor de img_n para que veas que sucede.

Crear la Galeria

Código ActionScript :

var galeria:MovieClip = this.createEmptyMovieClip("galeria", 120); 
galeria.createEmptyMovieClip("miniaturas", 0); 
galeria.createEmptyMovieClip("mascara", 1); 
galeria.mascara.beginFill(0,0); 
galeria.mascara.moveTo(0,0); 
galeria.mascara.lineTo((this.img_w + this.img_s) * this.img_n, 0); 
galeria.mascara.lineTo((this.img_w + this.img_s) * this.img_n, this.img_h); 
galeria.mascara.lineTo(0, this.img_h); 
galeria.mascara.endFill(); 
galeria.miniaturas.setMask( galeria.mascara ); 
galeria._x = this.gal_x; 
galeria._y = this.gal_y; 

Simplemente se crean los movieclips que contendran la galeria y la mascara, "beginFill" "lineTo" son funciones de la api de dibujo de los movieclips con las cuales creo un cuadrado en las mascara del tamaño justo para que solo se vean el numero de imagenes indicado en las variables inciales y posiciono la galeria.

Crear ScrollBar

Código ActionScript :

var slider:MovieClip = galeria.createEmptyMovieClip("slider", 2); 
slider.beginFill(0xFFCC33,100); 
slider.moveTo(0,0); 
slider.lineTo(this.img_w/2, 0); 
slider.lineTo(this.img_w/2, 20); 
slider.lineTo(0, 20); 
slider.endFill(); 
slider._y = this.img_h + 5; 
slider.onPress = function( Void ) 
{ 
   this.startDrag(false,0,this._y,this._parent.mascara._width - this._width, this._y); 
} 
slider.onRelease = function( Void ) 
{ 
   this.stopDrag(); 
} 
slider.onEnterFrame = function() 
{  
   this._parent.miniaturas._x = this._x / (this._parent.mascara._width - this._width) * (this._parent.miniaturas._width - (this._parent.mascara._width - this._parent._parent.img_s)) * -1; 
} 

Creo el movieclip que contendra la scrollbar, dibujo un cuadrado que sera la representacion y defino los metodos que arrastraran la scrollbar, en el evento OnEnterFrame, evaluo la posicion de la scrollbar y con unos calculos obtengo la nueva posicion de las imagenes que han sido enmascaradas.

Cargar XML

Código ActionScript :

lista_xml.onLoad = function( ok:Boolean )  
{ 
   if( ok )//Si se cargo correctamente 
   { 
      crearImagenes(); 
   } 
   else trace("No se pudo cargar el XML"); 
} 
lista_xml.load("lista.xml"); 

Simplemente le decimos al objeto XML que debe cargar y agregamos su evento onLoad que indica cuando se ha cargado correctamente, lista.xml es una archivo ubicado en la misma carpeta que el SWF, dicho XML debe estar formado de la siguiente manera:

Código XML :

<?xml version="1.0" encoding="UTF-8"?> 
<galeria> 
   <img nom_xml="IMG/img1.jpg" url_xml="http://www.cristalab.com" /> 
   <img nom_xml="IMG/img2.jpg" url_xml="http://www.google.com" /> 
   <img nom_xml="IMG/img3.jpg" url_xml="http://www.w3c.es" /> 
   <img nom_xml="IMG/img4.jpg" url_xml="http://www.adobe.com" /> 
</galeria> 

En realidad las etiquetas "galeria" e "img", tienen nombres depreciables osea pueden ser cualquiera, pero elegi esos para que se entienda, el atributo "nom_xml" contiene la ruta de la imagen que se va a cargar y si el atributo "url_xml" existe o es diferente de ""(cadena vacia), entonces sera la url que se cargara al presionar sobre la imagen.

Crear las imagenes

Código ActionScript :

function crearImagenes( Void ):Void 
{ 
   //Variables auxiliares 
   var aux:MovieClip; 
   var img_aux:String; 
   var url_aux:String; 
   for( var i:Number = 0, l:Number = lista_xml.firstChild.childNodes.length; i < l; i++) 
   { 
      aux = this.crearImagen( i ); 
      url_aux = lista_xml.firstChild.childNodes[i].attributes.url_xml; 
      img_aux = lista_xml.firstChild.childNodes[i].attributes.nom_xml; 
      //Aqui se indica que al presionar el boton se carge la url 
      if( url_aux != undefined && url_aux != "" )
      {
            aux.boton_mc.url = url_aux; 
            aux.boton_mc.onRelease = function( Void ) 
            { 
               getURL( this.url );  
            }; 
      }
      cargador_mcl.loadClip( img_aux, aux.thumb_mc ); 
   } 
} 
function crearImagen( index:Number ):MovieClip 
{ 
   //Clips 
   var clip:MovieClip = this.galeria.miniaturas.createEmptyMovieClip("mc_" + index, index); 
   clip.createEmptyMovieClip("boton_mc", 1) 
   clip.createEmptyMovieClip("thumb_mc", 0) 
    
   //Posicion 
   clip.index = i; 
   clip._x = (this.img_w + this.img_s) * index; 
    
   //Fondo transparente del boton 
   clip.boton_mc.beginFill(0,0); 
   clip.boton_mc.moveTo(0,0); 
   clip.boton_mc.lineTo(this.img_w,0); 
   clip.boton_mc.lineTo(this.img_w, this.img_h); 
   clip.boton_mc.lineTo(0, this.img_h); 
   clip.boton_mc.endFill(); 
   return clip; 
} 

La primer funcion "crearImagenes", sirve para "parsear"(analizar y obtener informacion) el objeto XML, asignar valores al boton y cargar las imagenes, ademas de invocar a la segunda funcion "crearImagen" la cual se encarga de crear el movieclip contenedor y posicionarlo deacuerdo al indice que se le pasa como parametro, dicho contenedor tendra la imagen y dibujara un cuadrado transparente que es el que sera usado como boton.

Los eventos del cargador

Código ActionScript :

function onLoadInit( target:MovieClip ) 
{  
   target._width = this.img_w;  
   target._height = this.img_h; 
} 

Pues estos eventos solo se encargan de redimensionar los clips con respecto a las variables inciales.
FIN

Codigo completo para CopyPaste

Código ActionScript :

//--Definir variables inciales --// 
var lista_xml:XML = new XML(); 
lista_xml.ignoreWhite = true; 
var cargador_mcl:MovieClipLoader = new MovieClipLoader(); 
cargador_mcl.addListener(this); 
var img_w:Number = 125;//Ancho de las imagenes 
var img_h:Number = 135;//Alto de las imagenes 
var img_n:Number = 3;//Numero de imagenes que se mostraran 
var img_s:Number = 10;//Separacion entre las imagenes 
var gal_x:Number = 50;//Posicion en X de la galeria 
var gal_y:Number = 100;//Posicion en Y de la galeria 
 
 
//-- Crear la galeria --// 
var galeria:MovieClip = this.createEmptyMovieClip("galeria", 120); 
galeria.createEmptyMovieClip("miniaturas", 0); 
galeria.createEmptyMovieClip("mascara", 1); 
galeria.mascara.beginFill(0,0); 
galeria.mascara.moveTo(0,0); 
galeria.mascara.lineTo((this.img_w + this.img_s) * this.img_n, 0); 
galeria.mascara.lineTo((this.img_w + this.img_s) * this.img_n, this.img_h); 
galeria.mascara.lineTo(0, this.img_h); 
galeria.mascara.endFill(); 
galeria.miniaturas.setMask( galeria.mascara ); 
galeria._x = this.gal_x; 
galeria._y = this.gal_y; 
 
//-- Crear ScrollBar --// 
var slider:MovieClip = galeria.createEmptyMovieClip("slider", 2); 
slider.beginFill(0xFFCC33,100); 
slider.moveTo(0,0); 
slider.lineTo(this.img_w/2, 0); 
slider.lineTo(this.img_w/2, 20); 
slider.lineTo(0, 20); 
slider.endFill(); 
slider._y = this.img_h + 5; 
slider.onPress = function( Void ) 
{ 
   this.startDrag(false,0,this._y,this._parent.mascara._width - this._width, this._y); 
} 
slider.onRelease = function( Void ) 
{ 
   this.stopDrag(); 
} 
slider.onEnterFrame = function() 
{  
   this._parent.miniaturas._x = this._x / (this._parent.mascara._width - this._width) * (this._parent.miniaturas._width - (this._parent.mascara._width - this._parent._parent.img_s)) * -1; 
} 
 
//-- Carga XML --// 
lista_xml.onLoad = function( ok:Boolean )  
{ 
   if( ok )//Si se cargo correctamente 
   { 
      crearImagenes(); 
   } 
   else trace("No se pudo cargar el XML"); 
} 
lista_xml.load("lista.xml"); 
 
//-- Crear las imagenes --// 
function crearImagenes( Void ):Void 
{ 
   //Variables auxiliares 
   var aux:MovieClip; 
   var img_aux:String; 
   var url_aux:String; 
   for( var i:Number = 0, l:Number = lista_xml.firstChild.childNodes.length; i < l; i++) 
   { 
      aux = this.crearImagen( i ); 
      url_aux = lista_xml.firstChild.childNodes[i].attributes.url_xml; 
      img_aux = lista_xml.firstChild.childNodes[i].attributes.nom_xml; 
      //Aqui se indica que al presionar el boton se carge la url 
      if( url_aux != undefined && url_aux != "" )
      {
            aux.boton_mc.url = url_aux; 
            aux.boton_mc.onRelease = function( Void ) 
            { 
               getURL( this.url );  
            }; 
      }
      cargador_mcl.loadClip( img_aux, aux.thumb_mc ); 
   } 
} 
function crearImagen( index:Number ):MovieClip 
{ 
   //Clips 
   var clip:MovieClip = this.galeria.miniaturas.createEmptyMovieClip("mc_" + index, index); 
   clip.createEmptyMovieClip("boton_mc", 1) 
   clip.createEmptyMovieClip("thumb_mc", 0) 
    
   //Posicion 
   clip.index = i; 
   clip._x = (this.img_w + this.img_s) * index; 
    
   //Fondo transparente del boton 
   clip.boton_mc.beginFill(0,0); 
   clip.boton_mc.moveTo(0,0); 
   clip.boton_mc.lineTo(this.img_w,0); 
   clip.boton_mc.lineTo(this.img_w, this.img_h); 
   clip.boton_mc.lineTo(0, this.img_h); 
   clip.boton_mc.endFill(); 
   return clip; 
} 
 
//-- Eventos del Cargador --// 
function onLoadInit( target:MovieClip ) 
{  
   target._width = this.img_w;  
   target._height = this.img_h; 
} 

Suerte a todos.

Hola de nuevo. aqui talachandole al Snippet, almenos una persona ya me dijo que le funciono,

Version 1.1

Mejoras

• Posibilidad de elegir si cargar la url en un movieclip o en el navegador
  
• Posibilidad de elegir un clip de la biblioteca para usar como scrollbar
  
• Efecto FadeIn.
  

Capturas

Codigo

Código ActionScript :

//--Definir variables inciales --//
var lista_xml:XML = new XML();  
lista_xml.ignoreWhite = true;  
var cargador_mcl:MovieClipLoader = new MovieClipLoader();
cargador_mcl.addListener(this);

var slideColor:Number = 0xFFFFFF;//Color del slider
var slideClip:String = "Slider_id";//id de la biblioteca del slider

var img_w:Number = 110;//Ancho de las imagenes  
var img_h:Number = 110;//Alto de las imagenes  
var img_n:Number = 4;//Numero de imagenes que se mostraran  
var img_s:Number = 10;//Separacion entre las imagenes  
var gal_x:Number = Stage.width - 510;//Posicion en X de la galeria  
var gal_y:Number = Stage.height - 140;//Posicion en Y de la galeria  

var url_target:String = "_self";//Target donde se cargan las urls

var lienzo_bln:Boolean = true;//Cargar el contenido en un Lienzo
var lnz_x:Number = 0;//Posicion en X del Lienzo
var lnz_y:Number = 35;//Posicion en Y del Lienzo
var lnz_w:Number = Stage.width;//Ancho del Lienzo
var lnz_h:Number = Stage.height - 170;// Alto del Lienzo

Hay muchas nuevas variables inciales, no les veo mayor explicacion que los comentarios //; "slideClip" es el id vinculado a un MovieClip de la biblioteca, sera el clip que se tomo como scrollBar(Slider); "lienzo_bln" es un valor falso/verdadero que nos indica si se cargaran las urls en un MovieClip o en el navegador; lnz_w y lnz_h son el ancho y el alto del Lienzo, notese que use el objeto Stage para centrar mi clip; "url_target" se emplea en caso de que se carge la url en el navegador, indica que target(ventana, frame, pestaña) se cargara la url.

Código ActionScript :

//-- Crear la galeria --//  
var galeria:MovieClip = this.createEmptyMovieClip("galeria", 120);
galeria.createEmptyMovieClip("miniaturas", 0);  
galeria.createEmptyMovieClip("mascara", 1);  
setArea( galeria.mascara, (img_w + img_s) * img_n, img_h );
galeria.miniaturas.setMask( galeria.mascara );  
galeria._x = this.gal_x;  
galeria._y = this.gal_y;

//-- Crear el lienzo --// 
var lienzo:MovieClip;
if( lienzo_bln )
{
   //Creamos los clips
   lienzo = this.createEmptyMovieClip("lienzo", 119);
   lienzo.createEmptyMovieClip("bound_mc", 0);
   lienzo.createEmptyMovieClip("inner_mc", 1);
   //Creamos un TextField donde se despliega el porcentaje cargado
   lienzo.createTextField("texto_txt", 2, lnz_w / 2 - 50, lnz_h / 2 - 11, 100, 22);
   //Le damos formato
   var format:TextFormat = new TextFormat();
   format.align = "center"
   format.bold = true;
   format.font = "Arial";
   format.color = 0xc6c6c6;
   format.size = 9;
   lienzo.texto_txt.setNewTextFormat( format );
   lienzo.texto_txt.selectable = false;
   //Dibujamos los limites
   setArea( lienzo.bound_mc, lnz_w, lnz_h );
   //Posicionamos
   lienzo._x = lnz_x;
   lienzo._y = lnz_y;
   //Funcion para cargar imagenes
   this.cargarLienzo = function( url:String ):Void
   {
      this.cargador_mcl.loadClip( url, this.lienzo.inner_mc );
   };
}

Aqui se creara el lienzo y sus clips internos, en inner_mc se cargara la url y bound_mc sirve para poder centrar la imagen. En la version anterior colocaba todos los pasos para dibujar un cuadrado, ahora los he condensado en una simple funcion llamada "setArea".

Código ActionScript :

//-- Crear ScrollBar --//
//Creamos el slider desde la biblioteca
var slider:MovieClip = galeria.attachMovie(slideClip, "slider", 2);
//Si no fue creado
if( slider == undefined )
{
   //Lo creamos
   slider = galeria.createEmptyMovieClip("slider", 2);  
   //Lo dibujamos
   setArea( slider, this.img_w/2, 20, slideColor, 100 );
}
//Variables
slider.owner = this;
//Posicionamos
slider._y = this.img_h + 5;  
//Declaramos eventos
slider.onPress = function( Void ):Void  
{  
   //Al presionar incia el arrastre
   this.startDrag(false,0,this._y,this._parent.mascara._width - this._width - this.owner.img_s, this._y);
}; 
slider.onRelease = slider.onReleaseOutside = function( Void ):Void
{  
   //Al soltar se detiene el arrastre
   this.stopDrag();  
}; 
slider.onEnterFrame = function( Void ):Void
{
   //Calculos para recorrer las miniaturas respecto a la posicion de scrollBar
   this._parent.miniaturas._x = this._x / (this._parent.mascara._width - this._width) * (this._parent.miniaturas._width - (this._parent.mascara._width - this._parent._parent.img_s)) * -1;
}; 

el slider casi no cambio, al incio se intenta cargar el slider de la biblioteca, si el id no existe o es undefined, se dibuja un cuadrado todo feo que sirve de slider, ademas ajusté un poco la posicion de las miniaturas.

Código ActionScript :

//-- Carga XML --//  
lista_xml.onLoad = function( ok:Boolean ):Void
{  
   if( ok )//Si se cargo correctamente  
   {  
      crearImagenes();  
   }  
   else trace("No se pudo cargar el XML");  
};
lista_xml.load("lista.xml");  
  
//-- Crear las imagenes --//  
function crearImagenes( Void ):Void  
{  
   //Variables auxiliares  
   var aux:MovieClip;  
   var img_aux:String;  
   var url_aux:String;  
   for( var i:Number = 0, l:Number = lista_xml.firstChild.childNodes.length; i < l; i++)  
   {  
      //Creamos la miniatura
      aux = this.crearImagen( i );
      //Parseo de XML
      url_aux = lista_xml.firstChild.childNodes[i].attributes.url_xml;
      img_aux = lista_xml.firstChild.childNodes[i].attributes.nom_xml;
      //Si existe la url entonces
      if( url_aux != undefined && url_aux != "" )
      {
            aux.bound_mc.url = url_aux;
         //al presionar
            aux.bound_mc.onRelease = function( Void ):Void  
            {
            this._parent.presionado( this.url );
            };
      }
      //Cargamos la miniatura
      cargador_mcl.loadClip( img_aux, aux.thumb_mc );  
   }
}  
function crearImagen( index:Number ):MovieClip  
{  
   //Creamamos los clips
   var clip:MovieClip = this.galeria.miniaturas.createEmptyMovieClip("mc_" + index, index);  
   clip.createEmptyMovieClip("bound_mc", 1); 
   clip.createEmptyMovieClip("thumb_mc", 0);
   clip.owner = this;
   clip.selected = false;
       
   //Posicion
   clip.index = i;
   clip._x = (this.img_w + this.img_s) * index;
       
   //Fondo transparente del boton    
   setArea( clip.bound_mc, img_w, img_h );
   
   //Funcion que colorea el clip bound_mc, si se esta seleccionado
   clip.setSelected = function( aux:Boolean )
   {
      if( aux )
      {
         this.owner.setArea( this.bound_mc, this.bound_mc._width, this.bound_mc._height, this.owner.slideColor, 20 );
         //todos los demas los colocamos en false
         for(var i in this._parent)
         {
            if( this._parent[i].selected )
            {
               this._parent[i].setSelected( false );
               break;
            }
         }
      }
      else
      {
         setArea( this.bound_mc, this.bound_mc._width, this.bound_mc._height );
      }
      this.selected = aux;
   }
   //Funcion invocada cuando se presiona el clip bound_mc
   clip.presionado = function( url:String )
   {
      //Si se usa lienzo
      if( this.owner.lienzo_bln )
      {
         //Nos colocamos seleccionados
         this.setSelected(true);
         //Cargamos la imagen en el Lienzo
         this.owner.cargarLienzo( url )
      }
      //Si no
      else
      {
         //Cargamos la url en el navegador
         getURL( url, this.owner.url_target );
      }
   };
   return clip;
}  

Crear las imagenes ha cambiado bastante, en la funcion "crearImagenes" se ha hecho la evaluacion dentro del boton si se usa un lienzo, entonces cargara en el, de otro modo cargara en el navegador. Los thumbs(cajas, miniaturas) ahora tiene un nuevo metodo llamado "setSelected" cuando se le pasa un "true" se marca y si se le pasa un false, se desmarca, obvio.

Código ActionScript :

//-- Eventos del Cargador --//
function onLoadInit( target:MovieClip ):Void
{//Clip accesible
   //Centramos la imagen
   target._x = (target._parent.bound_mc._width - target._width ) /  2;
   target._y = (target._parent.bound_mc._height - target._height ) /  2;
   //Efecto fadeIn( _alpha 0 -> 100 )
   target._alpha = 0;
   target.onEnterFrame = function( Void )
   {
      if( (this._alpha += 10) >= 100 ) delete this.onEnterFrame;
   };
}
function onLoadComplete( target:MovieClip ):Void
{//Clip cargado
   //Desaparece el cargador
   lienzo.texto_txt.text = "";   
}
function onLoadProgress( target:MovieClip, l:Number, t:Number ):Void
{//Clip cargandose
   //Si se esta cargando el lienzo
   if( target == lienzo.inner_mc )
   {
      //Desplegamos el porcentaje cargado
      lienzo.texto_txt.text = "Cargando... " + Math.floor(l / t * 100);      
   }
}

Por orden de sucesos: "onLoadProgress" aqui se indica el progreso de carga en el cuadro de texto del lienzo, "onLoadComplete" aqui simplemente se limpia el cuadro de texto, "onLoadInit" aqui se centra la imagen, y se hace el efecto FadeIn.

Código ActionScript :

//-- Utilerias --// 
function setArea( clip:MovieClip, w:Number, h:Number, color:Number, alpha:Number ):Void
{
   //Dibujamos un cuadrado
   clip.clear();
   clip.beginFill( color?color:0, alpha?alpha:0 );
   clip.moveTo( 0, 0 );
   clip.lineTo( w, 0 );
   clip.lineTo( w, h );
   clip.lineTo( 0, h );
   clip.endFill();   
}

La funcion set area usa la api de dibujo de los MovieClip para crear un cuadrado en "clip", de ancho "w" y alto "h", con color "color" y transaparencia "alpha".

el XML

Este no cambio pero lo pongo de nuevo

Código XML :

<?xml version="1.0" encoding="UTF-8"?>  
<galeria>  
   <img nom_xml="MCF/IMG/_01_t.jpg" url_xml="MCF/IMG/_01.jpg" />  
   <img nom_xml="MCF/IMG/_02_t.jpg" url_xml="MCF/IMG/_02.jpg" />  
   <img nom_xml="MCF/IMG/_05_t.jpg" url_xml="MCF/IMG/_05.jpg" /> 
   <img nom_xml="MCF/IMG/_03_t.jpg" url_xml="MCF/IMG/_03.jpg" />  
   <img nom_xml="MCF/IMG/_04_t.jpg" url_xml="MCF/IMG/_04.jpg" />  
</galeria>

Codigo completo para CopyPaste

Código ActionScript :

//--Definir variables inciales --//
var lista_xml:XML = new XML();  
lista_xml.ignoreWhite = true;  
var cargador_mcl:MovieClipLoader = new MovieClipLoader();
cargador_mcl.addListener(this);

var slideColor:Number = 0xFFFFFF;//Color del slider
var slideClip:String = "Slider_id";//id de la biblioteca del slider

var img_w:Number = 110;//Ancho de las imagenes  
var img_h:Number = 110;//Alto de las imagenes  
var img_n:Number = 4;//Numero de imagenes que se mostraran  
var img_s:Number = 10;//Separacion entre las imagenes  
var gal_x:Number = Stage.width - 510;//Posicion en X de la galeria  
var gal_y:Number = Stage.height - 140;//Posicion en Y de la galeria  

var url_target:String = "_self";//Target donde se cargan las urls

var lienzo_bln:Boolean = true;//Cargar el contenido en un Lienzo
var lnz_x:Number = 0;//Posicion en X del Lienzo
var lnz_y:Number = 35;//Posicion en Y del Lienzo
var lnz_w:Number = Stage.width;//Ancho del Lienzo
var lnz_h:Number = Stage.height - 170;// Alto del Lienzo

//-- Crear la galeria --//  
var galeria:MovieClip = this.createEmptyMovieClip("galeria", 120);
galeria.createEmptyMovieClip("miniaturas", 0);  
galeria.createEmptyMovieClip("mascara", 1);  
setArea( galeria.mascara, (img_w + img_s) * img_n, img_h );
galeria.miniaturas.setMask( galeria.mascara );  
galeria._x = this.gal_x;  
galeria._y = this.gal_y;

//-- Crear el lienzo --// 
var lienzo:MovieClip;
if( lienzo_bln )
{
   //Creamos los clips
   lienzo = this.createEmptyMovieClip("lienzo", 119);
   lienzo.createEmptyMovieClip("bound_mc", 0);
   lienzo.createEmptyMovieClip("inner_mc", 1);
   //Creamos un TextField donde se despliega el porcentaje cargado
   lienzo.createTextField("texto_txt", 2, lnz_w / 2 - 50, lnz_h / 2 - 11, 100, 22);
   //Le damos formato
   var format:TextFormat = new TextFormat();
   format.align = "center"
   format.bold = true;
   format.font = "Arial";
   format.color = 0xc6c6c6;
   format.size = 9;
   lienzo.texto_txt.setNewTextFormat( format );
   lienzo.texto_txt.selectable = false;
   //Dibujamos los limites
   setArea( lienzo.bound_mc, lnz_w, lnz_h );
   //Posicionamos
   lienzo._x = lnz_x;
   lienzo._y = lnz_y;
   //Funcion para cargar imagenes
   this.cargarLienzo = function( url:String ):Void
   {
      this.cargador_mcl.loadClip( url, this.lienzo.inner_mc );
   };
}

//-- Crear ScrollBar --//
//Creamos el slider desde la biblioteca
var slider:MovieClip = galeria.attachMovie(slideClip, "slider", 2);
//Si no fue creado
if( slider == undefined )
{
   //Lo creamos
   slider = galeria.createEmptyMovieClip("slider", 2);  
   //Lo dibujamos
   setArea( slider, this.img_w/2, 20, slideColor, 100 );
}
//Variables
slider.owner = this;
//Posicionamos
slider._y = this.img_h + 5;  
//Declaramos eventos
slider.onPress = function( Void ):Void  
{  
   //Al presionar incia el arrastre
   this.startDrag(false,0,this._y,this._parent.mascara._width - this._width - this.owner.img_s, this._y);
}; 
slider.onRelease = slider.onReleaseOutside = function( Void ):Void
{  
   //Al soltar se detiene el arrastre
   this.stopDrag();  
}; 
slider.onEnterFrame = function( Void ):Void
{
   //Calculos para recorrer las miniaturas respecto a la posicion de scrollBar
   this._parent.miniaturas._x = this._x / (this._parent.mascara._width - this._width) * (this._parent.miniaturas._width - (this._parent.mascara._width - this._parent._parent.img_s)) * -1;
}; 
 
//-- Carga XML --//  
lista_xml.onLoad = function( ok:Boolean ):Void
{  
   if( ok )//Si se cargo correctamente  
   {  
      crearImagenes();  
   }  
   else trace("No se pudo cargar el XML");  
};
lista_xml.load("lista.xml");  
  
//-- Crear las imagenes --//  
function crearImagenes( Void ):Void  
{  
   //Variables auxiliares  
   var aux:MovieClip;  
   var img_aux:String;  
   var url_aux:String;  
   for( var i:Number = 0, l:Number = lista_xml.firstChild.childNodes.length; i < l; i++)  
   {  
      //Creamos la miniatura
      aux = this.crearImagen( i );
      //Parseo de XML
      url_aux = lista_xml.firstChild.childNodes[i].attributes.url_xml;
      img_aux = lista_xml.firstChild.childNodes[i].attributes.nom_xml;
      //Si existe la url entonces
      if( url_aux != undefined && url_aux != "" )
      {
            aux.bound_mc.url = url_aux;
         //al presionar
            aux.bound_mc.onRelease = function( Void ):Void  
            {
            this._parent.presionado( this.url );
            };
      }
      //Cargamos la miniatura
      cargador_mcl.loadClip( img_aux, aux.thumb_mc );  
   }
}  
function crearImagen( index:Number ):MovieClip  
{  
   //Creamamos los clips
   var clip:MovieClip = this.galeria.miniaturas.createEmptyMovieClip("mc_" + index, index);  
   clip.createEmptyMovieClip("bound_mc", 1); 
   clip.createEmptyMovieClip("thumb_mc", 0);
   clip.owner = this;
   clip.selected = false;
       
   //Posicion
   clip.index = i;
   clip._x = (this.img_w + this.img_s) * index;
       
   //Fondo transparente del boton    
   setArea( clip.bound_mc, img_w, img_h );
   
   //Funcion que colorea el clip bound_mc, si se esta seleccionado
   clip.setSelected = function( aux:Boolean )
   {
      if( aux )
      {
         this.owner.setArea( this.bound_mc, this.bound_mc._width, this.bound_mc._height, this.owner.slideColor, 20 );
         //todos los demas los colocamos en false
         for(var i in this._parent)
         {
            if( this._parent[i].selected )
            {
               this._parent[i].setSelected( false );
               break;
            }
         }
      }
      else
      {
         setArea( this.bound_mc, this.bound_mc._width, this.bound_mc._height );
      }
      this.selected = aux;
   }
   //Funcion invocada cuando se presiona el clip bound_mc
   clip.presionado = function( url:String )
   {
      //Si se usa lienzo
      if( this.owner.lienzo_bln )
      {
         //Nos colocamos seleccionados
         this.setSelected(true);
         //Cargamos la imagen en el Lienzo
         this.owner.cargarLienzo( url )
      }
      //Si no
      else
      {
         //Cargamos la url en el navegador
         getURL( url, this.owner.url_target );
      }
   };
   return clip;
}  
  
//-- Eventos del Cargador --//
function onLoadInit( target:MovieClip ):Void
{//Clip accesible
   //Centramos la imagen
   target._x = (target._parent.bound_mc._width - target._width ) /  2;
   target._y = (target._parent.bound_mc._height - target._height ) /  2;
   //Efecto fadeIn( _alpha 0 -> 100 )
   target._alpha = 0;
   target.onEnterFrame = function( Void )
   {
      if( (this._alpha += 10) >= 100 ) delete this.onEnterFrame;
   };
}
function onLoadComplete( target:MovieClip ):Void
{//Clip cargado
   //Desaparece el cargador
   lienzo.texto_txt.text = "";   
}
function onLoadProgress( target:MovieClip, l:Number, t:Number ):Void
{//Clip cargandose
   //Si se esta cargando el lienzo
   if( target == lienzo.inner_mc )
   {
      //Desplegamos el porcentaje cargado
      lienzo.texto_txt.text = "Cargando... " + Math.floor(l / t * 100);      
   }
}

//-- Utilerias --// 
function setArea( clip:MovieClip, w:Number, h:Number, color:Number, alpha:Number ):Void
{
   //Dibujamos un cuadrado
   clip.clear();
   clip.beginFill( color?color:0, alpha?alpha:0 );
   clip.moveTo( 0, 0 );
   clip.lineTo( w, 0 );
   clip.lineTo( w, h );
   clip.lineTo( 0, h );
   clip.endFill();   
}

Notas

Las imagenes que utilizo para los thumbs miden 100x100, las imagenes grandes miden 470x270.
Para probar el cargador exporta la pelicula, en el menu "ver" selecciona "simular descarga"

Suerte.

Muchas gracias lo prove y funciona de maravilla.

Algun dia quisiera tener tantos conocimientos en flash y AS2 como tu

pd:en el codigo de "Version 1.1" pusistes el tamño de los thums 110x110 ... es ok funciona bien.
pero en "Notas" pusistes los thumbs miden 100x100,
de todas maneras muchas gracias

Hola miguel_fox, efectivamente los archivos jpg estan en 100x100, defini las variables en 110x110 para dejar un "marco" de 5pixeles, si te das cuenta las imagenes seleccionadas tienen un marco. Saludos.

Hola a todos, seguire trabajando para mejorar un poco este Snippet, dudas tecnicas en los foros porfavor. Gracias.

Gracias por la explicacion del tamaño y el color de la barra.

Ocurrio que la scrollBar no es tan llamativa

Version 1.8a.0.23.clab

Mejoras

• Posibilidad de elegir si se usa la scrollBar o la posicion del Mouse para mover las miniaturas
  

Codigo

Código ActionScript :

var scrollBar_bln:Boolean = false;//Especifica si debera usar scrollBar
var slideColor:Number = 0xFFFFFF;//Color del slider
var slideClip:String = "Slider_id";//id de la biblioteca del slider

"scrollBar_bln" es la variable booleana que indica si se debe usar la ScrollBar, en caso de ser falso, se usara la posicion relativa del mouse para recorrer las miniaturas de izquierda a derecha.

Código ActionScript :

function moverClipX( clip:MovieClip, posicion:Number, aceleracion:Number ):Void
{
   clip.ex = posicion;
   clip.ac = aceleracion;
   clip.onEnterFrame = function( Void ):Void
   { 
      if ( (this._x += Math.floor((this.ex - this._x) / this.ac)) == this.ex ) delete this.onEnterFrame;
   };
} 

Tenemos una nueva funcion para la seccion de utilerias, esta funcion se encarga de mover con suavizado final al clip que se le pasa como parametro.

Código ActionScript :

if( scrollBar_bln )
{
   //Creamos el slider desde la biblioteca
   //...
}
else//Si no usa ScrollBar, se movera con el mouse
{
   //Creamos un clip guia de las medidas de galeria.mascara
   galeria.createEmptyMovieClip("bounds_mc", 2); 
   setArea( galeria.bounds_mc, galeria.mascara._width, galeria.mascara._height );
   //Evento que detecta el movimiento del Mouse
   this.onMouseMove = function( Void ):Void
   {
      //Si el mouse esta sobre la galeria de miniaturas
      if ( galeria.bounds_mc.hitTest( _xmouse, _ymouse, true ))  
      {
         //Movemos las minuaturas segun los calculos
         var aux:Number = galeria.bounds_mc._xmouse * ( 1 - ( galeria.miniaturas._width / galeria.bounds_mc._width ) );
         moverClipX(galeria.miniaturas, aux, 5);
      }
   };
   Mouse.addListener(this);
}

La seccion donde se creaba la scrollBar, se queda condicionada por la variable "scrollBar_bln", en la parte del else, se crea un nuevo clip de tamaño identico al que se usa de mascara, el clip galeria.mascara no puede detectar hitTest mientras esta enmascarando a otro clip, por eso es que cree uno nuevo; se agrega un "listener" a la clase Mouse, creando el evento onMouseMove, evento que se ejecuta cuando, obviamente, el mouse se mueve; dentro de esta funcion una condicional: si el mouse esta sobre la galeria de miniaturas, entonces movemos las miniaturas:

¿A donde demonios las movemos?

Pues aqui use un poco de algebra combinado con la espectacular regla de tres, y tengo estas ecuaciones

Si

1. p' = p( w' / w )
   
2. x' = p - p'
   
3. p = x
   por tanto
   
4. x' = x( 1 - ( w' / w ) )
   

Basicamente la ecuacion 1 dice que el valor de un punto en la galeria de miniaturas es equivalente a el producto del valor de un punto en la mascara por la division entre sus anchos, osea nada menos que una regla de tres.
La ecuacion 2 dice que el valor de la posicion de la galeria de miniaturas es igual al punto a donde se quiere llegar menos el punto en el que se esta, dicho de otro modo, emparejaremos los puntos, si la galeria mide 100 y la mascara 10, el punto 25 debe estar emparejado con el punto 2.5, 2.5 - 25 es el valor de _x de la galeria.
La ecuacion 3 dice que un punto en la mascara, es igual que la coordenada x del punto(_xmouse), esta ecuacion es simple porque los valores se toman desde cero, si se tomaran relativos a otro punto, seria mas compleja.
La ecuacion resultante, la numero 4, dice que la posicion de la galeria de miniaturas es igual al producto de la posicion del mouse sobre lo bounds_mc por uno menos la division entre sus anchos, vamos, es una sustitucion de las otras premicias.

Como pueden ver, las matematicas de la secundaria si aplican para algo, y no andamos poniedo miles de validaciones y codigos a lo menso como soliamos hacer ¿verdad lector?

Suerte a todos.

Codigo completo para CopyPaste

Código ActionScript :

//--Definir variables inciales --//
var scrollBar_bln:Boolean = false;//Especifica si debera usar scrollBar
var slideColor:Number = 0xFFFFFF;//Color del slider
var slideClip:String = "Slider_id";//id de la biblioteca del slider

var img_w:Number = 110;//Ancho de las imagenes  
var img_h:Number = 110;//Alto de las imagenes  
var img_n:Number = 4;//Numero de imagenes que se mostraran  
var img_s:Number = 10;//Separacion entre las imagenes  
var gal_x:Number = Stage.width - 510;//Posicion en X de la galeria  
var gal_y:Number = Stage.height - 140;//Posicion en Y de la galeria  

var url_target:String = "_self";//Target donde se cargan las urls

var lienzo_bln:Boolean = true;//Cargar el contenido en un Lienzo
var lnz_x:Number = 0;//Posicion en X del Lienzo
var lnz_y:Number = 35;//Posicion en Y del Lienzo
var lnz_w:Number = Stage.width;//Ancho del Lienzo
var lnz_h:Number = Stage.height - 170;// Alto del Lienzo

//-- Crear la galeria --//
var lista_xml:XML = new XML();  
lista_xml.ignoreWhite = true;  
var cargador_mcl:MovieClipLoader = new MovieClipLoader();
cargador_mcl.addListener(this);
var galeria:MovieClip = this.createEmptyMovieClip("galeria", 120);
galeria.createEmptyMovieClip("miniaturas", 0);  
galeria.createEmptyMovieClip("mascara", 1); 
setArea( galeria.mascara, (img_w + img_s) * img_n, img_h );
galeria.miniaturas.setMask( galeria.mascara );  
galeria._x = this.gal_x;  
galeria._y = this.gal_y;

//-- Crear el lienzo --// 
var lienzo:MovieClip;
if( lienzo_bln )
{
   //Creamos los clips
   lienzo = this.createEmptyMovieClip("lienzo", 119);
   lienzo.createEmptyMovieClip("bound_mc", 0);
   lienzo.createEmptyMovieClip("inner_mc", 1);
   //Creamos un TextField donde se despliega el porcentaje cargado
   lienzo.createTextField("texto_txt", 2, lnz_w / 2 - 50, lnz_h / 2 - 11, 100, 22);
   //Le damos formato
   var format:TextFormat = new TextFormat();
   format.align = "center"
   format.bold = true;
   format.font = "Arial";
   format.color = 0xc6c6c6;
   format.size = 9;
   lienzo.texto_txt.setNewTextFormat( format );
   lienzo.texto_txt.selectable = false;
   //Dibujamos los limites
   setArea( lienzo.bound_mc, lnz_w, lnz_h );
   //Posicionamos
   lienzo._x = lnz_x;
   lienzo._y = lnz_y;
   //Funcion para cargar imagenes
   this.cargarLienzo = function( url:String ):Void
   {
      this.cargador_mcl.loadClip( url, this.lienzo.inner_mc );
   };
}

//-- Crear ScrollBar --//
if( scrollBar_bln )
{
   //Creamos el slider desde la biblioteca
   var slider:MovieClip = galeria.attachMovie(slideClip, "slider", 2);
   //Si no fue creado
   if( slider == undefined )
   {
      //Lo creamos
      slider = galeria.createEmptyMovieClip("slider", 2);  
      //Lo dibujamos
      setArea( slider, this.img_w/2, 20, slideColor, 100 );
   }
   //Variables
   slider.owner = this;
   //Posicionamos
   slider._y = this.img_h + 5;  
   //Declaramos eventos
   slider.onPress = function( Void ):Void  
   {  
      //Al presionar incia el arrastre
      this.startDrag(false,0,this._y,this._parent.mascara._width - this._width - this.owner.img_s, this._y);
   }; 
   slider.onRelease = slider.onReleaseOutside = function( Void ):Void
   {  
      //Al soltar se detiene el arrastre
      this.stopDrag();  
   }; 
   slider.onEnterFrame = function( Void ):Void
   {
      //Calculos para recorrer las miniaturas respecto a la posicion de scrollBar
      this._parent.miniaturas._x = this._x / (this._parent.mascara._width - this._width) * (this._parent.miniaturas._width - (this._parent.mascara._width - this._parent._parent.img_s)) * -1;
   }; 
}
else//Si no usa ScrollBar, se movera con el mouse
{
   //Creamos un clip guia de las medidas de galeria.mascara
   galeria.createEmptyMovieClip("bounds_mc", 2); 
   setArea( galeria.bounds_mc, galeria.mascara._width, galeria.mascara._height );
   //Evento que detecta el movimiento del Mouse
   this.onMouseMove = function( Void ):Void
   {
      //Si el mouse esta sobre la galeria de miniaturas
      if ( galeria.bounds_mc.hitTest( _xmouse, _ymouse, true ))  
      {
         //Movemos las minuaturas segun los calculos
         var aux:Number = galeria.bounds_mc._xmouse * ( 1 - ( galeria.miniaturas._width / galeria.bounds_mc._width ) );
         moverClipX(galeria.miniaturas, aux, 5);
      }
   };
   Mouse.addListener(this);
}
 
//-- Carga XML --//  
lista_xml.onLoad = function( ok:Boolean ):Void
{  
   if( ok )//Si se cargo correctamente  
   {  
      crearImagenes();  
   }  
   else trace("No se pudo cargar el XML");  
};
lista_xml.load("lista.xml");  
  
//-- Crear las imagenes --//  
function crearImagenes( Void ):Void  
{  
   //Variables auxiliares  
   var aux:MovieClip;  
   var img_aux:String;  
   var url_aux:String;  
   for( var i:Number = 0, l:Number = lista_xml.firstChild.childNodes.length; i < l; i++)  
   {  
      //Creamos la miniatura
      aux = this.crearImagen( i );
      //Parseo de XML
      url_aux = lista_xml.firstChild.childNodes[i].attributes.url_xml;
      img_aux = lista_xml.firstChild.childNodes[i].attributes.nom_xml;
      //Si existe la url entonces
      if( url_aux != undefined && url_aux != "" )
      {
            aux.bound_mc.url = url_aux;
         //al presionar
            aux.bound_mc.onRelease = function( Void ):Void  
            {
            this._parent.presionado( this.url );
            };
      }
      //Cargamos la miniatura
      cargador_mcl.loadClip( img_aux, aux.thumb_mc );  
   }
}  
function crearImagen( index:Number ):MovieClip  
{  
   //Creamamos los clips
   var clip:MovieClip = this.galeria.miniaturas.createEmptyMovieClip("mc_" + index, index);  
   clip.createEmptyMovieClip("bound_mc", 1); 
   clip.createEmptyMovieClip("thumb_mc", 0);
   clip.owner = this;
   clip.selected = false;
       
   //Posicion
   clip.index = i;
   clip._x = (this.img_w + this.img_s) * index;
       
   //Fondo transparente del boton    
   setArea( clip.bound_mc, img_w, img_h );
   
   //Funcion que colorea el clip bound_mc, si se esta seleccionado
   clip.setSelected = function( aux:Boolean )
   {
      if( aux )
      {
         this.owner.setArea( this.bound_mc, this.bound_mc._width, this.bound_mc._height, this.owner.slideColor, 20 );
         //todos los demas los colocamos en false
         for(var i in this._parent)
         {
            if( this._parent[i].selected )
            {
               this._parent[i].setSelected( false );
               break;
            }
         }
      }
      else
      {
         setArea( this.bound_mc, this.bound_mc._width, this.bound_mc._height );
      }
      this.selected = aux;
   }
   //Funcion invocada cuando se presiona el clip bound_mc
   clip.presionado = function( url:String )
   {
      //Si se usa lienzo
      if( this.owner.lienzo_bln )
      {
         //Nos colocamos seleccionados
         this.setSelected(true);
         //Cargamos la imagen en el Lienzo
         this.owner.cargarLienzo( url )
      }
      //Si no
      else
      {
         //Cargamos la url en el navegador
         getURL( url, this.owner.url_target );
      }
   };
   return clip;
}  
  
//-- Eventos del Cargador --//
function onLoadInit( target:MovieClip ):Void
{//Clip accesible
   //Centramos la imagen
   target._x = (target._parent.bound_mc._width - target._width ) /  2;
   target._y = (target._parent.bound_mc._height - target._height ) /  2;
   //Efecto fadeIn( _alpha 0 -> 100 )
   target._alpha = 0;
   target.onEnterFrame = function( Void )
   {
      if( (this._alpha += 10) >= 100 ) delete this.onEnterFrame;
   };
}
function onLoadComplete( target:MovieClip ):Void
{//Clip cargado
   //Desaparece el cargador
   lienzo.texto_txt.text = "";   
}
function onLoadProgress( target:MovieClip, l:Number, t:Number ):Void
{//Clip cargandose
   //Si se esta cargando el lienzo
   if( target == lienzo.inner_mc )
   {
      //Desplegamos el porcentaje cargado
      lienzo.texto_txt.text = "Cargando... " + Math.floor(l / t * 100);      
   }
}

//-- Utilerias --// 
function setArea( clip:MovieClip, w:Number, h:Number, color:Number, alpha:Number ):Void
{
   //Dibujamos un cuadrado
   clip.clear();
   clip.beginFill( color?color:0, alpha?alpha:0 );
   clip.moveTo( 0, 0 );
   clip.lineTo( w, 0 );
   clip.lineTo( w, h );
   clip.lineTo( 0, h );
   clip.endFill();   
}
function moverClipX( clip:MovieClip, posicion:Number, aceleracion:Number ):Void
{
   clip.ex = posicion;
   clip.ac = aceleracion;
   clip.onEnterFrame = function( Void ):Void
   { 
      if ( (this._x += Math.floor((this.ex - this._x) / this.ac)) == this.ex ) delete this.onEnterFrame;
   };
} 

me parece muy interesante LongeVie, es el efecto que andaba buscando, cuando aprenda a manipular ActionScript lo voy a probar! salu2

disculpa era tu otro post al que me referia! (Snippet AS2 SlideShow Transicion XML), sorry

Muchas gracias por la ayuda y sobre todo po el aporte a Cristalab

Aqui esta la Galeria funcionando

Ahm, ¿Por qué no agarras estos dos ejemplos, les haces documentación decente y lo montamos como tuto? A [email protected]

"decente"

je, bueno la verdad lo pense, pero la idea incial era tener solamente codigo de copypasteo que alguien pudiera usar, y como esta en AS2 la verdad no me aminaba a publicar un tuto, nisiquiera un tip, y ademas como planeaba ir evolucionando el codigo, (actualmente estoy incluyendo todo ese codigo dentro de clases), entonces, mmm, pues si resulta mas util el codigo en un tuto, estoy dispuesto.

gracias por la sugerencia

Excelente aporte esta vergataria la galeria mi pana. No le he visto el codigo completo pero esta muy interesante.
Saludos

excelenta galeria felicitaciones

casi nunca escribo en nada
pero saca aplausos


seria bueno si consideraras una version con comentario bajo las fotos inserto en el xml

saludos salvaste mi dia

buena idea, tenia muchos planes para esta sencilla galeria, ando corto de tiempo nisiquiera he enviado el tutorial

buuuu no me han podido salir tus ejemplos LongeVie creo que soy bastante novato...
No se por que se tarda en cargar las imagenes como 3 minutos. Ya he revisado y revisado y revisado el codigo y no encuentro error.
no se que hacer, llevo mucho tiempo tratando de hacer esta galeria.
Si alguien me puede ayudar o ha tenido este problema y lo pudo solucionar le pido de favor me diga.
muchas gracias de antemano,

saludos

hola !! me gustaria usar esta galeria el problema es que quiero crear un boton next y un prev que muestre las imagenes seguidas y que mantenga el orden cuando carge la url de la miniatura??

imagino que es algo muy simple pero llevo dias con esto y me gustaria que me ayudarais, he provado un monton de codigos...y na!

gracias por la ayuda de antemano!! un saludo

Hola! Llegué a tu post buscando justamente lo que encontré, gracias!!! Quería entender la subida directa de imágenes a Flash con XLM. Comparte siempre que quieras, nunca sabes a quien le va a servir!!!

Hola! exelente aporte, me preguntaba como se puede agregarle a cada imagen un texto de comentario y que al hacer click a la imagen grande me lleve a una url

GRACIAS!!!