Variables verdadero/falso en Articulate Storyline. Caso práctico

por | 30 Jul, 2017 | Nivel Medio

Qué son las variables verdadero/falso y para qué sirven

Las variables verdadero/falso en Storyline o también llamadas booleanas, son aquellas variables cuyo valor solo puede tener un valor entre dos posibles. En algunos lenguajes de programación, esos valores también pueden ser 1 ó 0. Articulate Storyline toma los valores verdadero o falso como posibles para este tipo de variables.

Para generar una variable booleana el proceso es el mismo que para cualquier variable.

crear-variable-storyline

 

  1. En el panel Disparadores, hacemos click en manejar las variables del proyecto.
  2. Se abre el panel Variables, y pulsamos el botón añadir variable (+).
  3. Ponemos un nombre a nuestra variable.
  4. En tipo de variable, seleccionamos Verdadero/Falso.
  5. Le asignamos un valor por defecto. Sólo puede ser verdadero o falso.

Podemos dar un uso muy interesante a este tipo de variables. Podemos, por ejemplo, activar una variable de este tipo cuando se ha llegado a un punto de nuestro curso, o cuando se ha reproducido un vídeo o audio, o cuando se ha visitado una zona determinada. Luego, podemos condicionar acciones al estado de estas variables. En esta práctica vamos a utilizar estas variables en dos supuestos distintos.

Qué vamos a aprender en esta práctica

El propósito de esta práctica es crear una serie de interacciones que se van a desarrollar en cuatro diapositivas distintas. Cada una de ellas serán analizadas y añadiremos las acciones necesarias para un funcionamiento correcto. Puedes crear el tutorial con tus propios elementos o partir de un archivo base que te proporcionamos con los elemento, algunas acciones básicas y animaciones ya intefradas, listo para empezar el tutorial y que puedes descargarte AQUÍ.

Una vez finalicemos nuestra practica, el resultado debe ser como el puedes ver pulsando AQUÍ.

Diapositiva 1. Presentación

diapositiva-1-tutorial-booleanas

Esta slide contiene la presentación. Los elementos que la componen, como imágenes, texto, etc., aparecen con una animación de entrada. Queremos que cuando pulsemos el botón siguiente para acceder a la siguiente diapositiva, cada elemento desaparezca también con una animación de salida. Tendrá un aspecto más profesional.

En el archivo storyline que proporcionamos el botón retroceder está en estado invisible, y el de avanzar (siguiente), tiene asignada la acción ir a la siguiente diapositiva que cambiaremos.

vista-previa-storylineSi pulsas en Vista previa, veras que aparecen los objetos y al poco tiempo desaparecen. Esto es por las animaciones de salida. Así que vamos a pausar la línea de tiempo una vez hayan aparecido los elementos. En el panel Accionadores, creamos un nuevo accionador con estos ajustes:

 Los accionadores

accionador-pausar-storyline

  • Acción: Pausar línea de tiempo
  • Línea de tiempo: Esta diapositiva
  • Cuando: Tiempo, 1,25 sec

O sea, queremos que para que no se ejecuten (de momento) las animaciones de salida, esta diapositiva quede en pausa cundo la linea de tiempo alcance 1,25 segundos, tiempo suficiente para que se hayan mostrado los elementos y no comience a reproducirse aun las animaciones de salida que harán reaparecer los elementos.

Lo siguiente será cambiar el accionador del botón siguiente (avanti_btn) que tiene asignada la acción saltar a la siguiente diapositiva.

Así que damos doble click al accionador de este botón y configuramos:

  • Acción: Reanudar línea de tiempo
  • Línea de tiempo: Esta diapositiva
  • Cuando: Clics de usuario
  • Objeto: avanti_btn

accionador-reanudar-linea-tiempo

 Si haces una vista previa, verás que cuando pulsemos en el botón siguiente, efectivamente, los elementos desaparecen con animación pero no avanza a la siguiente diapositiva al desaparecer. Por lo tanto vamos a crear otro accionador para que cuando finalice la linea de tiempo, salte a la siguiente diapositiva.

Creamos nuevo accionador y ajustamos:

  • Acción: Saltar a la diapositiva
  • Diapositiva: siguiente diapositiva
  • Cuando: Finaliza la linea de tiempo
  • Objeto: 1.1 presentacion (que es esta capa)

Con esto habremos concluido con la primera diapositiva.

Haz una vista previa y testea.

 Diapositiva 2. El vídeo

diapositiva-2-captura-storyline

En esta segunda diapositiva tenemos un video que se reproduce nada más aparecer. Nuestra intención es que sólo podamos avanzar cuando que se haya reproducido completamente. Pero sólo una vez. Si volvemos a esta diapositiva más tarde, queremos que recuerde que ya se ha visto el video y ya no tengamos que esperar si queremos avanzar. Este es un vídeo corto, pero imagínate un video de 10 minutos que tenemos que ver cada vez que visitemos esta diapositiva.

No podemos avanzar porque el estado inicial del botón de avance lo hemos configurado como oculto.

estado-boton-oculto

Así que creamos nuestra primera variable que controlará el proceso.

crear-variable-storyline

La variable

  • En el panel Disparadores, hacemos click en manejar las variables del proyecto.
  • Se abre el panel Variables, y pulsamos el botón añadir variable (+).
  • Ponemos un nombre a nuestra variable, por ejemplo, video.
  • En tipo de variable, seleccionamos Verdadero/Falso.
  • Le asignamos un valor por defecto. Queremos que sea de entrada falso.

 Cambiando la variable

Ya tenemos nuestra variable. Ahora vamos a crear el accionador que cambiará el valor de la variable a verdadero cuando se reproduzca el video totalmente, así que nuevo accionador y:

  • Acción: Ajustar variable
  • Variable: video
  • Operador: = Asignación
  • Valor: Valor, Verdadero
  • Cuando: Se completan los medios
  • Objeto: Video 1 – Mercedes – 2212.mp4

Cambiando el estado del botón

Este accionador solo cambia el valor de la variable al terminar el video, ahora vamos a crear otro que cambie el estado del boton a normal cuando el video se haya reproducido (el valor de la variable entonces será verdadero).

Nuevo accionador y ajustamos de esta manera:

  • Acción: Cambiar estado de
  • En un objeto: avanti_btn
  • Al estado: = Normal
  • Cuando: Cambios de variable
  • Variable: video

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

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

condiciones-accionadores-storyline

En la imagen de la izquierda puedes ver el panel de condiciones para que compruebes como debes añadir la condición.

Esta acción activará el estado normal del botón avanzar (siguiente) a la siguiente diapositiva como puedes comprobar si haces una vista previa.

Sin embargo cada vez vuelvas a visitar esta diapositiva tendrás que volver a tragarte el video porque esta accion solo se produce cuando hay un cambio de variable y ese cambio ya se produjo antes. Si no lo has comprobado antes, haz una nueva vista previa para que veas a lo que me refiero.

Entonces necesitamos una acción que compruebe el valor de la variable y cambie el estado si es verdadero.

 Comprobando el valor de la variable

 

copiar-accionador-storylinePara no tener que crear el accionador desde el principio, copia(1) y pega(2) el accionador que acabas de crear y modifícalo de esta manera:

• Acción: Cambiar estado de

• En un objeto: avanti_btn

• Al estado: Normal

• Cuando: Comienza la linea de tiempo

• Objeto: 1.2 video

En la condicion:

• video == a Verdadero

 Sólo hemos cambiado cuando se produce para que cada vez que visitemos esta diapositiva compruebe la variable y actúe en función del valor.

Haz vista previa y mira ahora.

Diapositiva 3. Capas obligatorias

 

En esta diapositiva no se puede avanzar a la siguiente si el alumno no ha pasado por todas las capas que componen esta diapositiva.

Es muy similar a la diapositiva anterior, crearemos una variable que controlará esta diapositiva y pondremos la acción de cambiar el valor en la última capa que debe visitar el usuario.

La variable

  • En el panel Disparadores, hacemos click en manejar las variables del proyecto.
  • Se abre el panel Variables, y pulsamos el botón añadir variable (+).
  • Ponemos modulo_visto como nombre a nuestra variable.
  • En tipo de variable, seleccionamos Verdadero/Falso.
  • Le asignamos el valor por defecto: falso.

 Cambiando la variable

Ya tenemos nuestra segunda variable. Ahora vamos a crear el accionador que cambiará el valor de la variable a verdadero cuando se hayan visto todas las capas, ¿Cómo sabemos que ha visto todas las capas? Cuando se visita la última capa (capa phone) así que ahí, en la última capa ponemos nuevo accionador:

  • Acción: Ajustar variable
  • Variable: modulo_visto
  • Operador: = Asignación
  • Valor: Valor, Verdadero
  • Cuando: SComienza la linea de tiempo
  • Objeto: phone

Y al igual que hicimos en la diapositiva 2 del vídeo, vamos a crear dos accionadores, para el cambio de estado del botón. Uno para que sea visible cuando cambie el valor y otro para que compruebe el valor y lo haga visible si es verdadero cuando visita la diapo de nuevo:

accionadores-diapositiva-storyline

Diapositiva 4. Finalización

diapositiva-final-storyline

 

En esta diapositiva no hay nada que resaltar, échale un vistazo si quieres para ver que animaciones he usado y cómo se ha estructurado la linea de tiempo.

Si tienes cualquier inquietud o hay algo que no tienes claro no dudes en poner un comentario. Y si deseas que hagamos algun tutorial específico, ¡solicítalo!

A continuación, el videotutorial.