Menú Flotante para una Web Flash

Tutorial Adobe Flash 8. Menú Flotante (movible), la siguiente explicación no es dada complicada de hacer, y el trabajo que puedes llegar a realizar es casi como alcanzar la gloria (creo que exagere). Aquí encontraras conceptos básicos de cómo hacer un menú con botones en dos estados (Reposo y Sobre), a dichos botones se le agregara un pequeño código action script el cual lo hará que este se mueva a través de la película. El script posee coordenadas específicas que delimita perfectamente hasta donde se puede mover el menú. Que tal si ¿Comenzamos? Good luck!!

1-. Comenzar por hacer el documento (ctrl. + J) en el cual se va a trabajar.
a)-. Las dimensiones en este caso en particular son 538 * 360 píxeles de ancho y alto respectivamente.
b)-. El color a usar no tiene importancia #FFFFFF, ya que se importara una imagen del tamaño del documento para usarla como fondo.
c)-. Colocar como velocidad de fotogramas 20 fps.

2-. Crear el primero de los símbolos (ctrl. F8).
a)-. Nombrarlo botón 1, seleccionar la en la opción Tipo Botón.

3-. Ubicado en el símbolo diseñar un botón de dos estados (Reposo y Sobre).
a)-. En este caso se diseño un botón rectangular sin borde y como color de relleno use un degradado.
b)-. Las dimensiones son 100.0 * 20.0 píxeles.
c)-. El botó se coloca en coordenadas X = 0.0 y Y = 0.0.
d)-. Una pequeña sugerencia cuando se introduzca un texto a un botón como es el caso, hacerlo en otra capa. Una capa para el rectángulo y la otra capa para el texto.
Nota repetir los pasos 2 y 3 para hacer los botones con los cuales se completara el menú.

4-. Crear otro símbolo (ctrl. + F8).
a)-. Nombrarlo menú flotante, seleccionar la en la opción Tipo Botón.

5-. En este símbolo dibujar un rectángulo (R) solamente en el estado de Reposo.
a)-. El color utilizado es #000000, col el Alfa al 50 %.
b)-. Las dimensiones de la forma son 110.0 * 110.0 píxeles.
c)-. Colocar el rectángulo en coordenadas X = 0.0 y Y = 0.0.

6-. Crear un nuevo símbolo (ctrl. + F8).
a)-. Nombrarlo acciones de película, seleccionar la en la opción Tipo Clip de película.

7-. Ubicado en el símbolo, arrastrar desde la biblioteca el símbolo menú flotante.
a)-. Luego colocarlo en coordenadas X = 0.0 y Y = 0.0.

8-. Seleccionar el símbolo (no el fotograma).
a)-. Abrir la barra de Acciones – botón e insertar el siguiente script.
on (press) {
startDrag(this, false, 10, 10, 420, 245);
}
on (release) {
stopDrag();
}
Nota los números representa el área por donde se podrá desplazar el menú, el primer número representa ←X, el segundo número representa ↑Y, el tercer número representa →X y el cuarto número representa ↓Y.

9-. Insertar una segunda capa y cambiarle el nombre por el de botones.
a)-. Yo trabaje con cinco botones. Arrastrar desde la biblioteca cada uno de los botones que se crearon para componer el menú.

10-. Regresar a la Escena e importar (ctrl. + R) una imagen de dimensiones 538 * 360 píxeles de ancho y alto respectivamente.
a)-. Colocar la imagen en coordenadas X = 0.0 y Y = 0.0.
b)-. Luego de colocar la imagen en las coordenadas correspondientes, arrastrar desde la biblioteca el símbolo acciones de película. Este clip no importa en que coordenadas sea colocado dentro de la escena.

Con este paso queda concluido el tutorial, espero que sea de ayuda para tus futuros trabajos Web. Well done!!

P.D. Presionar ctrl. + Enter para visualizar el trabajo realizado. El archivo swf que presento le añadí unas cuantas variantes, espero que no te molestes por no explicar como realice estas variantes. Esto solamente lo hice para que mires los alcances del tutorial. Hasta muy pronto.

Visualizar el archivo swf de este tutorial

Descarga el archivo fla de este tutorial

Artículos relacionados:

• Programación de un Menú Para Página Web.
• Menú para un Sitio Web con Secciones Animadas (primera parte)
• Menú para un Sitio Web con Secciones Animadas (tercera parte)
• Menú para un Sitio Web con Secciones Animadas (segunda parte)