Cerrar Banner en flash sobre contenido html

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:

ActionScript
< view plain text >
  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.

  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.
[CSS]
#midiv{
width:300px;//ancho del swf
border:#CCCCCC solid 2px;//un borde si queremos
z-index:10000;//orden de apilamiento
position:absolute;//posicion con respecto al body, con las propiedades top y left pueden desplazar el banner si lo desean
}
[/CSS]
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!!

Generador de favicon

Muchos sitios que visitamos podemos ver que en la barra de tarea o cuando agregamos un sitio a nuestros marcadores este aparte de grabar el nombre le inserta un icono representativo al sitio, de esa manera es mas fácil de visualizar el sitio cuando tenemos muchos marcadores. Para insertar un icono es muy simple por ahí lo que se puede complicar es crear el mismo icono. Para ello en esta web hay una utilidad que toma una imagen que tengamos en nuestro disco y la convierte en icono lista para usar con nuestra web.

http://www.htmlhkit.com.faviconiconicon/

Para usarlo solo debemos poner el icono en la raiz de nuestro sitio y en la cabecera de nuestro sitio colocamos la siguiente linea

  1. <link rel="shortcut icon" xhref="favicon.ico" ></link>

Estilizar formularios con css

Esta es una excelente aplicasion realizada por badboy para estilizar o adornar mejor nuestros formularios usando CSS y Java el resultado son formularios muy agradables a la vista y personalizables si es que nos animamos a modificar un poquito el código y las imagenes, muy recomensable si queres despedirte de los habituales y aburridos formulario.

http://www.badboy.ro/articles/2005-07-23/niceforms_preview/