Storyline 360: API de JavaScript avanzada

¡Atención, entusiastas de JavaScript! Prepárate para desbloquear una potente interactividad con la característica avanzada de la API de JavaScript de Storyline 360. Obtenga un control preciso sobre las propiedades de los objetos, active animaciones personalizadas y cree efectos avanzados como el paralaje. Sigue leyendo para obtener más información.

• Usa la API avanzada de JavaScript
• Explore los fragmentos de código de JavaScript
• Pruebe un ejemplo de interacción
• Haga que las interacciones sean accesibles
• Comprenda la compatibilidad

Utilice la API avanzada de JavaScript

Cuando se trata de crear interacciones potentes mediante la API avanzada de JavaScript, tienes opciones. Puedes modificar las propiedades de los objetos, crear animaciones personalizadas, aplicar fragmentos de código y mucho más. Explora las posibilidades que aparecen a continuación.

Encuentra el ID del objeto

Para empezar, primero tendrás que obtener el ID del objeto. Busca esa información mediante cualquiera de los siguientes métodos:

• Haga clic con el botón derecho en el objeto y seleccione el icono de copia. El identificador del objeto que no esté entre paréntesis se copiará en el portapapeles.

• En el editor de JavaScript, selecciona tu objeto en la flecha desplegable Referencia de objeto y, a continuación, haz clic en Añadir. En la object() función se hace referencia al ID del objeto.

Definir propiedades de objetos

Una vez que tenga el ID del objeto, puede hacer referencia a él para definir cualquiera de estas propiedades del objeto:

• Posición: x y (ubicación horizontal/vertical)
• Escala: scaleXscaleY, scale (0— 100%)
• Rotación: rotation (0—360°)
• Opacidad: opacity (0— 100%)
• Orden de profundidad: depth
• Tamaño:width, height (solo lectura)
• Estado: state (establecido por nombre)

Nota: Debe utilizar la sintaxis de puntos para definir las propiedades de posición, rotación y escala del objeto. Por ejemplo:

const ObjectName = object('ObjectID'); ObjectName.rotation = 45; // Rotate object 45 degrees ObjectName.x = 0; // Move the object all the way to the left of the screen ObjectName.scaleX += 10; // scale up by 10%

Ajuste las funciones principales

Puede utilizar cualquiera de las siguientes funciones principales:

Cursor del ratón

• Ubicación del cursor:pointerX(), pointerY()
• Ocultar el cursor: hidePointer()
• Mostrar el cursor: showPointer()

Dimensiones de la diapositiva

• slideWidth()
• slideHeight()

Variables (anteriormente GetVar y SetVar)

• Recupera el valor de una variable: getVar('name')
• Defina el valor de una variable: setVar('name', value)

Actualizaciones

• Ejecuta una función de forma continua a 60 fps: update(callback)

const ObjectName = object('ObjectID'); update(() => {   // move the ObjectName down if it's y is less than   // the height of the slide   if (ObjectName.y < slideHeight()) {     ObjectName.y1 += 1;   } });

Explore los fragmentos de código de JavaScript

Los siguientes fragmentos de código JavaScript comunes también se pueden aplicar al ID de un objeto.

Rota un objeto en función de una variable Controla la rotación de un objeto mediante una variable. object('ObjectID').rotation = getVar('VariableID');

Siga el cursor (ratón o toque) Sincronice un objeto con el cursor. const ObjectName = object('ObjectID'); update(() => {   // use 1/2 the width and height to center the object     ObjectName.x = pointerX() - ObjectName.width / 2;   ObjectName.y = pointerY() - ObjectName.height / 2; });

Apunte al cursor Oriente un objeto hacia el cursor. const ObjectName = object('ObjectID'); update(() => {   const dx = myObject.x + ObjectName.width / 2 - pointerX();   const dy = myObject.y + ObjectName.height / 2 - pointerY();   const angle = Math.atan2(dy, dx);   ObjectName.rotation = angle / Math.PI * 180; });

Movimiento de paralaje Crea un efecto de paralaje moviendo un objeto en función de un porcentaje de la posición del cursor. Incluso puedes asignarle un desplazamiento opcional, como en el fragmento de código que se muestra a continuación, que sería de 200 píxeles. const ObjectName = object('ObjectID'); update(() => {   ObjectName.x = 200 + pointerX() * .25; });

Mueva para reducir un objeto a 500 píxeles en la x. const ObjectName = object('ObjectID'); update(() => {   ObjectName.x += (500 - circle.x) / 12; });

Animación Utilice la función nativa de JavaScript, una API de animación con muchas animate funciones, para crear animaciones. Las animaciones creadas con esta función no alteran las propiedades descritas anteriormente. En cambio, estas animaciones funcionan de forma independiente dentro de su propio ámbito y están diseñadas para ser animaciones estáticas modernas en la escala de tiempo. Para que las animaciones se puedan buscar en la escala de tiempo, envuélvalas en la addToTimeline función: const ObjectName = object('ObjectID'); addToTimeline(   rect.animate(     [       { transform: 'translateX(0px)' },       { transform: 'translateX(200px) rotate(45deg)', filter: 'blur(4px)' }     ],     {       duration: 1000, // Animation duration in milliseconds       easing: 'ease-in-out', // Easing function       fill: 'forwards' // Keep the final state after animation     }   ) ); Más información sobre la función de animación.

Acceso a Hojas de estilos en cascada (CSS): modifique el CSS de un objeto con la propiedad style. Si bien algunas propiedades no se aplican a determinados objetos, las propiedades de CSS, como filtrar y transformar, ofrecen un control preciso del estilo. // add a 10 pixel blur to an object object('ObjectID').style.filter = 'blur(10px)'; Obtén más información sobre los filtros CSS.

Pruebe un ejemplo de interacción

¿Quieres ver lo que es posible hacer con la API avanzada de JavaScript? Consulta este ejemplo. Puede explorar el código del archivo de proyecto haciendo clic en el enlace de descarga situado en la esquina superior derecha de la interacción.

Haga que las interacciones sean accesibles

Siga estos consejos para que sus interacciones sean más accesibles:

• Utilice la interactividad de forma estratégica. Evita usar animaciones y efectos exclusivamente decorativos. Deben tener un propósito claro, como guiar a los alumnos a través de un proceso o centrarse en un detalle específico.
• Considera el momento oportuno. Mantenga la duración de la animación y los efectos en menos de cinco segundos. La interactividad que se inicia automáticamente y dura más de cinco segundos debe permitir a los alumnos pausar, detener u ocultar la interacción para cumplir con los estándares de accesibilidad. (2.2.2 Pausar, detener, ocultar)
• Otorgue el control a los alumnos. Proporcione una opción para desactivar las animaciones y los efectos. Por ejemplo, puedes usar una variable de verdadero/falso para comprobar si un alumno quiere ver la interactividad. Luego, según la elección del alumno, aparecerá una capa con interactividad o una capa diferente sin interactividad. (2.3.3 Animación a partir de interacciones)
• Cumpla con el tamaño objetivo mínimo. Los objetos en los que se puede hacer clic con un tamaño inferior al objetivo mínimo de 24 píxeles de ancho por 24 píxeles de alto pueden dificultar la interacción precisa para los alumnos. Asegúrese de que los elementos interactivos cumplan con el tamaño objetivo mínimo o que tengan suficiente espacio a su alrededor. (2.5.8 Tamaño objetivo [mínimo])
• Manténgalo simple. La interactividad rápida, compleja o no esencial puede aumentar la carga cognitiva. Para mejorar la accesibilidad, sincronice sus interacciones con el texto o la narración, permita a los alumnos desactivar la interactividad y asegúrese de que las interacciones se ajusten a los objetivos de aprendizaje.

Comprenda la compatibilidad

La API JavaScript avanzada es exclusiva de Storyline 360 a partir de marzo de 2025. Si bien puedes abrir, editar y publicar proyectos que usan esta API en versiones anteriores de Storyline 360, el código no funcionará.