Comunidad de diseño web y desarrollo en internet

Sistemas de navegación en Flash, botoneras y menús

Menu 1

Comencemos por el primer menú que es el más sencillo y menos complicado. El efecto que queremos es que cuando situemos el cursor sobre un botón éste se ilumine de un color y al mismo tiempo ilumine del mismo color dos líneas horizontales, una situada encima de los botones y otra debajo.

Empezamos creando un documento nuevo en flash y le damos las siguientes dimensiones:
600 px de ancho por 50 px de alto. Tú elegirás las dimensiones que mejor se adapten a tus necesidades.

Cambia el nombre de la Capa1 por: fondo, y en ella dibuja un rectángulo sin líneas, que cubra completamente la película y dale un degradado lineal que vaya de gris (#333333) a gris (#666666).

Selecciona la Herramienta Transformación de relleno


Figura 1

Y dale clic al fondo, gira el degradado para que quede el cuadradito central hacia arriba y luego arrastra para que los selectores queden junto al borde superior.


Figura 2

Los Botones

Inserta una nueva capa y dale como nombre Botones. Si quieres puedes colocar cada botón en una capa diferente. En este ejemplo vas a colocar todos los botones en una misma capa.

Puedes tener tantos botones como necesites. Crearemos un botón, los demás los crearás tú, los pasos son los mismos, solo cambia el color y el AS.

Dibuja un rectángulo de 130 de ancho por 25 de alto (el tamaño dependerá de ti) colócalo junto al borde izquierdo y que quede centrado entre los bordes superior e inferior. Conviértelo en botón, ponle como nombre de instancia rojo_btn. Dale doble clic para editarlo. Inserta un keyframe al estado sobre del botón.

Figura 3
Selecciona el relleno y conviértelo a gráfico o si prefieres conviértelo a Movie Clip.

Figura 4

Dale doble clic al gráfico (o MC) que creaste, selecciona el relleno y dale un degradado lineal de rojo (#FF0000) a gris (#424242), con la herramienta transformación de relleno acomoda el degradado para que el cuadro central quede junto al borde superior, tal y como hiciste anteriormente para el fondo (lo mismo debes hacer con el relleno del estado reposo del botón). Dale clic al candado para bloquear esta capa.

Agrégale una nueva capa. En ésta dibuja un nuevo rectángulo del mismo ancho con un alto de 10, colócalo de manera que su borde inferior quede un poco debajo del centro del anterior. Selecciónalo y dale un relleno blanco con 20% de alfa. Para terminar el efecto sobre el botón, coloca un rectángulo blanco con alfa 15% del mismo ancho con una altura de 1 px sobre el relleno que ya tienes. Otro relleno blanco con alfa 7% sobre el anterior y un último con alfa 3%. Has lo mismo debajo del relleno central, uno de alfa15, alfa 7 y alfa 3.

Con todo esto tendrás el efecto brillante del botón.

No te olvides de darles nombre de instancia a los demás botones:

verde_btn azul_btn amarillo_btn naranja_btn

Figura 5

En la Figura 5 puedes ver como queda el grafico del relleno del estado Sobre del botón. Capa 2 es la que contiene los efectos de brillo y Capa 1 es donde está el degradado rojo.

Regresa a la línea de tiempo principal e inserta una tercer capa con nombre texto, aquí colocarás el texto de todos los botones. Una vez escrito el texto puedes separarlo (Ctrl. + B) y darle el efecto que desees.

Inserta otra capa y ponle de nombre separadores. Aquí dibujarás una pequeña barra vertical que separará un botón de otro.
Crea un rectángulo de 2.3 de ancho por 25 de alto. Usa el mismo degradado que el de la barra de la capa de fondo, sólo que acomoda el degradado en forma vertical conviértelo a gráfico y sitúalo a la derecha del primer botón


Figura 6

Este es el separador que he agrandado para que se aprecie mejor.

Para los demás botones solo tendrás que colocar otras instancias del mismo símbolo a la derecha. Bloquea esta capa e inserta otra, nómbrala: lineas

En esta última capa dibuja dos líneas horizontales de color #D4D0C8 el grosor varía según tu gusto, el tamaño de la línea es igual al ancho de la película, en nuestro caso 600 px. Una debe estar sobre el borde superior de los botones y la otra sobre el borde inferior. Selecciona las dos líneas y conviértelas a MC. Utiliza como nombre lineas. En la ventana de propiedades dale el nombre de instancia linea_mc

Dale doble clic al MC linea para editarlo. Selecciona el primer keyframe y en la ventana de propiedades ponle como nombre de instancia: sincambio.

Suponiendo que quieres usar 5 botones, el primero de color rojo, el segundo verde, el tercero azul, el cuarto amarillo y otro naranja deberás usar entonces 6 keyframes. El primer keyframe para dejar el color de la línea como está, el segundo para darle a la línea el color rojo y así sucesivamente.

Inserta un nuevo keyframe (KF a partir de aquí) y dale de nombre rojo, selecciona las dos líneas y ponle el color rojo. Inserta 4 KF más ponles nombre según el color de la línea (verde, azul, amarillo y naranja) y cambia de color las líneas.

Como estás usando varios keyframes y para darle un aspecto “más limpio” a la línea de tiempo puedes insertar los demás KF un poco separados, pero si deseas puedes ponerlos uno junto al otro esto no afecta en nada es solo cuestión de aspecto.


Figura 7

En esta imagen puedes apreciar el MC lineas, con el fotograma “rojo” seleccionado.

El Código

Si aún no lo has hecho, regresa a la línea de tiempo principal, inserta una nueva capa y ponle de nombre AS. En el primer fotograma de esta capa escribiremos todo el código, tanto el que permite el efecto de iluminación como el de los enlaces de los botones. Puedes también insertar el código en cada botón y ya no necesitarás darles nombre de instancia a cada botón.

Selecciona el fotograma de la capa AS y abre el panel de acciones, escribe el siguiente código que he comentado para mayor claridad.

/*Primero le decimos a linea_mc que se detenga
en su primer fotograma para que las líneas no
cambien de color hasta que se pase el cursor
sobre algún botón.*/

_root.linea_mc.stop();
//Comencemos con el botón rojo
//Al poner el ratón sobre él

rojo_btn.onRollOver = function() {
_root.linea_mc.gotoAndStop("rojo");
};
//Al quitar el ratón vuelva al color por defecto
rojo_btn.onRollOut = function() {
_root.linea_mc.gotoAndStop("sincambio");
};
//por último al hacer click que vaya o haga
//lo que queremos

rojo_btn.onPress = function() {
getURL("http://www.cristalab.com/foros/", "_blank");
};
//Botón Verde
verde_btn.onRollOver = function() {
_root.linea_mc.gotoAndStop("verde");
};
verde_btn.onRollOut = function() {
_root.linea_mc.gotoAndStop("sincambio");
};
verde_btn.onPress = function() {
//tu código aquí;
};
//Botón Azul
azul_btn.onRollOver = function() {
_root.linea_mc.gotoAndStop("azul");
};
azul_btn.onRollOut = function() {
_root.linea_mc.gotoAndStop("sincambio");
};
azul_btn.onPress = function() {
//tu código aquí;
};
//Botón Amarillo
amarillo_btn.onRollOver = function() {
_root.linea_mc.gotoAndStop("amarillo");
};
amarillo_btn.onRollOut = function() {
_root.linea_mc.gotoAndStop("sincambio");
};
amarillo_btn.onPress = function() {
//tu código aquí;
};

Figura 8

Al finalizar tendrás algo parecido a lo de la Figura 8

Menú 2

Crearemos un menú vertical, que cuando damos clic sobre una opción las otras opciones se deslizan dejando visibles las subopciones. Esto también lo puedes hacer más fácilmente, como aconseja Freddie, con el componente Acordion que viene en Flash MX 2004.

Comencemos con un documento de flash nuevo (Ctrl. + N). Cambiamos el tamaño del escenario a 210 px de ancho por 400 px de alto.

Este menú se compone de 3 botones principales (boton1, boton2, boton3) con 3 subopciones cada uno (sub1, sub2, sub3). Primero haremos los 6 botones.

Para los botones principales, dibuja un rectángulo sin líneas de 200 por 50 conviértelo a botón y quítalo del escenario, quedará en la biblioteca, allí dale clic derecho al botón y elige duplicar. Ya tenemos los 3 botones principales. Ponles el texto que llevará cada botón.

Figura 9

Dibuja otro rectángulo de 130 px de ancho por 40 px de alto y conviértelo en botón, dale los efectos que veas conveniente. Duplícalos en la biblioteca. Listo hasta aquí están los 6 botones que necesitamos.

Para terminar con la parte de dibujo, haremos una especie de viñeta que estará sobre los botones y luego insertaremos una instancia de la viñeta debajo de los botones que se deslizará hacia abajo cuando hagamos clic sobre algún botón principal.

Dibuja un rectángulo de 200 por 50 con las esquinas redondeadas en 10.

Selecciona la mitad superior y elimínala te quedará un medio rectángulo de 200 por 25. Esta forma deberás colocarla sobre un rectángulo del mismo ancho y de largo que pase el borde inferior del escenario de color igual al fondo de tu película, esto es para que oculte los botones de subopciones cuando los coloques en el menú y solo se vean al presionar un botón. Ver Figura 10. Ponle los adornos que juzgues necesarios. Conviértela a gráfico con nombre vineta. Quítala del escenario. Tu viñeta inferior quedará parecida a la de la imagen de abajo:


Figura 10

El siguiente paso es acomodar los botones y las viñetas dándole el aspecto que presentará el menú al cargarse la película.

Arrastra la viñeta superior al escenario, algo debajo del borde superior y céntrala horizontalmente. Si solo creaste una viñeta para usarla arriba y abajo, deberás rotarla para que dé el aspecto deseado. Selecciona el objeto del escenario y conviértelo a MC con nombre principal y nombre de instancia principal_mc. Dale doble clic para editarlo.

Para cada botón necesitarás usar una capa, puedes llamarlas boton1, boton2, boton3, vineta sup, vineta inf.

Inserta el boton1 debajo de la viñeta dejando un pequeño espacio entre ellas. Luego el boton2, boton3 y la viñeta inferior. No olvides, cada botón y las viñetas en su propia capa. También debes darle a cada botón un nombre de instancia, boton1_btn, boton2_btn, boton3_btn

Deberías tener algo así:


Figura 11
Agrega 9 capas entre la primera capa de abajo y la segunda, cambiales el nombre por sub1, sub2, sub3…sub9. Inserta un keyframe (F6) en el fotograma 5 para cada capa excepto para la viñeta superior y el botón1, que bastará con insertar fotogramas sencillos (F5) pues éstos no tienen ninguna animación, por el momento no lo hagas para las capas sub4 a sub9. Oculta las capas donde están boton2, boton3 y la viñeta inferior, simplemente para que no te estorben al momento de acomodar los botones de las subopciones. En la capa sub1 arrastra una instancia del botón sub1, capa sub2 instancia de sub2 y capa sub3 instancia de sub3. Tendrás algo parecido a la Figura 12. Dales nombre de instancia, sub1_btn, sub2_btn, sub3_btn.

Figura 12

Fíjate que sólo está visible el contenido de las capas de la viñeta superior, del boton1 y sus subopciones. También es buen momento para que consideres agrupar las capas en carpetas.

Ahora haremos la animación de movimiento que se ejecutará cuando presionemos el botón Opción 1. Cuando esto ocurra, los botones 2 y 3 más la viñeta inferior se desplazan hacia abajo, al hacer nuevamente clic sobre este botón o sobre los otros, todo vuelve a su posición anterior o estado de reposo. Al presionar Opción 2, el botón tres y la viñeta se deslizan hacia abajo y regresan, con el botón 3 sólo la viñeta se desliza.

Primero acomodaremos la línea de tiempo con los keyframes y las instancias de los botones, para luego realizar la animación. Iremos capa por capa.

En la capa vineta inf inserta más KF en los fotogramas 15, 25, 26, 35, 45, 46, 55 y 65
Capa boton 3 en: 15, 25, 26, 35 y 45. Un fotograma (F5) en el 65
Capa boton 2 en: 15, y 25. Fotograma en el 65.
Capa boton 1 un fotograma en el 65
Capas sub1, sub2 y sub3 fotogramas (F5) en el 25.

Hasta el momento tu línea de tiempo debería lucir más o menos como en la Figura 13


Figura 13

Para terminar añadiremos los demás botones de subopciones. En las capas sub4, sub5 y sub6 agrega KF en el fotograma 26. De la biblioteca arrastra una instancia del botón sub1 a la capa sub 4, instancia de sub2 a sub 5, y por último una instancia de sub 3 a la capa sub 6. Acomódalos debajo del botón Opción 2. Ponles nombre de instancia sub12_btn; sub22_btn y sub32_btn. En estas tres capas inserta un fotograma (F5) en el fotograma 45.

Ahora solo nos queda arrastrar instancias para las subopciones del botón 3, usa las capas sub7, sub8 y sub9 desde el fotograma 46 al 65. Figura 14

Figura 14
La parte más sencilla es esta, crear las animaciones de movimiento. Coloca la cabeza lectora sobre el fotograma 15, selecciona los botones Opción 2, Opción 3 y la viñeta inferior; arrástralos hacia abajo (Shift + Flecha abajo) hasta dejar visibles los botones de subopciones. En la capa vineta inf selecciona cualquier fotograma entre el 5 y el 15, en la ventana de propiedades elige Animar: Movimiento. Luego has lo mismo en algún fotograma entre el 15 y el 25. También para las capas boton3 y boton2.

Si por curiosidad pasas la cabeza lectora desde el fotograma 5 hasta el 25, verás como se ve la animación, mostrando las subopciones del botón1 y volviéndolas a ocultar.

Continuemos. Coloca la cabeza lectora en el fotograma 35, selecciona el botón3 y la viñeta inferior, deslízalas hacia abajo hasta que se vean las subopciones. Crea una animación de movimiento entre los fotogramas 26 y 35 de las capas vineta inf y boton3, otra entre sus fotogramas 35 y 45.

Sólo resta hacer la animación para el botón 3. En el fotograma 55 arrastra la viñeta inferior hasta que se vean las subopciones, en esta capa vineta inf agrega una animación de movimiento entre los fotogramas 46 y 55 y otra entre los fotogramas 55 y 65. Al terminar tu línea de tiempo lucirá como en la Figura 15

Figura 15

Si en el Menú eliges Control --- Rebobinar y luego Control --- Reproducir, verás la animación completa.
Insertaremos una nueva capa encima de todas y le daremos el nombre de AS. En esta capa inserta KF en los fotogramas 1, 15, 25, 35, 45, 55 y 65. En el panel de acciones ponles a cada uno de ellos un Stop(); para que no se ejecute automáticamente.

El efecto se basa principalmente, en que cuando se carga la película, el MC principal_mc tendrá la cabeza lectora en su fotograma 1, luego cambiará de posición a medida que presiones algún botón. Regresa a la escena principal, agrega una nueva capa y llámala AS. En ella insertarás uno de los dos grupos de código que a continuación te doy. La primer opción está hecha en base a sentencias If, Else, la segunda usando un segundo Movie Clip que servirá de apoyo para lograr un efecto mejorado, cuando ensayes las dos notarás la diferencia. No olvides que sólo debes tener una de las opciones a la vez.

El Código

Opción 1 Utilizando If, Else

/*Al cargarse la película, la cabeza lectora estará
en el fotograma 1 de principal_mc.
Cuando presionemos algún botón, ésta se moverá al
fotograma que le indiquemos, ejecutará la animación y
se detendrá en el siguiente fotograma de principal_mc
donde encuentre la acción Stop(). Por esto es que necesitamos
saber en dónde está la cabeza lectora cuando presionamos
algún botón, pues de esto dependerá a donde la mandaremos*/

_root.principal_mc.boton1_btn.onPress = function() {
/*averiguamos en que fotograma está la cabeza
lectora dentro de principal_mc */

var fotoactual = _root.principal_mc._currentframe;
/*preguntar si está en el 15, es decir si
ya se ha presionado antes y están visibles
sus subopciones. Si es así que corra la
película desde allí */

if (fotoactual == 15) {
_root.principal_mc.play();
//de lo contrario que las muestre
} else {
_root.principal_mc.gotoAndPlay(5);
}
};
//fin función botón1
_root.principal_mc.boton2_btn.onPress = function() {
var fotoactual = _root.principal_mc._currentframe;
/*preguntar si está en el 35, es decir si
ya se ha presionado antes y están visibles
sus subopciones */

if (fotoactual == 35) {
_root.principal_mc.play();
//sino es así, que muestre las subopciones
} else {
_root.principal_mc.gotoAndPlay(26);
}
};
//fin función botón2
_root.principal_mc.boton3_btn.onPress = function() {
var fotoactual = _root.principal_mc._currentframe;
/*preguntar si está en el 55, es decir si
ya se ha presionado antes y están visibles
sus subopciones */

if (fotoactual == 55) {
_root.principal_mc.play();
//sino es así, que muestre las subopciones
} else {
_root.principal_mc.gotoAndPlay(46);
}
};

Tal vez te preguntes por qué usar el mismo nombre de variable en todos los botones ¿no causará que Flash devuelva error en algún lado?, la respuesta es no, porque al estar declarada dentro de una función, automáticamente deja de estar disponible una vez ha finalizado de ejecutarse toda la acción de esta función.

Me olvidaba, debajo de ese código puedes escribir las acciones para las subopciones, puedes hacerlo por ejemplo así:

_root.principal_mc.sub1_btn.onPress = function () {
getURL("http://www.cristalab.com","_blank");
}

Opción 2 Utilizando un MC de apoyo

En la escena principal elimina la capa AS. Crea un nuevo MC de la siguiente manera: en el Menú elige Insertar --- Nuevo Símbolo (Ctrl + F8), elige Clip de Película, dale por nombre: apoyo. Una vez hecho esto inserta keyframes en el fotograma 1, 2, 10, 11, 20, 21, 30, 31. Abre el panel de acciones y escribe el siguiente código:

Fotograma No

Acciones

Explicación

1

stop();

Detiene la ejecución de la película para que no se ejecute el código del siguiente fotograma

2

stop();

_root.principal_mc.gotoAndStop(1);

Detiene este MC y manda el cabezal al fotograma 1 de principal_mc, es decir a la posición inicial del menú

10

stop();

Idem al 1

11

stop();

_root.principal_mc.gotoAndPlay(5);

Manda el cabezal al fotograma 5 de principal_mc para que se vea la animación del botón1

20

stop();

Idem al 1

21

stop();

_root.principal_mc.gotoAndPlay(26);

animación del botón2

30

stop();

Idem al 1

31

stop();

_root.principal_mc.gotoAndPlay(46);

Por ultimo animación del botón3

Cuando termines regresa a la escena principal e inserta una instancia de este MC en algún lugar fuera del escenario, ponle nombre de instancia apoyo_mc

Ahora deberás cambiar las acciones en los fotogramas del MC principal_mc de este modo

Fotograma No

Acciones

Explicación

1

stop();

 

15

stop();

 

25

stop();
_root.apoyo_mc.play();

Como la cabeza lectora está detenida en algún fotograma que tenga stop() de apoyo_mc, con esto hacemos que se pueda ejecutar el código del fotograma siguiente, logrando la animación del menú

35

stop();

45

stop();
_root.apoyo_mc.play();

55

stop();

65

stop();
_root.apoyo_mc.play();

Tendrás que modificar los botones 1, 2 y 3. Por eso ve viendo la posibilidad de aprender a usar el componente acordeón de Flash MX 2004.

Borra todos los nombres de instancia de los botones 1, 2 y 3 en cada keyframe. Ya no necesitarás usar nombres de instancia pues el código irá directo en cada botón. Una vez que hayas borrado todos los nombres de instancia:

Para el botón1 inserta KF en los fotogramas 1, 15 y 35
Para botón2 deberás tener KF en los fotogramas 1, 5, 15, 25, 35 y 55
El botón3 déjalo como está

El aspecto de tu línea de tiempo será algo como en la Figura 16

Figura 16 Fíjate que los botones de las subopciones están dentro de la carpeta Subs
Llegamos al final, nos queda colocar las acciones para los botones.

Botón

No de KF

Código

 

Botón1

1

on (release) {
gotoAndPlay(5);
}

Expande opción1

 

 

 

 

 

15

on (release) {
play();
_root.apoyo_mc.gotoAndStop(1);
}

Colapsa opción1

 

/*¿Sabes lo que es un colapso? */

 

 

 

 

 

35

on (release) {
play();
_root.apoyo_mc.gotoAndStop(10);
}

Colapsa opción2 y expande opción1. En principal el cabezal está en 35, al darle play llegará al 45 donde hay una acción que le dice a apoyo_mc que avance. Y como en apoyo_mc ya hemos mandado el cabezal al 10 ejecutará el código que hay en el 11.

 

 

 

/*colapso es el golpe que da con la cola un lagartapso */

 

 

 

 

Botón2

1

on (release) {
gotoAndPlay(26);
}

Expande opción2

 

 

 

 

 

15

on (release) {
play();
_root.apoyo_mc.gotoAndStop(20);
}

Colapsa Op1 y expande Op2

La misma torcida explicación que antes.

 

 

 

 

 

35

on (release) {
play();
_root.apoyo_mc.gotoAndStop(1);
}

/* Lagartapso viene de lagarto = caimán */

 

 

 

 

 

55

on (release) {
play();
_root.apoyo_mc.gotoAndStop(20);
}

 

 

 

 

 

Botón3

1

on (release) {
gotoAndPlay(46);
}

Ya sabes qué

 

 

 

 

 

15

on (release) {
play();
_root.apoyo_mc.gotoAndStop(30);
}

También ya sabes

 

 

 

 

 

35

on (release) {
play();
_root.apoyo_mc.gotoAndStop(30);
}

 

 

 

 

 

 

45

on (release) {
play();
_root.apoyo_mc.gotoAndStop(1);
}

Demás está explicar lo sabido

Espero que no te hayas aburrido antes de finalizar este sencillo menú.

Cristalab y Mejorando.la te traen el increíble Curso de Estrategia Digital y Marketing. Online, a tu ritmo, con diploma de certificación y clases 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