Mootools la popular librería javascript a partir de su versión 1.2 incluye una nueva clase llamada Swiff la cual permite incluir archivos Flash en documentos HTML, además permite agregar eventos y facilita la comunicación Flash-Javascript.
Por que usar Mootools en lugar de SWFObject?
SWFObject es el método mas popular para embeber archivo SWF, pero si por alguna necesitad ya estas utilizando Mootools, entonces es preferible utilizarlo para incluir archivos Flash y evitarse llamar a diferentes archivos Javascript externos.
Utilizar Swiff
La primera forma es descargar Mootools o también puedes utilizarlo directamente desde Google Ajax Libraries, de esta forma ni siquiera necesitar tener el archivo en tu hosting. Luego de incluir Mootools podremos utilizar la clase Swiff, el cual tiene la siguiente sintaxis.
var myswf = new Swiff('path-swf', { width: ancho, height: alto, container: 'id'});
Donde se tienen los siguientes parámetros:
- path-swf: es la ruta al archivo SWF a incluir
- ancho: es el ancho del SWF expresado en pixels.
- alto: es el alto del SWF expresado en pixels.
- id: el identificador del elemento html donde se mostrará el SWF.
Entonces por ejemplo si deseamos incluir un vídeo player de 500×320 pixels, entonces el código a utilizar para mostrar el SWF sería de la forma:
<div id="player"> </div>
<script type="text/javascript">
var myswf = new Swiff('tubeplayer.swf', { width: 500, height: 320, container: 'player'});
</script>
Utilizando Parámetros con Swiff
Para pasar parámetros al archivo SWF que estamos incluyendo, podemos utilizar la propiedad params el cual contiene una lista de los parámetros a incluir. Entonces si por ejemplo deseamos permitir que el archivo flash pueda ejecutarse en pantalla completa y que el color de fondo sea negro tendríamos el siguiente código.
<div id="player"> </div>
<script type="text/javascript">
var myswf = new Swiff('tubeplayer.swf', {
width: 500,
height: 320,
container: 'player',
params: {allowFullScreen: 'true', bgcolor: '#00000'}
});
</script>
Pasando Variables con Swiff
Para pasarle variables al archivo SWF, es necesario hacerlo utilizando flashvars, ello lo podemos hacer con la propiedad vars, entonces si deseamos pasar dos variables a nuestro player tendríamos el siguiente código.
<div id="player"> </div>
<script type="text/javascript">
var myswf = new Swiff('tubeplayer.swf', {
width: 500,
height: 320,
container: 'player',
params: {allowFullScreen: 'true', bgcolor: '#00000'},
vars: {autoPlay: 'true', videoId: 'FNQowwwwYa0'}
});
</script>
Uniendo estos elementos tendremos el código completo para incluir archivo SWF en páginas HTML.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Swiff Demo - unijimpe</title>
</head>
<body>
<div id="player"> </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js"></script>
<script type="text/javascript">
var myswf = new Swiff('tubeplayer.swf', {
width: 500,
height: 320,
container: 'player',
params: {allowFullScreen: 'true', bgcolor: '#00000'},
vars: {autoPlay: 'true', videoId: 'FNQowwwwYa0'}
});
</script>
</body>
</html>
Como pueden ver el código para mostrar archivos Flash, sencillo y sin utilizar librerías adicionales con lo cual ahorramos en velocidad de carga para nuestra web. Pueden ver el resultado del ejemplo funcionando en http://samples.unijimpe.net/swiff-swf/.
[download id=»39″ autop=»false»]
Mas Información
