Cómo incrustar actividades de Flash en el blog

En este blog hemos visto cómo incrustar actividades interactivas en el blog mediante dos herramientas muy apropiadas para ello: Hot Potatoes y LIM. Pero existen otras posibilidades como, por ejemplo, incrustar actividades, juegos o vídeos creados con Flash. Adobe Flash es una aplicación muy utilizada en la Web con la que se puede crear todo tipo de animaciones y vídeos. Este programa incluye un lenguaje de programación, ActionScript, con el que se consiguen aplicaciones interactivas muy usadas en el ámbito de la educación. En este artículo aprenderemos a incrustar este tipo de actividades en nuestro blog de Blogger, pero la explicación también vale para otros gestores de contenidos que tengan la posibilidad de incluir código externo.

1. Antes de empezar

Para que las animaciones creadas con Flash se vean en el navegador web que utilicemos, éste debe llevar incorporado el complemento o plug-in de Flash. Este complemento ya viene instalado en algunos navegadores, y si no es así, cuando se abre una página web que contiene una película de Flash, aparece un icono o una ventana que nos avisa de que no está instalado y nos lleva a la web de Adobe desde donde podemos instalarlo muy rápidamente en el navegador. En las distribuciones GNU/Linux, la instalación se realiza directamente desde los repositorios de programas. Por eso, este tipo de scripts no tiene problemas para que se pueda ver en la Web, lo que no ocurre con otros que necesitan complementos más complejos.
Pero, al igual que con otros elementos multimedia, con las animaciones de Flash hay que tener algunas precauciones. En primer lugar, estas películas (como se llaman en Flash) suelen incorporar música y sonidos, lo que puede molestar al usuario o a los que están a su lado. Resulta especialmente molesto que estos sonidos se oigan nada más entrar en la página que muestra la película, lo que suele sobresaltar al usuario, aunque esto se puede evitar, como veremos más tarde. Y otro peligro importante es que el código de algunas de estas películas puede dejar colgado el sistema, con las consiguientes molestias; por eso, conviene probar la película, si se puede, en los navegadores más utilizados. De hecho, a mí me ha ocurrido que uno de los juegos Flash que estoy probando ha provocado el cuelgue de mi navegador Internet Explorer.

2. Cómo incrustar un juego de Flash con su código

Para empezar, vamos a incrustar en el blog un juego creado con Flash, que podemos encontrar en páginas web como, por ejemplo, Free Flash Games 4 All. En esta web he elegido el juego Adventure Golf, que incorpora el código HTML que pegaremos en el editor de Blogger, abriéndolo en la parte del código fuente o Edición de HTML. La película de Flash, una vez pegado su código, no se muestra en el editor visual, es decir, en la parte de Redactar si usamos el navegador Firefox, y con Internet Explorer aparece un rectángulo negro. Pero podemos comprobar si funciona todo bien haciendo clic en la Vista Previa.

3. Cómo incrustar un archivo de Flash

Puede ocurrir que tengamos una película de Flash propia y queramos incrustarla en el blog. Yo tengo una que hice como actividad final del curso "Flash para la enseñanza" del CNICE. En estos casos, tenemos que recurrir a un servidor externo a Blogger para guardar el archivo de extensión SWF, que es el archivo ejecutable creado con la aplicación Flash. Las películas de Flash no son archivos de vídeo propiamente dichos, por eso no podemos cargarlas al servidor de Blogger con el botón de vídeo del editor. Una vez guardado el archivo en otro servidor, lo enlazamos desde el blog con el código que nos proporcionan en la web de Adobe Flash:

<div align="center"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="500" height="400" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"><param name="movie" value="moviename.swf"><param name="play" value="true"><param name="loop" value="true"><param name="quality" value="high"><embed src="moviename.swf" width="500" height="400" play="true” loop="true" quality="high" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed></object></div>

En este código tenemos tres etiquetas de HTML: object, embed y param, con sus atributos, que permiten que se muestre la película de Flash en los navegadores web. Ahora veamos los atributos:

1. La dirección o URL completa del enlace al servidor donde se encuentra la película de Flash debe ir incluida como atributos value y src, que aquí hemos coloreado en rojo para que se vean bien. Hay que recordar que en nuestro caso la dirección tiene que ser completa, es decir, incluyendo "http://" etc.
2. Se pueden cambiar los atributos de la anchura (width) y la altura (height) de la película por un número que indique la cantidad en píxeles.
3. También podemos modificar el atributo play, que puede ser verdadero (true) si queremos que la película se active nada más entrar en la página donde se encuentra incrustada, o falso (false) si deseamos que no comience al principio para que el usuario la vea cuando desee, que es lo más adecuado.
4. Finalmente, el atributo loop nos permite reiniciar la película continuamente cuando ésta se termina.
5. Para que la película aparezca centrada en el blog, he añadido el código en verde del principio y del final, que es el atributo de alineación centrada (align="center") dentro de la etiqueta DIV de apertura y de cierre.
   

Para mi presentación en Flash sólo necesito cambiar los atributos de anchura y altura, pues no se activa al comienzo, y escribir el enlace al espacio web donde se encuentra. Hay que tener cuidado de escribir todos los atributos de una etiqueta en la misma línea, pues cuando se copia y se pega el código directamente, pueden quedar los atributos en distinta línea, y eso da problemas. Incluso es mejor escribir todo el código en una misma línea, como he hecho yo con el código que muestro en este artículo, por si lo queréis pegar directamente en vuestro blog. En fin, después de todo, aquí está la presentación en Flash, que también puedo enlazar directamente al servidor donde se encuentra para que se vea en la pantalla completa del navegador.