Funkcja
- Podręcznik użytkownika programu Adobe Animate
- Wprowadzenie do programu Animate
- Animacja
- Podstawowe informacje o animacjach w programie Animate
- Korzystanie z klatek i klatek kluczowych w programie Animate
- Animacja klatka po klatce w programie Animate
- Praca z animacjami klasycznymi w programie Animate
- Narzędzie Pędzel
- Linie pomocnicze ruchu
- Animacje ruchu a język ActionScript 3.0
- Informacje o animacji ruchu
- Animacje ruchu
- Tworzenie animacji ruchu
- Używanie klatek kluczowych właściwości
- Animowanie położenia za pomocą klatek pośrednich
- Edytowanie animacji ruchu za pomocą Edytora ruchu
- Edytowanie ścieżki ruchu animacji
- Operacje na animacjach ruchu
- Dodawanie własnych krzywych dynamiki
- Tworzenie i stosowanie ruchów predefiniowanych
- Konfigurowanie zakresów animacji
- Praca z animacjami ruchu zapisanymi jako pliki XML
- Porównanie animacji ruchu i animacji klasycznych
- Animowanie kształtów metodą klatek pośrednich
- Animacja oparta na narzędziu Kość w programie Animate
- Tworzenie konstrukcji postaci w programie Animate
- Używanie warstw maskujących w programie Adobe Animate
- Praca ze scenami w programie Animate
- Funkcje interaktywne
- Tworzenie przycisków w programie Animate
- Konwertowanie projektów programu Animate na dokumenty innych typów
- Tworzenie i publikowanie dokumentów HTML5 Canvas w programie Animate
- Programowanie elementów interaktywnych za pomocą wycinków kodu w programie Animate
- Tworzenie własnych składników HTML5
- Używanie składników w zawartości HTML5 Canvas
- Tworzenie własnych składników: przykłady
- Wycinki kodu dla składników dostosowanych
- Sprawdzone procedury — reklama oparta na programie Animate
- Tworzenie i publikowanie materiałów rzeczywistości wirtualnej
- Przestrzeń robocza i obieg pracy
- Tworzenie pędzli malarskich i zarządzanie nimi
- Używanie czcionek Google Fonts w dokumentach HTML5 Canvas
- Korzystanie z Bibliotek Creative Cloud w programie Adobe Animate
- Korzystanie ze stołu montażowego i panelu Narzędzia w programie Animate
- Obieg pracy i przestrzeń robocza w programie Animate
- Używanie czcionek internetowych w dokumentach HTML5 Canvas
- Osie czasu a język ActionScript
- Praca z wieloma osiami czasu
- Ustawianie preferencji
- Korzystanie z paneli narzędziowych programu Animate
- Tworzenie warstw na osi czasu w programie Animate
- Eksportowanie animacji do aplikacji mobilnych i platform gier
- Przesuwanie i kopiowanie obiektów
- Szablony
- Znajdowanie i zamienianie w programie Animate
- Cofanie, ponawianie i panel Historia
- Skróty klawiaturowe
- Korzystanie z osi czasu w programie Animate
- Tworzenie rozszerzeń HTML
- Opcje optymalizacji obrazów i animowanych plików GIF
- Eksportowanie ustawień obrazów oraz plików GIF
- Panel Zasoby w programie Animate
- Multimedia i wideo
- Przekształcanie i łączenie obiektów graficznych w programie Animate
- Tworzenie i obsługa wystąpień symboli w programie Animate
- Obrys obrazu
- Używanie dźwięku w programie Adobe Animate
- Eksportowanie plików SVG
- Tworzenie plików wideo do używania w programie Animate
- Dodawanie wideo w programie Animate
- Rysowanie i tworzenie obiektów w programie Animate
- Przekształcanie linii i kształtów
- Obrysy, wypełnienia, i gradienty w programie Animate CC
- Korzystanie z programów Adobe Premiere Pro i After Effects
- Panel Kolory w programie Animate CC
- Otwieranie plików programu Flash CS6 w programie Animate
- Praca z tekstem klasycznym w programie Animate
- Umieszczanie kompozycji w programie Animate
- Zaimportowane bitmapy w programie Animate
- Grafika 3D
- Praca z symbolami w programie Animate
- Rysowanie linii i kształtów przy użyciu programu Animate
- Praca z bibliotekami w programie Animate
- Eksportowanie dźwięków
- Zaznaczanie obiektów w programie Animate CC
- Praca z plikami AI programu Illustrator w programie Animate
- Stosowanie trybów mieszania
- Układanie obiektów
- Automatyzacja zadań za pomocą menu Polecenia
- Teksty wielojęzyczne
- Korzystanie z kamery w programie Animate
- Filtry graficzne
- Dźwięk a język ActionScript
- Preferencje rysowania
- Rysowanie za pomocą narzędzia Pióro
- Platformy
- Konwertowanie projektów programu Animate na dokumenty innych typów
- Obsługa platform niestandardowych
- Tworzenie i publikowanie dokumentów HTML5 Canvas w programie Animate
- Tworzenie i publikowanie dokumentów WebGL
- Pakowanie aplikacji na potrzeby środowiska AIR for iOS
- Publikowanie aplikacji dla środowiska AIR for Android
- Publikowanie dla środowiska AIR na komputery
- Ustawienia publikowania kodu ActionScript
- Sprawdzone procedury — porządkowanie kodu ActionScript w aplikacji
- Korzystanie z kodu ActionScript w programie Animate
- Ułatwienia dostępu w przestrzeni roboczej programu Animate
- Pisanie skryptów i zarządzanie nimi
- Włączanie obsługi platform niestandardowych
- Omówienie obsługi platform niestandardowych
- Praca z wtyczkami obsługi platform niestandardowych
- Debugowanie kodu ActionScript 3.0
- Włączanie obsługi platform niestandardowych
- Eksportowanie i publikowanie
- Eksportowanie plików z programu Animate CC
- Publikowanie plików OAM
- Eksportowanie plików SVG
- Eksportowanie grafiki i wideo w programie Animate
- Publikowanie dokumentów ActionScript 3.0
- Eksportowanie animacji do aplikacji mobilnych i platform gier
- Eksportowanie dźwięków
- Sprawdzone procedury — wskazówki dotyczące tworzenia zawartości dla urządzeń przenośnych
- Sprawdzone procedury — konwencje dotyczące wideo
- Sprawdzone procedury — wskazówki dotyczące tworzenia aplikacji SWF
- Sprawdzone procedury — określanie struktury pliku FLA
- Sprawdzone procedury optymalizowania plików FLA dla programu Animate
- Ustawienia publikowania kodu ActionScript
- Określanie ustawień publikowania w programie Animate
- Eksportowanie plików projektora
- Eksportowanie obrazów i animowanych plików GIF
- Szablony publikowania w formacie HTML
- Korzystanie z programów Adobe Premiere Pro i After Effects
- Szybkie udostępnianie i publikowanie animacji
- Rozwiązywanie problemów
Obejmuje tworzenie arkusza kształtów lub atlasu tekstur i eksportowania animacji do aplikacji na urządzenia przenośne i platforma gier. Opisano w nim też importowanie atlasu tekstur do platformy Unity lub innej platformy gier przy użyciu wtyczki.
Przegląd
Program Animate umożliwia tworzenie animacji w oparciu o arkusze kształtów lub atlasy tekstur i eksportowanie ich do aplikacji na urządzenia przenośne oraz platform gier.
Arkusz kształtów
Arkusz kształtów jest to plik obrazu bitmapowego, który zawiera mniejsze elementy graficzne w układzie siatki kafelków. Połączenie kilku elementów graficznych w jednym pliku pozwala programowi Animate i innym aplikacjom używać grafiki po wczytaniu tylko jednego pliku. Uzyskiwana w ten sposób wydajność wczytywania może być szczególnie przydatna między innymi podczas programowania gier, gdzie duży nacisk jest kładziony na szybkość przetwarzania.
Arkusz kształtów można utworzyć z zaznaczenia dowolnych klipów filmowych, symboli przycisków, symboli graficznych lub bitmap. Elementy można zaznaczyć albo w panelu Biblioteka, albo na stole montażowym (nie w obu miejscach naraz). Każda bitmapa i każda klatka jest umieszczana w arkuszu kształtów jako oddzielna grafika. W przypadku eksportowania ze stołu montażowego wszelkie przekształcenia (skalowanie, pochylanie itd.) zastosowane do wystąpienia symbolu są zachowywane na obrazie wyjściowym.
Atlas tekstur
Atlas tekstur jest to kolekcja tekstur połączonych w jeden duży obraz lub wiele obrazów o odpowiednich wymiarach. Można zoptymalizować grę, tworząc atlas tekstur, który będzie używany w aplikacji gry.
W programie Animate można tworzyć atlasy tekstur z symboli takich jak klipy filmowe, grafiki i przyciski. Elementy można zaznaczyć albo w panelu Biblioteka, albo na stole montażowym (nie w obu miejscach naraz). Wszystkie wektory i klatki kluczowe spośród wybranych symboli są umieszczane w atlasie tekstur jako oddzielne bitmapy. W przypadku eksportowania ze stołu montażowego wszelkie przekształcenia (skalowanie, pochylanie itd.) zastosowane do wystąpienia symbolu są zachowywane na obrazie wyjściowym.
Różnica między arkuszem kształtów a atlasem tekstur
Zależnie od potrzeb można w aplikacjach na urządzenia przenośne używać arkuszy kształtów lub atlasów tekstur. W poniższej tabeli podano niektóre różnice między arkuszami kształtów a atlasami tekstur.
|
Arkusz kształtów |
Atlas tekstur |
---|---|---|
Wydajność w aplikacjach na urządzenia przenośne |
Niska |
Wysoka |
Wydajność wczytywania aplikacji |
Wysoka, gdyż nie wymaga obliczeń |
Niska, gdyż wymaga obliczeń związanych z plikiem JSON |
Rozmiar |
Większy rozmiar |
Mniejszy rozmiaru |
Jakość animacji |
Średnia |
Wysoka |
Liczba generowanych plików |
Dwa pliki: jedna bitmapa i jeden plik JSON |
Zmienna: Oparta na wymiarach obrazu. |
Liczba generowanych bitmap |
Zależnie od liczby ramek w arkuszu kształtów może wzrosnąć liczba plików bitmap, co z kolei może zwiększyć rozmiar arkusza kształtów. |
W kształcie są generowane tylko niepowtarzalne bitmapy, co zmniejsza łączny rozmiar. |
Tworzenie arkusza kształtów
Aby utworzyć arkusz Kształtów, wykonaj następujące czynności:
-
Zaznacz co najmniej jeden symbol w panelu Biblioteka lub co najmniej jedno wystąpienie symbolu na stole montażowym. Zaznaczenie może również zawierać bitmapy.
-
Kliknij zaznaczenie prawym przyciskiem myszy i wybierz opcję Generuj arkusz kształtów.
-
W oknie dialogowym Generowanie arkusza kształtów wybierz odpowiednie opcje i kliknij przycisk Eksportuj.
Opcje eksportu
Opis
Wymiary obrazu
Całkowity rozmiar arkusza kształtów w pikselach. Wartość domyślna to Rozmiar automatyczny. Powoduje ona ustawienie rozmiaru arkusza tak, aby mieścił wszystkie dołączone kształty.
Format obrazu
Format pliku eksportowanego arkusza kształtów. Formaty PNG 8-bitowy i 32-bitowy umożliwiają używanie przezroczystego tła (kanału alfa). 24-bitowe formaty PNG i JPG nie obsługują przezroczystego tła. Różnica między 8-bitowym i 32-bitowym formatem PNG jest zazwyczaj słabo widoczna. 32-bitowe pliki PNG są cztery razy większe niż 8-bitowe pliki PNG.
Wypełnianie brzegów
Wypełnienie wokół krawędzi arkusza kształtów w pikselach.
Wypełnianie kształtów
Wypełnienie między poszczególnymi obrazami w arkuszu kształtów w pikselach.
Algorytm
Technika używana do pakowania obrazów w arkuszu kształtów. Są dostępne dwie opcje:
- Podstawowe (domyślna)
- MaxRects
Format danych
Wewnętrzny format używany do przechowywania danych obrazu. Wybierz format najlepiej pasujący do planowanych operacji na wyeksportowanym arkuszu kształtów.
Obrót
Obraca kształty o 90 stopni. Ta opcja jest dostępna dla niektórych formatów danych.
Przycięcie
Ta opcja umożliwia oszczędzenie miejsca w arkuszu kształtów przez przycięcie nieużywanych pikseli wszystkich klatek symboli, które dodano do arkusza.
Ułóż klatki w stos
Wybranie tej opcji zapobiega powielaniu klatek powielonych w grupie zaznaczonych symboli w wynikowym arkuszu stylów.
Eksportowanie animacji do aplikacji mobilnych i platform gier
Program Animate pozwala eksportować animacje do platform gier i aplikacji mobilnych. Chcesz wyświetlić animację na telefonie komórkowym lub platformie gier? Obejrzyj samouczek na końcu tego przykładu i wykonaj poniższe kroki.
-
W panelu Biblioteka kliknij klip filmowy prawym przyciskiem myszy.
-
Wybierz opcję Generuj arkusz kształtów.
-
Wybierz odpowiednie ustawienia w oknie dialogowym Arkusz kształtów.
-
Kliknij przycisk Eksportuj.
Eksportowanie animacji do aplikacji mobilnych i platform gier
Tworzenie atlasu tekstur
Twórcy gier mogą przy użyciu programu Animate organizować animacje i eksportować je jako atlasy tekstur do ulubionej platformy gier, na przykład Unity.
Na poniższym diagramie zilustrowano proces generowania atlasu tekstur w programie Animate i importowania go na platformę Unity:
Aby wygenerować atlas tekstur animacji, wykonaj następujące czynności:
-
W programie Animate można wygenerować atlas tekstur dla wybranego symbolu w panelu Biblioteka, a także dla wystąpienia symbolu na stole montażowym.
-
Kliknij symbol prawym przyciskiem myszy i wybierz z menu opcję Wygeneruj atlas tekstur. Zostanie wyświetlone okno Generowanie atlasu tekstur.
-
Wybierz odpowiednie opcje eksportowania dla arkusza tekstur.
Opcje eksportu Opis Wymiary obrazu Całkowity rozmiar atlasu tekstur w pikselach. Wartość domyślna to Rozmiar automatyczny. Powoduje ona ustawienie rozmiaru arkusza tak, aby mieścił wszystkie dołączone obrazy. Optymalizuj wymiary - Kiedy jest zaznaczona opcja Optymalizuj wymiary, puste piksele są usuwane z bitmap, tak aby uzyskać wymiary będące potęgą dwójki (opcja domyślna). Ta opcja jest stosowana do wszystkich generowanych bitmap.
- Kiedy opcja Optymalizuj wymiary nie jest zaznaczona, bitmapy są generowane zgodnie z wybranymi wymiarami.
Format obrazu Format pliku eksportowanego arkusza kształtów. Formaty PNG 8-bitowy i 32-bitowy umożliwiają używanie przezroczystego tła (kanału alfa). Różnica między 8-bitowym i 32-bitowym formatem PNG jest zazwyczaj słabo widoczna. 32-bitowe pliki PNG są cztery razy większe niż 8-bitowe pliki PNG. Rozdzielczość Można wybrać dowolną wartość z zakresu od 0,3 do 3,0. Wypełnianie brzegów Wypełnienie wokół krawędzi atlasu tekstur w pikselach. Wypełnianie kształtów Wypełnienie między poszczególnymi obrazami w atlasie tekstur w pikselach. Algorytm Technika używana do pakowania obrazów w atlasie tekstur. Są dostępne dwie opcje:
- Podstawowe
- MaxRects (domyślna)
Format danych Wewnętrzny format używany do przechowywania danych obrazu. Domyślny format to JSON. Obrót Umożliwia obracanie obrazów o 90 stopni. Ta opcja jest dostępna dla niektórych formatów danych. Spłaszcz pochylone obiekty do bitmapy Tę opcję należy wybrać w przypadku przekształcania obiektów przez pochylanie. Program Animate przekonwertuje te obiekty na obrazy bitmapowe, ponieważ niektóre platformy gier nieprawidłowo interpretują przekształcenia pochylania. Optymalizacja pliku Animation.json - Kiedy jest zaznaczona opcja Optymalizacja pliku Animation.json, wcięcia i matryca po dekompozycji są usuwane oraz użyte nazwy są skracane (opcja domyślna).
- Kiedy opcja Optymalizacja pliku Animation.json nie jest zaznaczona, eksport jest przeprowadzany razem z wcięciami i pełnymi nazwami.
-
Można przeprowadzić eksport symbolu do wielu bitmap zgodnie z jego wymiarami.
W przypadku zasobów przekraczających wymiary wybranego obrazu jest wyświetlane ostrzeżenie.
-
Aby wyświetlić podgląd wyjściowego atlasu tekstur, kliknij zakładkę Podgląd.
-
Kliknij przycisk Przeglądaj i wybierz ścieżkę docelową pliku wyjściowego na komputerze albo wprowadź ścieżkę w polu tekstowym, a następnie kliknij przycisk Eksportuj.
Wygenerowany folder wyjściowy atlasu tekstur zawiera następujące pliki:
Animation.json
Ten plik zawiera informacje o animacji. Domyślnie program optymalizuje (łączy) identyczne klatki w pliku Animation.json.
spritemap.json
Ten plik zawiera informacje o pliku spritesheet.png.
spritemap.png
W przypadku wyeksportowanego symbolu ten plik zawiera reprezentację bitmapową wszystkich minimalnych unikatowych tekstur wymaganych do rekonstrukcji animacji.
Wygenerowanego atlasu tekstur można używać na dowolnych platformach gier, takich jak Unity, korzystając z odpowiednich wtyczek importujących.
Importowanie atlasu tekstur do platformy Unity
Do ulubionych platform gier można importować pliki atlasu tekstur wygenerowane w programie Animate. Do importowania plików atlasu tekstur można utworzyć wtyczkę odpowiadającą używanej platformie gier. Dostępne jest przykładowe narzędzie do importowania do platformy Unity.
Aby zaimportować atlas tekstur do platformy Unity, wykonaj następujące czynności:
-
Na platformie Unity utwórz projekt w określonej lokalizacji. Zostanie tam utworzony folder z podfolderem Assets.
-
Utwórz dwa podfoldery folderu Assets: Resources i Editor.
-
Kliknij tutaj, aby pobrać przykładową wtyczkę do importowania na platformę Unity. Wybierz opcję Wtyczka Unity na zakładce Pliki do pobrania, a następnie wybierz odpowiedni numer wersji do pobrania.
Plik unity-plugin.zip zawiera pliki Plugin.cs, WrapperPlugin.cs, AnimateEditor.cs i Effect.shader.
Pobranie przykładu oznacza zgodę na warunki korzystania i zasady prywatności online.
-
Przenieś pliki atlasu tekstur, takie jak Animation.json, spritemap.json, spritemap.png i pliku wtyczki Unity, takie jak plugin.cs i Effect.shader, do folderu Assets > Resources.
-
Przenieś pliki AnimateEditor.cs i WrapperPlugin.cs do folderu Assets.
-
Na platformie Unity kliknij plik AnimateEditor.cs i przeciągnij go do katalogu Main Camera.
-
Odtwórz. Odtworzenie projektu powoduje rozdzielenie mapy kształtów na odrębne kształty.
-
Przenieś plik AnimateEditor.cs do katalogu Editor.
-
Na platformie Unity kliknij plik WrapperPlugin.cs i przeciągnij go do katalogu Main Camera.Usuń zaznaczenie pliku AnimateEditor.cs lub usuń go z katalogu Main Camera.
-
Odtwórz lub opublikuj dane wyjściowe w odpowiedni sposób.
Wtyczkę można dostosować, modyfikując plik WrapperPlugin.cs odpowiednio do konkretnych wymagań.
Wtyczka Unity obsługuje efekty kolorystyczne w plikach atlasów tekstur utworzonych za pomocą programu Animate. Wtyczka umożliwia również maskowanie za pośrednictwem warstw. Funkcja maskowania dotyczy tylko platformy Unity 2017 lub nowszej.
Publikowanie tekstur
Twórcy animacji mogą pracować nad materiałami w formacie wektorowym , a eksportować je w formatach wektorowych i rastrowych na platformy HTML5. W ustawieniach publikowania dodano opcję umożliwiającą wyeksportowanie animacji jako atlasu tekstur. Pozwala to poprawić wydajność animacji.
1. Utwórz nowy dokument Canvas. Wybierz polecenie Plik > Nowy, aby wyświetlić okno Nowy dokument.
2. Wybierz zakładkę Zaawansowane i kliknij opcję HTML5 Canvas. Zostanie otwarty nowy dokument FLA.
3. Kliknij polecenie Plik > Ustawienia publikowania.Jeśli na zakładce Podstawowe jest włączona opcja Eksportuj dokument jako teksturę, na zakładce Ustawienia obrazu są widoczne opcje publikowania tekstury. Domyślnie podczas publikowania tekstur są uwzględniane wszystkie symbole. Aby wybrać tylko niektóre symbole tekstur, kliknij ikony ustawień obok nich.
Użycie tej opcji może zwiększyć rozmiar zasobu, ale poprawia ona wydajność. Rozdzielczość obrazów można powiększyć do dwu- lub trzykrotności pierwotnej rozdzielczości na potrzeby publikowania pod kątem wyświetlaczy o wysokiej rozdzielczości. Aby zmienić ustawienia rozdzielczości, kliknij ikonę klucza obok opcji Eksportuj dokument jako teksturę zgodnie z poniższym zrzutem ekranu. Przeciągnij liczby obok opcji Rozdzielczość, aby uzyskać wielokrotności 2x i 3x.
Domyślnie tekstury są publikowane z podwójną rozdzielczością. Rozdzielczość można ustawić w zakresie od 0,3 do 3x.
Publikowanie tekstur jest możliwe tylko w przypadku dokumentów typu HTML5 Canvas.
Ogólnie rzecz biorąc, plik wektorowy wiąże się z mniejszym rozmiarem, a plik rastrowy — z wydajnością. Platformy HTML5 są zoptymalizowane pod kątem stosowania zawartości rastrowej. W przypadku niektórych złożonych kształtów korzystne jest wstępne przekonwertowanie obrazów wektorowych na rastrowe. Kiedy zawartość jest prosta, można z powodzeniem stosować grafikę wektorową. Program Animate udostępnia tę opcję w oknie dialogowym częściowego zaznaczania symboli. Częściowe zaznaczenie symboli umożliwia przekonwertowanie niektórych symboli na grafikę rastrową i zachowanie pozostałych jako grafiki wektorowej.
Aby uzyskać częściowe zaznaczenie symboli, kliknij przycisk Zmień w oknie dialogowym Ustawienia publikowania i wybierz symbol z listy. Domyślnie są zaznaczone wszystkie symbole.
Zaznacz odpowiednie symbole na liście.
Poprawianie wydajności grafiki przy użyciu tekstur bitmapowych
Stosowanie tekstur bitmapowych w programie Animate pozwala zwiększyć wydajność animacji na niektórych platformach. Chcesz obniżyć złożoność grafiki wektorowej, korzystając z tekstur bitmapowych? Obejrzyj samouczek na końcu tego przykładu i wykonaj poniższe kroki.
-
W panelu Właściwości kliknij przycisk Ustawienia publikowania.
-
Na zakładce Podstawowe wybierz ikonę koła zębatego obok opcji Eksportuj dokument jako teksturę.
-
Na zakładce Ustawienia obrazu kliknij przycisk Zmień i wybierz odpowiednie symbole.
-
Kliknij przycisk OK.