Tutoriales en la Web

Menu desplegable en Swishmax

Posteado el 09. Apr, 2010 por Webi in Swishmax

Aqui te enseñaremos como hacer este menú pasa el mouse encima de los botones y verás como se despliega

PASO 1
Crear un nuevo documento de Swishmax

PASO 2
Vamos a la ventapa properties en el botón Movie Properties… y colocamos los valores que se ven en la imagen.

PASO 3
Con la herramienta Auto Shape Tool vamos a dibujar una forma como la que se ve en la imagen, con un color de relleno azul oscuro # 2C426E.

PASO 4
Con el comando Ctrl + C copiamos nuestra figura y con el comando Ctrl + Shifrt + V pegamos en el mismo lugar.

PASO 5
Agregamos un gradiente Lineal a nuestra forma con un color blanco con una opacidad de 65 % y el otro color blanco con opacidad de 0%.

PASO 6
Con la herramienta Fill Transform Tool vamos a girar nuestro gradiente para que se vea como en la imagen.

PASO 7
Con la herramienta Text Tool escribimos la palabra Menú como se ve en nuestra imagen.

PASO 8
Ahora vamos a nuestra ventana Outline y seleccionamos todos nuestros elementos y damos click derecho sobre ellos y vamos a la opción Grouping – Group as Button.

PASO 9
Vamos a la ventana Properties y le colocamos nombre a nuestro botón (menu) y luego seleccionamos la opción Has separate over state.

PASO 10
Regresamos a la ventana outline y desplegamos nuestro botón y en el grupo Over State cambiamos el color del botón a un naranja.

PASO 11
Ahora creamos 2 botones más para el desplegable.

PASO 12
Vamos a nuestra ventana Outline y seleccionamos los dos botónes que van a formar el desplegable y les damos click derecho Grouping – Group as Movie Clip.

PASO 13
En la ventana Properties le colocamos el nombre de desplegable a nuestro movie clip.

PASO 14
Desplegamos nuestro Movie clip y vamos a nuestra Timeline y en el Frame 1 en la linea del Movie clip hacemos click derecho y vamos a la opción Movie Control – Stop()

PASO 15
Ahora en el botón menu1 en el frame 2 damos click derecho y vamos a la opción Fade – Fade In.

PASO 16
Realizamos el mismo proceso en el botón menu2 pero esta vez en el frame 5.

PASO 17
En la línea de nuestro Movie clip en el Frame 15 hacemos click derecho y vamos a la opción Movie Control – Stop().

PASO 18
Ahora en la línea de nuestro boton1 en el frame 65 damos click derecho Fade – Fade Out, realizamos lo mismo en el botón menu2.

PASO 19
En el Frame 75 Agregamos un Strop.

PASO 20
En el frame 75 vamos a darle click derecho en la línea de nuestro botón menu2 y vamos a la opción de Remove agregamos de igual forma al botón menu1 un remove.

PASO 21
Seleccionamos nuestro botón menu1 y vamos a la ventana Script para agregar el siguiente código, agregarlo tambien en el botón menu2 es el mismo para ambos botones.

Code block

on (rollOver) {
gotoAndStop(14);
}
on (rollOut) {
gotoAndPlay(60);
}

PASO 22
Ahora vamos a nuestro botón Menú y vamos a agregarle el siguiente código.

Code block

on (rollOver) {
desplegable.gotoAndPlay(2);
}
on (rollOut) {
desplegable.gotoAndPlay(60);
}

PASO 23
Si queremos agregarle un link hacia una pagina web a nuestros botones agregamos el siguiente código debajo del primer código que ya teníamos.

Code block

on (press) {
getURL("http://www.tutorialesenlaweb.com/secciones/swishmax/", "");
}

PASO 24
Listo ya tenemos nuestro efecto terminado ahora con el comando Ctrl + T veamos el resultado final.

Descarga el .swi de Menu desplegable en Swishmax

Articulos relacionados:

Tags: Swishmax, Tutoriales Swishmax