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!!
Fabian
24 noviembre, 2011 at 5:23 pm
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
24 noviembre, 2011 at 6:09 pm
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 $.
Miguel Salazar
14 abril, 2012 at 11:41 am
Muchas gracias , me sirvió de mucho
jeison
25 octubre, 2013 at 2:48 pm
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
}
});
});
camilo
14 mayo, 2015 at 5:39 pm
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