FullFlash escala 100% y scroll. Fácil con SWFObject y SWFFit
Muchos de nosotros hemos tenido que lidiar con el problema de conseguir embeber nuestro archivo .swf de forma que quede centrado, al 100% de escala y que al reducir el tamaño del explorador, bién manualmente o bién porque el dispositivo tenga una pantalla con una resolución menor que las dimensiones originales de nuestro archivo flash, consigamos que aparezca el dichoso scroll. Y es que el explorador no genera el scrollbars cuando se decide exportar el archivo flash al 100%. Pues bién. Después de muchas soluciones algo chapuceras por fin he encontrado la forma de hacerlo fácilmente. Y es mediante la utilización conjunta de nuestra querida librerÃa JavaScript SWFObject.js junto con una librerÃa creada por Miller Medeiros, la librerÃa SWFFit.js.
Os dejo los link para descargar las librerÃas que necesitais:
SWFObject.js
SWFFit.js
La utilización de la librerÃa SWFObject la podemos ver en el anterior tutorial.
Y como realizar este milagro. Pues bién. Básicamente hay que incluir las dos librerÃas en el archivo html, embeber de la forma que ya conocemos mediante swboject, y mediante una simple funcion conseguimos que nuestro .swf se centre y que aparezca el scroll.
Podemos ver el resultado en este ejemplo: FullFlash escala 100% y scroll.
A continuación podemos ver el archivo html y las partes que lo contienen.
Podemos ver la cabecera, con la incrustación de las librerÃas SWFObject.js y SWFFit.js.
El script propiamente dicho con los parámetros (menu,scale,allowfullscreen, allowsriptAccess y bgcolor asà como las variables y los atributos del SWFObject. Sin duda el más importante es el de scale:”nonscale”.
A continuación podemos ver los métodos de la librerÃa SWFFit para obtener el scroll:
swffit.showScrollV();
swffit.showScrollH();
Dichos métodos y según el propio creador de la librerÃa deben ser llamados antes del método swfobject.embedSWF porque si no se refrescará el archivo flash
(IMPORTANT! – Should be called before swfobject.embedSWF or it will reload the flash file.)
Después el método swfobject.embedSWF, con el archivo .swf que queremos insertar y el nombre de la id de la etiqueta que contendrá el contenido alternativo asà como el tamaño en pÃxeles del archivo .swf.
Y por último el método para centrar y activar los scroll:
swffit.fit(“nombre del flash a embeber”)
Las dimensiones nos las podemos ahorrar porque en esta última versión toma las dimensiones del swfobject.embedSWF.
Por último podemos ver la etiqueta div con la misma id que hemos puesto en el swfobject.embedSWF que contendrá el contenido alternativo a visualizar cuando el dispositivo no disponga del Flash Player.
Como hemos podido observar utilizar estas dos librerÃas en conjunto nos aporta una solución rápida, versátil y sencilla para centrar nuestros flash a 100% de escala y conseguir los scroll.
Espero que os sirva en futuros proyectos. Un saludo
Malashpina Fresh Design
Diseño Web Malaga
| Imprimir artÃculo | Este artÃculo fue publicado por admin el 23 Agosto 2010 a las 23:48 pm, y está archivado en Recursos Flash, Recursos Java, Recursos Web, Tutoriales, Tutoriales Flash. Sigue las respuestas a esta entrada a través de RSS 2.0. Puedes dejar un comentario o enviar un trackback desde tu propio sitio. |
hace 1 año
Muy bueno el aporte.
Me estaba volviendo loco ya con el SWFobject, pero con el Fit todo arreglado!
Una cuestión: con este metodo se podria hacer que la pelicula flash estubiese pegada a arriba? (como este blog)
hace 1 año
Tanto la librerÃa swfObject como la librerÃa swfFit ofrece varios parámetros para conseguir esto. RevÃsate todas las opciones de la librerÃa swfFit y visualiza los ejemplos que aparecen en la web del autor. En uno de estos ejemplos aparece como hacer lo que pides. De todas formas lo revisaré esta semana. Un saludo
hace 1 año
Lo que quieres hacer es mucho más sencillo. Solo es necesario utilizar la librerÃa swfobject.js. Basta con añadir como parámetro el salign:”t” (alineación top)
var flashvars = {};
var params = {
menu: “false”,
scale: “nonscale”,
allowFullscreen: “false”,
allowScriptAccess: “always”,
bgcolor: “#000000″,
salign: “t”,
Y centrar la capa que contiene el flash y el contenido alternativo:
div id=”altContent” align=”center”
hace 1 año
Hola a todos:
Es mucho más fácil que todo eso.
En el código HTML del archivo que te genera el flash aparece:
swfobject.createCSS(“body”, “margin:0; padding:0; overflow:hidden; height:100%;”);
hay que cambiarlo por:
swfobject.createCSS(“body”, “margin:0; padding:0; overflow:scroll; height:100%;”);
o en el caso de que solo quieras el scroll vertical u horizontal:
swfobject.createCSS(“body”, “margin:0; padding:0; overflow:verticalscroll; height:100%;”);
ó
swfobject.createCSS(“body”, “margin:0; padding:0; overflow:horizontalscroll; height:100%;”);
No podÃa ser tan dificil!
Espero que os sirva!
Katrin
poisonestudio.com
hace 1 año
Buenas Katrin. Te refieres al archivo HTML generado desde la herramienta de autorÃa flash? En el caso del paquete cs4 el html generado integra el archivo flash mediante el método de incrustación object classid. Como obtienes esa forma de incrustación?
Un saludo y gracias por tu comentario.
hace 1 año
Hola de nuevo:
Yo estoy utilizando flash profesional CS5.
El archivo html que es generado por el flash al publicar por defecto la pelÃcula tiene dos lineas de “swfobject.createCSS”.
Una tiene parámetros CSS sobre el html y otra sobre el body (a continuación en el mismo código html).
En ellos aparece el overflow, cambiarlo de hidden a scroll y listo.
¿No tiene tu código geneado eso?
Katrin
http://www.poisonestudio.com
hace 1 año
Ah! Se me ha olvidado comentar que estos vienen en “var attributes = {};”
AsÃ:
poisonestudio.com
var swfVersionStr = “8.0.0″;
var xiSwfUrlStr = “”;
var flashvars = {};
var params = {};
params.quality = “best”;
params.bgcolor = “#ffffff”;
params.play = “true”;
params.loop = “true”;
params.wmode = “window”;
params.scale = “noscale”;
params.menu = “false”;
params.devicefont = “false”;
params.salign = “”;
params.allowscriptaccess = “always”;
params.allowFullscreen = “false”;
params.salign = “t”;
var attributes = {};
attributes.id = “picturealbum”;
attributes.name = “picturealbum”;
attributes.align = “middle”;
swfobject.createCSS(“html”, “height:100%; background-color: #ffffff;”);
swfobject.createCSS(“body”, “margin:0; padding:0; overflow:verticalscroll; height:100%;”);
swfobject.embedSWF(
“picturealbum.swf”, “flashContent”,
“980″, “700″,
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
Katrin
http://www.poisonestudio.com
hace 1 año
Buenas Katrin. Como te comentaba en el mail que te mandé, nosotros aún trabajamos con el paquete cs4. De momento cambiar todos los ordenadores y actualizar a la versión cs5 no nos compensa pero lo tenemos en mente. En flash cs4, el archivo generado no utiliza la clase java swfobject para incrustar pelÃculas flash.
hace 9 meses
Muchisimas gracias por el aporte!!!
me ha sido de gran ayuda y he solventado muchos dolores de cabeza con el tema del scroll.