asd

26

Ago

Cerrar Banner en flash sobre contenido html

Publicado por: LeoBaraldi

Muchas veces podemos observar en ciertas páginas web que tienen banner que flotan sobre sus contenidos y los mismo son en Flash, a estos también se les suma la posibilidad de cerrarlo y de esta manera poder volver a ver el contenido del sitio que el banner tapaba. Estos banner son muy prácticos si queremos destacar alguna promoción o producto importante ya que a tapar parte del contenido del sitio el usuario se ve obligado a verlo o a lo sumo chiclear para cerrarlo. La otra ventaja que tiene es que no es un popup por lo tanto los navegadores no pueden bloquearlo así que doblemente nos aseguramos que lo verán.

Para realizar dichos banner simplemente vamos a necesitar una "div" en nuestro html, un poquito de JavaScript, CSS y nuestra película en Flash.

Ante que todo vamos a preparar nuestro banner en flash, para ello vamos a crear una película cualquiera del tamaño que sea necesario y con las animaciones que sean también necesarias. A esta película le vamos a colocar un botón "Cerrar" que será el encargado de cerrar nuestro banner.

Como siempre en nuestra línea de tiempo principal y primer frame vamos a colocar el siguiente código de AS:

Clic para ver Texto Plano
Actionscript:
  1. //Importamos la clase que nos permitirá
  2. //llamar el java de nuestro html
  3. import flash.external.*;
  4. //Creamos la acción de nuestro botón cerrar
  5. boton_btn.onRelease = function() {
  6. //para ejecutar el java usamos el metodo "call"
  7. //que esta compuesto por el nombre de la función "OcultarDiv" y el parametro "midiv"
  8. //en este caso como parametro, el nombre de id de la div a ocultar
  9. ExternalInterface.call("OcultarDiv","midiv");
  10. };

Como ven ya tenemos nuestro flash listo y esperando encontrar en nuestro html una div y una función JavaScript, ahora el siguiente paso es abrir nuestro html con algún editor como DW y vamos a colocar entre las etiquetas head el script que sera el encargado de ocultar la div que contiene el banner en flash.

Clic para ver Texto Plano
JAVA:
  1. <script type="text/javascript">
  2. // definiciones basicas
  3. OCULTO="none";
  4. VISIBLE="block";
  5. function mostrar(blo) {
  6. document.getElementById(blo).style.display=VISIBLE;
  7. }
  8. function ocultar(blo) {
  9. document.getElementById(blo).style.display=OCULTO;
  10. }
  11. </script>
  12. <script>
  13. function OcultarDiv(name) {
  14. ocultar(name)
  15. }
  16. </script>

El paso final seria poner una div (CONTENEDORA) entre las etiquetas del swf de nuestro banner. Por las dudas les dejo un ejemplo como seria en los archivos a descargar.

IMPORTANTE: Lo más importante para que este ejemplo funcione es que no se olvide de colocarle un nombre de id a la div en este caso particular le he llamado "midiv". Otra cosa importante es que prueben donde es lo más aconsejable que coloquen la div, en este caso la pusimos arriba sobre todas las restantes etiquetas por la razón que queremos que flote sobre el contenido de nuestro html. Hasta aquí van a ver que ya funciona a la perfección pero surge un problema, el banner no queda sobre los contenidos html!!! Bueno no desespere, ahora nos hacemos de la ayuda de algo de CSS para solucionar dicho problema.

Clic para ver Texto Plano
CSS:
  1. #midiv{
  2. width:300px;//ancho del swf
  3. border:#CCCCCC solid 2px;//un borde si queremos
  4. z-index:10000;//orden de apilamiento
  5. position:absolute;//posicion con respecto al body, con las propiedades top y left pueden desplazar el banner si lo desean
  6. }

Ok felicitaciones ya tenemos nuestro banner con botón ocultar dentro de una div flotando sobre el contenido ante cualquier duda descarguen los archivos de ejemplo y podrán ver cómo funcionan la unión de flash, javascript y css!!

ver ejemplodescargar archivos
categorias: ActionScript 2 , HTML - XHTM Coment.: 24

24 Respuestas

    flashero Dice:
    5th Septiembre, 2007 at 6:46 pm

    no se puede abrir el archivo men, podrias volver a subirlo "formato de archivo ineperado"...

    LeoBaraldi Dice:
    6th Septiembre, 2007 at 4:08 pm

    Proba bien porque anda a la prefección

    ñepnardo Dice:
    20th Octubre, 2007 at 12:44 am

    puedes dejar el archivo en frmato de flash 8??
    gracias

    seraph2x Dice:
    22nd Noviembre, 2007 at 10:57 pm

    Notable, hace mucho tiempo buscaba algo asi, mas que agradecido
    salu2

    joc inacio Dice:
    12th Diciembre, 2007 at 2:10 am

    gracias bro lo nesesitaba para la publidad de la web ,una cosita en la definicion de regla para midiv en borde le dan 0 px para que no les que el bordecito ese que es como feo , bueno muchas gracias

    alina Dice:
    15th Abril, 2008 at 9:45 pm

    gracias de veras esto he estado buscando pero ninguno me ha ayudado como este

    ramses Dice:
    3rd Junio, 2008 at 6:17 pm

    muy bueno... importante hacer notar... se trata de JavaScript y no Java de cualquier forma creo que todos entendimos..

    ramses Dice:
    3rd Junio, 2008 at 6:37 pm

    me viene perfecto usando ActionScript 2.0, que cambia en la version 3.0? xq no funciona. gracias de antemano.

    LeoBaraldi Dice:
    3rd Junio, 2008 at 8:50 pm

    En AS3 hay cambios significantes, sobretodo de como escribir el codigo, te recomiendo que lo uses en modo AS2.0, y como vos decis es JavaScript por un error de no repasar lo que uno escribe se comete estas improlijidades, disculpas!

    sirhcle Dice:
    18th Junio, 2008 at 12:55 pm

    Excelente!!!! justo lo que buscaba, muchas muchas pero muchas gracias

    gi Dice:
    20th Junio, 2008 at 10:51 am

    no se pueden descargar los arcuivos de ejemplo

    ramses Dice:
    25th Julio, 2008 at 1:20 am

    Leo. ¿cómo harias para cerrar el banner despues de x tiempo?

    Jorge Dice:
    8th Octubre, 2008 at 7:05 pm

    Tengo el mismo problema no me permite abrir el archivo de flash, para ver el código AS

    Daniel Lemos Dice:
    17th Octubre, 2008 at 7:57 pm

    Muchas gracias es muy bueno, nos saco de un apuro n.n

    Javier Dice:
    26th Noviembre, 2008 at 6:44 pm

    ¡Excelente! Lo estaba buscando hace ya un buen rato. ¡Muchas gracias!

    Nicolas Nishiky Dice:
    27th Noviembre, 2008 at 3:56 pm

    hola! descargue, lo descomprimi pero no funciona .. en ver ejemplo, si funciona danos una solucion..gracias

    LeoBaraldi Dice:
    27th Noviembre, 2008 at 8:59 pm

    lo subiste a un servidor para probarlo?, porque asi como dices nunca te va a funcionar!

    Marcelo Dice:
    23rd Diciembre, 2008 at 9:09 am

    El .fla sigue tirando el mismo error: "formato inesperado".

    Pero es cuestion de armar un .fla propio, y en el primer frame, colocar el codigo del actionscript publicado arriba, respetando las medidas y el nombre del archivo (para no tener que modificar el codigo en el html).

    Funciona!

    Gracias LeoBaraldi.

    LeoBaraldi Dice:
    26th Diciembre, 2008 at 4:19 pm

    que raro con ese file, esta poseido!!! :P bueno el que lo quiera y no le funcione que me lo pida por mail

    VangercoL Dice:
    1st Enero, 2009 at 5:10 pm

    Caramba que bien la verdad trate de mirar el codigo pero no veo el chiste, a la final me sirvio mucho!!! Gracias !

    Colo Ramone Dice:
    9th Octubre, 2009 at 3:51 pm

    Muy bueno man, anduvo todo a la perfeccion.

    Saludos,
    Sr.Colo Ramone

    diseño web Dice:
    12th Noviembre, 2009 at 12:22 am

    Esta bien pero al cerrar se podria dar un efecto? o en todo caso, que el flash vaya desapareciendo desplazandose a uno d elos lados?

    Yo Dice:
    5th Diciembre, 2009 at 11:24 pm

    Marcelo:

    Corre con Flash CS3, si te manda ese mensaje significa que tienes una version anterior de flash.

    Barbara Pereira Dice:
    26th Marzo, 2010 at 2:27 pm

    Leo una consulta tienes como hacer que la div este oculta al abrir ese html y luego desde otro boton en flash abrir la div... osea que funcione como una ventana emergente pero no intrusiva... osea que desde el flash podamos abrir y cerrar esta div... me funciona perfecto tu ejemplo y es lo que busco pero necesito tb abrirla desde un boton flash.

    Saludos

Publicar comentario

IMPORTANTE: Los comentarios son moderados. A la brevedad seran subidos.

Leonardo David Baraldi

Leonardo Baraldi

Nací en Villa Carlos Paz, tengo 33 años y me dedico a desarrollos para la web desde el año 99, preferentemente en las aéreas de ActionScript y CSS. Trabajo para la firma Manifesto Solutions como jefe de producción.

ultimos post

Usa Firefox es mejor che!!!
Copyright © 2008 LeoBaraldi. Todos los derechos reservados.
Designed by LeoBaraldi and powered by Wordpress | RSS Feed
Love WordPress
Manifesto
Manifesto solutions
Sponsort Oficial de LeoBaraldi