Si eres de los que creen que las “hojas de estilos en cascada” son páginas con instrucciones sobre las diversas formas de masturbarse, que “flash” es eso que lleva la cámara que consigue que el que no salga con los ojos rojos es porque los ha sacado cerrados y que “javascript” es un nuevo aparato electrónico, mejor abandonas esto en este momento y quedamos tan amigos. A no ser que te guste mi estilo literario…
Si por el contrario entiendes lo que significa el título de esta entrada, puede que el contenido también te interese.
Si, ya lo sé. Lo normal para precargar archivos swf en una página web es usar un precargador hecho en la propia película flash y en internet pueden encontrarse montones de ejemplos y documentación. Sin embargo, hay algunas ocasiones en las que este tipo de precargador no es la mejor opción.
Supongamos que la película flash carga dinámicamente un montón de elementos de la biblioteca. Lo normal es que los exportemos para ActionScript dándoles un identificador para vincularlos. Al seleccionar esta opción, flash marca de manera automática “exportar en el primer fotograma”. Este primer fotograma no es realmente el primero, sino un hipotético “fotograma cero”, lo que significa que estos clips se cargarán antes que cualquier cosa en la película (incluso antes que cualquier precargador que pongamos).
Existen trucos para hacer que estos elementos carguen en un fotograma distinto (y puede que los comente en otra ocasión), pero esto no siempre funciona. Por ejemplo, el componente XMLConnector, no funcionará correctamente si no se usa desde el primer fotograma. No es que sea imprescindible pues podemos acceder a la lectura de XML sin usar el componente, pero muchas veces nos puede interesar por comodidad (o porque no sepamos hacerlo de otra forma).
De esta forma podría ocurrir que el precargador de flash no empezara en el 0% sino con un valor bastante avanzado, ya que antes de mostrar el precargador necesitaría cargar una parte del archivo (en algunos casos la mayor parte de él).
También podría darse el caso de que no dispongamos del archivo original, sino sólo del compilado swf. O que nos llegue un proyecto ya empezado y nos no merezca la pena rehacer casi todo el planteamiento.
Bueno, es posible que te haya ocurrido cualquiera de los casos expuestos. Y si no te ha ocurrido, no te preocupes que el método que expongo también vale. Lo que vamos a hacer es pasar de hacer el precargador en el archivo flash y hacer uno con una combinación de css y javascript.
Lo primero que vamos a hacer es descargar el interesante javascript percent_bar.js de Brian Gosselin que nos permite crear una barra de progreso y controlarla a través de determinadas funciones. En nuestro caso vamos a utilizar setCount() que nos permite pasarle un porcentaje a la barra. Al principio del script podemos ver algunas variables para configurar su aspecto
var loadedcolor='orange' ; // PROGRESS BAR COLOR
var unloadedcolor='lightgrey';// BGCOLOR OF UNLOADED AREA
var barheight=10; // HEIGHT OF PROGRESS BAR IN PIXELS
var barwidth=300; // WIDTH OF THE BAR IN PIXELS
var bordercolor='white'; // COLOR OF THE BORDER
En principio vamos a dejarlo tal como viene. Ahora vamos a ver lo que hacemos en la página que contendrá nuestro archivo flash. En la sección HEAD de la página que contiene el archivo flash intoducimos el siguiente script
<script type="text/javascript">
<!--
function getFlashMovieObject(movieName){
if (window.document[movieName])
{
return window.document[movieName];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[movieName])
return document.embeds[movieName];
}
else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
{
return document.getElementById(movieName);
}
}
function barra(){
porcentaje=getFlashMovieObject('movie').PercentLoaded();
if(porcentaje==100){
clearInterval(id);
document.getElementById('barraprogreso').style.display='none';
document.getElementById('flashmovie').style.display='block';
}
setCount(porcentaje);
}
//-->
</script>
Esto tampoco necesitamos cambiarlo, pero lo explicaré un poco por encima. La primera función localizará el objeto flash de nuestra página si la llamamos pasándole el valor del parámetro id de la marca object (que es el mismo que usamos como name de la marca embed). No te preocupes por ahora demasiado en eso. Más adelante quedará más claro.
La segunda función es la que se encarga de actualizar la barra de progreso en función del valor PercentLoaded() (el porcentaje cargado) de nuestro archivo swf (para poder leer este valor es necesario que la marca embed lleve el parámetro swliveconnect=”true” ).
Como esta función es llamada a través de un intervalo con idea de que actualice la barra, una vez que obtenemos un valor de 100 (100%), anulamos el intervalo, escondemos el div que contiene la barra y hacemos visible el que contiene el flash.
Ahora vamos a ver cómo colocamos ambos elementos en la página. ya hemos visto que necesitamos dos div uno llamado “barraprogreso” y otro llamado “flashmovie”. Así, en nuestra página podemos poner
<div id="flashmovie" style="display:hidden;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="800" height="600" id="movie">
<param name="movie" value="pelicula.swf">
<param name="quality" value="high">
<embed src="pelicula.swf" quality="high" swliveconnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="600" name="movie"></embed>
</object>
</div>
<div id="barraprogreso">
<script language="javascript" xsrc="percent_bar.js" >
</script>
<script type="text/javascript">
<!--
var id=setInterval("barra()", 100);
//-->
</script>
</div>
Observa que el div que contiene la peli aparece oculto (display:hidden). Es imprescindible que demos el mismo valor al id de la marca object y al name de la marca embed, en nuestro caso “movie”.
También es imprescindible, como comentaba antes, que la marca embed lleve swliveconnect=true para que pueda mandarle valores a javascript (en nuestro caso necesitamos el valor del porcentaje cargado que obtenemos a través de PercentLoaded().
Detrás del div que contiene la peli flash ponemos el div con la barra de progreso generada a través del script que bajamos al principio. En nuestro caso lo he colocado en el mismo directorio que la página, pero puede estar en cualquier otro.
Una vez cargada la barra, activamos el intervalo que llama a la función que la actualiza mediante setInterval. En nuestro caso usamos un intervalo de 100 (una décima de segundo), de forma que la función es llamada 10 veces por segundo, lo bastante veloz como para crear un redibujo suave.
Ya debería funcionar todo correctamente, pero no está de más que mejoremos el aspecto y posición de los elementos mediante un poco de CSS. Así que antes de que cierre head insertamos lo siguiente
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFFFFF;
}
#flashmovie{
position:absolute;
margin-left: auto;
margin-right: auto;
width:100%;
height:100%;
z-index:1;
text-align:center;
}
#barraprogreso{
display:block;
position:absolute;
vertical-align: middle;
z-index:2;
text-align:center;
width: 300px;
height: 10px;
top: 50%;
left: 50%;
margin-top: -5px;
margin-left: -150px;
}
-->
</style>
De esta forma centramos horizontalmente la peli flash en nuestra página, y la barra de progreso horizontal y verticalmente (o sea, en el centro de la ventana). Observa que los valores 300px y 10px de su definición de estilo, corresponden con el mismo ancho y alto que hemos usado en la configuración de percent_bar.js. Igualmente los valores -150px y -5px corresponden a las mitades de esos valores en negativo.
Con todo lo contado deberías ser capaz de hacer tu propio precargador javascript para archivos swf. Algun día volveremos a la carga con la precarga. Mientras tanto, espero que lo contado te sea de utilidad.
hola me llamo carlos, me canse de probar con ese scrip no lo puedo hacer andar, necesito por favor por favor que me ayudes, para mi seria esplendido que puedar poner un html todas esos scripts por favor, encerio necito ayuda, es para un trabajo, cualquier cosa comunicate por favor
heavycow@hotmail.com
muchas gracias y entendi, pero no anda :)
Asegúrate de seguir al detalle las indicaciones:
1- Descarga percent_bar.js, descomprímelo, configura sus ajustes y colócalo junto a la página que va a cargar el flash.
2- Copia el script indicado antes en la sección HEAD de tu página.
3- Copia el código de los DIV que contienen la película flash e insertan la barra de progreso. Puedes, si quieres cambiar el tamaño de la película flash y del DIV la contiene, así como el nombre del archivo.
4- Aunque no es imprescindible no viene mal introducir algo de CSS para colocar los objetos donde queramos. El código que muestro vale para centrar los elementos con los tamaños asignados en el ejemplo. El CSS puedes introducirlo en la sección HEAD de la página.
Por si te sirve de ayuda puedes verlo funcionando en http://www.yunou.com/index2.php?lang=esp
La barra de carga para el archivo flash se genera desde javascript.
A mi me pasa lo mismo no me funciona el script me da un error ’style’ es nulo o no es un objeto.
La verdad es que necesito que me funcione esto y te agradeceria toda la ayuda que me pudieras dar.
Muchas Gracias.
Kety, ¿qué navegador usas? En principio me funciona con todos los que he probado (Explorer 6 , Safari, Firefox…)
Comprueba que los identificadores “barraprogreso” y “flashmovie” están bien escritos en los DIV y en el script. Asegúrate también de que el código que inserta flash asigna el atributo name con el valor movie tanto en la marca param como en la marca embed.
Prueba primero copiando y pegando los ejemplos para ver si te funcionan. Si es así, compáralo con lo que estés haciendo a ver si así localizas el error.
la verdad es que hice todas esas pruebas y nada de nada es mas hasta le cambie el nombre a mi archivo swf para ponerle el mismo que tienes colgado aqui pero sigo con las mismas.
Te pongo el codigo que tengo escrito:
Hola Kety. Me temo que wordpress se come el código. Mira a ver si lo puedes colgar de algún lado y pones la dirección.
Bien, después de mirar elproblema de kety parece que la última versión descargable de percent_bar.js (1.2) no funciona correctamente, así que he actualizado el vínculo para que podáis descargar la versión 1.0, que es la que ha usado en el ejemplo y probado en todos los navegadores.
http://surlandia.com/wp-content/uploads/2007/03/percent_bar.js
Hola, con este ultimo archivo que mandaste me funciona para el IE pero no para el mozilla firefox.
Tambien te queria consultar una cosa y es que al insertar el archivo swf como objeto me crea como un marco al situarme encima de el y al hacer click me desaparace pero yo quisiera que no me apareciera no se si tienes alguna idea de como solucionarlo ya que en tu página no pasa eso no aparece como si el objeto fuera un marco.
Saludos
Es decir es como si fuera un LINK y no quiero que el objeto sea como un LINK.
Hola Kety. He mirado la dirección que mandaste (por e-mail) y (salvo un pequeño extraño) parece funcionar más o menos en Firefox de Mac. Aunque si no te funciona correctamente en Firefox podría deberse a que has puesto marcas sin cerrar. Observa que abres dos párrafos que no cierras.
Con respecto al otro asunto que citas, es un problema ampliamente conocido ajeno a lo que aquí se cuenta. De todas formas puedes hallar la solución en cristalab y otros muchos lugares
Sólo para agradecerte. El script funciona perfecto. Alcanza con ver el código fuente de yunou.com que en mi opinión es donde han aplicado lo que tu comentas, de manera más rápida y simple. Un saludo.
hola he probado el ejemplo que pones y funciona pero ahora mi problema es que cuando carga la animacion la barra de descarga no se quita sigue ahi hasta que la reproduccion temina ojala me puedas ayudar no se que este pasando en tu sitio no pasa lo mismo.
gracias
Hola John. En yunou.com desarrollé la programación (tanto el actionscript para flash como el php que es la base de casi toda la tienda y el poquito de javascript que se usa) y por determinados condicionantes tuve que encontrar una solución para mostrar la precarga de flash desde fuera del propio flash, lo que me llevó a la solución que he compartido en esta entrada. En principio pensé en implementar mi propio javascript para representar la barra de progreso, pero descubrí percent_bar.js y aproveché para usarlo. Ésto podría haber generado algún problema ya que la última versión no es compatible con la solución que planteo. No hay que preocuparse, el vínculo al script baja una versión anterior que funciona correctamente.
Martha, si en todo el código se está referenciando al div que contiene la barra de progreso de la misma forma y sin que haya errores mecanográficos (ya sé que es obvio, pero mira eso primero), podría ser que otro script esté interfiriendo con éste.
Sea o no ese el caso, un “arreglo” sencillo consiste en tapar la barra colocando el flash encima de la misma (haciendo que los divs coincidan y asignando su propiedad z-index), de esta forma no debes preocuparte demasiado porque no desaparezca, ya que de todas formas no se verá.
Hola yo tambièb ya probe todo el código y nime funciona en mi página ya revise todo y esta bieen.
Ah me podrias decir algun buen tutorial aqui en la red de action script.
Gracias
Hola Vero. Sin indicar una dirección que pueda mirar es imposible que pueda indicarte nada. Podría ser que en la página hubiera otro script que interfiera, o que haya algo incorrecto (versión del script percent_bar.js, marcas no correctas, parámetros erróneos o ausentes…)
Con respecto a un tutorial de actionscript, te aconsejo que lo busques en google y elijas aquel que encuentres comprensible y que encaje con tu nivel y necesidades.
hola.
la verdad a mi tampoco me funciona. si podes darle una mirada a la pagina te lo agradeceria.
no entiendo el por que del setInterval de var id=setInterval(”barra()”, 100);
en el .js no hay ninguna funcion con ese nombre.
hola,
a mi no me funciona… me manda un error en la linea que dice:
setCount(porcentaje);
me dice “object expected”… por favor ayudenme!!
Hola, Tincho. ¿Qué no hay una función con qué nombre? ¿barra? Mira bien el código, verás que sí.
Creo que el funcionamiento está más o menos explicado en la entrada. Precisamente la línea que indicas llama a la función barra() cada décima de segundo.
xForthx (y tú también Tincho), vuelvo a decir lo mismo que dije en un comentario previo: sin indicarme una dirección es imposible que pueda comprobar nada.
Por otro lado, ¿habéis probado la dirección que indico? (yunou.com). ¿Os da error también allí? Si no es así, el problema, está claro que viene de otro lado. Podría ser que en otro script interfirera en el funcionamiento de éste. Pero en ninguna de las dos direcciones he visto nada que se parezca al script que describo aquí.
Hola este tipo de precarga esta muy buena, pero mira me sale este error en el firebug de firefox:
setCount is not defined
barra()
setCount(porcentaje);
por favor ayuda!!!!!!!!!
Hola KAM. La función setCount es una de las funciones definidas en percent_bar.js.
Si te devuelve un error indicando que esta función no está definida es o porque no has incluido la llamada a este script o porque algún error de sintaxis está impidiendo que se cargue correctamente. También podría ser que la url al mismo no sea correcta.
Observa que en el código original he puesto dentro del div “barraprogreso” una marca script que carga percent_bar.js. El vínculo para bajarte este script puedes encontrarlo en varios comentarios anteriores.
Hola como estas mira tengo una problema con el coedigo sabes que lo coloque y segui todos los pasos, de alguna forma si me corre el script pero cuando se va a ver el swf :o$ es decir sale cuando ya va a salir el video:( un saludo y espero me ayudes gracias.
Hola Jorge. No llego a entender bien lo que me dices. De todas formas el precargador no impide que la película flash se vaya cargando (Obvio, ¿no?). Eso quiere decir que la película flash debe velar por sí sola de no empezar hasta que no haya cargado todo, ya que si no lo hacemos así el cargador podría hacer la película visible cuando ya lleve una parte. Para evitar esto hay varias opciones. La más sencilla es colocar todo el contenido en un símbolo y, desde la librería, marcar “exportar desde el primer fotograma”. De esta forma no podrá ponerse en marcha hasta que no haya cargado todo.
Por supuesto si la película es de las que espera una acción del usuario no es necesario hacer nada, ya que de todas formas se quedará esperando en el primer fotograma.
Saludos man… me funciono tu script, solo un detalle, en el js que llama a percent_bar.js y en el embed colocas xsrc en lugar de src. Cambiandolo a src todo mola.
Gracias, Willy, no lo había notado, pero inicialmente estaba bien, supongo que será una de las típicas trastadas que suele hacernos wordpress con los códigos en este blog.
No consigo hacerlo funcionar bien despues de mil intentos llevo tres dias y nada
el problema es que necesito meterlo dentro de una celda y o bien se me sale o si suprimo lineas del css me funciona bien en el IE pero en el firefox no, podrias echarme un cable, puedes contactarme en el mail, muchas gracias
Ricardo, para “contactarte en el mail” necesitaría la dirección, ya que todavía no he alcanzado la omnisciencia. De todas formas, por lo que puedo intuir de tu comentario, el problema no radica en el script, que creo entender que te funciona correctamente, sino en que la composición de los elementos en la página no es interpretada como quieres, por lo que pienso que es algo que se sale del propósito de esta entrada.
La disparidad de interpretaciones entre los distintos navegadores, es algo que también afecta frecuentemente, y de manera especial, al CSS. Si no consigues encontrar un código que sea interpretado de forma homogénea, que sería lo aconsejable, y consigues que con uno se vea bien en Firefox y con otro en Explorer, siempre puedes intentar recurrir al uso de condicionales. Busca en google “uso de condicionales para explorer” o expresiones similares para mayor información.
Gracias por la programacion de yunou.com es un placer comprobar que utilizas nuestra pagina para explicar como funciona el flash. Tiene un reconocimiento generalizado de una pagina con criterio y buen funcionamiento. Para mi solo exite una duda que es la velocidad de descarga de la pagina, ande por donde ande entro en la web para comprobar la velocidad de la misma desde distintos sitios y para mi sorpresa es que en casi todos tarda un poco en cargar sobre todo las fotos y no digo nada si la conexion no es ADSL que va bastante lento, en un par de ocasiones que he querido vender mi idea de tienda para proveedores y teniendo ellos conexion tipo wifi o tarjeta inalambrica me he dado de bruces pues la pagina carga a los 20 minutos. ¿ esto es logico ? ¿hay alguna forma de hacer la pagina mas veloz?
Saludos y gracias.
Javier Lumbreras.
Hola Javier.
Después de tu comentario he ido a ver qué tal va de rápida la página y las fotos me salen bastante rapiditas y aparecen de manera fluida lo que hace que el tiempo de espera (no mayor de 2 segundos en las páginas de fotos) apenas se note. Y uso una conexión adsl de las normalitas (los 3 megas de telefónica)
Lo que sí tarda algo más es la entrada inicial a la web, pero es algo derivado del planteamiento de la misma en la que casi todo se carga al inicio. En todo caso, ahora mismo y con la misma conexión no creo que haya tardado más e 10 o 12 segundos (ponle 20 exagerando)
Los 20 minutos que dices no son ni mucho menos algo normal, pero los problemas que indicas podrían haber sido puntuales. En esta web en concreto las imágenes se guardan como campos binarios en una base de datos mysql que son servidos a flash a través de scripts php que hacen las consultas y recomponen la imagen, y sé que la empresa de hosting había tenido recientemente algunos problemas con los servidores de bases de datos.
Otro cliente que también tiene su web alojada en el mismo proveedor tuvo recientemente problemas parecidos. Pero es algo puntual y ahora parece que todo está en regla.
En internet influyen muchas variables y tampoco descarto que el hecho de que esté alojado en una empresa norteamericana pueda haber provocado algún problema en algún momento. De hecho ya ha ocurrido más de una ocasión que algún proveedor de conexión español no sea capaz de acceder a algunos sitios americanos.
Es verdad que el planteamiento de la web puede dejar a algunos descolgados, pero usar música en streams, animaciones a porrillo, carga dinámica de imágenes y un interfaz sofisticado en flash tiene su precio. De todas formas cuando trabajé en ella, mi conexión era de 1 o 2 megas y aún así iba a una velocidad más que aceptable.
Con respecto a la forma de hacerla más rápida, no estoy seguro de que pueda conseguirse sin un replanteamiento en profundidad. Quizás lo más razonable sería ofrecer en la entrada una alternativa menos multimedia para aquellos cuya conexión no pueden manejar tanto.
un saludo
Muchas gracias. Todo un placer.
Estamos en contacto.
Saludos
Buenos Dias, antes que nada quiero agradecer por el scrip jeje me va a servir muchisimo
tengo nomas un problemita, en Iexplorer funciona de 10 pero a la hora de usar firefox no funciona el cargador y la consola de errores me dice lo siguiente:
function getFlashMovieObject(”movie”).PercentLoaded is not a function :’(
Les agradezco de antemano cualquier informacion que me puedan dar