Aunque el menú del ejemplo, no contiene ningún efecto espectacular, el código usado para construirlo es muy interesante, ya que se observan diferentes técnicas de escritura actionScript imprescindibles para crear un código bien estructurado.
- Uso de textFormat
- uso de arrays bidimensionales
- deshabilitar un botón
Ejemplo
Para crear este menú, tan solo es necesario crear un clip de película como el que puedes ver en la imagen, dicho clip de película consta unicamente de un campo de texto.
Vincular el clip de película
El clip de película debe estar vinculado para exportar a actionScript.
- Selecciona el clip de película en tu biblioteca.
- Haz clic con el botón derecho del ratón.
- Selecciona la opción Vinculación... del menú contextual.
- En la ventana de dialogo Propiedades de vinculación, selecciona el botón de opción Exportar para actionScript.
Código actionScript
En primer lugar, se definen las funciones que se utilizarán, en este caso prototipos. Estos prototipos, responden a los diferentes eventos de clip de película (onRollOver, onRollOut y onRelease)
Acciones para el evento onRollOver, la función de este prototipo es cambiar el color del botón al pasar el puntero.
-
MovieClip.prototype.TLonRollOver = function() {
-
formato.color = 0x991F36;
-
this.texto.setTextFormat(formato);
-
};
Acciones para el evento onRollOut, devuelve el botón a su estado original (reposo)
-
MovieClip.prototype.TLonRollOut = function() {
-
formato.color = 0x666666;
-
this.texto.setTextFormat(formato);
-
};
El prototipo encargado de las acciones para el evento onRelease, es un poco más complejo.
-
MovieClip.prototype.TLonRelease = function() {
-
// -- restaura todos los botones a su estado original
-
for (i=0; i<menu.length; i++) {
-
item = eval("boton_mc"+i);
-
item.enabled = true;
-
item.useHandCursor = true;
-
formato.color = 0x666666;
-
item.texto.setTextFormat(formato);
-
}
-
// -- carga el clip de película en un clip contenedor
-
holder_mc.loadMovie(this.pelicula);
-
// -- deshabilita el botón pulsado
-
this.enabled = false;
-
// -- deshabilita el cursor en forma de mano
-
this.useHandCursor = false;
-
// -- para indicar que el botón se encuentra activo
-
// -- se cambia el color de texto por uno más tenue.
-
formato.color = 0xCCCCCC;
-
this.texto.setTextFormat(formato);
-
};
Se crea un objeto textFormat
-
formato = new TextFormat();
-
formato.font = "Verdana";
-
formato.size = 10;
-
formato.color = 0x666666;
Los elementos del menú tales como el texto de los botones y su enlace
correspondiente se definen en un array bidimensional.
-
menu = new Array();
-
menu[0] = {titulo:"Home", pelicula:"home.swf"};
-
menu[1] = {titulo:"Opción 1", pelicula:"opcion1.swf"};
-
menu[2] = {titulo:"Opción 2", pelicula:"opcion2.swf"};
-
menu[3] = {titulo:"Opción 3", pelicula:"opcion3.swf"};
-
menu[4] = {titulo:"Opción 4", pelicula:"opcion4.swf"};
-
menu[5] = {titulo:"Opción 5", pelicula:"opcion5.swf"};
-
menu[6] = {titulo:"Opción 6", pelicula:"opcion6.swf"};
Crea un clip de película contenedor
-
this.createEmptyMovieClip("holder_mc", this.getNextHighestDepth());
-
holder_mc._x = 0;
-
holder_mc._y = 0;
Lectura del array con un bucle for para la construcción del menú.
-
formato.color = 0x666666;
-
for (i=0; i<menu.length; i++) {
-
// --se crean nuevas instancias del clip vinculado
-
attachMovie("boton_mc", "boton_mc"+i, this.getNextHighestDepth());
-
anterior = eval("boton_mc"+(i-1));
-
item = eval("boton_mc"+i);
-
item.pelicula = menu[i].pelicula;
-
item.texto.autoSize = true;
-
item.texto.text = menu[i].titulo;
-
item.texto.setTextFormat(formato);
-
// -- posicionamiento x-y
-
item._y = 10;
-
if (i == 0) {
-
item._x = 10;
-
} else {
-
item._x = anterior._x+anterior._width;
-
}
Eventos de botón.
-
item.onRollOver = this.TLonRollOver;
-
item.onRollOut = this.TLonRollOut;
-
item.onRelease = this.TLonRelease;
-
}
Una de las ventajas que me gustaría resaltar: no hay que preocuparse de la separación entre botones, esta es exactamente igual para cada uno de ellos.
Nota
Cualquier consulta sobre este tutorial o .fla debe realizarse en el foro.
Descarga Menu Botón Estado Activo.zip
Menu Botón Estado Activo.zip se ha descargado 3,268 veces.
Loading ...
Hola Toni, tengo una pequeña duda hacerca de si es posible cambiar la posición de los botones de este menú, me gustaría alinearlos de forma diferente (en posición vertical). Si modifico los valores _x _y me lo sigue moviendo en bloque. tienes alguna solución??
Gracias por adelantado!
Salu2
Hola knoart,
deberías anular lo siguiente:
Antes del for, escribes:
Y donde quitaste el código anterior, escribir:
saludos
muy bueno. Se puede hacer tambien que cambie el fondo del boton ? si se puede como sería. Gracias
Toni, muy bueno el menú!
Cómo haría para cargar un swf.
// -- Menú
menu = new Array();
menu[0] = {titulo:"1", pelicula:"d1.swf"};
menu[1] = {titulo:"2", pelicula:"d2.swf"};
menu[2] = {titulo:"3", pelicula:"d3.swf"};
// -- clip contenedor
Con esta sintaxis AS me tira un error.
Agradecería una respuesta!
Degas
Hola Dega,
puedes hacer:
holder_mc
Hola toni,
Por favor, ¿puedes ayudarme? ¿como puedo hacer para vaciar boton_mc attacheado para cada "for"?
Me explico, es un menu para fotos (foto 1, foto 2...), y el numero de estas es variable segun el cliente. Por lo tanto, el valor maximo de "i" tambien lo es. Lo que ocurre es que no puedo vaciar boton_mc por lo que siempre me aparecen el numero de fotos del cliente que más tiene.
¿sabes que puedo hacer? removeMovieClip (ni funcion ni metodo) me funciona...y me esoty volviendo loco.
Gracias y saludos!!!
Hola solo quisiera saber como se puede poner un getUrl para cada elemento del menu... y la verdad me urge!!!
Gracias y que tenga un buen dia
Hola,
modifica tu array asi:
y para el evento onRelease substituye:
por
saludos.