Estados y animaciones en Articulate Storyline

por | 26 Jul, 2017 | Nivel Básico

Una introducción a los estados y animaciones en Articulate Storyline.

 En este tutorial vamos a repasar de forma básica los estados y animaciones en Articulate Storyline. También añadiremos animación de entrada y de salida. Queremos que al pasar el cursor del ratón por cada objeto aparezca un texto animado. Además,  desaparecerá al salir el cursor de la zona activa. También veremos lo práctico que puede resultar el uso de la función copiar formato. Puedes echarle un vistazo a lo que pretendemos conseguir aquí.

Empecemos.

Importar los objetos

 1.- Creamos un nuevo proyecto. Si quieres partir de un archivo como el nuestro, sin el menú ni los botones de avance y retroceso. Puedes descargarte el archivo base ya preparado: estados y animaciones inicio.

2.- Insertamos los 5 objetos a nuestro escenario. puedes usar los objetos que tú quieras o descárgate los que yo he utilizado aquí: objetosInsertar contenido/estados y animación/objetos. A continuación creamos un rectángulo bajo los objetos, que nos va a servir como referencia para ubicar los textos que pondremos en el estado float de cada objeto.

 Insertar-imagen-en-storyline

 Cuando estemos en el cuadro de diálogo de insertar imagen seleccionamos los cinco objetos para importarlos a la vez.

3.- Seleccionamos todas las imágenes y reducimos un poco, manteniendo pulsada la tecla mayúscula para restringir proporciones.

4.- Desplazamos la primera a la izquierda y la última a la derecha y alineamos:

Formato >> Alinear >> Distribuir de manera horizontal.

alinear objetos storyline

Añadiendo el estado float a nuestro primer objeto

 5.- Seleccionamos la primera imagen, en el panel de línea de tiempo pulsamos en Estados >> Editar estados y añadimos estado Flotar, (esto es, cuando pasamos el ratón por él). Seleccionamos el estado flotar del objeto.

Editar datos en storyline

Los efectos al estado flotar

 6.- En el estado flotar, aplicamos un efecto a la imagen, añadimos texto (el nombre del objeto está bien) y animación de entrada y de salida a este texto. Pulsamos en vista previa para ir comprobando el resultado.

7.- Una vez tenemos el primer objeto terminado, salimos de modo edición de estado, seleccionamos el objeto y hacemos *doble click sobre el botón copiar formato en la pestaña de inicio. Esto copiará el formato en el portapapeles y nos permitirá aplicarlo en cada uno de los objetos restantes pulsando sobre ellos.

*¿Por qué doble click y no simple click? por que queremos aplicar el formato a varios objetos. Si no, habría que ir pulsando uno a uno cada vez que queremos aplicar un formato.

copiar formato storyline

 8.- Ahora, por último, cambiamos y reubicamos los textos del segundo estado (float) en cada objeto, será más rápido ya que mantiene las propiedades del primer objeto.

Si prefieres ver este ejercicio en formato videotutorial, aquí lo tienes: