Tworzenie i publikowanie dokumentu WebGL

WebGL to otwarty internetowy standard renderowania grafiki w dowolnych zgodnych przeglądarkach bez potrzeby używania dodatkowych wtyczek. Standard ten jest całkowicie zintegrowany ze wszystkimi standardami internetowymi zgodnych przeglądarek, co umożliwia korzystanie z przetwarzania obrazu i efektów z przyspieszeniem GPU w ramach obszaru roboczego strony internetowej. Elementy WebGL można osadzać w innych elementach HTML i składać z innymi częściami strony.

Większość nowoczesnych przeglądarek obsługuje standard WebGL. Warto jednak skorzystać z tego łącza, aby uzyskać więcej informacji o obsługiwanych numerach wersji.

W niektórych przeglądarkach standard WebGL nie jest domyślnie włączony. Aby włączyć funkcje WebGL w przeglądarce, zapoznaj się z tym artykułem.

 Upewnij się, że funkcje WebGL są włączone w przeglądarce, ponieważ w niektórych przeglądarkach standard ten jest domyślnie wyłączony.

Korzystanie z typu dokumentu WebGL-GLTF (beta)

Program Animate udostępnia dwa typy dokumentów WebGL-GLTF. Można używać standardowego typu dokumentu WebGL-GLTF, który pozwala na integrację z dowolnym standardowym pakietem WebGL-GLTF. Jest on w pełni zgodny ze standardem.

Publikowanie pliku WebGL-GLTF

Konwertowanie animacji na formaty GLTF i GLB

Formaty WebGL-glTF i GLB zmniejszają rozmiar pliku i czas przetwarzania. W programie Animate można używać dokumentów w obu formatach. Czy chcesz używać wideo w obu formatach? Obejrzyj samouczek na końcu tego przykładu i wykonaj poniższe kroki.

Tworzenie zaawansowanych animacji za pomocą eksportowania w formacie WebGL GLTF w programie Animate

Obejrzyj wideo, aby dowiedzieć się, jak wygląda animacja w formatach WebGL GLTF i GLB.

Animate 18.0 i wcześniejsze wersje

Poniższa zawartość jest przydatna w przypadku używania programu Animate 18.0 i wcześniejszych wersji.

Typ dokumentu WebGL

Program Animate umożliwia tworzenie i publikowanie rozbudowanej zawartości interaktywnej w formacie Web Graphics Library (WebGL). Funkcje WebGL są w pełni zintegrowane z przeglądarkami, dzięki czemu w programie Animate można stosować przetwarzanie graficzne i renderowanie z przyspieszeniem GPU w ramach obszaru roboczego strony internetowej.

Ten nowy typ dokumentu pozwala na tworzenie zawartości i szybkie publikowanie w formacie wyjściowym WebGL. Można tworzyć rozbudowaną zawartość w programie Animate przy użyciu zaawansowanych narzędzi, renderując zawartość wyjściową WebGL, którą będzie można uruchomić w dowolnej zgodnej przeglądarce. Oznacza to, że za pomocą tradycyjnej osi czasu, przestrzeni roboczej i narzędzi do rysowania programu Animate można tworzyć zawartość WebGL w formacie natywnym. Większość popularnych przeglądarek obsługuje standard WebGL, dzięki czemu program Animate pozwala renderować zawartość przy użyciu większości platform internetowych.

 Dostępna jest tylko wstępna obsługa środowiska WebGL. Ta aktualizacja programu Animate udostępnia obsługę podstawowych animacji z dźwiękami i skryptami, także zestawu funkcji interaktywnych. W przyszłych wersjach programu Animate kolejne funkcje będą rozszerzane o obsługę dokumentów WebGL. Pełną listę funkcji programu Animate z obsługą platformy WebGL można znaleźć w tym artykule w bazie wiedzy.

Tworzenie dokumentu WebGL

W programie Animate dokument WebGL umożliwia szybkie tworzenie i publikowanie zawartości w formacie WebGL. Aby utworzyć dokument WebGL:

1. Uruchom program Animate.
2. Na ekranie powitalnym kliknij opcję WebGL (zapowiedź). Okno dialogowe Nowy dokument można też wyświetlić, wybierając opcję menu Plik > Nowy. Kliknij opcję WebGL (zapowiedź).

Wyświetlanie podglądu zawartości WebGL w przeglądarkach

Za pomocą funkcji Testuj film programu Animate można wyświetlić podgląd zawartości lub ją przetestować. Aby wyświetlić podgląd, wykonaj poniższe czynności:

1. W programie Animate naciśnij klawisze Ctrl+Enter (Windows) lub Command+Enter (macOS). Spowoduje to uruchomienie przeglądarki domyślnej i renderowanie zawartości WebGL.

W programie Animate do uruchomienia zawartości WebGL jest potrzebny serwer internetowy. Program Animate zawiera wbudowany serwer internetowy, w którym uruchamianie zawartości WebGL jest skonfigurowane w oparciu o port 8090. Jeśli ten port jest już używany przez inny serwer, program Animate automatycznie wykrywa i rozwiązuje ten konflikt.

Publikowanie zawartości w formacie WebGL

Program Animate umożliwia bezpośrednie tworzenie i publikowanie zawartości WebGL w formacie natywnym.

Aby opublikować dokument WebGL, wykonaj poniższe czynności:

1. Wybierz opcję Plik > Ustawienia publikowania, aby wyświetlić okno dialogowe Ustawienia publikowania. Można też wybrać opcję Plik > Publikuj, jeśli już określono ustawienia publikowania dokumentu WebGL.
2. W oknie dialogowym Ustawienia publikowania określ wartości poniższych opcji:

Podaj nazwę opisową dla pliku wyjściowego. Ponadto wskaż lub wpisz lokalizację, w której chcesz opublikować plik wyjściowy WebGL.

Umożliwia określenie, czy przy każdym publikowaniu projektu WebGL ma być nadpisywane opakowanie HTML.Można usunąć zaznaczenie tej opcji, jeśli w opublikowanym pliku HTML wprowadzono zmiany poza programem Animate i mają one zostać zachowane przy aktualizacji oraz zmianach animacji lub zasobów.

Uwzględnia wszystkie warstwy ukryte w danych wyjściowych WebGL. Jeśli ta opcja nie jest zaznaczona, żadne warstwy ukryte (również warstwy zagnieżdżone wewnątrz klipów filmowych) nie są eksportowane w wyjściowym dokumencie WebGL. Opcja ułatwia testowanie różnych wersji dokumentu WebGL przez ustawianie warstw jako niewidocznych.

Po osiągnięciu ostatniej klatki odtwarzanie jest wznawiane od początku. Aby po osiągnięciu ostatniej klatki odtwarzanie zostało przerwane, nie należy zaznaczać tej opcji.

3. Kliknij przycisk Publikuj, aby opublikować zawartość WebGL w określonej lokalizacji.

 Dla zawartości WebGL uruchamianej w przeglądarkach można ustawić płynność odtwarzania maksymalnie 60 kl./s.

Opis danych wyjściowych WebGL

Opublikowana zawartość wyjściowa WebGL składa się z poniższych plików:

Zawiera on środowisko wykonawcze i wywołania zasobów; inicjuje mechanizm renderujący WebGL. Domyślna nazwa tego pliku to <nazwa_pliku_FLA>.html. Można podać inną nazwę dla pliku HTML w oknie dialogowym Ustawienia publikowania (wybierając opcję Plik > Ustawienia publikowania).

Domyślnie plik HTML jest umieszczany w tym samym katalogu, w którym znajduje się plik FLA. Można podać inną lokalizację w oknie dialogowym Ustawienia publikowania.

Renderuje publikowaną zawartość w formacie WebGL. Plik ten jest publikowany w folderze libs/ dokumentu WebGL. Jego nazwa to: flwebgl-<wersja>.min.js

Za pomocą tego pliku JS opakowanie HTML renderuje zawartość WebGL.

W tym pliku są przechowywane wszystkie wartości kolorów (przypisanych do kształtów), w tym wystąpienia bitmap na stole montażowym.

Dodawanie dźwięku do dokumentu WebGL

Program pozwala importować dźwięki i osadzać je w dokumentach WebGL, sterować ich odtwarzaniem za pośrednictwem ustawień synchronizacji (do zdarzeń, do rozpoczęcia i do zakończenia), jak również odtwarzać dźwięk z osi czasu podczas działania aplikacji. Format WebGL obsługuje obecnie tylko pliki WAV i MP3.

Więcej informacji na temat pracy z dźwiękiem można uzyskać w artykule Korzystanie z dźwięków w programie Animate.

Migrowanie istniejącej zawartości do dokumentu WebGL

Dla istniejącej zawartości w programie Animate można przeprowadzić migrację do dokumentu WebGL. Program Animate pozwala przeprowadzić migrację metodą ręcznego kopiowania lub importowania zawartości. Podczas pracy z wieloma dokumentami w programie Animate częstą praktyką jest kopiowanie zawartości między dokumentami jako warstw lub zasobów w bibliotece. Chociaż większość funkcji programu Animate jest obsługiwanych, niektóre typy zawartości są modyfikowane w celu ich lepszego dostosowania do formatu WebGL.

Program Animate udostępnia szereg zaawansowanych funkcji umożliwiających tworzenie rozbudowanej wizualnie zawartości. Niektóre z nich to natywne funkcje programu Animate nieobsługiwane w dokumentach WebGL. Program Animate został tak zaprojektowany, aby zmieniać tę zawartość na obsługiwany format i wizualnie wskazywać brak obsługi poszczególnych narzędzi i funkcji.

zawartości (warstw lub symboli bibliotecznych) z tradycyjnych dokumentów Animate (na przykład z dokumentów ActionScript 3.0, AIR for Android czy AIR dla komputerów) do dokumentów HTML. W takiej sytuacji nieobsługiwana zawartość zostanie usunięta lub przekonwertowana na obsługiwane wartości domyślne.

Na przykład skopiowanie animacji 3D spowoduje usunięcie wszystkich przekształceń 3D zastosowanych do obiektów na stole montażowym.

pliku PSD lub AI, który zawiera nieobsługiwaną zawartość. W takiej sytuacji zawartość zostanie usunięta lub przekonwertowana na obsługiwane wartości domyślne.

Na przykład w przypadku zaimportowania pliku PSD, do którego zastosowano efekty rozmycia, Program Animate usunie ten efekt.

z dokumentami różnych typów (na przykład ActionScript 3.0 i WebGL) i przełączenie się między dokumentami przy wybranych narzędziach lub opcjach, które nie są obsługiwane. Program Animate wyświetla wówczas wskazówkę wizualną, że dana funkcja nie jest obsługiwana.

Utworzono na przykład linię przerywaną w dokumencie ActionScript 3.0 i przełączono się do dokumentu WebGL, gdy narzędzie Linia było nadal wybrane. Sprawdzając wygląd wskaźnika i zawartość Inspektora właściwości, można przekonać się, że linia kropkowana nie jest obsługowana w przypadku formatu WebGL.

W panelu Operacje można napisać kod JavaScript, który będzie wykonywany po wejściu do klatki przez odtwarzacz. Zmienna this w kontekście skryptów klatek odnosi się do wystąpienia klasy MovieClip, do którego należy. Skrypty klatek mają dostęp do funkcji i zmiennych JavaScript zadeklarowanych w pliku HTML kontenera. Skopiowanie klatki lub warstwy z dokumentu ActionScript i wklejenie tego elementu do dokumentu WebGL powoduje dodanie komentarzy do skryptów (jeśli istnieją).

Zmiany stosowane do zawartości po migracji

Poniżej podano typy zmian stosowanych po migracji starszej zawartości do dokumentu WebGL.

Typy zawartości nieobsługiwane w dokumencie HTML5 Canvas są usuwane. Na przykład:

nie są obsługiwane. Efekt zostanie usunięty i kształt przyjmie zamiast niego jednolite wypełnienie.

Typ lub funkcja zawartości są obsługiwane, ale właściwość tej funkcji nie jest obsługiwana. Na przykład:

 

zostanie zmieniony, aby przyjął jednolite wypełnienie w kolorze podstawowym.

Zwiększanie wydajności renderowanie poprzez buforowanie bitmap.

Buforowanie bitmap w czasie wykonywania pozwala na zoptymalizowanie wydajności renderowania. Polega ono na tym, że statyczny klip filmowy (na przykład obraz tła) lub symbol przycisku jest buforowany w pamięci podręcznej jako bitmapa. Domyślnie elementy wektorowe są rysowane ponownie w każdej klatce. Buforowanie klipu filmowego lub symbolu przycisku jako bitmapy zapobiega wielokrotnemu rysowaniu tego elementu w przeglądarce, ponieważ obraz jest bitmapą, a jego położenie nie ulega zmianie. Zapewnia to znacznie wyższą wydajność renderowania zawartości WebGL.

Na przykład, tworząc animację ze skomplikowanym tłem, należy utworzyć klip filmowy zawierający wszystkie elementy wchodzące w skład tła. Następnie dla klipu filmowego tła należy wybrać opcję Buforuj jako bitmapę w Inspektorze właściwości. W trakcie odtwarzania tło będzie renderowane jako bitmapa zapisana z aktualną głębią ekranu. Przeglądarka rysuje bitmapę na stole montażowym szybko i tylko raz, przez co animacja jest odtwarzana szybciej i płynniej.

Buforowanie bitmapy pozwoli ci na użycie klipu filmowego i automatyczne wstrzymanie go w miejscu. Gdy zmieni się region, wektor danych uaktualnia bufor bitmapy. Ten proces minimalizuje liczbę operacji ponownego rysowania wykonywanych w przeglądarce i zapewnia płynniejsze, szybsze renderowanie.

Aby włączyć właściwość Buforuj jako bitmapę dla symbolu klipu filmowego, zaznacz wystąpienie klasy MovieClip, a następnie wybierz opcję Buforuj jako bitmapę z menu rozwijanego Renderuj w inspektorze Właściwości (Okno > Właściwości).

Uwagi dotyczące używania właściwości Buforuj jako bitmapę

W przypadku stosowania właściwości Buforuj jako bitmapę w zawartości WebGL należy mieć na uwadze następujące kwestie:

• Maksymalny rozmiar symbolu klipu filmowego wynosi 2048x2048. Obwiednia wystąpienia obiektu MovieClip, która podlega buforowaniu, jest mniejsza niż 2048x2048, gdyż format WebGL rezerwuje część pikseli.
• Jeśli istnieje więcej niż jedno wystąpienie tego samego klipu filmowego, program Animate generuje bufor o rozmiarze pierwszego napotkanego wystąpienia. Bufor nie jest generowany ponownie, a właściwość Buforuj jako bitmapę nie jest ignorowana nawet w przypadku przekształcenia klipu wideo w znaczący sposób. Jeśli skala symbolu klipu filmowego ulegnie znacznej zmianie w trakcie animacji, piksele mogą stać się bardzo widoczne.