Preparamos para ti un tutorial para utilizar Javascript en la manipulación de elementos en un proyecto de Captivate.
Te presentaremos cómo mostrar elementos, ocultarlos, sacar alertas, deshabilitar botones, avanzar o retroceder de página e ir a una página específica.
El tutorial
Si quieres un resumen, aquí te lo presentamos.
Cómo mostrar u ocultar una imagen
Se presentan unos botones con su nombre identificador y tres diapositivas. En la última hay una imagen al centro que se llama “foto” y está oculta (deshabitada).
Estos son los pasos para mostrarla:
- Seleccionar un botón y en las acciones, en JavaScript, elegir Ejecutar JavaScript.
- El código será en este y el resto de los casos identificado con cp de Captivate y a continuación se escribe la instrucción, que en este caso es show.
- A continuación se abre paréntesis y entre comillas se pone el nombre del objeto, en este caso “foto”.
- Se cierra paréntesis y se escribe punto y coma: cp.show(“foto”);
Estos son los pasos para ocultarla:
- Seleccionar “Ejecutar Javascript”.
- En la ventana de Javascript y colocar cp, con hide y el nombre del elemento que se va a ocultar.
- Se guardan los cambios.
- Para ver los resultados se exporta el proyecto o se previsualiza en HTML5.
Como se puede ver, no se visualiza la imagen, pero al presionar “Mostrar” aparece, y luego se oculta al clic del botón “Ocultar”.
Cómo colocar una alerta
Para insertar una alerta, sigue estos pasos:
- Ejecutar Javascript.
- Recordar siempre poner “cp” y, en este caso, “alert”.
- Poner el mensaje que queremos mostrar: “Hola mundo”.
- Cerrar el paréntesis, escribir punto y coma y aceptar: cp.alert(“Hola mundo”);
Veamos otra funcionalidad. Ahora al presionar deshabilitar ya no se podrá utilizar la alerta. Se siguen estos pasos:
- En el botón, al ejecutar Javascript y voy a colocar cp.disable y el nombre del elemento, que se llamaba “botonAlerta”.
- La instrucción queda cp.disable(“botonAlerta”);
La alerta funciona correctamente y si presiono deshabilitar ya no es posible presionar. No tiene nuestro estado de deshabilitado, pero no me permite hacerlo.
Cómo colocar un botón para ir a la diapositiva siguiente y anterior
- Dar clic en ejecutar Javascript.
- Escribir cp.goToNextSlide();
- Es muy importante escribirlo exactamente como se muestra, con altas y con baja. A esto se le llama estructura de camello, que implica que cada que termina una palabra, la que sigue, es con inicial mayúscula.
Para regresar a la diapositiva previa, se siguen estos pasos:
- Abrir Javascript.
- Poner cp.goToPreviousSlide();
- Se guarda el proyecto y ya se puede visualizar.
Cómo ir a una pantalla en particular
Cuando sea preciso saltar a una pantalla en específico también se puede hacer con JavaScript. En este caso, si quiero ir a la diapositiva 3, en programación normalmente se inicia con 0, eso significa que la página 1 no es la página 1, sino la página 0; entonces la numeración de páginas sería cero, 1, 2, etcétera.
Ahora seguimos estos pasos.
- Damos clic en el botón Página 3.
- En Javascript escribimos cpCmndGotSlide=2; (en este caso pusimos 2, porque queremos irnos a la página número 2 que en nuestro proyecto es la número 3). En este caso es importante no poner el p unto después de cp.
- Se guarda y ya se puede visualizar.
Esperamos que este tutorial les sirva para sus proyectos. No olviden seguirnos en redes sociales para conocer más tips acerca de Adobe Captivate y Storyline. Muchas gracias por su tiempo. ¡Hasta luego!
Si bien en este tutorial veremos específicamente los temas que acabamos de mencionar, hay otras opciones más de Javascript que Captivate nos permite trabajar. Solo descarga este PDF.
