Insertar SWF de Flash en XHTML valido (Cristalab)

Estás en: Cristalab > Tutoriales > Insertar SWF de Flash en XHTML valido

Insertar SWF de Flash en XHTML valido

Por: NEO_JP + Otros tutoriales de NEO_JP + 6 de Febrero del 2006

Autor

NEO_JP
clabLevel: 5073
5 Tutoriales
0 Ejemplos

Los evangelistas del código abierto (open source) y estandaristas (evangelistas por lo estándar) siempre han estado en plena guerra a ciegas contra flash por muchos aspectos ya discutidos en el articulo "Usas flash, entonces te odio". Pero creemos que flash puede ser muy bien usado y complementar una web basada en estándares.

Por lo tanto, este tutorial expondrá brevemente cómo introducir flash en páginas XHTML y mantener el código estándar.

Nota: Para éste tutorial necesitas tener previos conocimientos sobre XHTML.

¿Por qué usarlo? Pros y Contras

Pros:: Nuestro código será XHTML estándar, el código pasará satisfactoriamente las pruebas de validación, el código será más chico, fácil de entener, escribir y memorizar.

Contra:: Aunque no todo es maravillas, Internet Explorer no crea el streaming en la animación flash, pero tiene solución y hablaremos de ésto más adelante.

Método Twice-Cooked

Éste es el nombre del método que usan los programas de Macromedia para insertar una animación flash en una página HTML.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="230" height="100">
	<param name="movie" value="flash.swf" />
	<param name="quality" value="high" />
	<embed src="flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="230" height="100"></embed>
</object>

Algo complejo ¿No creen? Ahora veamos una forma más sencilla y estándar, el método Satay.

Método Satay

<object type="application/x-shockwave-flash" data="flash.swf" width="230" height="100">
	<param name="movie" value="flash.swf" />
	<param name="quality" value="high" />
	<img src="flash.png" width="230" height="100" alt="Imagen en reemplazo de flash" />
</object>

Ahorrandonos las largas explicaciones técnicas, veran que éste código es mucho más simple, sencillo y fácil de manejar. Lo único que habrá necesidad de modificar es:

data, movie :: En este atributo agregaremos la URL del archivo flash (.swf).

width, height :: El ancho y alto del archivo flash y la imagen.

img:: Agregamos una imagen por si el usuario no tenga el flash player instalado.

Y eso es todo, para Firefox, Opera, Safari y el resto de navegadores con el mismo nucleo, pero recuerden que hay un ligero problema con Internet Explorer. No hay streaming.

Agregandole streaming

¿Qué necesitamos para que funcione correctamente y obtenga streamming nuestra animación flash? La respuesta es, un contenedor.

Para lograr esto crearemos un flash completamente vacío, excepto por el siguiente código actionscript en el primer frame.

_root.loadMovie(_root.path,0);

Y variamos un poco la ruta del XHTML

<object type="application/x-shockwave-flash" data="contenedor.swf?path=flash.swf" width="230" height="100">
	<param name="movie" value="contenedor.swf?path=flash.swf" />
	<param name="quality" value="high" />
	<img src="flash.png" width="230" height="100" alt="Imagen en reemplazo de flash" />
</object>

Enlaces

El método Satay fue creado por Drew McLellan y publicado por primera vez en A List Apart. Para mayor información tecnica sobre este "método" pueden revisar el artículo en A List Apart, Flash Satay: Embedding Flash While Supporting Standards.

Información adicional

Ejemplo del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros

Cristalab