• 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 17 lut 2026

Uwaga, entuzjaści JavaScript! Przygotuj się na odblokowanie potężnej interaktywności za pomocą 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. 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: Zaawansowane API JavaScript obecnie nie obsługuje 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 it's 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 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
    }
  )
);

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.

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 poniższymi 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ż wyczucie czasu. 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)
  • Osiągnij 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ść

Advanced JavaScript API jest dostępny 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.