Comunidad de diseño web y desarrollo en internet online

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.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate