Un archivo swf (Shockwave Flash) es aquel que se genera al exportar un archivo FLA de Adobe Flash Professional. Los archivos SWF están diseñados para ser pequeños archivos comprimidos que puedan ser publicados en la web. Los archivos SWF pueden contener animaciones, componentes, mapa de bits, gráficos vectoriales y vídeo digital.
Pero hay existe css3 para hacer animaciones y ahora los navegadores modernos y sobre todo los navegadores de los dispositivos móviles, no soportan este tipo de archivos swf.
Lamentablemente una gran cantidad de sitios web los empleaba de manera regular y hasta ahora puede ser que se encuentren aún en sus páginas web, pero es importante evolucionar al nuevo y demandante mundo de la web responsive design.
Habrá muchos webmasters que desearán conservar algunos archivos flash en sus nuevos diseños.
Para estos casos google desarrolló una herramienta llamada swiffy.
Swiffy lo que hace es convertir los archivos flash en html5.
Para convertir e implementar los archivos swf a html5, puedes seguir los siguientes pasos.
1. Abre el sitio de google swiffy. https://www.google.com/doubleclick/studio/swiffy/
2. Luego presiona el botón seleccionar archivo para seleccionar el archivo swf,
1. Abre el sitio de google swiffy. https://www.google.com/doubleclick/studio/swiffy/
2. Luego presiona el botón seleccionar archivo para seleccionar el archivo swf,
Acepta los términos del servicio y selecciónalo.
3. Una vez seleccionado el archivo les aparecerá el botón de Upload and convert
Si todo sale bien google swiffy mostrará las dos imágenes abajo, una en swf y la otra en html5.
4. Para implementarlo en nuestro sitio web lo que debemos hacer es descargar el archivo html que genera el cual se muestra al final de la conversión.
Si miramos el código fuente de ese archivo html contiene en el “head” un script que es necesario para ejecutar la imagen o animación.
El script puede ser este:
3. Una vez seleccionado el archivo les aparecerá el botón de Upload and convert
Si todo sale bien google swiffy mostrará las dos imágenes abajo, una en swf y la otra en html5.
4. Para implementarlo en nuestro sitio web lo que debemos hacer es descargar el archivo html que genera el cual se muestra al final de la conversión.
Si miramos el código fuente de ese archivo html contiene en el “head” un script que es necesario para ejecutar la imagen o animación.
El script puede ser este:
<script src="https://www.gstatic.com/swiffy/v5.2/runtime.js"></script>
5. El script anterior lo insertan en la etiqueta head de la página donde van a poner su animación.
6. En seguida copian el script que contiene un código enorme, es parecido a esto:
swiffyobject = {"internedStrings":………….
Lo anterior también se inserta en el head
7. Por último copian el div contenedor de la animación o imagen el cual es parecido a esto
| <div id="swiffycontainer" style="width: 550px; height: 450px"></div> | |
8. También deben copiar un escript que pone el código en el contenedor, todo esto es en el body.
| <script> | |
| var stage = new swiffy.Stage(document.getElementById('swiffycontainer'), | |
| swiffyobject); | |
| stage.start(); | |
| </script> |
9. ¿Cómo hacerlo responsive design?
Lo único que tienes que hacer para que su imagen o animación se adaptable simplemente hay que aplicarle al style del div contenedor un max-width en 100%. Como a continuación.
| <div id="swiffycontainer" style="width: 550px; height: 450px; max-width:100%"></div> PD. Disculpen la presentación del código | |
