Storyline 360: Erweiterte JavaScript-API

JavaScript-Enthusiasten aufgepasst! Machen Sie sich bereit, leistungsstarke Interaktivität mithilfe der erweiterten JavaScript-API-Funktion in Storyline 360 freizuschalten. Gewinnen Sie präzise Kontrolle über Objekteigenschaften, lösen Sie benutzerdefinierte Animationen aus und erstellen Sie erweiterte Effekte wie Parallaxe. Lesen Sie weiter, um mehr zu erfahren.

• Verwenden Sie die erweiterte JavaScript-API
• Erkunden Sie JavaScript-Codefragmente
• Testen Sie eine Beispielinteraktion
• Machen Sie Interaktionen zugänglich
• Verstehen Sie die Kompatibilität

Verwenden Sie die erweiterte JavaScript-API

Wenn es darum geht, mithilfe der erweiterten JavaScript-API leistungsstarke Interaktionen zu erstellen, haben Sie mehrere Optionen. Sie können Objekteigenschaften ändern, benutzerdefinierte Animationen erstellen, Codefragmente anwenden und vieles mehr. Erkunden Sie die folgenden Möglichkeiten.

Finden Sie die Objekt-ID

Um zu beginnen, müssen Sie zuerst die ID des Objekts abrufen. Finden Sie diese Informationen mit einer der folgenden Methoden:

• Klicken Sie mit der rechten Maustaste auf das Objekt und Auswählen Sie das Kopiersymbol. Die Objekt-ID, die nicht in der Klammer steht, wird in Ihre Zwischenablage kopiert.

• Wählen Sie im JavaScript-Editor Ihr Objekt aus dem Dropdown-Pfeil Objektreferenz aus und klicken Sie dann auf Hinzufügen. Die Objekt-ID wird in der object() Funktion referenziert.

Objekteigenschaften definieren

Sobald Sie die Objekt-ID haben, können Sie sie referenzieren, um eine der folgenden Objekteigenschaften zu definieren:

• Position:x, y (horizontale/vertikale Position)
• Skala:scaleX,scaleY, scale (0— 100%)
• Drehung: rotation (0—360°)
• Opazität: opacity (0— 100%)
• Reihenfolge der Tiefe: depth
• Größe:width, height (nur lesbar)
• Status: state (nach Namen festgelegt)

Hinweis: Sie müssen die Punktsyntax verwenden, um die Objekteigenschaften für Position, Drehung und Skalierung zu definieren. Zum Beispiel:

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%

Passen Sie die Kernfunktionen an

Sie können jede der folgenden Kernfunktionen verwenden:

Mauszeiger

• Position des Cursors:pointerX(), pointerY()
• Den Cursor ausblenden: hidePointer()
• Zeig den Cursor: showPointer()

Abmessungen der Folie

• slideWidth()
• slideHeight()

Variablen (früher GetVar und SetVar)

• Rufen Sie den Wert einer Variablen ab: getVar('name')
• Legen Sie den Wert einer Variablen fest: setVar('name', value)

Aktualisierungen

• Führen Sie eine Funktion kontinuierlich mit 60 Bildern pro Sekunde aus: 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;   } });

Erkunden Sie JavaScript-Codefragmente

Die folgenden gängigen JavaScript-Codefragmente können auch auf die ID eines Objekts angewendet werden.

Objekt anhand einer Variablen drehen Steuern Sie die Drehung eines Objekts mithilfe einer Variablen. object('ObjectID').rotation = getVar('VariableID');

Dem Cursor folgen (Maus oder Touch) Synchronisieren Sie ein Objekt mit dem 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; });

Zeigen Sie auf den Cursor. Richten Sie ein Objekt in Richtung des Cursors aus. 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; });

Parallax-Bewegung Erzeugen Sie einen Parallax-Effekt, indem Sie ein Objekt auf der Grundlage eines Prozentsatzes der Cursorposition bewegen. Sie können ihm sogar einen optionalen Offset zuweisen — wie im unten abgebildeten Codeausschnitt, der 200 Pixel betragen würde. const ObjectName = object('ObjectID'); update(() => {   ObjectName.x = 200 + pointerX() * .25; });

Verschieben, um ein Objekt auf 500 Pixel auf dem X zu verkleinern. const ObjectName = object('ObjectID'); update(() => {   ObjectName.x += (500 - circle.x) / 12; });

Animation Verwenden Sie die native animate JavaScript-Funktion — eine funktionsreiche Animations-API —, um Animationen zu erstellen. Mit dieser Funktion erstellte Animationen ändern die oben beschriebenen Eigenschaften nicht. Stattdessen funktionieren diese Animationen unabhängig voneinander in ihrem eigenen Bereich und sind so konzipiert, dass sie moderne statische Animationen auf der Zeitachse sind. Um Animationen auf der Zeitachse auffindbar zu machen, binden Sie sie in die addToTimeline Funktion ein: 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     }   ) ); Erfahren Sie mehr über die Animationsfunktion.

Zugriff auf Cascading Style Sheets (CSS) Ändern Sie das CSS eines Objekts mit der Eigenschaft style. Während einige Eigenschaften nicht für bestimmte Objekte gelten, bieten CSS-Eigenschaften wie Filter und Transform eine präzise Steuerung des Stils. // add a 10 pixel blur to an object object('ObjectID').style.filter = 'blur(10px)'; Erfahren Sie mehr über CSS-Filter.

Testen Sie eine Beispielinteraktion

Möchten Sie sehen, was mit der erweiterten JavaScript-API möglich ist? Schauen Sie sich dieses Beispiel an. Sie können den Code in der Projektdatei erkunden, indem Sie in der oberen rechten Ecke der Interaktion auf den Download-Link klicken.

Machen Sie Interaktionen zugänglich

Folgen Sie diesen Tipps, um Ihre Interaktionen leichter zugänglich zu machen:

• Nutzen Sie Interaktivität strategisch. Vermeiden Sie es, Animationen und Effekte ausschließlich zur Dekoration zu verwenden. Sie sollten ein klares Ziel verfolgen, z. B. die Lernenden durch einen Prozess führen oder den Fokus auf ein bestimmtes Detail legen.
• Überlegen Sie sich den Zeitpunkt. Beschränken Sie die Dauer Ihrer Animationen und Effekte auf weniger als fünf Sekunden. Interaktivität, die automatisch startet und länger als fünf Sekunden dauert, muss den Lernenden die Möglichkeit bieten, die Interaktion zu pausieren, zu beenden oder auszublenden, um den Barrierefreiheitsstandards zu entsprechen. (2.2.2 Pausieren, Stoppen, Ausblenden)
• Geben Sie den Lernenden die Kontrolle. Bieten Sie eine Option zum Ausschalten von Animationen und Effekten. Sie könnten beispielsweise eine Wahr/Falsch-Variable verwenden, um nachzuverfolgen, ob ein Lernender Interaktivität sehen möchte. Je nach Wahl des Lernenden würde dann eine Ebene mit Interaktivität oder eine andere Ebene ohne Interaktivität erscheinen. (2.3.3 Animation aus Interaktionen)
• Erfüllen Sie die minimale Zielgröße. Klickbare Objekte, die kleiner als die Mindestzielgröße von 24 Pixeln breit und 24 Pixeln hoch sind, können den Lernenden eine genaue Interaktion erschweren. Stellen Sie sicher, dass interaktive Elemente die Mindestzielgröße erreichen oder dass um sie herum genügend Platz vorhanden ist. (2.5.8 Zielgröße [Minimum])
• Halte es einfach. Schnelle, komplexe oder unwesentliche Interaktivität kann die kognitive Belastung erhöhen. Um die Barrierefreiheit zu verbessern, sollten Sie Ihre Interaktionen mit Text oder Erzählung synchronisieren, den Lernenden ermöglichen, die Interaktivität auszuschalten, und sicherstellen, dass die Interaktionen mit den Lernzielen übereinstimmen.

Verstehen Sie die Kompatibilität

Die erweiterte JavaScript-API ist ab März 2025 exklusiv für Storyline 360 verfügbar. Sie können zwar Projekte öffnen, bearbeiten und veröffentlichen, die diese API in früheren Versionen von Storyline 360 verwenden, aber der Code funktioniert nicht mehr.