Archiv para octubre 6, 2009

Flash Screen con swfObject (javascript)

Por inercia muchas personas confunden el termino fullscreen y lo asocian al tamaño de la animación dentro del navegador (piensan automaticamente poner tanto alto como ancho en 100%), pero en primera instancia fullscreen es relativo a la pantalla completa del ordenador. La forma de hacer un fullScreen lo colocare en un siguiente Post. Por ahora me limitare a explicar algo sumamente util y es el control del tamaño de la pantalla. Con esto me refiero a que podemos tener una animación de 800×600 y al tener una pantalla con una resolución mayor el contenido se desplegara sobre toda esta, pero si tenemos una pantalla de menor tamaño ó se hace un resize de la ventana no queremos que la informacion se pierda y por ende queremos que cuando suceda esto salga el scroll respectivo. El Problema It may be worth pointing out that in most cases there are two distinct reasons a flash website might have, for wanting to enable the browser scrollbar. * Si la ventana se ajusta a un tamaño menor al que fue diseñado se deberia agregar un scrollbar. * El contenido es mas largo que el diseño original.

SWFResize, SWFForcesize y SWFObject

SWFResize es una pequeña adicion para el codigo  SWFObject . Este codigo funciona para el SWFObject anterior al 2, igual tambien existe una implementacion utilizando JQuery que mas adelante explicare. Lo realmente importante esta en la funcion createFullBrowserFlash() que es donde se agregara el tamaño minimo de presentacion de nuestra pelicula, en este caso el tamaño es de 980×553 px, de igual forma la funcion setHeight() setiara el alto de la animacion de acuerdo al tamaño que escogimos (553px). Ya reemplazas los puntos donde se refiere al swf por el archivo respectivo y listo. El codigo completo [js]<br /> &lt;script type="text/javascript"&gt;// &lt;![CDATA[<br /> var size = getViewportSize();<br /> function getViewportSize()<br /> {<br /> var size = [0, 0];<br /> if (typeof window.innerWidth != "undefined") {<br /> size = [window.innerWidth, window.innerHeight];<br /> }<br /> else if (typeof document.documentElement != "undefined" &amp;#038;&amp; typeof document.documentElement.clientWidth != "undefined" &amp;#038;&amp; document.documentElement.clientWidth != 0) {<br /> size = [document.documentElement.clientWidth, document.documentElement.clientHeight];<br /> }<br /> else {<br /> size = [document.getElementsByTagName("body")[0].clientWidth, document.getElementsByTagName("body")[0].clientHeight];<br /> }<br /> return size;<br /> }<br /> function createFullBrowserFlash()<br /> {<br /> swfobject.createCSS("html", "height:100%;");<br /> swfobject.createCSS("body", "height:100%;");<br /> swfobject.createCSS("#container", "margin:0; width:100%; height:100%; min-width:980px; min-height:553px;");<br /> }<br /> function setHeight( h )<br /> {<br /> if ( h &lt; size[1] ) h = "100%";<br /> var el = document.getElementById("container");<br /> if ( h != "100%" ) el.style.height = h &lt; 553 ? "553px" : h + "px"; else el.style.height = "100%"; } var flashvars = { }; var params = { "allowscriptaccess": "samedomain" }; swfobject.embedSWF("main.swf", "content", "100%", "100%", "9.0.0", false, flashvars, params); if (swfobject.hasFlashPlayerVersion("9.0.0")) { swfobject.addDomLoadEvent( createFullBrowserFlash ); }<br /> // ]]&gt;&lt;/script&gt;[/js]