Hace unos días publiqué una entrada en la que mostraba el código necesario para crear un pase de fotos con ActionScript. Las fotografías que se usaban iban descritas en un archivo XML.

Entre los comentarios que la entrada obtuvo, uno de ellos preguntaba si había alguna manera de combinarlo con el menú “dinámico” mostrado en las páginas de sargento.washeebo.com. Se trata de un menú en el que los diferentes botones giran en una especie de carrusel. Pongo “dinámico” entre comillas, porque usa este término, pero con él sólo indica que se mueve, no que los datos se obtengan dinámicamente. Si bien contesté en la misma entrada, creo que el resultado se diferencia lo suficiente del pase de fotos original, así que, para no confundir demasiado, he decidido colocarlo en esta nueva entrada. Además, así aprovecho para arreglar algunos pequeños detalles y explicarlo con algo más de profundidad.

La idea es que de un archivo XML con la siguiente estructura…


<galeria directorio="galery">
<imagen peque="peques/1.jpg" grande="01.png" />
<imagen peque="peques/2.jpg" grande="03.png" />
<imagen peque="peques/3.jpg" grande="06.png" />
<imagen peque="peques/3.jpg" grande="06.png" />
<imagen peque="peques/5.jpg" grande="17.png" />
<imagen peque="peques/6.jpg" grande="23.png" />
<imagen peque="peques/7.jpg" grande="33.png" />
<imagen peque="peques/8.jpg" grande="38.png" />
</galeria>

…obtengamos algo similar a lo siguiente:

Como verás, el XML describe cuántas y qué imágenes se emplean en el carrusel, en qué directorio se encuentran y qué imagen grande mostrar al hacer click. Por supuesto, sería muy sencillo modificar el código para convertirlo en un menú y que en lugar de mostrar una imagen cargue un apartado o salte a una dirección.

Para el código ActionScript he partido del descrito en la entrada que comentaba al principio y lo he combinado con las funciones matemáticas que describen el movimiento tal y como se cuenta en sargento.washeebo. El ejemplo que aporta no explica cómo asignarle acciones a los botones, y todos son réplicas de un elemento de la librería. La solución que propongo se basa en ActionScript puro, no se necesita nada en la librería y los elementos se crean por código según se describan en el archivo XML.

//adaptación dinámica de Juan Carlos Posé
// Basado en
// Tutorial cortesía de Sargento
// http://sargento.washeebo.com
////////////////////////////////////////
////VALORES INICIALES
vel = .08;
eje_x = 170;
eje_y = 100;
amp_x = 150;
amp_y = 40;
////////////////////////////////////////
////////////////////////////////////////
//ANALIZAMOS NODOS XML//////////////////
function analiza_xml() {
peques = new Array();
grandes = new Array();
primer_nodo = imagenes_xml.childNodes;
nodo_galeria = primer_nodo[0].childNodes;
directorio = primer_nodo[0].attributes.directorio;
for (var j = 0; j
peques[j] = nodo_galeria[j].attributes.peque;
grandes[j] = nodo_galeria[j].attributes.grande;
}
_root.cant = peques.length;
_root.incr = (2*Math.PI)/cant;
}
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
var mclListener:Object = new Object();
mclListener.onLoadInit = function(objetivo_mc:MovieClip) {
//esto es lo que hace con el clip una vez cargado
_root.cual++;
//si no ha cargado todas las peques
if (_root.cual<_root.peques.length) {
//carga la siguienre
muestra_peques();
} else {
//si ya las ha cargado todas
todos_cargados = true;
}
//averigua que imagen grande le corresponde
objetivo_mc.mayor = grandes[((objetivo_mc.getDepth())-100)];
objetivo_mc.angulo = _root.incr*((objetivo_mc.getDepth())-100);
objetivo_mc.eje_x = _root.eje_x;
objetivo_mc.eje_y = _root.eje_y;
objetivo_mc.amp_x = _root.amp_x;
objetivo_mc.amp_y = _root.amp_y;
//le aplica efecto sombra
var filtroSombra = new flash.filters.DropShadowFilter(0, 0, 0x000000, .5, 15, 15);
var misFiltros:Array = objetivo_mc.filters;
misFiltros.push(filtroSombra);
objetivo_mc.filters = misFiltros;
//actualiza clips, pero…
objetivo_mc.onEnterFrame = function() {
//… espera a que todos estén cargados para empezar
if (todos_cargados == true) {
objetivo_mc._x = (Math.cos(objetivo_mc.angulo)*objetivo_mc.amp_x)+objetivo_mc.eje_x;
objetivo_mc._y = (Math.sin(objetivo_mc.angulo)*objetivo_mc.amp_y)+objetivo_mc.eje_y;
objetivo_mc._yscale = objetivo_mc._xscale=(objetivo_mc._y-100)*.7+100;
if ((objetivo_mc.angulo+_root.vel)>(2*Math.PI)) {
objetivo_mc.angulo += _root.vel-(2*Math.PI);
} else if ((objetivo_mc.angulo+_root.vel)<0) {
objetivo_mc.angulo += _root.vel+(2*Math.PI);
} else {
objetivo_mc.angulo += _root.vel;
}
grado = Math.floor((objetivo_mc.angulo/Math.PI)*180);
if (grado>=0 && grado<=90) {
objetivo_mc.swapDepths(4000+grado);
}
if (grado>90 && grado<=180) {
objetivo_mc.swapDepths(3000-grado);
}
if (grado>180 && grado<=270) {
objetivo_mc.swapDepths(2000-grado);
}
if (grado>270) {
objetivo_mc.swapDepths(1000+grado);
}
}
};
//le asigna función al pulsar
objetivo_mc.onPress = function() {
muestra_grande(objetivo_mc.mayor);
};
};
////////////////////////////////////////
//funcion que muestra la imagen grande que corresponde
function muestra_grande(cual) {
//crea clip
_root.createEmptyMovieClip(”imagengrande_mc”,_root.getNextHighestDepth());
var mclListener_g:Object = new Object();
mclListener_g.onLoadInit = function(objetivo_mc:MovieClip) {
//al cargarlo, hace transición
alphaTween = new mx.transitions.Tween(_root.imagengrande_mc, “_alpha”, mx.transitions.easing.Regular.easeOut, 0, 100, 2, true);
//y lo centra en pantalla
objetivo_mc._x = (_root._width/2)-(objetivo_mc._width/2);
//le asigna función para que desaparezca al pulsar
objetivo_mc.onPress = function() {
removeMovieClip(objetivo_mc);
};
};
var g_mcl:MovieClipLoader = new MovieClipLoader();
g_mcl.addListener(mclListener_g);
g_mcl.loadClip(directorio+”/”+cual,_root.imagengrande_mc);
}
////////////////////////////////////////
//la variable cual lleva las imágenes que cargamos
_root.cual = 0;
////////////////////////////////////////
//función que carga las imágenes pequeñas (cual)
function muestra_peques() {
//crea movieclip para contenerla
_root.createEmptyMovieClip(”imagen”+(_root.cual),100+_root.cual);
var imagen_mcl:MovieClipLoader = new MovieClipLoader();
imagen_mcl.addListener(mclListener);
//carga imagen
imagen_mcl.loadClip(_root.directorio+”/”+peques[_root.cual],_root[”imagen”+(_root.cual)]);
}
onEnterFrame = function () {
//actualiza velocidad en función del cursor
vel = ((_xmouse-210)/210)*.08;
};
////////////////////////////////////////
//LEE XML//////////////////////////////////////////////////////
var imagenes_xml:XML = new XML();
imagenes_xml.ignoreWhite = true;
imagenes_xml.onLoad = function(success) {
analiza_xml();
muestra_peques();
};
////////////////////////////////////////
imagenes_xml.load(”galeria.xml”);
////////////////////////////////////////
stop();


Podéis juguetear con las líneas que definen las coordenadas x e y (objetivo_mc._x y objetivo_mc._y) de nuestros clips cambiando el seno (sin) y el coseno (cos), por otras funciones. Con la tangente (tan) se obtienen interesantes resultados, es sólo cuestión de probar y veréis que se pueden conseguir movimientos sorprendentes.

También podéis cambiar con facilidad el efecto de sombra aplicado a las imágenes pequeñas por cualquier otro efecto, o cambiar la función que tienen por otra que en lugar de mostrar una imagen mayor, realice cualquier otra tarea. Como ya dije en otra ocasión, la idea es que estas propuestas sirvan como punto de partida para que cada cual sea capaz de comprender lo suficiente los métodos usados para poder implementar su propia solución, así que para que sea más sencillo comenzar y ya que WordPress suele hacerme algunas trastadas con las comillas, puedes empezar por bajarte todo lo necesario (un XML de ejemplo, un directorio con imágenes, un archivo swf y el original .fla en formato Flash8). Que lo disfrutes.