Código ActionScript :
// acciones en fotograma 1
stop();
System.useCodepage = true;
XML.prototype.ignoreWhite = true;
import mx.transitions.Tween;
// separacion-> distancia entre las imágenes
// tanto horizontal como vertical
var separacion:Number = 116;
// vbles para pasar de página
var pagina_actual:Number = 1;
var num_paginas:Number;
// array donde metemos los elementos del XML
var IMG_array:Array;
// objeto XML que carga la lista de miniaturas
var miniaturasXML:XML = new XML();
miniaturasXML.onLoad = mostrarMiniaturas;
miniaturasXML.load("/asp/verMiniaturas.asp");
// funcion que se ejecuta al cargar el XML
function mostrarMiniaturas():Void {
// contadores de columna y fila para
// disponer las miniaturas
var fila:Number = 0;
var col:Number = 0;
// paso los datos del XML al array
IMG_array = this.firstChild.childNodes;
// como caben 12 fotos por página podemos
// saber el núm de páginas necesarias para
// mostrar todas las fotos
num_paginas = Math.ceil(IMG_array.length/3);
// creo el clip donde meteremos todas las miniaturas
var lienzo:MovieClip = _root.createEmptyMovieClip("lienzo_miniaturas", _root.getNextHighestDepth());
lienzo.cacheAsBitmap = true;
// lo posiciono donde nos conviene
lienzo._x = 19;
lienzo._y = 100;
// y lo enmascaro con el clip situado en la
// capa mascara. se enmascara para hacer el deslizamiento del
// clip cuando tengamos muchas miniaturas y no entren todas a
// la vez en pantalla (nuestro caso)
lienzo.setMask(mascara_mc);
// recorro el array que contiene la lista con los nombres de
// los archivos de las miniaturas e invoco la función crearMiniatura
// que es la que carga la imagen, la recoloca, le pone un pequeño
// marco y le asigna las acciones para verla ampliada
for (var k:Number = 0; IMG_array[k]; k++) {
// extraigo la ruta del archivo de imagen
//var ruta:String = "minis/"+IMG_array[k].attributes.nombre;
// como sólo tengo tres columnas, cuando llegue a
// la tercera, avanzo una fila y retorno a la primera
if (col>2) {
col = 0;
fila++;
}
// creo la miniatura. extraigo la ruta del archivo de imagen
// y la paso como tercer parámetro
crearMiniatura(col, fila, IMG_array[k].attributes.nombre);
col++;
}
}
function crearMiniatura(columnaF:Number, filaF:Number, ruta:String) {
// bajo_clip es el clip que contendrá el marco de la miniatura
var bajo_clip:MovieClip = lienzo_miniaturas.createEmptyMovieClip("bajo_"+filaF+"_"+columnaF, lienzo_miniaturas.getNextHighestDepth());
// clip contendrá la imagen
var clip:MovieClip = lienzo_miniaturas.createEmptyMovieClip("foto_"+filaF+"_"+columnaF, lienzo_miniaturas.getNextHighestDepth());
// para cargar la miniatura definimos un objeto MovieClipLoader
// y un objeto detector de eventos
var mi_mcl:MovieClipLoader = new MovieClipLoader();
var miListener:Object = new Object();
mi_mcl.addListener(miListener);
clip.valor = "aaa";
// cargamos la imagen
mi_mcl.loadClip("/minis/"+ruta, clip);
miListener.onLoadStart = function(target_mc:MovieClip) {
// cuando comienza la carga de la imagen
// ponemos al _alpha a 0
target_mc._alpha = 0;
};
miListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
// aquí podéis poner acciones para mostrar una precarga,
// este caso no lo hemos considerado oportuno
};
// cuando ya se ha completado la carga y tenemos disponible el clip
miListener.onLoadInit = function(target_mc:MovieClip) {
// recolocamos la imagen (todavía está oculta, con _alpha=0)
target_mc._x = (separacion*columnaF)+(100-target_mc._width)*0.5;
target_mc._y = (separacion*filaF)+(100-target_mc._height)*0.5;
// recolocamos el marco que rodea a la foto
bajo_clip._x = target_mc._x-5;
bajo_clip._y = target_mc._y-5;
// dibujamos el marco
with (bajo_clip) {
beginFill(0x666666);
lineStyle(1, 0x666666, 100);
lineTo(target_mc._width+10, 0);
lineTo(target_mc._width+10, target_mc._height+10);
lineTo(0, target_mc._height+10);
lineTo(0, 0);
endFill();
}
// al pinchar sobre el área del marco,
// mostramos la foto grande con la función
// verFotoGrande
bajo_clip.onRelease = function() {
verFotoGrande(ruta);
};
// muestro la miniatura animando el _alpha hasta 100
var myTween:Tween = new Tween(target_mc, "_alpha", mx.transitions.easing.Regular.easeOut, 0, 100, 2, true);
};
}
function verFotoGrande(ruta:String) {
clearInterval(intervaloColor);
// creo el clip donde irá la foto grande en una profundidad fija
// para que se reemplace cada vez que pincho en una miniatura
var grande:MovieClip = _root.createEmptyMovieClip("grande_mc", 2*IMG_array.length+11);
// igual con el clip que contendrá el marco
var bajo_grande:MovieClip = _root.createEmptyMovieClip("bajo_grande_mc", 2*IMG_array.length+10);
// posición vertical fija
grande._y = 150;
// para cargar la foto grnade definimos otro objeto MovieClipLoader
// y otro objeto detector de eventos
var grande_mcl:MovieClipLoader = new MovieClipLoader();
var grandeListener:Object = new Object();
grande_mcl.addListener(grandeListener);
// cargo la foto grande
grande_mcl.loadClip("/originales/"+ruta, grande);
grandeListener.onLoadStart = function(target_mc:MovieClip) {
// aplico una transformación de color que deja el clip
// tintado de blanco
myColor = new Color(target_mc);
myColorTransform = new Object();
myColorTransform = {ra:100, rb:255, ga:100, gb:255, ba:100, bb:255, aa:100, ab:0};
myColor.setTransform(myColorTransform);
};
grandeListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
// aquí podéis poner acciones para mostrar una precarga,
// este caso no lo hemos considerado oportuno
};
grandeListener.onLoadInit = function(target_mc:MovieClip) {
//trace("grandeListener.onLoadInit");
// recolocamos la imagen (todavía está oculta)
target_mc._x = 415+Math.round((315-target_mc._width)*0.5);
// recolocamos el marco que rodea a la foto grande
bajo_grande._x = target_mc._x-5;
bajo_grande._y = target_mc._y-5;
// dibujamos el marco
with (bajo_grande) {
beginFill(0xffffff);
lineStyle(1, 0x666666, 100);
lineTo(target_mc._width+10, 0);
lineTo(target_mc._width+10, target_mc._height+10);
lineTo(0, target_mc._height+10);
lineTo(0, 0);
endFill();
}
// con estas rutinas hacemos la transición de color desde el blanco
var indiceColor:Number = 255;
intervaloColor = setInterval(cambiarColor, 10);
function cambiarColor() {
myColorTransform = {ra:100, rb:indiceColor, ga:100, gb:indiceColor, ba:100, bb:indiceColor, aa:100, ab:0};
myColor.setTransform(myColorTransform);
indiceColor -= 2;
if (indiceColor == -1) {
clearInterval(intervaloColor);
}
}
};
}
// con esta función desplazo el lienzo de las miniaturas para
// pasar de página
function moverLienzo(posY:Number):Void {
var myTween:Tween = new Tween(lienzo_miniaturas, "_y", mx.transitions.easing.Regular.easeOut, lienzo_miniaturas._y, posY, 1, true);
}
// deshabilito de inicio el botón de volver atrás
// ya se muestra la página 1
pMenos_btn.enabled = false;
pMenos_btn._alpha = 30; 