En esta guía de 20 minutos te mostramos algunas funcionalidades de Storyline 360, una de las herramientas de la suite Articulate 360. Vamos a hacerlo a través de un proyecto bastante simple, desde cero hasta la publicación del curso.
El autor de estos videos se llama Patricio Bustamante y lleva años de trabajo con las herramientas de Articulate. Patricio tiene también otros cursos que te mencionamos al final de esta guía.
La idea de esta primera serie es ayudarte a entender cómo funciona el software. Si querés preguntarnos cómo crear alguna interacción específica o lo que te imagines para tu curso, podés hacelo en los comentarios.
Si estás evaluando la adquisición de la suite Articulate 360 y querés información de precios o condiciones de venta, te invitamos a contactarnos.
1. Introducción
Articulate Storyline hace posible el desarrollo de cursos web con un alto nivel de personalización. En un nivel avanzado, con Storyline se pueden crear juegos de aprendizaje o historias que permiten distintos niveles de avance.
No vamos a llegar tan lejos ahora, pero esta versatilidad tiene que ver con el gran conjunto de funcionalidades que ofrece Storyline 360 en relación a Rise 360, otra aplicación para crear cursos que es parte de la misma suite.
2. Creación de la primera pantalla
Al iniciar un proyecto nuevo, vamos a empezar siempre con una pantalla en blanco. Como este mini-proyecto tiene un menú de temas, vamos a crear este menú en la primera pantalla:
Lo que hemos visto:
- Cómo darle formato al curso (4:3 o 16:9 en general) y cómo asignarle un fondo común a todas las diapositivas de un curso.
- Cómo agregar formas, transparencias y tipografías para destacar algunos sectores de la pantalla.
- Cómo crear botones a partir de imágenes, que luego llevarán al usuario a cada uno de los temas del curso.
3. La línea de tiempo
La línea de tiempo o el timeline de cada diapositiva está inspirada en la línea de tiempo de PowerPoint. Si alguna vez trabajaste con animaciones en Powerpoint, probablemente sepas de qué estamos hablando.
Ahora vamos a incorporar imágenes y un personaje a nuestro mini curso:
Las imágenes que usamos en este ejemplo pueden encontrarse en la Librería de Recursos o Content Library de Articulate 360. Cabe aclarar que la interfaz de Storyline está en español desde 2019 y que la disponibilidad de personajes es mucho mayor en 2024.
La versión actual de Storyline 360 ofrece más de 9 millones de recursos para usar: personajes ilustrados o fotografiados, imágenes, íconos y videos libres de derechos. En cuanto a los personajes, su funcionalidad plena se alcanza al complementarlos con los Estados y con los Accionadores, conceptos que veremos en las próximas lecciones.
4. Uso de los botones
Vamos a agregar una segunda diapositiva a nuestro curso y en esta diapositiva vamos a crear botones, aunque por el momento esos botones no generarán ninguna acción:
5. Creación de Capas en Storyline
Ahora nuestro objetivo será que al tocar uno de los botones -el que dice “Corazón”- se vea una imagen grande del corazón y se escuche el audio que lo describe.
Para lograr esta simple interactividad primero te vamos a presentar a las Capas (layers) y a los Accionadores (triggers).
Hasta aquí hemos visto:
- La línea de tiempo. Por un lado representa a los objetos en el tiempo: el momento en que aparecen en la diapositiva y el momento en que se van. Por otro lado, los objetos que están más arriba en la línea de tiempo pueden tapar a los que están más abajo.
- Las capas. Son como otras diapositivas dentro de la misma diapositiva. Se superponen o se combinan con los elementos de la diapositiva base en la que se crean. Cada capa tiene su propia línea de tiempo y sus propios objetos.
- Los accionadores. Nos permiten asignar acciones a los objetos o a las capas. Por ejemplo “que la capa A aparezca si hago clic en el objeto B” o “que el objeto C se mueva hasta el punto D cuando pase X tiempo”.
6. Cambio del estado de los objetos
Continuamos desarrollando la interactividad en nuestro proyecto de Articulate Storyline. Ahora vamos a incorporar el concepto de estado.
Un objeto puede tener diferentes estados, por ejemplo: visible, invisible, resaltado, deshabilitado, etc. Estos distintos estados del objeto pueden mostrarse al cambiar alguna condición, porque ha pasado un tiempo o porque ha ocurrido una acción del usuario. Es decir, un objeto puede cambiar de estado porque se ha activado un accionador:
Lo que acabamos de ver:
- Hemos creado una capa que se dibuja por encima de nuestra capa de base. A esa capa le hemos dibujado un círculo.
- Reemplazamos el color del círculo por una imagen del corazón. Luego dibujamos dos líneas que dan el efecto de zoom que sale desde el corazón pequeño, aunque ese corazón pequeño está en la capa base.
- Insertamos un audio pre-grabado, que aparece en la línea de tiempo de la capa como un objeto más. El audio aparece junto al resto de los objetos. Es decir que esta capa tiene ahora un corazón, dos líneas rectas y un audio.
7. Los Accionadores o disparadores
Ya creamos nuestra capa de base con sus botones. Ya creamos nuestra capa superior con su corazón grande y su audio. Sin embargo, ambas cosas están desconectadas: cuando queremos ver cómo va quedando el proyecto, solo aparece la capa base.
¿Qué es lo que falta para conectar ambas cosas? ¿Qué es lo que hará que la capa superior aparezca, con su corazón y su audio, al hacer clic en uno de los botones? Lo que conectará una cosa con la otra es el accionador. Una simple programación “sin código” que solo nos pide que vayamos eligiendo las opciones que se nos presentan en un menú desplegable:
¡Listo! Ahora la capa está conectada con el botón. Gracias al accionador, al hacer clic en el botón se mostrará la capa y se escuchará su audio.
El agregado de animaciones es visualmente atractivo y existe la tentación de trabajar de inmediato en las animaciones, es una de las cosas más sencillas de hacer en Storyline. Sin embargo, desde este curso te recomendamos con vehemencia completar todo tu armado de capas y objetos antes de dedicarte a las animaciones.
8. Navegar por diapositivas
A esta altura estarás entendiendo cómo se conectan las cosas: vimos cómo las capas se pueden usar para hacer aparecer o desaparecer composiciones sobre una diapositiva. Vimos que a cada objeto se le puede asignar una animación distinta y entendimos cómo los accionadores van conectando las cosas entre sí.
Sin embargo, ¿para que sirven los estados al fin de cuentas? Hasta ahora no hemos hecho nada que involucre estados. Lo haremos en este segmento:
Y hasta aquí llegamos con este primer ejercicio de interactividad de Articulate Storyline.
Hemos puesto en práctica los cuatro conceptos principales de interactividad:
- Objetos en una línea de tiempo.
- Una capa que aparece y se va.
- Un disparador que genera la acción.
- Un cambio de estado que le muestra al usuario que hizo un clic sobre una de las opciones.
9. Juego para aprender Inglés
Este es uno de los proyectos que se ve en detalle en el Curso Avanzado, que incorpora algunos elementos de gamificación y profundiza en el tema de variables.
En términos generales, las variables son recipientes que contienen un valor. Como ese valor no es siempre el mismo (y por eso son variables) se definen para cada proyecto de Storyline con un valor inicial y luego pueden ser modificadas por diferentes accionadores. Los accionadores que modifican las variables casi siempre tendrán el formato “ajustar la variable Equis a un valor Zeta, si es pasa tal cosa con tal objeto.”.
Los distintos tipos de variables están muy bien explicados en el Curso Avanzado, pero para que tengas una idea te permite lograr algo como ésto:
Más cursos en español y en inglés
Si llegaste hasta aquí y estás interesado en profundizar tus conocimientos en Articulate Storyline, mirá la guía más completa para seguir aprendiendo en este link.
Resumen de términos para descargar
Si querés descargar una guía breve de lo básico para entender Articulate Storyline, te dejamos este resumen de los 20 términos principales de Storyline 360 en español.
6 respuestas
Buenos días,
Quisiera saber cómo obtener el cupón descuento de 50% para realizar el curso de Storyline avanzado.
Gracias, un saludo.
Gabriel, éste es el precio con el cupón aplicado (USD 89) ya que el precio original es de USD 180, gracias.
¿El curso solo se puede pagar con tarjeta de crédito?, ¿aceptan tarjetas de prepago como mach?
Hola Carolina, gracias por consultar. Si tu tarjeta es aceptada en la ventana de pagos, no hay problema.
Hola, se puede pagar con paypal?
Hola Vanesa, sí se puede, gracias por la consulta.