Validar Flash

Utilizar Flash para diseño web, en primera instancia, puede ser muy seductor, por la experiencia de usuario que se puede lograr para el sitio web en cuestión. Pero, en una segunda instancia, analizando el costo-beneficio, es posible que lleguemos a darnos cuenta que el uso de Flash, genera más inconvenientes que los que deberíamos estar dispuestos a tolerar.

Uno de esos problemas es que el código generado para incrustar un archivo .SWF en una página web hace que el código html no sea válido al chequearlo con el servicio de validación de código de la W3C.
Seguramente estemos de acuerdo con que escribir código válido es el camino correcto, aunque todavía algunos se pregunten ¿por qué validar Flash?

Entonces, cuando a pesar de todo, por la razón que sea, tenemos que usar Flash: ¿cómo hacemos para obtener un código válido?
Personalmente me he visto en esta situación varias veces al utilizar el servicio de issuu.com, que nos permite subir un archivo pdf y con él genera una visualización tipo “flip book”, animada en Flash.

El código generado por el servicio de issuu.com es algo así (para simplificar en este ejemplo, sustituí un par de cadenas largas por [valor1] y [valor2].):

<object style="width:420px;height:297px">
	<param name="movie" value="[valor1]" />
	<param name="allowfullscreen" value="true"/>
	<param name="menu" value="false"/><br> <embed src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-shockwave-flash" allowfullscreen="true" menu="false" style="width:420px;height:297px" flashvars="[valor2]" />
</object>

<object style="width:420px;height:297px">
	<param name="movie" value="[valor1]" />
	<param name="allowfullscreen" value="true"/>
	<param name="menu" value="false"/><br> <embed src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-shockwave-flash" allowfullscreen="true" menu="false" style="width:420px;height:297px" flashvars="[valor2]" />
</object>

Al intentar validar el código, saltaron más de 20 errores.
Para convertir este código en código válido, seguí los pasos sugeridos en yoast.com, que a continuación resumo:

1. A la etiqueta <object> hay que quitarle style="width:420px;height:297px" y sustituirlo por dos nuevos atributos con esos mismos valores:
   • width=»420″
   • height=»297″

además hay que agregarle el siguiente par atributo-valor:

type="application/x-shockwave-flash"

2. También en la etiqueta <object> agregamos un nuevo atributo data cuyo valor será el que hemos llamado valor1. Y nos aseguramos de eliminar la barra inclinada al final de la etiqueta de apertura de <object>.
3. La etiqueta <embed> se elimina. En su lugar va una etiqueta <param> con el atributo name="movie" y el atributo value con el mismo valor1 utilizado en la etiqueta anterior.
4. Las dos restantes etiquetas <param> se conservan igual, aunque eliminando la barra inclinada del final.
5. Para terminar, dentro de la cadena que hemos llamado valor1 hay que sustituir los & por &

Por lo que, el código (resumido) quedaría así:

<object type="application/x-shockwave-flash" width="420" height="297" data="[valor1]">
	<param name="movie" value="[valor1]">
	<param name="allowfullscreen" value="true">
	<param name="menu" value="false">
</object>

<object type="application/x-shockwave-flash" width="420" height="297" data="[valor1]">
	<param name="movie" value="[valor1]">
	<param name="allowfullscreen" value="true">
	<param name="menu" value="false">
</object>

Y este código sí es válido y, además, funciona.