Ejercicios eventos y funciones

Se proponen tres ejercicios para practicar la detección y manejo de eventos de ratón en botones creados con MovieClip. Los dos primeros son obligatorios, el tercero es para nota (no lo intentéis sin haber conseguido el segundo.).

Tendremos que utilizar funciones todo lo que podamos y también repasamos la creación de simbolos con estados y animaciones marcados con etiquetas.

Volver al Índice

No os asustéis por la longitud de los enunciados. Os estoy diciendo como hacer los ejercicios paso a paso y dando un montón de pistas, de ahí la longitud. Leed las instrucciones con atención, repasando lo que hemos visto en clase y los posts relacionados si es necesario.
Despacito y buena letra.

  1. Crear un botón interruptor, con tres estados: “normal”, “encima” y “presionado”.
    • Que vaya al estado “encima” cuando pasemos por encima con el puntero.
    • Que vuelva al estado “normal” cuando saquemos el puntero de encima del botón.
    • Que se quede parado en el estado “presionado” cuando hacemos click sobre él, y sólo vuelava al estado “encima” al volver a hacer click encima suyo.
    • Mientras está “presionado” los eventos MouseEvent.ROLL_OVER y MouseEvent.ROLL_OUT no deben tener efecto sobre él.

    Dibujad primero un diagrama de estados para este botón, como os explique en clase y en el post Eventos de ratón y teclado.
    El diagrama hay que entregarlo! Sacadle una foto y me lo incluis en el .zip de la entrega.
    Os incluyo una muestra de como debe funcionar:
    [gigya src=”https://dl.dropboxusercontent.com/u/3646945/newbeForever/esne/botonSencilloMejorSwitch.swf” width=”550px” height=”100px”]
    Pistas: Hay, al menos, dos estrategias que se pueden seguir para conseguir que el botón se quede presionado al hacer click sobre él.

    • La más sencilla, que vimos en clase, es definir una variable bandera, de tipo Boolean, que nos dice si el botón está presionado o no.
      En la función suscrita al evento MouseEvent.CLICK debemos comprobar si esta variable es verdadera o falsa y actuar en consecuencia (esto incluye cambiar el valor de esta variable a true o false como corresponda).
      También debemos hacer esta comprobación en las funciones suscritas a MouseEvent.ROLL_OVER y MouseEvent.ROLL_OUT para evitar sacar al botón del estado “presionado” al pasar el ratón por encima.
    • Hay otra estrategia que consiste en comprobar, en la función que se suscribe al evento MouseEvent.CLICK si el botón tiene funciones suscritas a uno de los dos eventos MouseEvent.ROLL_OVER o MouseEvent.ROLL_OUT. Por ejemplo:
      		if( boton.hasEventListener(MouseEvent.ROLL_OVER) ) {
      			//...
      		} else {
      			//...
      		}
      		

      Si lo está, eliminamos la suscripción a ambos eventos con:

      		boton.removeEventListener(MouseEvent.ROLL_OVER, nombreDelSuscriptorARollOver);
      		boton.removeEventListener(MouseEvent.ROLL_OUT, nombreDelSuscriptorARollOut);
      		

      y si no la volvemos a crear como ya sabemos con addEventListener.
      Esta forma evita la necesidad de crear una variable bandera, y es más “limpia” aunque conceptualmente sea mas compleja.

  2. Crear un controlados de animaciones con botyones. Algo parecido a esto:
    [gigya src=”https://dl.dropboxusercontent.com/u/3646945/newbeForever/esne/EjercicioBotonesAnimacion.swf” width=”550px” height=”300px”]
    Seguid los siguientes pasos:

    • Crear un símbolo con 5 animaciones marcadas con etiquetas. Es importante que todas las capas tengan nombre, que convirtáis en símbolo los gráficos antes de hacer las interpolaciones clásicas y que, al final, la biblioteca no tenga ningún símbolo con nombre automático o que no se utilice.
    • Las animaciones no tienen por qué ser iguales a las que os pongo como ejemplo
    • Exportadlo para actionscript con un nombre de clase.
    • Copiad el símbolo del botón del ejemplo que hicimos en clase (un botón sencillo como el que se pone de ejemplo en Eventos de ratón y teclado), pegadlo en la biblioteca y exportadlo para actionscript también.
    • Modificad el símbolo para que el campo de texto que lleva dentro sea dinámico (Si no os acordáis podéis ver los videos de Trabajar con texto con Flash y actionscript).
      Ponedle a dicho campo de texto un nombre de instancia, porque lo vais a necesitar.
    • Desde el programa principal, cread una instancia del símbolo de las animaciones.
    • Desde el programa principal:
      • Cread cinco instancias del botón
      • Cambiadle a cada uno el texto del campo de texto dinámico, para que tenga el nombre de la etiqueta de la animación que reproduce.
        Aquí tendréis que utilizar el nombre de instancia que le hayáis puesto al capo de texto dinámico (Ver el segundo video de Trabajar con texto con Flash y actionscript)
      • IMPORTANTE! Al estar utilizando campos de texto dinámicos, tendremos que utilizar la propiedad mouseChildren de los botones para que los eventos funcionen correctamente:
        				boton[i].mouseChildren = false;
        				

        Si no hacéis esto bien la propiedad target del evento MouseEvent.CLICK no contendrá la instancia del botón sino la del campo de texto y no os funcionará el programa.

      • Configurad los eventos de ratón para cada botón. Eso quiere decir que debeis acabar teniendo tres funciones suscriptoras y utilizar la propiedad target del evento para averiguar en una condicional sobre que botón se ha hecho click.
    • La función suscrita al evento MouseEvent.CLICK debe reproducir la animación de la instancia con las cinco animaciones, correspondiente al botón que se ha pulsado. Para ello podeis utilizar el contenido de su campo de texto dinámico

    Pistas:

    • Será necesario crear dos arrays, uno para los botones, y otro para las cadenas de texto que llevan dentro los campos de texto dinámico de los mismos.
    • lo más fácil para que no tengáis que utilizar un montón de condicionales es que esas cadenas de texto coincidan exactamente con los nombres de las etiquetas de las animaciones que quereis reproducir.

Para nota:

  • Repetir el ejercicio anterior pero utilizando botones como los del primer ejercicio, que se quedarán seleccionados mientras se está reproduciendo su animación:
    [gigya src=”https://dl.dropboxusercontent.com/u/3646945/newbeForever/esne/EjercicioBotonesSwitchAnimacion.swf” width=”550px” height=”300px”]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *