• Site Logo, Articulate

Wyszukiwanie artykułów

Wybierz produkt

Katalog pomocy dla null

Przeglądaj wszystkie artykuły null (Last Updated )

Nie znaleziono artykułów.

Wyniki wyszukiwania

Nie znaleziono artykułów.

Storyline 360: Zaawansowany interfejs API JavaScript

Artykuł zaktualizowany ostatnio dnia 10 mar 2026

Uwaga, entuzjaści JavaScript! Przygotuj się na odblokowanie potężnej interaktywności dzięki zaawansowanej funkcji JavaScript API w Storyline 360. Uzyskaj precyzyjną kontrolę nad właściwościami obiektów, wyzwalaj niestandardowe animacje i twórz zaawansowane efekty, takie jak paralaksa. Czytaj dalej, aby dowiedzieć się więcej.

Generuj interakcje JavaScript Nie
potrzebujesz żadnego doświadczenia w kodowaniu, aby tworzyć zaawansowane interakcje. Po prostu porozmawiaj z AI Assistant, a wygeneruje kod i dodaj wyzwalacz dla Ciebie. Sprawdź ten podręcznik użytkownika, aby zobaczyć, jak to działa.

Korzystanie z zaawansowanego interfejsu API JavaScript

Jeśli chodzi o tworzenie potężnych interakcji za pomocą zaawansowanego API JavaScript, masz opcje. Można modyfikować właściwości obiektów, tworzyć własne animacje, stosować fragmenty kodu i nie tylko. Możesz nawet reagować na wprowadzanie myszy, dotyku i klawiatury bezpośrednio z JavaScript. Zapoznaj się z poniższymi możliwościami.

Znajdowanie identyfikatora obiektu

Aby rozpocząć, musisz najpierw uzyskać identyfikator obiektu. Znajdź te informacje, korzystając z jednej z następujących metod:

  • Kliknij obiekt prawym przyciskiem myszy i wybierz ikonę kopiowania. Identyfikator obiektu, którego nie ma w nawiasie, zostanie skopiowany do schowka.

Menu kontekstowe w Storyline 360.

  • W edytorze JavaScript wybierz obiekt ze strzałki rozwijanej Odniesienie do obiektu, a następnie kliknij przycisk Dodaj. Identyfikator obiektu jest odwoływany w object() funkcji.

Edytor JavaScript w Storyline 360.

Uwaga: Zaawansowany interfejs API JavaScript nie obsługuje obecnie treści audio. Daj nam znać, jeśli chcesz zobaczyć tę lub inną funkcję.

Definiowanie właściwości obiektu

Po uzyskaniu identyfikatora obiektu można odwołać się do niego, aby zdefiniować dowolną z następujących właściwości obiektu:

  • Pozycja:x, y (położenie poziome/pionowe)
  • Skala: scaleXscaleY,, scale (0— 100%)
  • Obrót: rotation (0—360°)
  • Krycie: opacity (0— 100%)
  • Kolejność głębokości: depth
  • Rozmiar:width, height (tylko do odczytu)
  • Stan: state (ustawiony według nazwy)

Uwaga: Aby zdefiniować właściwości obiektu położenia, obrotu i skali, należy użyć składni kropki. Na przykład:

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%

Dostosuj podstawowe funkcje

Możesz użyć dowolnej z następujących podstawowych funkcji:

Kursor myszy

  • Lokalizacja kursora: pointerX() pointerY()
  • Ukryj kursor: hidePointer()
  • Pokaż kursor: showPointer()

Wymiary slajdów

  • slideWidth()
  • slideHeight()

Zmienne (poprzednio GetVar i SetVar)

  • Pobierz wartość zmiennej: getVar('name')
  • Ustaw wartość zmiennej: setVar('name', value)

Aktualizacje

  • Uruchom funkcję w sposób ciągły przy 60 klatkach na sekundę: 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;
  }
});

Eksploruj fragmenty kodu JavaScript

Następujące popularne fragmenty kodu JavaScript można również zastosować do identyfikatora obiektu.

Obróć obiekt Na podstawie zmiennej
Steruj obrotem obiektu za pomocą zmiennej.

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

Postępuj zgodnie z kursorem (mysz lub dotyk)
Synchronizuj obiekt z kursorem.

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

Wskaż kursor
Zorientuj obiekt w kierunku kursora.

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

Ruch paralaksy
Utwórz efekt paralaksy, przesuwając obiekt na podstawie procentu pozycji kursora. Możesz nawet nadać mu opcjonalne przesunięcie — jak we fragmencie kodu pokazanym poniżej, który wynosiłby 200 pikseli.

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

Przesuń
, aby zredukować obiekt do 500 pikseli na x.

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

Animacja
Użyj natywnej animate funkcji JavaScript — bogatego w funkcje interfejsu API animacji — do tworzenia animacji. Animacje utworzone za pomocą tej funkcji nie zmieniają opisanych powyżej właściwości. Zamiast tego animacje te działają niezależnie w swoim własnym zakresie i są zaprojektowane jako nowoczesne animacje statyczne na oś czasu.

Aby animacje były wyszukiwane na oś czasu, zawiń je w funkcję: 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
    }
  )
);

Dowiedz się więcej o funkcji animacji.

Wskazówka: Użyj AI Assistant, aby tworzyć animacje wejściowe JavaScript bez kodowania.

Dostęp do kaskadowych arkuszy stylów (CSS)
Modyfikuj CSS obiektu za pomocą właściwości style. Chociaż niektóre właściwości nie mają zastosowania do niektórych obiektów, właściwości CSS, takie jak filtr i transformacja, oferują precyzyjną kontrolę nad stylizacją.

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

Dowiedz się więcej o filtrach CSS.

Obsługa zdarzeń wejściowych

Zaawansowany interfejs API JavaScript obsługuje wprowadzanie przez uczestnika z interakcji myszy, dotyku i klawiatury. Użyj tych zdarzeń, aby stworzyć responsywność, dynamiczne interakcje.

Zdarzenia wskaźnika (poziom obiektu)

Wszystkie obiekty slajdów mają wbudowane metody wskaźnika do interakcji myszy i dotyku. Zapoznaj się z każdym z nich poniżej.

pointerdown (funkcja obsługi)

Gdy uczestnicy klikną obiekt slajdu za pomocą myszy lub dotkną powierzchni dotykowej, uruchamia się:

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

Uwaga: Obiekt slajdu może mieć tylko jedno zdarzenie każdego typu. Jeśli przypisanych jest wiele zdarzeń tego samego rodzaju, tylko ostatnie zaczyna obowiązywać.

kliknij (HandlerFunction)

Gdy uczestnicy klikną lub stukną obiekt slajdu, uruchamia się:

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

pointerup (HandlerFunction)

Gdy uczestnicy zwolnią mysz z obiektu slajdu lub uniesią palec z urządzenia dotykowego, uruchamia się:

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

Uwaga: pointerup() jest aliasem dla. click()

pointerover (funkcja obsługi)

Gdy uczestnicy przesuwają wskaźnik w granice obiektu slajdu, wyzwala:

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

pointerout (funkcja obsługi)

Gdy uczestnicy przesuwają wskaźnik poza granice obiektu slajdu, wyzwala:

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

Zdarzenia klawiatury (poziom slajdu)

Zdarzenia klawiatury są obsługiwane globalnie na poziomie slajdów.

keydown (HandlerFunction)

Gdy uczestnicy naciskają klawisz, uruchamia:

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

keyup (HandlerFunction)

Kiedy uczestnicy zwolnią klucz, uruchamia:

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

getKeyDown ()

Zwraca obiekt z wartościami logicznymi wskazującymi, czy klawisze są aktualnie naciśnięte. Jest to przeznaczone do ciągłej logiki klucza w update() pętli.

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

Typowe wartości kluczy to ArrowRight ArrowLeftArrowUp,ArrowDown,Enter,, ’ ’ (spacja),,, a bc, itp.

Przetestuj przykładową interakcję

Chcesz zobaczyć, co jest możliwe dzięki zaawansowanemu API JavaScript? Sprawdź ten przykład. Możesz przeglądać kod w pliku projektu, klikając łącze pobierania w prawym górnym rogu interakcja.

Uczyń interakcje dostępnymi

Postępuj zgodnie z tymi wskazówkami, aby Twoje interakcje były bardziej dostępne:

  • Używaj interaktywności strategicznie. Unikaj używania animacji i efektów wyłącznie do dekoracji. Powinny mieć jasny cel, taki jak prowadzenie uczestników przez proces lub skupienie się na określonym szczególe.
  • Rozważ czas. Zachowaj czas trwania animacji i efektów do mniej niż pięciu sekund. Interaktywność, która rozpoczyna się automatycznie i trwa dłużej niż pięć sekund, musi umożliwiać uczestnikom wstrzymanie, zatrzymanie lub ukrycie interakcji, aby była zgodna ze standardami dostępności. (2.2.2 Wstrzymaj, Zatrzymaj, Ukryj)
  • Daj uczestnikom kontrolę. Zapewnij opcję wyłączania animacji i efektów. Na przykład możesz użyć zmiennej prawda/fałsz, aby śledzić, czy uczestnik chce widzieć interaktywność. Następnie, w zależności od wyboru ucznia, pojawi się warstwa z interaktywnością lub inna warstwa bez interaktywności. (2.3.3 Animacja z interakcji)
  • Spełnij minimalny rozmiar docelowy. Klikalne obiekty mniejsze niż minimalny rozmiar docelowy 24 pikseli szerokości i 24 piksele wysokości mogą utrudniać uczestnikom dokładną interakcję. Upewnij się, że elementy interaktywne spełniają minimalny rozmiar docelowy lub mają wystarczająco dużo miejsca wokół nich. (2.5.8 Rozmiar docelowy [Minimalny])
  • Zachowaj prostotę. Szybka, złożona lub nieistotna interaktywność może zwiększyć obciążenie poznawcze. Aby zwiększyć dostępność, zsynchronizuj interakcje z tekstem lub narracją, pozwól uczestnikom wyłączyć interaktywność i upewnij się, że interakcje są zgodne z celami uczenia się.

Zrozum zgodność

Zaawansowane API JavaScript jest dostępne wyłącznie w Storyline 360 od marca 2025 roku. Chociaż możesz otwierać, edytować i publikować projekty korzystające z tego interfejsu API we wcześniejszych wersjach Storyline 360, kod ulegnie uszkodzeniu.

Storyline 360: Zaawansowany interfejs API JavaScript