Storyline 360 : API JavaScript avancée

Attention, passionnés de JavaScript ! Préparez-vous à débloquer une interactivité puissante à l'aide de la fonctionnalité avancée de l'API JavaScript de Storyline 360. Contrôlez avec précision les propriétés des objets, déclenchez des animations personnalisées et créez des effets avancés tels que la parallaxe. Poursuivez votre lecture pour en savoir plus.

• Utiliser l'API JavaScript avancée
• Découvrir les extraits de code JavaScript
• Tester un exemple d'interaction
• Rendre les interactions accessibles
• Comprendre la compatibilité

Utiliser l'API JavaScript avancée

Lorsqu'il s'agit de créer des interactions puissantes à l'aide de l'API JavaScript avancée, plusieurs options s'offrent à vous. Vous pouvez modifier les propriétés des objets, créer des animations personnalisées, appliquer des extraits de code, etc. Explorez les possibilités ci-dessous.

Trouvez l'ID de l'objet

Pour commencer, vous devez d'abord obtenir l'identifiant de l'objet. Trouvez ces informations à l'aide de l'une des méthodes suivantes :

• Cliquez avec le bouton droit sur l'objet et sélectionnez l'icône de copie. L'identifiant de l'objet qui ne figure pas entre parenthèses sera copié dans votre presse-papiers.

• Dans l'éditeur JavaScript, choisissez votre objet dans la flèche déroulante Référence à l'objet, puis cliquez sur Ajouter. L'ID de l'objet est référencé dans la object() fonction.

Définir les propriétés de l'objet

Une fois que vous avez l'ID de l'objet, vous pouvez le référencer pour définir l'une des propriétés de l'objet suivantes :

• Position :x, y (position horizontale/verticale)
• Échelle : scaleXscaleY,, scale (0— 100 %)
• Rotation : rotation (0 à 360°)
• Opacité : opacity (0 à 100 %)
• Ordre de profondeur : depth
• Taille :width, height (lecture seule)
• État : state (défini par nom)

Remarque : Vous devez utiliser la syntaxe des points pour définir les propriétés de position, de rotation et d'échelle de l'objet. Par exemple :

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%

Ajuster les fonctions de base

Vous pouvez utiliser l'une des fonctions de base suivantes :

Curseur de souris

• Emplacement du curseur :pointerX(), pointerY()
• Masquez le curseur : hidePointer()
• Afficher le curseur : showPointer()

Dimensions de la diapositive

• slideWidth()
• slideHeight()

Variables (auparavant GetVar et SetVar)

• Récupérez la valeur d'une variable : getVar('name')
• Définissez la valeur d'une variable : setVar('name', value)

mises à jour

• Exécutez une fonction en continu à 60 images par seconde : 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;   } });

Découvrir les extraits de code JavaScript

Les extraits de code JavaScript courants suivants peuvent également être appliqués à l'ID d'un objet.

Faire pivoter un objet en fonction d'une variable Contrôlez la rotation d'un objet à l'aide d'une variable. object('ObjectID').rotation = getVar('VariableID');

Suivez le curseur (souris ou tactile) Synchronisez un objet avec le curseur. 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; });

Pointez sur le curseur Orientez un objet vers le curseur. 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; });

Mouvement parallaxe Créez un effet de parallaxe en déplaçant un objet en fonction d'un pourcentage de la position du curseur. Vous pouvez même lui attribuer un décalage facultatif, comme dans l'extrait de code ci-dessous, qui serait de 200 pixels. const ObjectName = object('ObjectID'); update(() => {   ObjectName.x = 200 + pointerX() * .25; });

Déplacer pour réduire un objet à 500 pixels sur le x. const ObjectName = object('ObjectID'); update(() => {   ObjectName.x += (500 - circle.x) / 12; });

Animation Utilisez la animate fonction JavaScript native, une API d'animation riche en fonctionnalités, pour créer des animations. Les animations créées avec cette fonction ne modifient pas les propriétés décrites ci-dessus. Au lieu de cela, ces animations fonctionnent indépendamment dans leur propre cadre et sont conçues pour être des animations statiques modernes sur la chronologie. Pour rendre les animations consultables sur la chronologie, insérez-les dans la addToTimeline fonction : 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     }   ) ); En savoir plus sur la fonction d'animation.

Accès aux feuilles de style en cascade (CSS) Modifiez le code CSS d'un objet à l'aide de la propriété style. Bien que certaines propriétés ne s'appliquent pas à certains objets, les propriétés CSS telles que le filtre et la transformation permettent de contrôler précisément le style. // add a 10 pixel blur to an object object('ObjectID').style.filter = 'blur(10px)'; En savoir plus sur les filtres CSS.

Tester un exemple d'interaction

Vous voulez découvrir ce qu'il est possible de faire avec l'API JavaScript avancée ? Consultez cet exemple. Vous pouvez explorer le code contenu dans le fichier de projet en cliquant sur le lien de téléchargement dans le coin supérieur droit de l'activité interactive.

Rendre les interactions accessibles

Suivez ces conseils pour rendre vos interactions plus accessibles :

• Utilisez l'interactivité de manière stratégique. Évitez d'utiliser des animations et des effets uniquement pour la décoration. Ils doivent avoir un objectif clair, par exemple guider les apprenants tout au long d'un processus ou mettre l'accent sur un détail spécifique.
• Tenez compte du timing. Limitez la durée de votre animation et de vos effets à moins de cinq secondes. L'interactivité qui démarre automatiquement et dure plus de cinq secondes doit permettre aux apprenants de suspendre, d'arrêter ou de masquer l'interaction afin de se conformer aux normes d'accessibilité. (2.2.2 Pause, arrêt, masquage)
• Donnez le contrôle aux apprenants. Fournissez une option pour désactiver les animations et les effets. Par exemple, vous pouvez utiliser une variable vrai/faux pour savoir si un apprenant souhaite voir de l'interactivité. Ensuite, selon le choix de l'apprenant, une calque avec interactivité ou une autre sans interactivité apparaîtrait. (2.3.3 Animation à partir d'interactions)
• Respectez la taille cible minimale. Les objets cliquables d'une taille inférieure à la taille cible minimale de 24 pixels de large sur 24 pixels de haut peuvent compliquer la précision de l'activité interactive pour les apprenants. Assurez-vous que les éléments interactifs atteignent la taille cible minimale ou qu'ils sont entourés de suffisamment d'espace. (2.5.8 Taille cible [Minimum])
• Restez simple. Une interactivité rapide, complexe ou non essentielle peut augmenter la charge cognitive. Pour améliorer l'accessibilité, synchronisez vos interactions avec le texte ou la narration, autorisez les apprenants à désactiver l'interactivité et assurez-vous que les interactions correspondent aux objectifs d'apprentissage.

Comprendre la compatibilité

L'API JavaScript avancée est exclusive à Storyline 360 depuis mars 2025. Bien que vous puissiez ouvrir, modifier et publier des projets qui utilisent cette API dans les versions antérieures de Storyline 360, le code risque de ne pas fonctionner.