• Site Logo, Articulate

Artikelsuche

Wählen Sie ein Produkt aus

Supportverzeichnis von null

Entdecken Sie alle Artikel von null (Last Updated )

Keine Artikel gefunden.

Suchergebnisse

Keine Artikel gefunden.

Storyline 360: Erweiterte JavaScript-API

Artikel zuletzt aktualisiert am 10.03.2026

JavaScript-Enthusiasten aufgepasst! Machen Sie sich bereit, leistungsstarke Interaktivität mit 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.

Generieren
Sie JavaScript-Interaktionen Sie benötigen keine Programmierkenntnisse, um erweiterte Interaktionen zu erstellen. Chatten Sie einfach mit AI Assistant und er generiert den Code und fügt den Auslöser für Sie hinzu. In dieser Bedienungsanleitung erfahren Sie, wie es funktioniert.

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. Sie können sogar direkt in JavaScript auf Maus-, Touch- und Tastatureingaben reagieren. 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.

Das Kontextmenü in Storyline 360.

  • 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.

JavaScript-Editor in Storyline 360.

Hinweis: Die erweiterte JavaScript-API support derzeit keine Audioinhalte. Teilen Sie uns mit, ob Sie diese oder eine andere Funktion sehen möchten.

Definieren Sie Objekteigenschaften

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

  • Eine Funktion kontinuierlich mit 60 Bildern pro Sekunde ausführen: update(callback)

const objectName = object('ObjectID');
update(() => {
  // move the objectName down if its 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 = objectName.x + objectName.width / 2 - pointerX();
  const dy = objectName.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 suchbar zu machen, binden Sie sie in die addToTimeline Funktion ein:

const  = object('ObjectID');
addToTimeline(
  objectName.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.

Profi-Tipp: Verwenden Sie AI Assistant, um JavaScript-Eingangsanimationen ohne Codierung zu erstellen.

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.

Eingabeereignisse verarbeiten

Die erweiterte JavaScript-API unterstützt die Eingabe von Lernenden über Maus-, Touch- und Tastaturinteraktionen. Verwenden Sie diese Ereignisse, um reaktionsschnelle, dynamische Interaktionen zu erstellen.

Zeigerereignisse (auf Objektebene)

Alle Folienobjekte verfügen über integrierte Zeigermethoden für Maus- und Berührungsinteraktionen. Sehen Sie sich die einzelnen Optionen unten an.

Zeiger nach unten (HandlerFunction)

Wenn Lernende mit der Maus auf ein Folienobjekt klicken oder eine berührungsempfindliche Oberfläche berühren, wird Folgendes ausgelöst:

const objectName = object(’ObjectID’);
// when the pointer is down, run the handler function
objectName.pointerdown(() => {
  objectName.scale = 200;
});

Hinweis: Ein Folienobjekt kann nur ein Ereignis jedes Typs haben. Wenn mehrere Ereignisse derselben Art zugewiesen sind, wird nur das letzte wirksam.

klicken Sie auf (HandlerFunction)

Wenn Lernende auf ein Folienobjekt klicken oder tippen, wird Folgendes ausgelöst:

const objectName = object(’ObjectID’); objectName.click(() => {
>  objectName.rotation += 45;
});

Zeiger nach oben (HandlerFunction)

Wenn Lernende die Maus von einem Folienobjekt loslassen oder ihren Finger von einem berührungsempfindlichen Gerät heben, wird Folgendes ausgelöst:

const objectName = object(’ObjectID’); objectName.pointerup(() => {
  // increase the size of the object by 10%
  objectName.scale += 10;
});

Hinweis: pointerup() ist ein Alias für. click()

pointerover (HandlerFunction)

Wenn die Lernenden den Zeiger in die Grenzen eines Folienobjekts bewegen, wird Folgendes ausgelöst:

const objectName = object(’ObjectID’); objectName.pointerover(() => {
  objectName.opacity = 50;
});

pointerout (HandlerFunction)

Wenn die Lernenden den Zeiger außerhalb der Grenzen eines Folienobjekts bewegen, wird Folgendes ausgelöst:

const objectName = object(’ObjectID’); objectName.pointerout(() => {
  objectName.opacity = 100;
});

Tastaturereignisse (Folienebene)

Tastaturereignisse werden global auf Folienebene behandelt.

Taste nach unten (HandlerFunction)

Wenn Lernende eine Taste drücken, wird Folgendes ausgelöst:

keydown(event => {
  console.log(’Key pressed:’, event.key);
});

Taste hoch (Handler-Funktion)

Wenn die Lernenden eine Taste loslassen, wird Folgendes ausgelöst:

keyup(event => {
  console.log(’Key released:’, event.key);
});

getKeyDown ()

Gibt ein Objekt mit booleschen Werten zurück, die angeben, ob aktuell Tasten gedrückt sind. Dies ist für eine kontinuierliche Tastenlogik innerhalb einer update() Schleife gedacht.

const objectName = object(’ObjectID’); update(() => {
  if (getKeyDown().ArrowRight) {
    objectName.x += 5;
  }   if (getKeyDown().ArrowLeft) {
    objectName.x -= 5;
  }   if (getKeyDown().ArrowUp) {
    objectName.y -= 5;
  }   if (getKeyDown().ArrowDown) {
    objectName.y += 5;
  }
});

Zu den gängigen Schlüsselwerten gehören ArrowRight ArrowLeftArrowUp,ArrowDown,Enter,,, ’ ’ (Leertaste),a, bc, usw.

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.