Estoy aquí para ver si me podéis echar una mano.
Resulta que tengo hecha una galería en xml y as3.
La galería, cuando ejecuto desde Flash, me funciona sin ningún problema. Pero que sorpresa la mía que la he subido a un archivo html y no se ve nada.
He añadido un cuadro de texto en el que por cada imagen que cargo me indica el numero de la misma.
Eso si que se muestra en el html... pero las imágenes deben de estar en el limbo.
He probado a hacerles un chmod en plan bruto con los valores 777, pero nada.
¿Alguien me sabe decir si tengo que hacer algo especial para que se vean?
Os dejo los códigos del as3 y del xml:
AS3
Código ActionScript :
//IMPORTO LAS CLASES NECESARIAS
import flash.display.*;
import flash.events.*;
import flash.net.*;
import fl.controls.ProgressBar;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
//VARIABLES
var columns:Number;
var my_x:Number;
var my_y:Number;
var my_thumb_width:Number;
var my_thumb_height:Number;
var my_images:XMLList;
var my_total:Number;
var full_mc:MovieClip;
// Aquí metere las imagenes thumb.
var container_mc:MovieClip;
var preloaders_mc:MovieClip;
// Estas variables son para añadir las imagenes necesaria en una linea y cuando cambiar de ésta.
// Se usan en callThumbs().
var x_counter:Number = 0;
var y_counter:Number = 0;
// Con esto cargo el contenido del xml dentro de Flash (pero no se muestra ni nada).
// Cuando acaabe de cargarse salto a la funcion processXML.
var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("http://www.marinador.com/varios/banner_principal/galeria_xml/prueba.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);
function processXML(e:Event):void
{
// Cargo el contenido del xml en una variable que comprende las secciones dentro de éste
// De este modo podremos trabajar con el contenido que tiene.
var myXML:XML = new XML(e.target.data);
columns = myXML.@COLUMNS;
my_x = myXML.@XPOSITION;
my_y = myXML.@YPOSITION;
my_thumb_width = myXML.@WIDTH;
my_thumb_height = myXML.@HEIGHT;
my_images = myXML.IMAGE;
my_total = my_images.length();
// Creamos el contendor y llamamos a las thumbs
createContainer();
callThumbs();
}
function createContainer():void
{
// Creamos un moviclip. Lo ponemos en la posición que contiene el xml y lo añadimos al Flash.
container_mc = new MovieClip();
container_mc.x = my_x;
container_mc.y = my_y;
addChild(container_mc);
// Le doy un listener al movieclip contenedor para que cargue la imagen grande
container_mc.addEventListener(MouseEvent.CLICK, callFull);
// Le doy la opción de usar el cursor que es una mano con un dedo para pulsar
container_mc.buttonMode = true;
// Creamos otro moviclip. Éste es para la barra de carga.
preloaders_mc = new MovieClip();
preloaders_mc.x = container_mc.x;
preloaders_mc.y = container_mc.y;
addChild(preloaders_mc);
}
function callThumbs():void
{
// Esto es en bucle porque hay que hacerlo para cada una de las imagenes que lleva el xml.
for (var i:Number = 0; i < my_total; i++)
{
// Obtengo la dirección de la thumb i, que viene dada por el valor THUMB dentro del xml.
var thumb_url = my_images[i].@THUMB;
// Creo un cargador donde le diré que tiene que cargar la imagen que esta en la dirección que he
// obtenido antes (la que contiene thumb_url). Después le doy un listener para que cuando se haya
// acabado de cargar empiece a ejeuctarse la funcion thumbLoaded.
var thumb_loader = new Loader();
thumb_loader.load(new URLRequest(thumb_url));
thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
// Al thumb correspondiente le doy el nombre como nombre su numero i
thumb_loader.name = i;
// Con esto coloco las imagenes que voy cargando en la posicion que toca en cada fila (x), ademas
// también indico la fila a la que tienen que ir (y)
thumb_loader.x = (my_thumb_width + 10) * x_counter;
thumb_loader.y = (my_thumb_height + 10) * y_counter;
// Aumento la posicion dentro de la fila o la reinicio y aumento la fila.
if ((x_counter + 1) < columns)
{
x_counter++;
}
else
{
x_counter = 0;
y_counter++;
}
// Creo la barra de carga. Para eso la tengo que tener la biblioteca.
// A la variable que contiene la barra le doy la información que contiene el cargador de thumbs
// para que la trabaje y se rellene como toca. Pero no hemos acabado.
var preloader_pb:ProgressBar = new ProgressBar();
preloader_pb.source = thumb_loader.contentLoaderInfo;
preloader_pb.x = thumb_loader.x;
preloader_pb.y = thumb_loader.y;
preloader_pb.width = my_thumb_width;
preloader_pb.height = my_thumb_height;
preloaders_mc.addChild(preloader_pb);
// Con esto saltaremos a la función que hara desaparecer a las barras de carga cuando hayan acabado.
preloader_pb.addEventListener(Event.COMPLETE, donePb);
}
}
function thumbLoaded(e:Event):void
{
// Creo un cargador donde se cargan las imagenes dentro del container.
// ESTO ES REDUNDANTE. Con colocara dentro de la funcion callThumbs(), despues de
// thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
// la siguiente sentencia
// container_mc.addChild(my_thumb);
// tendríamos el mismo resultado y sería menos enrevesado.
var my_thumb:Loader = Loader(e.target.loader);
container_mc.addChild(my_thumb);
// Con esto las imagenes aparecen con un Tween.
new Tween(my_thumb, "alpha", Strong.easeIn, 0,1,0.5, true);
}
function callFull(e:MouseEvent):void
{
// Creo un cargador y una variable. En la variable cargo la dirección de la imagen grande.
// En el cargador cargo la imagen de la dirección. Para saber que imagen és haré referencia al nombre
// que le doy a la imagen pequeña, que es igual al número correspondiente al objeto dentro del xml.
var full_loader:Loader = new Loader();
var full_url = my_images[e.target.name].@FULL;
full_loader.load(new URLRequest(full_url));
full_loader.contentLoaderInfo.addEventListener(Event.INIT, fullLoaded);
// Añado una barra de carga para la imagen grande.
var full_pb:ProgressBar = new ProgressBar();
full_pb.source = full_loader.contentLoaderInfo;
full_pb.x = (stage.stageWidth - full_pb.width)/2;
full_pb.y = (stage.stageHeight - full_pb.height)/2;
preloaders_mc.addChild(full_pb);
// Con esto hacemos desaparecer la barra de carga.
full_pb.addEventListener(Event.COMPLETE, donePb);
// Con esto borramos el listener para no poder sacar mas de una imagen a la vez.
container_mc.removeEventListener(MouseEvent.CLICK, callFull);
// Le quito la mano con el dedo indice para pulsar
container_mc.buttonMode = false;
// Con esto hacemos que las thumbs se queden un poco transparentes cuando aparece la imagen grande
new Tween(container_mc, "alpha", Strong.easeIn, 1,0.5,0.5, true);
}
function fullLoaded(e:Event):void
{
// Esto es para meter la imagen grande en un Movieclip, porque esta dentro de un loader y no se le puede
// hacer que el cursor se convierta en mano con indice si no es movieclip.
full_mc = new MovieClip();
full_mc.buttonMode = true;
addChild(full_mc);
// Creo un cargador donde se carga la imagen grande dentro del container.
// ESTO ES REDUNDANTE. Con que se colocase las sentencias para dar valor a las variables de posición
// de x y de y (además de la siguiente) dentro de la función callFull() DEBERÍA de valer.
var my_loader:Loader = Loader(e.target.loader);
// Esta liena era addChild(my_loader), ahora se añade a full_mc en lugar de al stage directamente.
full_mc.addChild(my_loader);
my_loader.x = (stage.stageWidth - my_loader.width)/2;
my_loader.y = (stage.stageHeight - my_loader.height)/2;
// Con esto hago que la imagen grande aparezca con un Tween.
new Tween(my_loader, "alpha", Strong.easeIn, 0,1,0.5, true);
my_loader.addEventListener(MouseEvent.CLICK,removeFull);
}
function removeFull(e:MouseEvent):void
{
// Creo una variable Loader para que haga referencia a la que esta llamando a la función.
// Creo tambien una variable donde introduzco el Tween para ser capaz de registrar sus eventos.
// Cuando acaba la animación saltaré a otra función donde lo que hago es descargar la imagen
// que contiene, pero además borro el contendor.
var my_loader:Loader = Loader (e.currentTarget);
var fade_out:Tween = new Tween(my_loader, "alpha", Strong.easeOut, 1,0,0.5, true);
fade_out.addEventListener(TweenEvent.MOTION_FINISH, tweenFinished);
// Con esto hacemos que al desaparecer la imagen grande, las thumbs vuelvan a su estado normal
new Tween(container_mc, "alpha", Strong.easeOut, 0.5,1,0.5, true);
}
function donePb(e:Event):void
{
var my_pb:ProgressBar = ProgressBar(e.target);
preloaders_mc.removeChild(my_pb);
}
function tweenFinished(e:TweenEvent):void
{
var my_loader:Loader = Loader (e.target.obj);
my_loader.unload();
// Esta linea era removeChild(my_loader), ahora borra de full_mc su contenido, que es my_loader.
full_mc.removeChild(my_loader);
removeChild(full_mc);
full_mc = null;
// Con esto le volvemos a dar el listener para que se vuelvan a ver las imagenes
container_mc.addEventListener(MouseEvent.CLICK, callFull);
// Le doy la opción de usar el cursor que es una mano con un dedo para pulsar
container_mc.buttonMode = true;
}
El XML
Código XML :
<?xml version="1.0" encoding="utf-8"?> <GALLERY COLUMNS="5" XPOSITION="30" YPOSITION="30" WIDTH="100" HEIGHT="100"> <IMAGE FULL="full_images/image1.jpg" THUMB="thumbs/thumb1.jpg" /> <IMAGE FULL="full_images/image2.jpg" THUMB="thumbs/thumb2.jpg" /> <IMAGE FULL="full_images/image3.jpg" THUMB="thumbs/thumb3.jpg" /> <IMAGE FULL="full_images/image4.jpg" THUMB="thumbs/thumb4.jpg" /> <IMAGE FULL="full_images/image5.jpg" THUMB="thumbs/thumb5.jpg" /> <IMAGE FULL="full_images/image6.jpg" THUMB="thumbs/thumb6.jpg" /> <IMAGE FULL="full_images/image7.jpg" THUMB="thumbs/thumb7.jpg" /> <IMAGE FULL="full_images/image8.jpg" THUMB="thumbs/thumb8.jpg" /> <IMAGE FULL="full_images/image9.jpg" THUMB="thumbs/thumb9.jpg" /> <IMAGE FULL="full_images/image10.jpg" THUMB="thumbs/thumb10.jpg" /> <IMAGE FULL="full_images/image11.jpg" THUMB="thumbs/thumb11.jpg" /> <IMAGE FULL="full_images/image12.jpg" THUMB="thumbs/thumb12.jpg" /> <IMAGE FULL="full_images/image13.jpg" THUMB="thumbs/thumb13.jpg" /> <IMAGE FULL="full_images/image14.jpg" THUMB="thumbs/thumb14.jpg" /> </GALLERY>
Bueno gente, espero que me podáis ayudar.
Muchas gracias!!
