Comunidad de diseño web y desarrollo en internet online

XML + movieClipLoader

Citar            
MensajeEscrito el 04 May 2007 01:54 pm
Estoy creando un script en el que se mostraran noticias dentro de un marco, estas noticias estan compuestas por una imagen y un titular. Entrarán en el marco deslizándose de derecha a izquierda y cada una se colocara sobre la anterior.

El script, que coge los datos de la imagen y el titular desde un array estático, está ya creado y funcionando, el problema viene cuando lo modifico para que el array se cree con los datos de un xml. En este caso, no me carga las imágenes, y por tanto tampoco los titulares ni los hace deslizar.
Hacer clic aquí para ver código con sintaxis coloreada

Código :

#include "lmc_tween.as"
#include "xmlRead.as"

var numNoticias = 5;
var contNoticia = 0;   //noticias que se han cargado hasta ahora
var noticiaCargar = 0;    //numero de la noticia que hay que cargar
var newsHeight = 257;   //altura que se mostrara de la imagen de la noticia (el resto se recortara)
var newsWidth = 233;   //anchura que se mostrara de la imagen de la noticia (el resto se recortara)
var newsTop = 35;      //coordenada del tope superior de la imagen de la noticia
var newsLeft = 9;      //coordenada del lateral izquierdo de la imagen de la noticia
var newsRight = newsLeft + newsWidth; //coordenada del lateral derecho de la imagen de la noticia
var intervalId;         //variable en la que se guardara el intervalo
var tiempoIntervalo = 3000;   //tiempo que tarda en mostrarse la siguiente noticia 
var news:Array = new Array();


function sliderCreate () {
   //crear la pelicula que contendra las noticias deslizantes. Para cada noticia:
   removeMovieClip(this.newsContainer);
   
   contNoticia = 0;
   noticiaCargar = 0;
   this.createEmptyMovieClip('newsContainer', this.getNextHighestDepth());
   this.createEmptyMovieClip('newsMask', this.getNextHighestDepth());
   this.newsMask.attachMovie('mascaraNoticias', 'containerMask_mc', this.newsMask.getNextHighestDepth(), {_x:newsLeft, _y:newsTop});
   this.newsContainer.setMask(this.newsMask.containerMask_mc);
   
   this.newsContainer.createEmptyMovieClip('noticia0', this.newsContainer.getNextHighestDepth());
   this.newsContainer.noticia0.createEmptyMovieClip('imagen_mc', this.newsContainer.noticia0.getNextHighestDepth());
   this.newsContainer.createEmptyMovieClip('noticia1', this.newsContainer.getNextHighestDepth());
   this.newsContainer.noticia1.createEmptyMovieClip('imagen_mc', this.newsContainer.noticia1.getNextHighestDepth());
   trace(image_mcl.loadClip(news[noticiaCargar].imagen, this.newsContainer.noticia0.imagen_mc)); //solo imprime true cuando en getNews usamos la primera solucion
}

function getNews(gallery) { 
   /******* SOLUCION 1 : crear el array "a mano" **********/
   //funciona, pero no me sirve, pues el array tiene que extraer los datos del xml
   news.push({imagen:'00corrs.jpg',titulo:'THE CORRS: Borrowed heaven'});
   news.push({imagen:'AkashaLestat.jpeg',titulo:'Akasha, reina de los condenados, frente a su hijo mas rebelde, Lestat'});
   news.push({imagen:'god-of-war2-image-06.jpg',titulo:'Screenshot de la segunda parte de este famoso juego'});
   news.push({imagen:'Gothic_girl--large-msg-11557491639.jpg',titulo:'Imagen de chica gotica'});
   news.push({imagen:'slu_macmaster.jpg', titulo:'La violinista MacMaster'});
   
   /******* SOLUCION 2: usar una referencia al array creado a partir del xml ******/
   //no funciona
   /*news = noticiasSvm;*/
   
   /******* SOLUCION 3: copiar elemento por elemento el array creado a partir del xml ******/
   //no funciona
   /*for(i=0; i<5; i++) {
      news.push({imagen:noticiasSvm[i]['imagen'],titulo:noticiasSvm[i]['titulo']});      
   }*/
   trace(news[0]['titulo']);   //este trace funciona correctamente, sea cual sea la opcion para rellenar el array
   trace(news[0]['imagen']);   //este trace funciona correctamente, sea cual sea la opcion para rellenar el array
      
   return(news);
}



function galleryStart( gallery ) {
   //iniciar la galeria creando la pelicula y seleccionando la seccion (svm/otras)
   if(gallery == 'SVM') {
      tabSVM_mc.gotoAndStop('activo');
      tabOtras_mc.gotoAndStop('reposo');
   } else if (gallery == 'otras') {
      tabSVM_mc.gotoAndStop('reposo');
      tabOtras_mc.gotoAndStop('activo');   
   }
   contador_txt.text="1/"+numNoticias;
   
   news = getNews(gallery); 
   sliderCreate();
}


function cargarNoticia(noticia) {
//al cargar la imagen, la centramos en el marco de las imagenes
   noticia.imagen_mc._x = (newsWidth - noticia.imagen_mc._width) / 2;
   noticia.imagen_mc._y = (newsHeight - noticia.imagen_mc._height) / 2;
   //ponemos la mascara de la imagen, tambien centrada en el marco
   noticia.attachMovie('mascaraNoticias', 'mascara_mc', (noticia.imagen_mc.getDepth() + 1));
   noticia.mascara_mc._x = 0;
   noticia.mascara_mc._y = 0;
   noticia.setMask(noticia.mascara_mc);
   //ponemos el texto de la imagen
   noticia.attachMovie('textoNoticias', 'texto_mc', (noticia.imagen_mc.getDepth() + 2));
   noticia.texto_mc.textoNoticia_txt._width = 200;
   noticia.texto_mc.textoNoticia_txt.text = noticia._parent._parent.news[noticiaCargar]['titulo'];
   noticia.texto_mc.textoFondo_mc._height = noticia.texto_mc.textoNoticia_txt.textHeight + 10;
   noticia.texto_mc._y = noticia.mascara_mc._y + noticia.mascara_mc._height - noticia.texto_mc.textoFondo_mc._height;
} 

function deslizarNoticias(noticia) {
   if(contNoticia == 0) {
      noticia._x = newsLeft;
      noticia._y = newsTop;
   } else {
      noticia._x = newsRight;
      noticia._y = newsTop;
      noticia.tween(["_x","_y"],[newsLeft,newsTop],1, "easeOutQuad" );
      //ponemos el simbolo del equipo
      noticia._parent.attachMovie('logo', 'logotipo_mc', (noticia.imagen_mc.getDepth() + 3), {_x : newsRight});
      noticia._parent.logotipo_mc.tween(["_x"],[newsLeft-200],1.5, "easeOutQuad" );
      noticiaActual = (contNoticia + 1) % numNoticias;
      if(noticiaActual == 0) {
         noticiaActual = 5;
      }
      noticia._parent._parent.contador_txt.text = noticiaActual + "/" + numNoticias;
   }
}


tabSVM_mc.onRelease = function() {
   galleryStart('SVM');
}

tabOtras_mc.onRelease = function() { 
   galleryStart('otras');
}

masNoticias_btn.onRelease = function() {
   getURL("http://www.cvalmeria.es/noticias.php");   
}

//crear pelicula que contendra las imagenes de las noticias deslizandose
var mclListener:Object = new Object();
mclListener.onLoadInit = function(target_mc:MovieClip) {
   var esteContenedor = contNoticia % 2;
   var otroContenedor = Math.abs(contNoticia - 1) % 2;
   cargarNoticia(target_mc._parent);
   deslizarNoticias(target_mc._parent);

   //si la ultima noticia tapa a la anterior, cambiar las profundidades
   if(contNoticia) {
      if(target_mc._parent._parent["noticia" + esteContenedor].getDepth() < target_mc._parent._parent["noticia" + otroContenedor].getDepth()) {
         target_mc._parent._parent["noticia" + esteContenedor].swapDepths(target_mc._parent._parent["noticia" + otroContenedor]);
      }
   }
   
   //llamar para que cargue la siguiente noticia
   contNoticia++;
   noticiaCargar = contNoticia % numNoticias;
   clearInterval(intervalId);   
   intervalId = setInterval(image_mcl, "loadClip", tiempoIntervalo, news[noticiaCargar].imagen, target_mc._parent._parent["noticia" + otroContenedor].imagen_mc);
};

var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);


Comento el codigo por encima:
- lmc_tween.as es la libreria para las funciones de easing (en este caso el deslizamiento de las noticias)
- xmlRead.as carga el xml que contiene los datos las noticias. Una vez cargado (xml.onLoad) crea el array con los datos extraidos de dicho xml, y llama a galleryStart(galeria).
- galleryStart inicializa una serie de elementos graficos, y llama primero a getNews y posteriormente a sliderCreate. Aquí viene el problema:

- getNews: si aqui creo el array "a mano", sliderCreate funciona sin ningun problema, carga la imagen perfectamente. Si por el contrario utilizo el array creado desde el xml, sliderCreate no sera capaz de cargar la imagen, y el trace correspondiente imprimira false.
En ambos casos (array "a mano" o desde xml) compruebo que el array se ha creado bien, dado que puedo tracear correctamente su contenido.

La única razón que se me ocurre por la que puede ser que no funcione cuando utilizo los datos del xml es la sincronía, es decir, que pueda estar intentando cargar la imagen antes de que el xml termine de descargarse, pero creo que puedo descartar esta razón ya que llamo a la funcion que carga la imagen mediante el evento onLoad del xml.

Espero me podais echar una mano con esto, ya que no se qué mas pruebas hacer, o por donde seguir buscando el error. Recordad que funciona completamente siempre que no intente crear el array a partir del xml.

Gracias por adelantado y un saludo.

Por akhasis

75 de clabLevel



 



Ultima edición por akhasis el 04 May 2007 02:00 pm, editado 1 vez

firefox
Citar            
MensajeEscrito el 04 May 2007 01:56 pm
Código del xmlRead, por si aclara algo:
Ver código con sintaxis coloreada

Código :

this._lockroot = true;
System.useCodepage = true;

// Create new XML Object and set ignoreWhite true
noticias_xml = new XML();
noticias_xml.ignoreWhite = true;
// Create noticias array
var noticiasSvm = new Array();
var noticiasOtras = new Array();
// Setup load handler which just invokes another function
// which will do the parsing of our XML
noticias_xml.onLoad = function(success) {
        if (success) {
            processNews(noticias_xml);   
         galleryStart('SVM');
        }
};
// Load up the XML file into Flash
noticias_xml.load('xml.txt');
// This is the function that will be called when
// our XML document is loaded succesfully
function processNews(xmlDoc_xml) {
        // xmlDoc_xml is now a reference to the XML
      for(i = 0; i < xmlDoc_xml.firstChild.childNodes[0].childNodes.length; i++) {
         noticiasSvm[i] = Array();
         noticiasSvm[i]['titulo'] = xmlDoc_xml.firstChild.childNodes[0].childNodes[i].childNodes[0].firstChild;
         noticiasSvm[i]['imagen'] = xmlDoc_xml.firstChild.childNodes[0].childNodes[i].childNodes[1].firstChild;
      }
      
      for(i = 0; i < xmlDoc_xml.firstChild.childNodes[1].childNodes.length; i++) {
         noticiasOtras[i] = Array();
         noticiasOtras[i]['titulo'] = xmlDoc_xml.firstChild.childNodes[1].childNodes[i].childNodes[0].firstChild;
         noticiasOtras[i]['imagen'] = xmlDoc_xml.firstChild.childNodes[1].childNodes[i].childNodes[1].firstChild;
      }            
}

Por akhasis

75 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 May 2007 10:49 am
Listo. El problema estaba en la función que creaba el array a partir del xml. Aunque lo creaba y lo mostraba correctamente, flash no interpretaba los nombres de las imagenes como cadenas, y por eso no era capaz de cargarlas. La solucion fue una conversión de tipos. Gracias.

Por akhasis

75 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.