Expandir y contraer Flash con Jquery

Ha tenido cierto auge aquellos banners en donde al pulsar o poner el cursor encima se expande, adobe ofrece una alternativa y otros han desarrollado su propia solución a esta inquietud, en esta oportunidad quiero dejarles una sencilla solución utilizando Jquery y su funcionalidad, que no sólo podemos utilizar para banners.

Iniciamos insertando el swf en nuestro HTML dentro de un DIV que lo contenga:

Código :

<div id="expande" style="width:990px; height:30px; border:1px solid black;">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%" height="100%">
        <param name="movie" value="banner.swf" /><param name="quality" value="high" /><param name="salign" value="T" /><param name="scale" value="noscale" />
        <embed src="banner.swf" quality=high scale=noscale bgcolor=#FFFFFF width="100%" height="100%" name="banner" salign="T" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
        </embed>
    </object>
</div>

IMPORTANTE: Se deben configurar los siguientes parámetros:

• scale noscale // para mantener fijo el tamaño del swf
  
• salign T //para mantener la alineación en la parte superior.
  
• La medida del DIV contenedor son las medidas con las que se presenta el swf inicialmente.

Luego de referenciar jquery:

Código :

<script type="text/javascript" src="jquery.js"></script>

Creamos dos funciones cada una para las acciones que deseemos realizar, en este caso Expandir y Contraer, estas funciones usan la alternativa de modificación de estilo que nos brinda Jquery.

Código :

function expandir()
{
   $('#expande').css( {height:200} );
}
function contraer()
{
   $('#expande').css( {height:30} );
}

En donde se determina el DIV que contiene nuestro swf, el alto a expandirse y contraerse.


Por último en el flash creamos un botón que cubre toda el área del stage, el cual bautizamos "creativamente" como la instancia: botón

Invocamos las funciones de javascript creadas segun el estado del cursor:

Código :

boton.onRollOver = function()
{
   getURL("javascript:expandir()");
}

boton.onRollOut = function()
{
   getURL("javascript:contraer()");
}

Y listo desde el swf y gracias a Jquery podemos modificar la dimensión de exposición.

También te interesa

• Recargar pagina al cerrar colorbox o nyroModal
• Visualizar menús desplegables por encima de películas Flash
• Sustituir un SWF por otro sin refrescar el HTML con Ajax

flash javascript ajax jquery

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario