Crear un botón de alternancia en Articulate Storyline

por | 7 Ago, 2017 | Nivel Medio

El botón de alternacia

En la práctica de hoy vamos a crear un botón de alternancia en Articulate Storyline. Crearemos una variable para hacer un seguimiento al comportamiento del botón. Esto es, necesitamos comprobar si el estado de la variable tiene valor verdadero o falso. Dependiendo de ese valor, se mostrará el estado de la imagen de la habitación encendida o apagada.

Por lo tanto vamos a necesitar:

  • Una imagen con dos estados.
  • Un botón, o algún elemento que podamos pulsar. Nosotros vamos a usar un punto clave.
  • Una variable.
  • 3 accionadores.

Te proporcionamos el archivo base por para ahorrarte tiempo. Puedes descargarlo pulsando AQUÍ.

También puedes ver el resultado final de esta práctica AQUÍ.

Empezamos.

La imagen. Estados

 

estados-habitacion

Como puedes ver si abres el archivo base, la imagen de la habitación tiene dos estados. El estado normal tiene encima un rectángulo con una opacidad del 20% que oscurece la imagen. El Segundo estado es el estado encendido y muestra la imagen tal como es.

Necesitamos un botón o algo parecido que cambie el valor de la variable al contrario al pulsar. O sea, que cuando pulsemos si el valor de la variable es verdadero, la cambie a falso y si es falso cambie a verdadero.

Creamos una variable

Así que lo primero que haremos será crear la variable(1,2). La llamamos luz (3 )y en tipo (4) seleccionamos verdadero/falso. El valor lo dejamos como falso (5). Si quieres saber algo más de las variables puedes leer este post. Y aquí tienes otra práctica en la que se usan variables verdadero/falso.

crear-variable-storyline

Insertamos punto clave

insertar-punto-claveUn punto clave es un área interactiva que podemos ubicar en cualquier parte de nuestro escenario y que no es visible para el usuario, pero sí «clicable». Podiamos haber elegido una imagen o un botón para crear la zona activa que alternará el valor de la variable. El resultado habría sido el mismo.

De modo que añadimos el punto clave desde la pestaña Insertar >> Controles >> y elegimos un punto clave de los tres disponibles (circular, rectangular y forma libre). Nosotros nos hemos decantado por forma libre.

Creamos entonces el punto clave donde las lamparas (o donde desees) y le asignamos un accionador.

Este accionador será el encargado de alternar entre el valor verdadero y falso de la variable que hemos creado en el apartado anterior. Y cambiará el valor cada vez que pulsemos sobre esta zona.

El accionador de la alternancia

Por lo tanto, con el punto clave seleccionado, creamos el accionador .

alternar-variable

 

  • Acción: Ajustar variable
  • Variable: Luz
  • Operador: = SIN asignación
  • Cuando: Clics de usuario
  • Objeto: Punto clave 1

Cada vez que pulsemos sobre el punto clave, cambiará el valor de la variable a verdadero si es falso y a falso si es verdadero.

Los otros dos accionadores

Y ahora sólo nos queda crear los dos accionadores que determinarán el estado de la imagen general. O sea, que cambie a un estado u otro dependiendo de si el valor de la variable es verdadero o falso.

Iluminar la habitación

Este es el accionador que debes crear para que cambie el estado de la imagen a iluminado:

cambiar-erstadao-a-luz

 

  • Nuevo accionador y ajustamos de esta manera:
    • Acción: Cambiar estado de
    • En un objeto: habitacion
    • Al estado: = encendido
    • Cuando: Cambios de variable
    • Variable: luz

    Hacemos click en el botón mostrar condiciones y a continuacion en el signo + y añadimos:

    • If: luz
    • Operador: == igual a
    • Tipo: valor
    • Valor: Verdadero

Apagar la habitación

Y por último creamos el accionador para apagar la luz. Podemos copiar (1) el accionador creado para encender y pegar (2) modificando un par de valores como puedes ver en la imagen:

cambiar-erstadao-a-apagado

Y esto es todo. En unos días, el vídeo.