Comunidad de diseño web y desarrollo en internet

Cambiar barra de estado del navegador con Flash y ExternalInterface

Estás en una Web y quieres dar click en un link o botón y por inercia, porque eres precavido o porque deseas conocer mejor tu destino, miras la status bar de tu navegador y... No hay nada :(. “Ningún viento es favorable para el que no sabe a donde va” Y no queremos que nuestros usuarios sientan que en nuestro sitio ningún viento les es favorable. Flash no tiene por defecto ninguna forma de cambiar el mensaje de la barra de estado, pero si podemos implementarlo nosotros.

[ Ver el ejemplo funcionando ]

  • En Internet Explorer funcionará perfectamente.
  • En Opera funciona sin problemas.
  • En Firefox funcionará solamente si el usuario tiene activada la casilla “Permitir que scripts [Cambien el texto de la barra de estado]” en la configuración de JavaScript del explorador.

Así que solo algunos gozarán de este beneficio, pero no debe quedar en nosotros.
Como hacerlo:
  1. Un pequeño Javascript
  2. La función ExternalInterface de Flash.

En la página donde estará nuestra película debemos colocar este script (Recordar que va dentro de <head>):

Código :

<script>
function estatus(texto)
{
 <!--
     window.status =texto;
//--> 
}
</script> 

Ahora tenemos que:
  • En nuestra pelicula de Flash, crear una capa (Layer) de Actionscript
  • Introducir este código en el keyframe donde tenemos nuestros botones/vinculos:

    Código :

    import flash.external.*;
    function bt(nombre:String, destino:String, tipo:String){   
       switch (tipo) {
          case "pa":   
             _root[nombre].onRollOver=function(){
                ExternalInterface.call("estatus",  "Página:Actual | Sección:" + destino);
             }
             _root[nombre].onRelease=function(){
                gotoAndStop(destino);
             }
             break ;
          case "pe":
             _root[nombre].onRollOver=function(){
                ExternalInterface.call("estatus",  "Página:Externa | URL:" + destino);
                }
             _root[nombre].onRelease=function(){
                getURL(destino);
                } 
             break ;
          case "ar":         
             var len:Number =length(destino)-2;
             var ext:String = substring(destino, len, 3);
             _root[nombre].onRollOver=function(){
                ExternalInterface.call("estatus",  "Archivo:" + ext + " | URL:" + destino);
                }
             _root[nombre].onRelease=function(){
                getURL(destino);
                }         
             break ;      
          default:
             _root[nombre].onRollOver=function(){
                ExternalInterface.call("estatus",  "Página:Actual | Sección:" + destino);
             }
             _root[nombre].onRelease=function(){
                gotoAndStop(destino);
             }
       }   
       _root[nombre].onRollOut=function(){
          ExternalInterface.call("estatus",  " ");
       } 
    }

Ahora crearemos tres botones: Página Actual, Página Externa y Archivo.

La sintaxis para hacer que un botón cambie el mensaje de la barra de estado, en Actionscript, será:

Código :

bt(“nombreDelBoton”, “URL o Nombre del Frame Destino”, “Tipo de Botón PA PE AR”);
Revisa el ejemplo (arriba) para ver el mensaje y comportamiento en vivo de cada botón.

Pagina Actual
Será utilizado cuando nos dirijamos a una sección dentro del mismo sitio en Flash.

Código :

bt("bt1", "Contacto", "pa");


Página Externa
Cuando nos dirijamos a una dirección Web, fuera del sitio Flash.

Código :

bt("bt5", "www.cristalab.com", "pe");


Archivo
Será cuando nos dirijamos a cualquier tipo de archivo.

Código :

bt("bt2", "www.cristalab.com/politicas.pdf", "ar");


Nota
Cuando el botón sea para Página Actual puede omitirse el parámetro Tipo de esta forma:

Código :

bt("bt6", "Inicio");   

Ya que está como default en el switch, pero si quieres tener una mejor claridad al momento de leer tu código es recomendable no omitirlo. Decisión de cada quien.

Para que la función ExternalInterface funcione, debes de probar tu Web corriendo en un servidor. Ya sea subirla en un hosting o si tienes configurado tu PC como servidor.

[ Descarga el .FLA ]
[ Código HTML + Javascript ]

¿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