Programación de botones

En mi primer post de AS3 voy a explicar como se programan los estados de un botón.

Antes de empezar tenemos que hacer un MovieClip con los estados que tendrá nuestro botón cuando este esté en reposo, activo, clicado, etc...
A cada estado le he puesto una etiqueta, en mi caso:

* off: Botón en reposo
* over: Cursor sobre el botón
* clic: Botón apretado

Para este ejemplo coloco directamente el botón en la escena manualmente sin instanciarlo mediante código y a este le doy el nombre mcBoton para poder acceder a él.

Para programar los diferentes estados añado al botón un evento con la instrucción addEventListener que recibe el evento a escuchar y la función que ha de ejecutar.

Código:

mcBoton.addEventListener(MouseEvent.MOUSE_OVER, funcionEventoBoton);
mcBoton.addEventListener(MouseEvent.MOUSE_OUT , funcionEventoBoton);
mcBoton.addEventListener(MouseEvent.MOUSE_UP  , funcionEventoBoton);
mcBoton.addEventListener(MouseEvent.MOUSE_DOWN, funcionEventoBoton);

Ahora toca programar la función con la que le daremos vida a nuestro botón

Código:

function funcionEventoBoton(_mcObjetivo:Object):void{
}

La función recibe el evento que queremos usar y por defecto no devuelve nada de ahí que tenga el :void que de ahora en adelante usaremos en AS3 siempre que hagamos funciones.

Para diferenciar los diferentes eventos haremos un switch del objeto recibido mirando el campo .type

Código:

function funcionEventoBoton(_mcObjetivo:Object):void{
    switch (_mcObjetivo.type){
        case MouseEvent.MOUSE_OVER:
            trace("mouseOver");
            break;
     
        case MouseEvent.MOUSE_OUT:
            trace("mouseOut");
            break;
         
        case MouseEvent.MOUSE_UP:
            trace("mouseUp");
            break;
         
        case MouseEvent.MOUSE_DOWN:
            trace("mouseDown");
            break;
    }
}

Ahora falta que el botón cambie de aspecto y para acceder a él usaremos el parámetro .currentTarget para recuperar la ruta del objeto

Código:

.
.
.
_mcObjetivo.currentTarget.gotoAndStop("over");
.
.
.

Ahora el botón ya actúa correctamente pero falta un detalle, al poner el cursor encima no cambia de flecha a dedo para hacerlo tenemos que activar el "modo botón" del MovieClip con la instrucción mcBoton.buttonMode = true;

Ahora si que hemos acabado el código y finalmente quedará así

Código:

mcBoton.addEventListener(MouseEvent.MOUSE_OVER, funcionEventoBoton);
mcBoton.addEventListener(MouseEvent.MOUSE_OUT , funcionEventoBoton);
mcBoton.addEventListener(MouseEvent.MOUSE_UP  , funcionEventoBoton);
mcBoton.addEventListener(MouseEvent.MOUSE_DOWN, funcionEventoBoton);
mcBoton.buttonMode = true;

function funcionEventoBoton(_mcObjetivo:Object):void{
    switch (_mcObjetivo.type){
        case MouseEvent.MOUSE_OVER:
            _mcObjetivo.currentTarget.gotoAndStop("over");
            break;
     
        case MouseEvent.MOUSE_OUT:
            _mcObjetivo.currentTarget.gotoAndStop("off");
            break;
         
        case MouseEvent.MOUSE_UP:
            trace("mouseUp");
            _mcObjetivo.currentTarget.gotoAndStop("over");
            break;
         
        case MouseEvent.MOUSE_DOWN:
            _mcObjetivo.currentTarget.gotoAndStop("clic");
            break;
    }
}

Espero que os sirva de ayuda a los que empezáis con AS3 como yo

Código:

this.boto1.buttonMode=true;
this.boto1.mouseChildren=false;

Us afegeixo el MOUSECHILDREN=false.

De que serveix? Doncs quan tens un boto amb TEXT DINÀMIC a dins si no poses això, el mouse quan passa per sobre el text no fa l'efecte buttonMode i clar... Flipes una mica.

A part, també controles que tots els events de CLICAR, ONROLLOVER i ONROLLOUT (com s diguin en AS3) siguin tan pel botó com per tot el que hi ha a dins i no peti quan cliquis alguna cosa de dins.

Detallitus, detallitus interessants.

Merci per l'aportació.

Això mateix em va passar l'artre dia i ja ho vaig arreglar però encra no havía tingut temps de posar-ho aquí.