Uwaga:

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.

Co to jest 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.

Uwaga:

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

Typ dokumentu WebGL

Program Animate CC 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.

W programie Animate CC został dodany nowy typ dokumentu dla formatu WebGL. Pozwala to 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.

Tworzenie dokumentu WebGL

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

  1. Uruchom program Animate CC.
  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 CC naciśnij klawisze Ctrl+Enter (Windows) lub Command+Enter (Mac OS). Spowoduje to uruchomienie przeglądarki domyślnej i renderowanie zawartości WebGL.
W programie Animate CC do uruchomienia zawartości WebGL jest potrzebny serwer internetowy. Program Animate CC zawiera wbudowany serwer internetowy, w którym uruchamianie zawartości WebGL jest skonfigurowane w oparciu o port 8090. Jeśli port ten będzie już używany przez inny serwer, program Animate automatycznie wykryje i rozwiąże 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:

Plik wyjściowy

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

Nadpisz HTML

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 CC i mają one zostać zachowane przy aktualizacji oraz zmianach animacji lub zasobów.

Uwzględniaj warstwy ukryte

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.

Zapętl oś czasu

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.

webgl_publishsettings1492590407685
  1. Kliknij przycisk Publikuj, aby opublikować zawartość WebGL do określonej lokalizacji.

Uwaga:

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:

Plik opakowania HTML

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.

Plik JavaScript (środowisko wykonawcze WebGL)

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.

Atlas tekstur

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.

Kopiowanie

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.

Importowanie

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.

Jednoczesna praca

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 CC 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.

Skrypty

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.

Zawartość usuwana

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

Filtry

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

filters_1492590408405
Efekt filtra rozmycia zostanie usunięty i zastąpiony jednolitym wypełnieniem.

Zawartość jest modyfikowana; jej wartości są zmieniane na obsługiwane wartości domyślne.

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

 

Gradient radialny

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

radial_gradient_1492590399485
Gradient radialny zostanie zmieniony na jednolite wypełnianie w kolorze podstawowym.

Pełną listę nieobsługiwanych funkcji wraz z ich wartościami domyślnymi ustawianymi podczas migracji można znaleźć w tym artykule.

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).

cacheasbitmap_1492590398980

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.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online