RSS : Articles / Comments


creacion de un menu desplegable con flash

lunes, septiembre 28, 2009, Posted by Xabier Pérez, No Comment

Gracias al blog de undermedia y con algunos ajustes propios para que todo funcione correctamente.



1/ Creamos un símbolo de Clip de Película llamado “submenú”.



2/ En el nuevo símbolo colocamos los botones que formarán parte del submenú que se desplegará (COLOCARLOS PEGADOS UNOS JUNTO A OTROS). El primer botón habrá de alinearse sobre el eje de referencia (la cruz).




3/ En los cuatro últimos botones (empezando desde arriba) colocaremos el siguiente código (que nos permitirá mostrar/ocultar el submenú cuando pase el ratón sobre él):

on(rollOver){
this._visible = true;
}
on (rollOut) {
this._visible = false;
}
on (press) {
//Tu código para cada boton
}

4/ Seleccionamos el primer botón (sin código) y desde el Panel de Propiedades le aplicamos un Alpha al 0%.



De tal modo que tengamos libre para poner el botón principal (el que desplegará el submenú)



5/ Creamos una nueva capa y en ella dibujamos un rectángulo de tal modo que cubra todos los botones


6/ Cambiamos el punto de referencia del rectángulo. Para ello, seleccionamos el rectángulo y con la herramienta de Transformación Libre, seleccionamos el centro del rectángulo y lo arrastramos a la parte superior.


7/ Seleccionamos el Fotograma que contiene el rectángulo en la Linea de Tiempo y lo convertimos en una Interpolación de Movimiento haciendo clic derecho sobre él.



8/ Seleccionamos el Fotograma número 5 y creamos un Fotograma Clave.



9/ Nos situamos ahora en el Fotograma 1 de la Capa rectángulo y con la herramienta de Transformación Libre, lo ajustamos para que el rectángulo solo cubra el primer botón (el que tiene el Alpha = 0). Después comprobamos si el rectangulo cambia de tamaño al mover la Linea de Tiempo del fotograma 1 al 5.

10/ Convertimos la Capa rectángulo en una Máscara.


11/ En la Capa botones, seleccionamos el Fotograma 5 e insertamos un Fotograma (o presionamos F5)



12/ Seleccionamos el último Fotograma de la Capa rectángulo y desde el Panel de Acciones (Ventana>Acciones) escribimos:

stop();



13/ Seleccionamos el primer Fotograma de la Capa rectángulo y en el Panel de Propiedades le colocamos la etiqueta abrir (esto nos indicará desde qué Fotograma empieza la animación)



La Linea de Tiempo se verá entonces así:



14/ El submenú estará entonces listo. Salimos pués del modo de Edición de Símbolos pulsando Escena.

15/ Creamos un nuevo Símbolo de Clip de Película llamado menu.

16/ En el nuevo símbolo creamos dos Capas, una llamada menu (que pondremos por encima) y otra llamada submenu (por debajo).


17/ En la Capa menu colocamos un nuevo Botón, en la Capa submenu colocamos el Clip de Película que hicimos en los pasos anteriores. Para colocar alineado el Simbolo submenu con el nuevo Botón, se le debe aplicar un Color de Contorno. (es necesario que el nuevo Botón y el Símbolo submenu sean alineados correctamente)





18/ Seleccionamos el símbolo submenu en el escenario y le colocamos una etiqueta clpMenu (importante respetar las mayúsculas y minúsculas)



19/
Movemos en la Línea de Tiempo el Fotograma submenu al Fotograma siguiente y al primer Fotograma lo dejamos vacío.

20/ Seleccionamos el primer Fotograma de la Capa menu, abrimos el Panel de Acciones y escribimos:

stop();



21/ Insertamos un Fotograma (o pulsamos F5) en el segundo Fotograma de la Capa menu

22/ Vamos al segundo Fotograma de la Capa submenu y escribimos
stop();

23/ Seleccionamos el nuevo Botón, abrimos el Panel de Acciones (Ventana>Acciones) y escribimos:

on (press) {
gotoAndPlay(2);
if (!this.clpMenu._visible)
{
this.clpMenu.gotoAndPlay(”abrir”);
this.clpMenu._visible = true;
}
}

24/ Salimos del modo Edición de Símbolo y arrastramos el Simbolo menu al Escenario

25/ Pulsamos Control>Probar Película para ver los resultados.

entrada basada en el blog: http://blog.undermedia.com.ec

No Comment