• Site Logo, Articulate

Sfoglia gli articoli

Seleziona un prodotto

Directory di supporto di null

Esplora tutti gli articoli di null (Last Updated )

Nessun articolo trovato.

Risultati della ricerca

Nessun articolo trovato.

Storyline 360: API JavaScript avanzata

Ultimo aggiornamento dell'articolo 10 mar 2026

Attenzione, appassionati di JavaScript! Preparati a sbloccare una potente interattività con la funzionalità avanzata dell'API JavaScript di Storyline 360. Ottieni un controllo preciso sulle proprietà degli oggetti, attiva animazioni personalizzate e crea effetti avanzati come la parallasse. Continua a leggere per saperne di più.

Genera interazioni JavaScript
Non è necessaria alcuna esperienza di programmazione per creare interazioni avanzate. Basta chattare con AI Assistant, che genererà il codice e aggiungerà il trigger per te. Consulta questa guida per l'utente per vedere come funziona.

Usa l'API JavaScript avanzata

Quando si tratta di creare interazioni potenti utilizzando l'API JavaScript avanzata, hai diverse opzioni. Puoi modificare le proprietà degli oggetti, creare animazioni personalizzate, applicare frammenti di codice e altro ancora. Puoi anche rispondere agli input del mouse, del tocco e della tastiera direttamente da JavaScript. Esplora le possibilità riportate di seguito.

Trova l'ID dell'oggetto

Per iniziare, devi prima ottenere l'ID dell'oggetto. Trovate tali informazioni utilizzando uno dei seguenti metodi:

  • Fate clic con il pulsante destro del mouse sull'oggetto e selezionate l'icona Copia. L'ID dell'oggetto che non è tra parentesi verrà copiato negli appunti.

Il menu contestuale di Storyline 360.

  • Nell'editor JavaScript, scegli l'oggetto dalla freccia a discesa Riferimento oggetto, quindi fai clic su Aggiungi. L'ID dell'oggetto è referenziato nella funzione. object()

Editor JavaScript in Storyline 360.

Nota: l'API JavaScript avanzata al momento non supporta contenuti audio. Facci sapere se desideri vedere questa o altre funzionalità.

Definisci le proprietà degli oggetti

Una volta ottenuto l'ID dell'oggetto, potete farvi riferimento per definire una qualsiasi di queste proprietà dell'oggetto:

  • Posizione:x, y (posizione orizzontale/verticale)
  • Scala: scaleXscaleY, scale (0-100%)
  • Rotazione: rotation (0—360°)
  • Opacità: opacity (0— 100%)
  • Ordine di profondità: depth
  • Dimensioni:width, height (sola lettura)
  • Stato: state (impostato per nome)

Nota: è necessario utilizzare la sintassi dei punti per definire le proprietà di posizione, rotazione e scala dell'oggetto. Ad esempio:

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%

Regola le funzioni principali

Puoi utilizzare una delle seguenti funzioni principali:

Cursore del mouse

  • Posizione del cursore:, pointerX() pointerY()
  • Nascondi il cursore: hidePointer()
  • Mostra il cursore: showPointer()

Dimensioni delle diapositive

  • slideWidth()
  • slideHeight()

Variabili (in precedenza getVar e setVar)

  • Recupera il valore di una variabile: getVar('name')
  • Imposta il valore di una variabile: setVar('name', value)

Aggiornamenti

  • Esegui una funzione in modo continuo a 60 fps: 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;
  }
});

Esplora i frammenti di codice JavaScript

I seguenti frammenti di codice JavaScript comuni possono essere applicati anche all'ID di un oggetto.

Ruota l'oggetto in base a una variabile
Controlla la rotazione di un oggetto utilizzando una variabile.

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

Segui il cursore (mouse o tocco)
Sincronizza un oggetto con il cursore.

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;
});

Posiziona il cursore
Orienta un oggetto verso il cursore.

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
Crea un effetto di parallasse spostando un oggetto in base a una percentuale della posizione del cursore. Puoi anche assegnargli un offset opzionale, come nel frammento di codice mostrato di seguito, che sarebbe di 200 pixel.

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

Move To
Ease un oggetto a 500 pixel sulla x.

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

Animazione
Usa la animate funzione JavaScript nativa, un'API di animazione ricca di funzionalità, per creare animazioni. Le animazioni create con questa funzione non alterano le proprietà sopra descritte. Al contrario, queste animazioni operano in modo indipendente all'interno del proprio ambito e sono progettate per essere animazioni statiche moderne sulla timeline.

Per rendere le animazioni ricercabili sulla timeline, inseriscile nella funzione: addToTimeline

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
    }
  )
);

Scopri di più sulla funzione di animazione.

Suggerimento: usa AI Assistant per creare animazioni di ingresso in JavaScript senza codifica.

Cascading Style Sheets (CSS) Access
Modifica il CSS di un oggetto con la proprietà style. Sebbene alcune proprietà non si applichino a determinati oggetti, le proprietà CSS come filter e transform offrono un controllo preciso sullo stile.

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

Scopri di più sui filtri CSS.

Gestisci gli eventi di input

L'API JavaScript avanzata supporta l'input dell'allievo dalle interazioni con mouse, tocco e tastiera. Usa questi eventi per creare interazioni dinamiche e responsive.

Eventi Pointer (a livello di oggetto)

Tutti gli oggetti della diapositiva dispongono di metodi di puntamento incorporati per le interazioni con mouse e tocco. Esplorali tutti di seguito.

pointerdown (HandlerFunction)

Quando gli allievi fanno clic su un oggetto diapositiva con il mouse o toccano una superficie abilitata al tocco, si attiva:

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

Nota: un oggetto diapositiva può avere un solo evento per tipo. Se vengono assegnati più eventi dello stesso tipo, solo l'ultimo ha effetto.

click (HandlerFunction)

Quando gli allievi fanno clic o toccano un oggetto della diapositiva, si attiva:

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

pointerup (HandlerFunction)

Quando gli allievi rilasciano il mouse da un oggetto diapositiva o sollevano il dito da un dispositivo touch, si attiva:

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

Nota: pointerup() è un alias per. click()

pointerover (HandlerFunction)

Quando gli allievi spostano il puntatore nei limiti di un oggetto diapositiva, si attiva:

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

pointerout (HandlerFunction)

Quando gli allievi spostano il puntatore oltre i limiti di un oggetto diapositiva, si attiva:

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

Eventi da tastiera (a livello di diapositiva)

Gli eventi della tastiera vengono gestiti a livello globale a livello di diapositiva.

keydown (HandlerFunction)

Quando gli allievi premono un tasto, si attiva:

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

keyup (HandlerFunction)

Quando gli allievi rilasciano una chiave, si attiva:

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

getKeyDown ()

Restituisce un oggetto con valori booleani che indicano se i tasti sono attualmente premuti. Questo è pensato per la logica dei tasti continua all'interno di un update() ciclo.

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;
  }
});

I valori chiave comuni includono ArrowRightArrowLeft,ArrowUp,ArrowDown,Enter, ’ ’ (barra spaziatrice),a, bc, ecc.

Prova un esempio di interazione

Vuoi vedere cosa è possibile fare con l'API JavaScript avanzata? Dai un'occhiata a questo esempio. Puoi esplorare il codice nel file di progetto facendo clic sul link per il download nell'angolo in alto a destra dell'interazione.

Rendi accessibili le interazioni

Segui questi suggerimenti per rendere le tue interazioni più accessibili:

  • Usa l'interattività in modo strategico. Evita di usare animazioni ed effetti puramente decorativi. Dovrebbero avere uno scopo chiaro, ad esempio guidare gli allievi attraverso un processo o concentrare l'attenzione su un dettaglio specifico.
  • Considerate la tempistica. Mantieni la durata dell'animazione e degli effetti a meno di cinque secondi. L'interattività che si avvia automaticamente e dura più di cinque secondi deve consentire agli allievi di mettere in pausa, interrompere o nascondere l'interazione per conformarsi agli standard di accessibilità. (2.2.2 Metti in pausa, interrompi, nascondi)
  • Dai il controllo agli allievi. Fornisci un'opzione per disattivare animazioni ed effetti. Ad esempio, puoi usare una variabile vero/falso per verificare se un allievo desidera vedere l'interattività. Quindi, a seconda della scelta dello studente, apparirà un livello con interattività o un livello diverso senza interattività. (2.3.3 Animazione da interazioni)
  • Raggiungi la dimensione minima dell'obiettivo. Gli oggetti cliccabili di dimensioni inferiori alla dimensione minima dell'obiettivo di 24 pixel di larghezza per 24 pixel di altezza possono rendere difficile un'interazione accurata per gli allievi. Assicurati che gli elementi interattivi soddisfino la dimensione minima di destinazione o che abbiano abbastanza spazio intorno a loro. (2.5.8 Dimensione del bersaglio [minima])
  • Mantieni la semplicità. L'interattività rapida, complessa o non essenziale può aumentare il carico cognitivo. Per aumentare l'accessibilità, sincronizza le interazioni con il testo o la narrazione, consenti agli allievi di disattivare l'interattività e assicurati che le interazioni siano in linea con gli obiettivi di apprendimento.

Comprendi la compatibilità

L'API JavaScript avanzata è esclusiva di Storyline 360 a partire da marzo 2025. Sebbene sia possibile aprire, modificare e pubblicare progetti che utilizzano questa API nelle versioni precedenti di Storyline 360, il codice si interromperà.