• Site Logo, Articulate

Door artikelen bladeren

Selecteer een Product

Supportdirectory van null

Bekijk alle artikelen van null. (Last Updated )

Geen artikelen gevonden.

Zoekresultaten

Geen artikelen gevonden.

Storyline 360: geavanceerde JavaScript-API

Artikel laatst bijgewerkt 17 feb 2026

Let op, JavaScript-liefhebbers! Bereid je voor op krachtige interactiviteit met behulp van de geavanceerde JavaScript-API-functie in Storyline 360. Verkrijg nauwkeurige controle over de eigenschappen van objecten, trigger aangepaste animaties en creëer geavanceerde effecten zoals parallax. Lees verder voor meer informatie.

JavaScript-interacties genereren

Je hebt geen codeerervaring nodig om geavanceerde interacties te creëren. Chat gewoon met AI Assistant en het zal de code genereren en de trigger voor je toevoegen. Bekijk deze gebruikershandleiding om te zien hoe het werkt.

De geavanceerde JavaScript-API gebruiken

Als het gaat om het creëren van krachtige interacties met behulp van de geavanceerde JavaScript-API, heb je opties. U kunt objecteigenschappen wijzigen, aangepaste animaties maken, codefragmenten toepassen en meer. Bekijk hieronder de mogelijkheden.

Zoek de object-ID

Om te beginnen heb je eerst de ID van het object nodig. Zoek die informatie op een van de volgende manieren:

  • Klik met de rechtermuisknop op het object en selecteer het kopieerpictogram. De object-ID die niet tussen haakjes staat, wordt naar uw klembord gekopieerd.

Het contextmenu in Storyline 360.

  • Kies in de JavaScript-editor uw object uit de keuzepijl Objectreferentie en klik vervolgens op Toevoegen. In de object() functie wordt naar de object-ID verwezen.

JavaScript-editor in Storyline 360.

Opmerking: De geavanceerde JavaScript-API biedt momenteel geen ondersteuning voor audiocontent. Laat ons weten of je deze of een andere functie wilt zien.

Objecteigenschappen definiëren

Zodra u de object-ID hebt, kunt u ernaar verwijzen om een van deze objecteigenschappen te definiëren:

  • Positie:x, y (horizontaal/verticale locatie)
  • Schaal: scaleXscaleY,, scale (0-100%)
  • Rotatie: rotation (0—360°)
  • Ondoorzichtigheid: opacity (0-100%)
  • Dieptevolgorde: depth
  • Formaat:width, height (alleen lezen)
  • Staat: state (ingesteld op naam)

Opmerking: U moet de puntsyntaxis gebruiken om de eigenschappen van het object voor positie, rotatie en schaal te definiëren. Bijvoorbeeld:

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%

Kernfuncties aanpassen

U kunt elk van de volgende kernfuncties gebruiken:

Muiscursor

  • Locatie van de cursor:pointerX(), pointerY()
  • Verberg de cursor: hidePointer()
  • De cursor tonen: showPointer()

Afmetingen van de dia

  • slideWidth()
  • slideHeight()

Variabelen (voorheen GetVar en setVar)

  • De waarde van een variabele ophalen: getVar('name')
  • Stel de waarde van een variabele in: setVar('name', value)

Updates

  • Voer een functie continu uit met 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;
  }
});

JavaScript-codefragmenten bekijken

De volgende veelgebruikte JavaScript-codefragmenten kunnen ook worden toegepast op de ID van een object.

Object roteren op basis van een variabele
Bepaal de rotatie van een object met behulp van een variabele.

object('ObjectID').rotation = getVar('VariableID');

Volg de cursor (muis of aanraking)
Synchroniseer een object met de 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;
});

Wijs naar de cursor
Oriënteer een object in de richting van de cursor.

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 Motion
Creëer een parallaxeffect door een object te verplaatsen op basis van een percentage van de cursorpositie. Je kunt het zelfs een optionele offset geven, zoals in het onderstaande codefragment, dat 200 pixels zou zijn.

const ObjectName = object('ObjectID');
update(() => {
  ObjectName.x = 200 + pointerX() * .25;
});

Verplaats To
Ease een object naar 500 pixels op de x.

const ObjectName = object('ObjectID');
update(() => {
  ObjectName.x += (500 - circle.x) / 12;
});

Animatie
Gebruik de ingebouwde animate JavaScript-functie, een animatie-API met veel functies, om animaties te maken. Animaties die met deze functie zijn gemaakt, hebben geen invloed op de hierboven beschreven eigenschappen. In plaats daarvan werken deze animaties onafhankelijk van elkaar binnen hun eigen bereik en zijn ze ontworpen als moderne statische animaties op de tijdlijn.

Om animaties doorzoekbaar te maken op de tijdlijn, verpak ze in de addToTimeline functie:

const objectName = 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
    }
  )
);

Meer informatie over de animatiefunctie.

Pro-tip: Gebruik AI Assistant om JavaScript-ingangsanimaties te maken zonder te coderen.

Toegang tot Cascading Style Sheets (CSS)
Pas de CSS van een object aan met de eigenschap style. Hoewel sommige eigenschappen niet van toepassing zijn op bepaalde objecten, bieden CSS-eigenschappen zoals filter en transformatie nauwkeurige controle over de stijl.

// add a 10 pixel blur to an object
object('ObjectID').style.filter = 'blur(10px)';

Meer informatie over CSS-filters.

Een voorbeeldinteractie testen

Wilt u weten wat er mogelijk is met de geavanceerde JavaScript-API? Bekijk dit voorbeeld. Je kunt de code in het projectbestand verkennen door op de downloadlink in de rechterbovenhoek van de interactie te klikken.

Interacties toegankelijk maken

Volg deze tips om je interacties toegankelijker te maken:

  • Gebruik interactiviteit strategisch. Vermijd het gebruik van animaties en effecten puur ter decoratie. Ze moeten een duidelijk doel hebben, zoals cursisten door een proces begeleiden of de nadruk leggen op een specifiek detail.
  • Overweeg de timing. Beperk de duur van je animatie en effecten tot minder dan vijf seconden. Interactiviteit die automatisch start en langer dan vijf seconden duurt, moet ervoor zorgen dat cursisten de interactie kunnen pauzeren, stoppen of verbergen om te voldoen aan de toegankelijkheidsnormen. (2.2.2 Pauzeren, stoppen, verbergen)
  • Geef cursisten controle. Zorg voor een optie om animaties en effecten uit te schakelen. U kunt bijvoorbeeld een waar/onwaar-variabele gebruiken om bij te houden of een cursist interactiviteit wil zien. Afhankelijk van de keuze van de leerling verschijnt er dan een laag met interactiviteit of een andere laag zonder interactiviteit. (2.3.3 Animatie op basis van interacties)
  • Voldoe aan de minimale doelgrootte. Klikbare objecten die kleiner zijn dan de minimale doelgrootte van 24 pixels breed en 24 pixels hoog kunnen nauwkeurige interactie bemoeilijken voor cursisten. Zorg ervoor dat interactieve elementen voldoen aan de minimale doelgrootte of dat er voldoende ruimte om hen heen is. (2.5.8 Doelgrootte [Minimaal])
  • Hou het simpel. Snelle, complexe of niet-essentiële interactiviteit kan de cognitieve belasting verhogen. Om de toegankelijkheid te verbeteren, synchroniseer je interacties met tekst of gesproken tekst, kun je cursisten de mogelijkheid geven om interactiviteit uit te schakelen en ervoor te zorgen dat interacties aansluiten bij de leerdoelen.

Compatibiliteit begrijpen

De geavanceerde JavaScript-API is vanaf maart 2025 exclusief beschikbaar voor Storyline 360. Hoewel je projecten die deze API gebruiken in eerdere versies van Storyline 360 kunt openen, bewerken en publiceren, zal de code kapot gaan.