Descripción del tutorial

En esta práctica vamos a aprender cómo activar trayectorias de movimiento en Articulate Storyline que se desencadenarán cuando deseemos.

Te recomendamos que te descargues el archivo base para seguir correctamente esta práctica. Puedes descargarte el archivo pulsando AQUÍ.

Los elementos que necesitamos y que están en el archivo base son:

– Un fondo que en nuestro caso es de un paisaje urbano. Debe sobrepasar el ancho de nuestro escenario ya que lo animaremos de izquierda a derecha y viceversa.

– Una imagen que también vamos animar. Conviene que sea en formato png transparente para que mezcle bien con el fondo.

-Dos botones para activar las trayectorias de movimiento. Hemos elegido dos simples formas de flecha a izquierda y derecha.

Con estos elementos queremos que al pulsar el botón de la izquierda el chico en bicicleta se desplace hacia a la izquierda y que haga lo propio cuando pulsemos el botón de la derecha.

También supeditaremos el estado de la imagen del chico al sentido de la animación. Y como guinda haremos que también se desplace el fondo en sentido contrario a la animación de nuestro ciclista para dar más sensación de movimiento.

Puedes ver cómo debe quedar cuando terminemos AQUÍ.

Cómo activar trayectorias de movimiento en Articulate Storyline. Añadiendo los desplazamientos del chico en bici

Lo primero que haremos será generar las trayectorias de movimiento asociadas a la imagen del chico de la bici. Así que seleccionamos la imagen del ciclista, seleccionamos la pestaña ANIMACIONES (1), mantenemos pulsado la funcionalidad Agregar trayectoria de desplazamiento (2) y elegimos líneas del desplegable (3).

Fíjate en el panel disparadores que te ha creado un accionador nuevo.

Si haces una vista previa podrás comprobar que se genera automáticamente una animación y que, además la animación se crea en sentido vertical.

Esto lo provoca el accionador que se ha creado así que no lo necesitamos. Bórralo.

Lo que nosotros queremos es que la animación se active cuando pulsemos en los botones. De todas formas, aunque hayamos borrado el accionador la trayectoria se ha creado.

Selecciona de nuevo el ciclista y, sin salir de la pestaña ANIMACIONES, clica en Opciones de trayectoria y elige A la izquierda, como puedes ver en la imagen.

Agrega una nueva trayectoria como has hecho antes pero en opciones de trayectoria elige derecha. No olvides borrar el accionador que genera automáticamente.

Los primeros accionadores

Ahora vamos a crear el primer accionador. Pulsamos la flecha de la izquierda y en Disparadores, añadimos accionador que configuramos como ves en la imagen.

• Acción: Mover
• Objeto: Chico
• Trayectoria: Trayectoria de movimiento de la línea 1 (la que creaste primero)
• Cuando: Clics de usuario
• Objeto: Flecha izquierda

Haz lo mismo con la flecha de la derecha pero en trayectoria elige la segunda trayectoria que creaste (hacia la derecha)

Haz un previo

Se ejecutan las animaciones al pulsar pero el chico siempre esta en el mismo sentido y la animación siempre empieza desde el mismo lugar.

Punto de inicio relativo

Para que la animación se reanude desde el punto en el que se quedó y no desde el que se le marcó en el inicio, vamos a activar Punto de inicio relativo. Seleccionamos el chico y ANIMACIONES > Opciones de trayectoria > Punto de inicio relativo.

Haz un previo de nuevo y verás que la animación va mejorando.

Ajustar el segundo estado del ciclista

Si seleccionas el ciclista y pulsamos en estados, verás que tiene un segundo estado, donde he copiado y pegado la imagen del primero y la he volteado horizontalmente.

Resumiendo, el segundo estado es el ciclista en sentido inverso.

A este segundo estado le hemos llamado derecha.

Por lo tanto creamos dos nuevos accionadores desde el panel Disparadores.

Selecciona la flecha de la izquierda, crea accionador y configura:

• Acción: Cambiar el estado de
• Objeto: Chico
• Al estado: normal
• Cuando: Clics de usuario
• Objeto: Flecha izquierda

Ahora Selecciona la flecha de la derecha, crea accionador y configura:

• Acción: Cambiar el estado de
• Objeto: Chico
• Al estado: derecha
• Cuando: Clics de usuario
• Objeto: Flecha derecha

Haz un previo de nuevo y verás que la animación mejora aún más.

La guinda. Mover el fondo

Y por fin, vamos asignar a las flechas dos nuevos accionadores, que harán que cuando el ciclista se desplace a la derecha, el fondo lo haga a la izquierda y viceversa. Primero crea las trayectorias de manera idéntica a cono lo hiciste para el ciclista.

Recuerda: Selecciona el fondo y…

ANIMACIONES > Agregar trayectoria de desplazamiento > Líneas. Y luego Opciones de trayectoria > izquierda

ANIMACIONES > Agregar trayectoria de desplazamiento > Líneas. Y luego Opciones de trayectoria > Derecha

¡Borra los accionadores que se generan!

Estos son los accionadores:

Flecha de la izquierda, selecciona,crea accionador y configura:

• Acción: Mover
• Objeto: Paisaje
• Trayectoria: Trayectoria de desplazamiento de la línea 4 (o la que se desplace a la derecha)
• Cuando: Clics de usuario
• Objeto: Flecha izquierda

Flecha de la derecha, selecciona,crea accionador y configura:

• Acción: Mover
• Objeto: Paisaje
• Trayectoria: Trayectoria de desplazamiento de la línea 3 (o la que se desplace a la izquierda)
• Cuando: Clics de usuario
• Objeto: Flecha derecha

Recuerda asignarle al fondo el punto relativo. ANIMACIONES > Opciones de trayectoria > Punto de inicio relativo

¡Y habrás terminado el tutorial!

Podríamos añadir una variable para evitar que el ciclista y el fondo se desplacen más de la cuenta (en la demo final está creado). Pero eso ya sería material para otro tutorial.

Si tienes interés en que hagamos algún tutorial específico, háznoslo saber y tal vez nos animemos.

En breve, el videotutorial.