Menú y submenú en Flash con botones en estado presionado

[dmm]

Hola, buenas tardes:

Mirad, tengo una duda. Estoy intentando crear un menú principal con submenús para una página web, pero necesito que tenga una serie de características. Quisiera que al presionar el botón que sea, este se quede en estado presionado, marcándose con un color distinto de los demás, para que el visitante pueda distinguir la sección a la que ha ido. Este botón debe hacer aparecer un submenú con varios botones, que serán vínculos a otras secciones de la web, a otros index, botones que también deberían quedarse en estado presionado con un color distintivo al ser clickados y al surgir la nueva sección.

Cuando se presione un segundo botón del menú principal, quisiera que el primero volviese a su estado normal y su submenú desapareciera, para dar paso al submenú de este segundo botón. Y así, con los restantes botones.

La idea -no se si son los términos correctos- es que todos los botones deben mostrar su estado presionado al ser clickados y al mismo tiempo, hacer aparecer sus submenús correspondientes. Al cambiar de botón, el que está pulsado debería "anularse" junto con su submenú.

A mi esto me parece muy complicado, ya que tengo nociones muy básicas de Action Script 2 y me gustaría poder hacerlo de la forma más sencilla posible, sin mucho código de por medio. He estado mirando por el foro y he encontrado algunos ejemplos y he conseguido hacer funcionar un menú muy sencillo de dos botones, pero de ahí no he pasado... . Os agradecería vuestra ayuda.

Muchas gracias por anticipado.

Un saludo.

[Bandit]

Hola dmm:
Aquí un ejemplo con 2 botones para que se intercambien:
Crea un MC y en el primer frame coloca un rectángulo que simule el botón y con el color de relleno que desees, en el frme 2 coloca un fotograma clave y cambia el relleno al rectángulo.
Crea la capa 2 y en el frame 1 coloca un stop();
Para el segundo botón haces los mismo.
En el escenario coloca los 2 MC que fungirán de botones y le das un nombre de instancia cada 1, por ejemplo: btn_1 y btn_2
Selecciona el primer botón y escribe éste código:

Código actionscript:

on(release){
     //aquí la accion que quieres que haga
     gotoAndStop(2);
     _root.btn_2.gotoAndPlay(1);
}
 

Al segundo botón:

Código actionscript:

on(release){
     //aquí la accion que quieres que haga
     gotoAndStop(2);
     _root.btn_1.gotoAndPlay(1);
}
 

Espero haberte sido de ayuda.

[dmm]

Hola Bandit, buenas tardes

Muchas gracias por tu respuesta. Vale, he hecho lo que me decías y el efecto que he conseguido es un poco extraño. Te cuento. Todo ha salido bien y el programa no me ha dado ningún error al publicar, con lo que supongo que aunque a mi me parezca extraño lo que hace la previsualización, puede que sea lo que se espera que haga.

Al generar el swf, si pulso el primer botón -el situado encima del segundo-, este segundo botón emite un leve parpadeo con el color de estado "presionado" y se queda en estado normal -con color gris-, mientras el primer botón muestra su nuevo estado -marcado con rojo-. Ahora bien, si pulso el segundo botón, el primero no retorna a su estado normal -con color gris- y los dos se quedan en estado presionado.

Si por el contrario pulso el segundo botón en primer lugar, este muestra su estado "presionado" de forma normal. Ahora, pulso el primer botón y el intercambio de estados se hace correctamente. Hasta aquí todo bien. Pero si vuelvo a pulsar el segundo botón, no se produce el intercambio de estados con lo que estamos en la misma situación que he descrito arriba.

Es extraño porque Flash no detecta ningún problema y todo se ha generado bien. No obstante, he subido unas imágenes para que te hagas una mejor idea de cómo está el tema:

1. Pantalla de la escena con el botón 1 y el código AS: http://www.hiboox.es/go/imagenes-100/pantalla-codigo-e-instancia-boton-1,580d1e392bfaf356369fcc73ed303d6b.jpg.html
2. Pantalla de la escena con el botón 2 y el código AS: http://www.hiboox.es/go/imagenes-100/pantalla-codigo-e-instancia-boton-2,0080125d593e2b080f34cb661cfaad69.jpg.html
3. Interior del botón 1: http://www.hiboox.es/go/imagenes-100/pantalla-interior-boton-1,67daf45b9523c668dfb1105891944e5a.jpg.html
4. Interior del botón 2: http://www.hiboox.es/go/imagenes-100/pantalla-interior-boton-2,ddc38f3cad21b385cc50502f28705b83.jpg.html

Voy a manipular un poco esto, a ver si consigo algún efecto distinto. Bandit, muchas gracias.

[dmm]

Hola, buenos días:

Bueno, pues siguiendo la estela del ejercício que me ha facilitado Bandit, he continuado con mis intentos. Como se trata de un menú de más de dos botones -probablemente haya cerca de 10 o 12- me he puesto a intentar agregar un botón más para intentar conocer la mecánica de este código. Ahora son tres botones y el código es el siguiente:

Botón 1 (instancia btn_1):

Código Action Script:

on(release){
         //aquí la accion que quiera
         gotoAndStop(2);
         _root.btn_2.gotoAndStop(1);
         _root.btn_3.gotoAndStop(1);
    }
 

Botón 2 (instancia btn_2):

Código Action Script:

on(release){
         //aquí la accion que quiera
         gotoAndStop(2);
         _root.btn_1.gotoAndStop(1);
         _root.btn_3.gotoAndStop(1);
    }
 

Botón 3 (instancia btn_3):

Código Action Script:

on(release){
         //aquí la accion que quiera
         gotoAndStop(2);
         _root.btn_1.gotoAndStop(1);
         _root.btn_2.gotoAndStop(1);
    }
 

Vale, hasta aquí parece todo normal. Una vez que pruebo el swf, el intercambio de estados -de normal a presionado- se hace estupendamente entre el botón 2 y el 3, pero el primero no es capáz de regresar a su estado original, se queda presionado . Por otra parte, he puesto al lado del _root y de la instancia correspondiente a cada botón, un gotoAndStop, porque con el gotoAndPlay los botones emiten un leve parpadeo no deseado -supuestamente provocado por el Play- y con este cambio, lo he eliminado .

Bueno, pues seguimos adelante con el experimento. Si alguno podéis echarme un cable para solucionar el problemilla con el botón 1, os lo agradeceré.

Muchas gracias y un saludo.

[Bandit]

Hola dmm:
Los códigos están bien, el problema que el primer botón no regrese, es porque probablemente no le pusiste su nombre de instancia, que sería btn_1.
Revisa eso.

Espero haberte sido de ayuda.

[dmm]

Hola Bandit, buenas tardes

Muchas gracias por responder. He revisado el archivo y en la ventana de propiedades te confirmo que está puesto el nombre de instancia correspondiente (btn_1)... Estoy empezando a pensar que el hecho de que esta instancia no aparezca en el código del primer botón, puede estar causando esto; pero como digo es una intuición... ;lo mismo no es así.

Sigo intentándolo.

Un saludo.

[Bandit]

Ya te dije que los códigos que haz publicado están bien
Para empezar en el primer btn_1 no debe de haber la línea: _root.btn_1.gotoAndStop(1);, solamente en los: btn_2 y 3.
Por eso te decía que la única explicación para que no regrese el primer botón a su frame 1, no tenga su nombre de instancia.
Sube tu archivo a un servidor para poderlo bajar y ver como lo haz hecho.

Espero haberte sido de ayuda.

[dmm]

Ok, Bandit

Este es el vínculo:

http://www.megaupload.com/?d=61742GI1

Si no te va, intentalo con este:

http://www.megaupload.com/?f=ZM07MPBB

Muchas gracias por tu dedicación.

[Bandit]

Hola dmm:
El problema es que en el nombre de la instancia btn_1 tienes un espacio después de número 1, borra el nombre de la instancia y escríbelo de nuevo.

Espero haberte sido de ayuda.

[dmm]

Hola Bandit, buenas tardes

Muchas gracias por responder. Lo he revisado y el nombre de instancia del botón 1 btn_1 en mi archivo no tiene ese espacio sobrante. No obstante, por si mi vista me engañaba, he borrado el nombre y lo he puesto otra vez. El resultado es el mismo.... No se de qué se puede tratar...

Un saludo.

[Bandit]

Al poner el curso al final en el nombre de instancia de tu archivo, se desplaza un espacio después del número 1, eso hace que el nombre de instancia no sea reconocido, coloca el cursor en el espacio en blanco después de btn_1 y verás que no se pega al número, lo que tienes que hacer es después de poner el cursor, presiona la tecla Retroceder y con eso solucionas el problema.
Aquí te envío el archivo corregido: http://www.megaupload.com/?d=GS4YLKFF

Espero haberte sido de ayuda

[dmm]

Efectivamente Bandit

Lo he revisado como tu decías y ahí estaba el error. Yo no lo veía porque estaba mirando constantemente el espacio entre el guión bajo y el uno. Ahora funciona perfectamente. Pues bien, este es el código para el botón 1 resultante:

Código Action Script:

on(release){
         //aquí la accion que quieres que haga
         gotoAndStop(2);
         _root.btn_2.gotoAndStop(1);
         _root.btn_3.gotoAndStop(1);
         _root.btn_4.gotoAndStop(1);
         _root.btn_5.gotoAndStop(1);
         _root.btn_6.gotoAndStop(1);
         _root.btn_7.gotoAndStop(1);
         _root.btn_8.gotoAndStop(1);
         _root.btn_9.gotoAndStop(1);
         _root.btn_10.gotoAndStop(1);
         _root.btn_11.gotoAndStop(1);
         _root.btn_12.gotoAndStop(1);
    }
 

El menú va a estar compuesto de doce botones. Por lo que veo, el tema está en colocar en cada botón la referencia a sus "compañeros" y no poner la que le corresponde a este en el código. Así, en el botón 1 no podemos poner _root.btn_1.gotoAndStop(1);, pero en los siguientes sí debe estar esta parte del código. Y así con todos los demás hasta completar los que necesitemos.

Muchas gracias Bandit . Ahora necesitaría incorporar submenús a algunos de los botones, con la misma estructura que estos primeros -apretar y dejar marcados- y otros serían simples vínculos a otros index de la web. Supongo que tendré que aplicar alguna orden del tipo...

Código Action Script:

on (press) {
    gotoAndStop(...);
}
 

... en el espacio habilitado para ello. ¿Pero no sería más interesante ponerlo justo debajo del código?, ¿Dónde habría que ponerlo?.

Un saludo.

[dmm]

Hola, buenas tardes

Bueno, pues investigando y manipulando el menú, he conseguido hacer surgir un submenú del botón 1. He añadido dos botones para intentar hacer el mismo efecto. Lo he hecho de la siguiente forma:

1. Primero me he metido dentro del botón 1 (mc) y he creado una nueva capa. Como recordaréis, dentro del botón había dos capas, una con un stop(); y la otra contiene dos fotogramas que se corresponden con los estados del botón: normal y presionado.

2. En la tercera capa, creo un fotograma clave y no pongo nada. En el siguiente (2) creo un rectángulo, que será el primer botón del submenú que surge tras presionar el primer botón del menú principal.

3. Convierto el rectángulo en un mc y hago doble clic para entrar en él. Vuelvo a crear dos capas, una para el stop(); y otra para los estados normal y presionado del sub-botón, exactamente igual que con los botones del menú principal. Salgo del mc, clico en él y le pongo el nombre de instancia subtn_1. Luego, introduzco el siguiente código:

Código Action Script:

on(release){
         //aquí la accion que quieres que haga
         gotoAndStop(2);
         _root.subtn_2.gotoAndStop(1);
    }
 

4. hago un nuevo botón, el segundo, del mismo modo que este primero, solo que ahora la instancia es subtn_2 y el código es el siguiente:

Código Action Script:

on(release){
         //aquí la accion que quieres que haga
         gotoAndStop(2);
         _root.subtn_1.gotoAndStop(1);
    }
 

La lógica parece aplastante y de hecho, al hacer la previsualización, el resultado es excelente, salvo porque los botones del submenú no pasan al estado presionado, como en los botones del menú principal. Si me echais una mano, os lo agradecería .

Un saludo.

[Bandit]

Lo que pasa es que hay un código está colocado en el MC btn_1, por tal razón los códigos que pongas dentro de ese MC dejarán de funcionar.
Lo que tienes que hacer es convertir cada rectángulo del primer frame en un botón y a él, colocar el código que le pusiste al MC.

Espero haberte sido de ayuda.

[dmm]

Hola Bandit, buenas noches

Muchas gracias por tu dedicación y paciencia. No se si te he entendido bien; he transformado los rectángulos -sub-botones- del interior de los botones principales en botones normales, les he puesto su nombre de instancia y luego les he puesto el código que tenía... pero nada, no hay cambios.

Un saludo.

[Bandit]

Aquí está bien claro lo que tienes que hacer:

Lo que tienes que hacer es convertir cada rectángulo del primer frame en un botón y a él, colocar el código que le pusiste al MC.

Inicialmente tú tenías 3 rectángulos convertidos en MC que fungían de botones y dentro de él 2 frames con 2 rectángulos de diferentes colores: gris y rojo, al primer rectángulo gris lo conviertes en Símbolo Botón y le pones el código que le habías puesto al MC, eliminando ese código del MC para evitar que anule los códigos internos de ese MC.

Espero haberte sido de ayuda y ahora lo tengas más claro.

[dmm]

Sí, Sí y Sí . Muchas gracias Bandit:

Efectivamente, al convertir el rectángulo gris de cada botón –que se corresponde con el estado normal- y poner el código correspondiente, los botones funcionan e intercambian su estado que da gusto verlos . (Nota: ahora los botones están nombrados con un “0” delante de cada cifra, es decir, en vez de “btn_3”, tenemos “btn_03”):

Código Action Script:

on(release){
         //aquí la accion que quieres que haga
         gotoAndStop(2);
         _root.btn_02.gotoAndStop(1);
         _root.btn_03.gotoAndStop(1);
         _root.btn_04.gotoAndStop(1);
         _root.btn_05.gotoAndStop(1);
         _root.btn_06.gotoAndStop(1);
         _root.btn_07.gotoAndStop(1);
         _root.btn_08.gotoAndStop(1);
         _root.btn_09.gotoAndStop(1);
         _root.btn_10.gotoAndStop(1);
         _root.btn_11.gotoAndStop(1);
         _root.btn_12.gotoAndStop(1);
    }
 

Ahora bien hay que conservar el nombre de instancia correspondiente de cada botón tanto fuera de este mc, como dentro del mc, en este mismo rectángulo gris. Para los botones del submenú –teniendo en cuenta que he puesto tres para el botón 1 del menú principal-, he puesto los siguientes códigos:

Botón 1 del submenú (subtn_01):

Código Action Script:

on(release){
         //aquí la accion que quieres que haga
         gotoAndStop(2);
         _parent.subtn_02.gotoAndStop(1);
         _parent.subtn_03.gotoAndStop(1);
    }
 

Botón 2 del submenú (subtn_02):

Código Action Script:

on(release){
         //aquí la accion que quieres que haga
         gotoAndStop(2);
         _parent.subtn_01.gotoAndStop(1);
         _parent.subtn_03.gotoAndStop(1);
    }
 

Botón 3 del submenú (subtn_03):

Código Action Script:

on(release){
         //aquí la accion que quieres que haga
         gotoAndStop(2);
         _parent.subtn_01.gotoAndStop(1);
         _parent.subtn_02.gotoAndStop(1);
    }
 

Donde subtn_01, subtn_02 y subtn_03 son los nombres de instancia que hay que poner para cada botón en el panel de propiedades. No se si he hecho bien, pero como _root. No me funcionaba, he usado _parent para que el código se refiriese a la línea de tiempo en la que estaba aplicando las acciones anteriores, es decir, en el nivel superior –no se si este es el razonamiento... Y así con todos los botones. Muchas gracias Bandit, funciona de maravilla .

Ahora bien, me queda colocar los códigos de cada botón para que se dirijan a las partes de la web que quiero. Me pongo a ello… .

Un saludo.

[Bandit]

Hola dmm:
Me alegro que hayas resuelto el problema que tenías.

Saludos desde Perú.

[coniromeo]

Hola a todos, antes que nada, gracias por las respuestas y soluciones que me brindan siempre !

Les escribo por que segui los pasos , y me funciona de maravilla. El problema que tengo es que no me reconoce el boton que esta dentro del movie clip,por lo que, cuando paso por arriba queda sin movimiento, salvo cuando lo presiono que se ve el cambio, pero cuando paso por arriba del mc, no se inmuta.

Como puedo solucionarlo ? Fui mas o menos clara ?

Saludos y muchas gracias!
Coni

Iniciado por Bandit

Hola dmm:
Aquí un ejemplo con 2 botones para que se intercambien:
Crea un MC y en el primer frame coloca un rectángulo que simule el botón y con el color de relleno que desees, en el frme 2 coloca un fotograma clave y cambia el relleno al rectángulo.
Crea la capa 2 y en el frame 1 coloca un stop();
Para el segundo botón haces los mismo.
En el escenario coloca los 2 MC que fungirán de botones y le das un nombre de instancia cada 1, por ejemplo: btn_1 y btn_2
Selecciona el primer botón y escribe éste código:

Código actionscript:

on(release){
     //aquí la accion que quieres que haga
     gotoAndStop(2);
     _root.btn_2.gotoAndPlay(1);
}
 

Al segundo botón:

Código actionscript:

on(release){
     //aquí la accion que quieres que haga
     gotoAndStop(2);
     _root.btn_1.gotoAndPlay(1);
}
 

Espero haberte sido de ayuda.

[Bandit]

Hola coniromeo:
Bienvenida al Foro.
Si tu pones un botón dentro de un MC y los códigos se lo adjudicas al MC no se verá los diferentes cambios que tenga el botón.
Porque no subes tu archivo .fla a un servidor para poderlo bajar y ver como lo estás haciendo.

Espero poderte ser de ayuda.