Comunidad de diseño web y desarrollo en internet online

Menu de navegación con selección en Flash

En primer lugar renombramos la primera capa como “acciones”. En el primer fotograma de ésta abrimos el panel acciones y escribimos:

var menuactivo:String;

Esta será la variable donde guardaremos el nombre de instancia del botón inactivo actual.

Ahora creamos otra capa debajo y en ella creamos un recuadro de 90x25, pulsamos F8 para convertir en Símbolo y lo guardamos como “hit” y tipo “botón”. Entramos en él y arrastramos el recuadro al frame de “Zona activa”, es decir, el último. De esta forma obtendremos nuestro botón invisible.

Botón invisible

El paso siguiente es crear los botones de nuestro menú. Empezamos escribiendo un texto cualquiera en el Stage, por ejemplo “Elemento 1”, luego hacemos lo mismo que en el paso anterior, F8 y guardamos como “Elemento 1” tipo “Movie Clip”.

A continuación editamos nuestro nuevo movie clip. Duplicamos el frame, y en este segundo cambiamos de color el texto, por ejemplo a rojo. A continuación creamos una capa por encima donde colocaremos el botón “hit” pero ojo! Solo debe ocupar un fotograma. Y por último creamos otra capa más llamada acciones donde pondremos un stop();

Debería quedar de esta forma:

Estados del botón

Ahora seleccionamos el botón “hit” y en su panel de acciones escribimos (explicación en código comentado):

on (press) {
 // devolvemos el elemento actual al estado normal
 _parent[_parent.menuactivo].gotoAndStop(1);
 // ahora pasará a  ser el nombre de instancia de este MC
 _parent.menuactivo = this._name;
 // llevamos este elemento al estado clicado, en este caso el frame 2, en el que no
 // tenemos hit y por tanto quedará anulado como botón
 this.gotoAndStop(2);
 // a partir de aquí se colocan el resto de
 // acciones como loadMovie, llamada a funciones etc...
 // en este ejemplo muestro la variable en el campo de texto que situaré en el Stage
 _parent.debug_txt.text = _parent.menuactivo;
}

Ya solo nos queda ir al Stage y duplicar algunas veces el Movie clip “Elemento 1”, es decir, copiar y pegar, después botón derecho y renombramos a “Elemento 2” y así sucesivamente, según el número de elemento que queramos:

Botones finales

Nota: Tenemos la opción de asignar un nombre de instancia a cada elemento pero si no necesitas que el botón se active desde otro sitio, como una movie externa, no hace falta ponerlo.

Ejecutamos nuestra película.

Esta es la forma más fácil de hacerlo pero podemos combinarlo con más cosas como el tutorial sobre Botón con fade-in y fade-out animado. Toda la experimentación ya es cosa suya.

¿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.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

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