Comunidad de diseño web y desarrollo en internet online

Problema con el porcentaje cargado en SWF externo.

Citar            
MensajeEscrito el 15 Jun 2009 04:08 am
Hola, estoy trabajando con Precarga de SWF Externos (External SWF Preloading) según un tutorial de Lee Brimelow que pueden ver acá si les interesa: http://www.gotoandlearn.com/play?id=27, y tengo un problema con el loader.

La cuestión es la siguiente: hay 2 movieclips, uno con el nombre de instancia "holder" (donde se carga el SWF externo) y uno con el nombre de instancia "loader" (donde se muestra el porcentaje que se ha cargado del SWF). Según el tutorial, se debe usar un cuadrado de fondo en el movieclip "holder" pero yo no puedo usarlo debido a que entorpecería mi diseño. El problema es, que el SWF empieza a correr en el "holder" antes de que el porcentaje en el "loader" de 100%, entonces, como por 1 minuto, se ve el SWF corriendo con el porcentaje encima. Obviamente, no se ve bien, yo quiero que el SWF aparezca cuando se haya cargado el 100% y no antes.

Este es el código que estoy usando:

Código ActionScript :

stop();

//////No presten atención a esto, esto son los rollovers y rollouts de los botones.
function over() {
   this.gotoAndPlay ("in")
}

function out() {
   this.gotoAndPlay ("out")
}

bt_belle.onRollOver = over
bt_belle.onRollOut = out

bt_bauhaus.onRollOver = over
bt_bauhaus.onRollOut = out

bt_artdeco.onRollOver = over
bt_artdeco.onRollOut = out

bt_popart.onRollOver = over
bt_popart.onRollOut = out

bt_home.onRollOver = function() {
   tellTarget ("over_home") {
      gotoAndPlay("in");
   }
}

bt_home.onRollOut = function() {
   tellTarget ("over_home") {
      gotoAndPlay("out");
   }
}


/////////AQUI ESTÁ EL CÓDIGO CON EL PROBLEMA
//BELLE EPOQUE BUTTON

var mclO:MovieClipLoader = new MovieClipLoader();

var mclLO:Object = new Object();

mclLO.onLoadProgress = function(target,loaded,total) {
   loaderO.percentO.text = Math.round((loaded/total) * 100) + "%";
   loaderO.barO._width = (loaded/total) * 200;
}

mclLO.onLoadInit = function() {
   loaderG._visible = false;
   loaderO._visible = false;
   loaderO.percentO.text = "";

}

holder._visible = false;
loaderO._visible = false;
loaderO.percentO.text = ""
loaderG._visible = false;
loaderG.percentO.text = ""
   
mclO.addListener(mclLO);


bt_belle.onRelease = function() {
   loaderG._visible = false;
   loaderO._visible = true;
   mclO.loadClip("belle.swf",holder);
}


//BAUHAUS BUTTON

var mclG:MovieClipLoader = new MovieClipLoader();

var mclLG:Object = new Object();

mclLG.onLoadProgress = function(target,loaded,total) {
   loaderG.percentG.text = Math.round((loaded/total) * 100) + "%";
   loaderG.barG._width = (loaded/total) * 200;
}

mclLG.onLoadInit = function() {
   loaderO._visible = false;
   loaderG._visible = false;
   loaderG.percentG.text = "";

}

holder._visible = false;
loaderO._visible = false;
loaderO.percentO.text = ""
loaderG._visible = false;
loaderG.percentO.text = ""
   
mclG.addListener(mclLG);

bt_bauhaus.onRelease = function() {
   loaderO._visible = false;
   loaderG._visible = true;
   mclG.loadClip("bauhaus.swf",holder);
}


Yo modifiqué el código del tutorial un poquito para lograr lo que quería, le agregué la barra de porcentaje y también debo repertirlo con cada botón porque quiero que el porcentaje y la barra se muestren del color de cada botón que se ha presionado. Es decir, cuando le dan al botón naranja, quiero que la barra y el porcentaje se vean naranja y así.

Subí el trabajo a esta dirección: http://pruebarq.hostei.com/ para que vean el problema. Es una prueba así que no esperen nada sensacional jaja. Los notones que funcionan son "belle époque" y "bauhaus", si de dan hit a uno, verán como empieza el porcentaje y que cuando va como por 55% el SWF aparece debajo y el conteo continua encima. Se ve muy mal y es lo que quiero evitar.

Si hacen rollover en el texto "másdelomismo" van a ver porque no puedo usar un cuadro negro de background para el "loader", y si le dan hit pueden detener el audio.. aunque vuelve a empezar cuando la animación hace loop (discúlpenme esa).

Ojalá puedan ayudarme. Muchas gracias.

____
PD: Otra cosa que quiero hacer (y esto no es tan importante, me importa muuuuuuuucho más lo de arriba) es que cuando se le de hit a un botón, se quede en el último frame del rollover. Es decir, si le dan hit a "belle époque" que se quede naranja, en lugar de hacer el rollout cuando se mueve el puntero como hace ahorita.

Por rq!

14 de clabLevel



 

firefox
Citar            
MensajeEscrito el 15 Jun 2009 10:26 am
Lo único que debes hacer es detener tu película cuando se empiece a cargar y reproducirla cuando se termine de cargar, de esta manera no ocurrirá lo que te sucede, mira esta función verás como se sitúa un stop en el onLoadStart y un play en el onLoadInit. Además si utilizas dicha función, te ahorras lo de repetir el código de cada botón ya que puedes utilizarla para todos, sólo deberías enviarle el nombre del movieClip que quieres que lea como barra para que utilice una distinta en cada caso.

Para lo segundo que deseas, puedes ver estos posts, creo que es lo que buscas.

http://foros.cristalab.com/estado-visitado-de-boton-movie-clip-t59552/
http://foros.cristalab.com/mantener-un-boton-en-estado-sobre-con-accion-a-objeto-t59659/

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 01 Jul 2009 09:10 am
Hola elchininet, muchisimas gracias por tu respuesta, tuve que dejar esta prueba en espera porque me llegó otra cosa, pero ahora estoy de nuevo metida en esto y logré hacer que el "holder" me apareciera cuando el "loader" llegara a 100%, revisando lo que me indicaste, sólo tuve que agregar un stop y un play en la parte del código indicada, aún sigo probando con lo segundo (que el boton tenga el presionado) y todavía no lo logro, pero no me preocupa tanto, puesto que ahora se me presenta un problema mayor. Es para este nuevo problema para el que pido ayuda.

Explico mi nuevo problema, el último botón, llamado "pop art" de color morado, carga un swf que contiene un ScrollPanel de Thumbnails. Este swf funciona perfecto por sí solo, es decir, cuando le doy exportar desde su archivo .fla, todo funciona, cada botón me lleva a donde debe llevarme, y obecede a los RollOvers y RollOuts asignados; se puede ver acá como funciona perfecto:

http://voyaprobar.web44.net/pop_art.swf
(tarda un poquito en cargar)

El problema es que cuando este swf se carga en el swf principal (que constituye mi home), no funciona, los thumbnails no obedecen sus RollOvers y no llevan a la imagen al darles click. No comprendo cual es el problema y porque este swf funciona bien, pero no funciona al cargarlo en el swf principal.
Evidentemente, necesito que funcione en el swf principal como funcionan los swf correspondientes a los botones bauhaus, belle epoque y art deco.

Aqui se puede apreciar el problema:

http://voyaprobar.web44.net/

Este ScrollPanel de thumbnails es un movieclip que se encuentra en la linea de tiempo principal y tiene el nombre de instancia "panel"; a su vez contiene movieclips (cuadrados con un pedazo de la imagen a mostrar) con sus respectivos nombres de instancias, desde "bt_uno" hasta "bt_diez", y con sus animaciones para rollover y rollout que son controladas gracias a etiquetas de fotogramas IN y OUT.
El movieclip con nombre de instancia "panel" tiene una máscara con nombre de instancia "mascara", la cual se utiliza para determinar los límites que van a hacer que el puntero accione el scroll.
Las imagenes que busca cada movieclip con nombre de instancia "bt_uno" y demás, se encuentran contenidas en un movieclip en la linea de tiempo principal, este tiene el nombre de instancia "imagenes", y tiene dentro de si cada imagen en un fotograma clave, que tiene su etiqueta y su acción de stop.

La línea de tiempo principal se ve asi:



Y el codigo que contiene es este:

Código :

stop();

//para hacer el scroll panel
panel.onRollOver = panelOver;

function panelOver() {
   this.onEnterFrame = scrollPanel;
   delete this.onRollOver;
}

var b = mascara.getBounds(_root);

function scrollPanel() {
   if(_xmouse<b.xMin || _xmouse>b.xMax || _ymouse<b.yMin || _ymouse>b.yMax) {
      this.onRollOver = panelOver;
      delete this.onEnterFrame;
   }
   
   if(panel._x >= 380) {
      panel._x = 380;
   }
   
   if(panel._x <= 130) {
      panel._x = 130;
   }
   
   var xdist = _xmouse - 256.5;
   
   panel._x += Math.round(-xdist / 8);
}


//para colocar a donde me lleva cada boton del scroll panel
panel.bt_uno.onRelease = function() {
   imagenes.gotoAndPlay("uno");
}

panel.bt_dos.onRelease = function() {
   imagenes.gotoAndPlay("dos");
}

panel.bt_tres.onRelease = function() {
   imagenes.gotoAndPlay("tres");
}

panel.bt_cuatro.onRelease = function() {
   imagenes.gotoAndPlay("cuatro");
}

panel.bt_cinco.onRelease = function() {
   imagenes.gotoAndPlay("cinco");
}

panel.bt_seis.onRelease = function() {
   imagenes.gotoAndPlay("seis");
}

panel.bt_siete.onRelease = function() {
   imagenes.gotoAndPlay("siete");
}

panel.bt_ocho.onRelease = function() {
   imagenes.gotoAndPlay("ocho");
}

panel.bt_nueve.onRelease = function() {
   imagenes.gotoAndPlay("nueve");
}

panel.bt_diez.onRelease = function() {
   imagenes.gotoAndPlay("diez");
}



El movieclip "panel" se ve asi:



Y este es el código en la capa de acciones dentro del mismo:

Código :

stop();

function over() {
   this.gotoAndPlay ("in")
}

function out() {
   this.gotoAndPlay ("out")
}

bt_uno.onRollOver = over
bt_uno.onRollOut = out
bt_dos.onRollOver = over
bt_dos.onRollOut = out
bt_tres.onRollOver = over
bt_tres.onRollOut = out
bt_cuatro.onRollOver = over
bt_cuatro.onRollOut = out
bt_cinco.onRollOver = over
bt_cinco.onRollOut = out
bt_seis.onRollOver = over
bt_seis.onRollOut = out
bt_siete.onRollOver = over
bt_siete.onRollOut = out
bt_ocho.onRollOver = over
bt_ocho.onRollOut = out
bt_nueve.onRollOver = over
bt_nueve.onRollOut = out
bt_diez.onRollOver = over
bt_diez.onRollOut = out


Los moviclips dentro de este movieclip:



Y el movieclip con nombre de instancia "imagenes":



Espero que puedas ayudarme porque es muy urgente, muchisimas gracias por adelantado, disculpa tantos datos e imagenes, es sólo que me quiero asegurar de expresarme y hacerme entender bien.

Muchas gracias.

rq!

Por rq!

14 de clabLevel



 

firefox
Citar            
MensajeEscrito el 01 Jul 2009 08:02 pm
Trata de hacer las preguntas más cortas y sencillas, si las haces muy largas puedes lograr que aburran al que visite el post y no te respondan. En mi caso no me pude aguantar el leerlo completo porque vi los trabajos de Andy Warhol :).

Mira no se si este puede ser el problema pero te puedo decir sólo dos cosas que veo:

Si le das una acción de rollOver al panel que contiene los thumbnails, las acciones que estos tienen no funcionarán:

Código ActionScript :

panel.onRollOver = panelOver;


Claro también veo que cuando haces el rollOver lo borras y creas un onEnterFrame por lo tanto este podría no ser el problema. (De todas maneras prueba eliminarlo)

Por otro lado veo que vuelves a ejecutar el RollOver si se cumple una condición dentro de la función "scrollPanel", esta condición está basada en un objeto que guarda el bounding del movieClip "mascara", bueno, el bounding toma como MovieClip contendor a la raiz (_root) y esta cuando ejecutas el SWF por si sólo es el stage de ese movieClip, pero cuando lees ese movieClip en el flash madre, el _root pasa a ser el stage de ese FLA, por lo que te recomiendo que cambies esa línea por esta:

Código ActionScript :

var b = mascara.getBounds(this);


Así siempre tomará como Movieclip contenedor el stage del SWF de la galería. Quizás esto sea el problema.

PD: Mirando estos códigos me doy cuenta que estás repitiendo muchas cosas, si programas por medio de ciclos te puedes evitar el repetir el mismo código para todo, aquí tienes un ejemplo de como trabajar con ciclos.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 01 Jul 2009 08:18 pm
Muchísimas graciaasss!! eso era todo, colocar "this" en lugar de "_root". Muchas muchas gracias y de nuevo disculpa el post tan largo, es que quería hacerme entender bien, trataré de resumir más las cosas en mis proximos post. Intentaré eso de los ciclos que me recomiendas, muchas gracias.

Ahora que funciona me doy cuenta de que si le doy al mismo botón dos veces me muestra imágenes diferentes, la que le corresponde y la que tiene al lado. Es decir, si le doy a marylin, muestra a marylin, y si alli mismo le doy de nuevo a marylin me muestra la siguiente imagen con la chica de "maybe..".

¿Alguna idea de porque hace eso y cómo lo soluciono?

Gracias y disculpa las molestias.

rq!

Por rq!

14 de clabLevel



 

firefox
Citar            
MensajeEscrito el 01 Jul 2009 10:50 pm
Prueba cambiar los gotoAndPlay por gotoAndStop, al final no tienes ninguna animación, sólo muestras un frame u otro.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 02 Jul 2009 02:19 am
Funciona, gracias. Luego veré como resuelvo eso cuando se trate de animaciones. Muchas gracias. :)

rq!

Por rq!

14 de clabLevel



 

firefox

 

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