3 Formas de insertar archivos SWF en HTML

Para embeber contenido flash en una página web existen varios métodos. Lo puedes hacer mediante código de etiquetas  HTML o mediante librerías JavaScript, en esta entrada trataré de explicarles con las 3 formas.

Usando Etiquetas HTML Estándar

Se deben incluir las etiquetas anidadas con comentarios condicionales para Internet Explorer (Siendo la etiqueta  OBJECT para IE , y EMBED para los demás navegadores), veamos el ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject - step 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
    <div>

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="380">
        <param name="movie" value="rutaArchivoFlash.swf" />
        <param name="allowfullscreen" value="true">
          <param name="wmode" value="transparent">
      <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="rutaArchivoFlash.swf" allowfullscreen="true" wmode="transparent" width="600" height="380">
        <!--<![endif]-->
          <p>Alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>
  </body>
</html>

En el atributo value y data se pone la ruta del archivo swf, también se pueden agregar  parámetros con la etiqueta param como por ejemplo wmode , para la transparencia. De igual modo en Embed los parámetros flash se ponen como atributos html.

Usando la librería Javascript SWFObject 2

SWFObject 2 es un proyecto de código abierto que esta hecho en javascript, nos brinda un conjunto de APIS que nos permite de forma sencilla insertar archivos swf  de forma compatible con todos los navegadores. Para hacer uso de esta librería hay que descargar el archivo del sitio oficial del proyecto o simplemente haga uso de los CDNs de Google donde están alojada la libreria y agregarlo en dentro del <head> mediante la etiqueta<script>.

Ejemplo simple de swfobject 2.

<script type="text/javascript">

 var flashvars = {
  name1: "hola",
  name2: "mundo"
 };
 var params = {
  menu: "false",
  wmode: "transparent"
 };
 var attributes = {
  id: "contenidoDinamico",
  name: "contenidoDinamico"
 };
swfobject.embedSWF("rutaArchivoFlash.swf", "flashContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>

flashvars: Variables para manejar la película flash.
params: Parámetros que desea añadir al archivo flash según la  lista de parámetros de parámetros que soporta.
attributes: Algunos atributos adicionales que puedes usar para tu contenido flash, ver lista de atributos.

Los parámetros de embedSWF son:

swfobject.embedSWF(<Ruta del swf>, <ID de la etiqueta html que contendrá el flash>, <ancho>, <alto>,<version mínima de flash>,<Epress Install opcional>, <Variables>, < Parámetros >, <Atributos>);

Ejemplo completo:

<html>
  <head>
    <title>SWFObject 2.2 - Ejemplo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var flashvars = {
  name1: "hola",
  name2: "mundo"
};
var params = {
  menu: "false",
  wmode: "transparent"
};
var attributes = {
  id: "contenidoDinamico",
  name: "contenidoDinamico"
};
swfobject.embedSWF("rutaArchivoFlash.swf", "flashContent", "400", "250", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>
  </head>
  <body>
    <!-- Este es el DIV que contendrá la película flash -->
    <div id="flashContent">
        <p>Para ver el contenido necesitas tener Adobe Flash Player instalado</p>
    </div>

  </body>
</html>

Link del proyecto: http://code.google.com/p/swfobject/

jQuery SWFObject Plugin

Este es un plugin igualmente permite incrustar de forma aún más sencilla películas flash en un archivo html.

En el ejemplo se agrega la librería dentro de la etiqueta HEAD y seguidamente se inserta el código para embeber.

<html>
<head>
<title>Ejemplo SWF Jquey Plugin</title>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script src="jquery.swfobject.1-1-1.min.js"></script>
<script>
$(document).ready(
	function() {
		$('#flashContent').flash('animacion.swf');
           }
);
</script>
</head>
<body>
<div id="myFlash">

	</p>Para ver el contenido necesitas tener Adobe Flash Player Instalado</p>

</div>
</body>
</html>

Si desea puede ver más ejemplos explicados y descargar el plugin en la página del proyecto.

http://jquery.thewikies.com/swfobject/

También existen otros plugins disponibles para jQuery usted ha de utilizar el que mas le convenza. Suerte!!


Mi nombre es Neysi, soy desarrollador web me gusta compartir algunas cosas de tecnología, programación y SEO. Si te gusta mi contenido puedes seguirme en las redes sociales como @neysitc.

Publicado 15/10/2011 Actualizado 15/10/2011 Categoria: Otros
Etiquetas: , , ,

ESCRIBE UN COMENTARIO

  1. Fabian, comentó hace 6 años:

    Como podría entenderse este ejemplo si tienes definido el contenedor del swf con 2 nombres diferentes, uno en el js y otro dentro del html:

    $(‘#flashContent’).flash(‘animacion.swf’);
    }
    );

    • Neysi, comentó hace 6 años:

      Los ID de los elementos debe ser únicos. Si el contenedor esta identificado con clases , entonces puede tener varios nombres. En el caso del ejemplo solo afecta al DIV que estas seleccionando con el $.

  2. Miguel Salazar, comentó hace 6 años:

    Muchas gracias , me sirvió de mucho

  3. jeison, comentó hace 5 años:

    hola necesito ayuda
    no puedo insertar un swf en este codigo script

    $(function() {
    $(‘#sbi_container’).bgImageMenu({

    defaultBg : ‘images/iniciiioooo.jpg’,
    type : {
    mode : ‘seqVerticalSlideAlt’,
    speed : 250,
    easing : ‘jswing’,
    seqfactor : 100
    }
    });
    });

  4. camilo, comentó hace 3 años:

    Hola:
    yo cree un swf padre que contiene otro swf hijo y cuando lo ejecuto funciona, pero cuando intento incrustar o cargar el swf padre en una pagina con html el swf padre funciona, pero el swf hijo no funciona