JMiur [E]

Los archivos SWF o "de Flash" son muy comunes y fáciles de agregar en cualquier blog pero, parece que siempre causan stress pese a que cualquiera que haya agregado un video de YouTube en su sitio, ya ha agregado un archivo SWF porque el reproductor es eso mismo, un archivo de Flash.

Para que funcione bien sólo debemos conocer tres cosas: la dirección URL, el ancho y el alto. El primero de esos datos es el que suele causar estragos porque, como en Blogger no podemos alojar archivos, es común que todos los problemas surjan al utilizar servicios externos que sirven para guardar archivos pero que no nos permiten enlazarlos desde una página web (hotlink); hay muchos sitios que los admiten, en lo personal, utilizo dos: Fielden y DropBox; en cualquier caso, sea el servicio que sea, es importante verificar que ofrezcan anchos de banda suficientes porque estos archivos suelen ser "pesados" y consumen bastante.

El tamaño es complicado de establecer. Hay un software de escritorio gratuito llamado Swiff Player que nos da esa información y que además es un reproductor independiente de este tipo de archivos. Sino, habrá que usar el viejo sistema del ojo, capturar la pantalla, etc etc etc.

El código elemental para insertar un archivo de Flash es este:
<object type="application/x-shockwave-flash" data="URLarchivo.swf" width="ancho" height="alto">
<param name="movie" value="URLarchivo.swf" />
</object>
Eso es todo; no hace falta utilizar la etiqueta EMBED que suele causar problemas y que es una etiqueta obsoleta y no reconocida por la w3.org

Antiguamente, se usaban atributos como classid o codebase pero hace tiempo que son una reliquia innecesaria; en la etiqueta OBJECT, basta agregar el atributo type.

En Blogger, la URL siempre comienza con el protocolo http:// y se coloca en dos atributos diferentes porque Internet Explorer utiliza una y el resto de los navegadores la otra. Como decía antes, este es el detalle que provoca el error en la gran mayoría de los casos. Para verificar que sea correcta, basta copiarla y pegarla en al barra de direcciones del navegador. Si todo esta bien, veremos el SWF funcionando; caso contrario, veremos una página web o un mensaje de error.

Un detalle a tener en cuenta es que en ciertos servicios se nos permite tener archivos de acceso público o privado y para usarlos en una web siempre deben ser públicos. Es común que a veces, nos parezca que funcionan porque nosotros los vemos pero no los ven los visitantes. Seguramente estamos logueados en nuestra cuenta así que hay que estar atentos a ese detalle.

width indica el ancho y height indica el alto. Ambos, se miden en pixeles pero, eventualmente, pueden usarse porcentajes. Si bien es cierto que este tipo de archivo admite que esos valores sean varaibles y en teoría, la animación se redimensionará casi sin perder definición, esto no siempre es posible. Algunos SWFs tienen tamaños fijos o tamaños máximos y mínimos establecidos por lo tanto, cualquier intento de redimensionarlos, ampliará el rectángulo de la etiqueta pero no la película en si misma y quedarán espacios vacios.

OBJECT admite más atributos como ID, ALIGN o STYLE que son los mismos que se usan con cualquier otra etiqueta. La etiqueta PARAM se usa para agregar atributos especficos. A mi juicio, hay dos que deberían agregarse siempre:
<param name="wmode" value="transparent" />
<param name="allowScriptAccess" value="always" />
El primero, indica el modo en que se mostrará el SWF; poniendo transparent, resolvemos la mayoría de los problemas que se presentan cuando se producen superposiciones. De todas maneras, admite otros dos valores: window y opaque.

El segundo, habilita la ejecución de acciones que contenga el SWF (por ejemplo, un menú o algunos juegos).

Así que, el código que utilizo por defecto es algo así:
<object type="application/x-shockwave-flash" data="URLarchivo.swf" width="ancho" height="alto">
<param name="movie" value="URLarchivo.swf" />
<param name="wmode" value="transparent" />
<param name="allowScriptAccess" value="always" />
</object>


Todas las opciones de PARAM se escriben del mismo modo, la sintaxis general es:
<param name="NOMBRE" value="VALOR" />
Por ejemplo:
  • play indica si se ejecuta de modo automático que es el valor por defecto (true) o no (false)
  • loop indica si se reproduce de manera indefinida (true) o no (false)
  • menu lo utilizamos para definir el modo del menú contextual que se abre cuando hacemos click con el botón derecho; con true se muestra completo y con false se muestra con las opciones mínimas
  • quality es la que nos permite establecer la calidad por defecto; puede ser low, high, autolow, autohigh o best
  • scale por defecto tiene el valor showall que es el que hace que veamos la animación sin distorsiones cuando lo redimensionamos; otros valores son noborder, exactfit y noscale.
Todas ellas es difíciil que las necesitemos pero, estas dos últimas suelen verse con más regularidad:
  • bgcolor indica el color de fondo de la animación si es que esta es transparente. Se indica como cualquier otro color, en formato #RRGGBB
  • flashvars es el atributo que se utiliza para transferirle datos a la animación y es algo que veremos en muchos reproductores de audio
Quienes usen LighthWindow o algún otro script que genere ventanas modales pueden abrir archivos SWF en ese tipo de ventanas lo que tiene dos ventajas; la primera es que no tendremos problemas para mostrar animaciones que sean más grandes que el espacio disponible en nuestras entradas y la segunda, que no se cargarán hasta que un usuario las abra con lo que que la velocidad de carga de nuestro sitio no se verá afectada en absoluto.


REFERENCIAS:adobe.com

63 comentarios:

LuzdeLuna  

Uggg q suerte de porquería voy a tener! sólo encontré 4 tréboles en el tiempo, :D
Un abrazo JMiur!

PD: me olvidé jeje, está excelente lo del flash y supongo que también podría ponerse en un iframe si es muy pesado no? quizás para cabecera.

RossBoss  

Muchisimas gracias, me has ayudado mucho ;)

Responder
JMiur  

Has tenido más suerte que yo que sólo encontré uno :D

Ponerlo en un IFRAME o no es indistinto. A los efectos de la carga, ambos tardarán lo mismo.

Responder
Paula  

muy buenoo el tema del flashh


pd: asquito el de los granitos de pus auujj jjee

Responder
rafarrojas  

Yo hago mis swf con el viejo MX (el primero de los dos MX q hizo Macromedia). Con eso quiero decir que no sé cómo anda el action script ahora. Pero en ese sistema lo malo es que los fscommand (como el que te permite que al ejecutar el flash ocupe la pantalla completa) no se mantienen cuando insertas el flash en el blog, ni he visto como meter como atributo del object, el fscommand.
P.D. Mi nombre es rafarrojas. Mi blog http://rafarrojas-lanadaylafuga.blogspot.com. Y mi perfil ya no está bloqueado y soy accesible por cualquiera.

Responder
Oloman  

La entrada está bien, pero el último ejemplo es... ¡asqueroso! :D

Responder
Pozo+10™  

Muy buena explicación, me puse a jugar al de los tréboles jajaja me falto 1 solo http://img140.imageshack.us/img140/8074/dibujouzy.png

Saludos JMiur!

Responder
La hormiguita  

Muy didáctico y útil, ya está guardada, en pdf, para cuando llegue el momento. Trébol encontré uno, con eso me doy por satisfecha hoy... y lo del muchacho.... que le vamos hacer está brotado jajajaja :P
Gracias

Responder
JMiur  

No me hago responsable por las animaciones de los ejemplos :D

Responder
Jhonnysan  

Muy buena explicación ya que ando bien perdido con todo lo que tenga que ver con codigo html pero bueno ya se aprenderá gracias
Saludos

Responder
Nelson Diaz  

Saludos mi estimado amigo Jmiur y saludos cordiales y afectuosos desde Venezuela, aprovecho antes que nada para darte las gracias por tu apoyo amigo, utilizando tus aportes coloque el menú a mi nuevo blog tal cual lo deseaba, muchas gracias amigo.
Ahora entro por acá por otro requerimiento, el de insertar una presentación en flash en mi blog en la entrada que quedo configurada como entrada al mismo, he utilizado los códigos que aquí facilita, con el inconveniente de que al finalizar la presentación queda un "espacio vacio", del color negro del fondo, sin ninguna imagen o control que permita reproducirlo de nuevo a quien así lo desee, ¿podrías apoyarme en la solución de esto?, deseo se ejecute de manera automática al ingresar, pero que al terminar no se repita sino que quede a consideración del usuario si lo ve de nuevo, y alguna imagen que quede al finalizar la reproducción. Muchas gracias de nuevo por tus aportes, siempre enriquecedores amigo.

Responder
JMiur  

En realidad, desde el HTML de la página n oes mucho l oque puede hacerse al respecto ya que los archivos SWF son independientes y depende de cómo estan hechos para que funcionen de cierta manera.

Para el autoplay puede ponerse:
<param name="autoplay" value="true" />
pero, no siempre funcionará, como dije, dependerá de quien haya hecho la animación.

Lo mismo con el resto. Lo normal, es que haciendo click con el botón derecho sobre el objeto, se puede acceder a un menú que permite la reproduccion, detenerlo, etc.

Para todo eso, no hay controles externos posibles.

Responder
JAIME  

Hola JMiur, estoy tratando de hacer algo como el efecto de esta pagina:

http://www.therussellhill.com/

me dicen q es Flash, pero no estoy seguro, dime, se puede hacer este efecto en Blogger? y si es asi, conocez algun tutorial? gracias otra vez y mil veces mas :D

Responder
JMiur  

Si. Eso es una rchivo de Flash. En Bloger puede ponerse cualquier archivo SWF pero claro, previamente hay que crear esa animación.

Responder
JAIME  

ok, y podrias ayudarme con algun tutorial o sabes donde puedo buscar la informacion q me sirva para hacerlo (alguna web o nombre del script)

Gracias

Responder
JMiur  

Ese tipo de animaciones no son scripts, se requiere un software como Flash para ser creadas.

Responder
JAIME  

ok, gracias JMiur, muy amable por responder.

Responder
fabian  

NO ENTENDI COMO HACERLO JMIUR :(

Responder
JMiur  

Tendrás que explicar un poco más, Fabián.

Responder
ARL  

MUY BUENOOOOOOO... pero me preguntaba como poner en la pagina principal de mi blog "algo" donde la gente pueda comentar.... como lo que tienes tu arriba... osea los comentarios.... gracias mi mail es agulencina96@yahoo.com.ar

Responder
JMiur  

Los comentarios son parte de cualquier blog de Blogger; basta habilitarlos si es que no lo están.

Responder
Rafael Rodriguez Casas  

oh muchas gracias muy interesante lo pailas es que no encontré ningún trébol pero estoy realizado por que logre poner la animación en mi blog.

en algún lado vi que google ofrece un servicio que convierte una animación flash en HTML 5 hay te dejo para veer si puedes ampliar la información. nuevamente gracias

Responder
JMiur  

Eso, está publicado en esta entrada.

Responder
Omar T. M.  

Muchisimas gracias compa, pero no entendí esto:

Un detalle a tener en cuenta es que en ciertos servicios se nos permite tener archivos de acceso público o privado y para usarlos en una web siempre deben ser públicos. Es común que a veces, nos parezca que funcionan porque nosotros los vemos pero no los ven los visitantes. Seguramente estamos logueados en nuestra cuenta así que hay que estar atentos a ese detalle.

Y creo que es lo que me sucede, ya que si estoy logueado con mi cuenta de google, si puedo visualizar los archivos .swf, pero si no estoy logueado no se visualizan, y por ello, los visitantes no pueden visualizar dichos archivos, ¿cómo hago para que tanto usuarios como visitantes puedan visualizar los archivos .swf?

Espero haber sido claro y que se entienda mi explicación, de antemano muchas gracias por tu respuesta, ¡¡SaludoS!!

Responder
Omar T. M.  

Por cierto, los archivos swf están alojados en mi cuenta de Google Sites

Responder
JMiur  

Obviamente, para que todos puedan ver algo, eso, debe ser público.

En el caso de DropBox, debes colocar losa rchivos dentro de la carpeta publica.

Responder
Omar T. M.  

Muchas Gracias por su pronta respuesta :).

Ya hice mi sitio público y sigo sin ver mis archivos .swf, sigue igual solo veo los archivos con mi sesión de Google abierta, ¿qué falta por hacer?

Responder
JMiur  

No sé cuál es el sitio pero, si te deslogueas y no ves nada es que no son públicos o algo en laconfiguración es erróneo.

Responder
sabakunoshey  

muchisisimas graciass:3 me sirvio muchoo por fin! TvT
el dropbox me sirvio bastante tambn :D
te felicito muy buena entrada ;)

Responder
Elnoevo  

muy bueno solo no se en donde alojar el archivo .swf, tu lo tiene el de el ejemplo en dropbox pero cuando no tengo la sesion iniciada no me funciona el archivo que puedo hacer, GRACIAS.

Responder
JMiur  

Si lo alojas en DropBox, el archivo debe estar en la carpeta llamada PUBLIC, caso contrario, sólo podrás verlo si está logueado.

Responder
América Quinteros  

Gracias, un millón de gracias, los links con self, no me los leía, estaba asustadisima, ya que cambiar tantos links en mis .fla es una tortura, grande maestro, a entregar mi trabajo feliz, mañana :D

Responder
jhon jairo  

hola amigo tu pagina esta genial...deseo saber si es posible colocar una animacion swf en una cabecera del blog...que debo hacer ya tengo la animacion pero en la cabecera solo he visto opciones de color imagenes solamentye nos animaciones

Responder
JMiur  

Puede hacerse perfectamente pero, los archivos de Flash se deben agregar directamente en el HTML de la plantilla, escribiendo las etiquetas correspondientes.

Responder
Sonia Ramos Baldárrago  

Hola. En qué parte puede ponerse los códigos que mencionas? En cualquier parte? O tiene un orden específico? Saludos, espero me respondas.

Responder
Sonia Ramos Baldárrago  

Hola en qué parte del esquelto HTML se colocan los códigos? en cualquier parte? Gracias

Responder
JMiur  

Se colocan allí donde quieras que se vea la animación; en cualquier parte del blog.

Responder
Higaku  

Hola, disculpa yo quiero poner una animacion flash como imagen principal del blog, yo la aloje en mi dropbox, simplemente copie el link y lo puse donde me lo pedia pero no me aparece, por favor ayudame

Responder
JMiur  

No sé donde lo has colocado pero no debes copiar el link, debes colocarlo en una etiqueta objetct como indica esta entrada. Si está colocado de ese modo y no se ve es probable que se aporque la URL que estas usando es errónea.

Responder
Taxideral  

Muy bueno, me sirvió muchísimo. Una pregunta: Si yo quisiera publicar una animación en SWF que al finalizar empiece a reproducir otro archivo SWF ¿Qué debo hacer?

Si fuera solo para verlo en mi PC pondría el "LoadMovieNum" al final del fotograma de cada animación, pero para publicarlo en Blogger ¿tengo que hacer algo en el FLA o en Blogger puedo configurar el html para que pase a la siguiente animación?

PD: Perdón si no se entiende bien mi pregunta :$

JMiur  

Con HTML no se pueden controlar los archivos SWF más allá de las posibilidades que de el mismo archivo si es que las tiene; me parece que en este caso, todo eso debe estar indicado en el archivo FLA pero no sé si las limitaciones en cuanto al uso de dominios distintos afecta esa carga o si puede hacerse alojando ambas animaciones en el mismo servidor.

Responder
Taxideral  

Muchas gracias JMiur. Si, el FLA tiene las propiedades de dirigirse a la animación (o sea; al final de la animación tiene un loadMovie("URL", 1);
stop();), me funciona en todos lados menos en Blogger. Pero bueno, iré probando un poco y viendo qué alternativas tengo.

Saludos

JMiur  

Eso no es algo que tnga que ver con Blogger sino con las caracterísitcas de seguridad de los archivos SWF; en cualquier sitio srá igual, los archivos deben alojarse en el mismo servidor desde donde son ejecutados. En Blogger no tienes un servidor propio así que debes usar otro para alojarlos.

Responder
litos clown  

Amigo, lo primero es que no tengo ni idea de html y estoy intentando meter un swf en el encabezado de blogger. lo e alojado en google sites y todo funciona, pero no en explorer, he copiado tu codigo pero nada, puedes ayudarme?

JMiur  

Tendrías que decirme dónde está tu ejemplo para verlo.

Responder
Paul Vicente Gamarra Perez  

hola es ta bien

Responder
César Omaña  

Mil gracias por las instrucciones. Lo hice en menos de 5 minutos. GRACIAS AMIGO

Responder
eva Velasco  

solo acerte una pregunta:hago una animacion con flash paso el archivo a swf y lo cuelgo en dropbox me da el enlace y lo pego en el codigo que me das pero no sale en blogger. no se si estoy fallando en algo ,espero respuestas ,muchas gracias..

JMiur  

Habría que ver tu ejemplo para responder eso. Debes verificar el código pero, también si la dirección url es correcta y si está alojado como público.

Responder
Manel Fores  

Felicidades por tu blog, ya he conseguido poner un banner con archivo swf en mi blog blogger. Lo hice tal cual vi en tu blog.El problema lo tengo ahora, desde mi banner quiero que al clikarlo se vaya a otro blog mio. No consigo hacerlo.
Te agradezco anticipadamente tu ayuda

JMiur  

Eso debe ser parte del mismo SWF, no puede ser controlado desde el HTML de la página.

Responder
TuPcMaximoRendimiento  

Gracias sos un spro ;)

Responder
Elizabeth Egúsquiza  

Encontre 6 xD

Responder
Pao  

Gracias! super claro!
Saludos

Responder
Jordi  

sencillo i eficaz. Gràcies!

Responder
Antony Vidale  

Excelente. me suscribo.

Responder
Jeisson Latorre  

Encontre Solo Uno O.o
;( Porqueeee!!

JMiur  

¿Sólo un qué?

Responder
YOLANDA  

gracias, bien explicado

Responder
edwin steven murcia yepes  

es posible añadir arcchi vo flash ques se encuentre en mi pc con que codigo se hace

JMiur  

nadie lo vería

Responder
Itzel G Luna  

Oh en encontrado 4 tréboles :3

MUY buena información me ayudo mucho.

Responder
Mauricio Martínez  

Gracias "Viejo" me sirvió.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR