Podręcznik użytkownika Anuluj

Animowanie kształtów metodą klatek pośrednich

  1. Podręcznik użytkownika programu Adobe Animate
  2. Wprowadzenie do programu Animate
    1. Nowości w programie Animate
    2. Słownik wizualny
    3. Wymagania systemowe programu Animate
    4. Skróty klawiaturowe programu Animate
    5. Praca z wieloma typami plików w programie Animate
  3. Animacja
    1. Podstawowe informacje o animacjach w programie Animate
    2. Korzystanie z klatek i klatek kluczowych w programie Animate
    3. Animacja klatka po klatce w programie Animate
    4. Praca z animacjami klasycznymi w programie Animate
    5. Narzędzie Pędzel
    6. Linie pomocnicze ruchu
    7. Animacje ruchu a język ActionScript 3.0
    8. Informacje o animacji ruchu
    9. Animacje ruchu
    10. Tworzenie animacji ruchu
    11. Używanie klatek kluczowych właściwości
    12. Animowanie położenia za pomocą klatek pośrednich
    13. Edytowanie animacji ruchu za pomocą Edytora ruchu
    14. Edytowanie ścieżki ruchu animacji
    15. Operacje na animacjach ruchu
    16. Dodawanie własnych krzywych dynamiki
    17. Tworzenie i stosowanie ruchów predefiniowanych
    18. Konfigurowanie zakresów animacji
    19. Praca z animacjami ruchu zapisanymi jako pliki XML
    20. Porównanie animacji ruchu i animacji klasycznych
    21. Animowanie kształtów metodą klatek pośrednich
    22. Animacja oparta na narzędziu Kość w programie Animate
    23. Tworzenie konstrukcji postaci w programie Animate
    24. Używanie warstw maskujących w programie Adobe Animate
    25. Praca ze scenami w programie Animate
  4. Funkcje interaktywne
    1. Tworzenie przycisków w programie Animate
    2. Konwertowanie projektów programu Animate na dokumenty innych typów
    3. Tworzenie i publikowanie dokumentów HTML5 Canvas w programie Animate
    4. Programowanie elementów interaktywnych za pomocą wycinków kodu w programie Animate
    5. Tworzenie własnych składników HTML5
    6. Używanie składników w zawartości HTML5 Canvas
    7. Tworzenie własnych składników: przykłady
    8. Wycinki kodu dla składników dostosowanych
    9. Sprawdzone procedury — reklama oparta na programie Animate
    10. Tworzenie i publikowanie materiałów rzeczywistości wirtualnej
  5. Przestrzeń robocza i obieg pracy
    1. Tworzenie pędzli malarskich i zarządzanie nimi
    2. Używanie czcionek Google Fonts w dokumentach HTML5 Canvas
    3. Korzystanie z Bibliotek Creative Cloud w programie Adobe Animate
    4. Korzystanie ze stołu montażowego i panelu Narzędzia w programie Animate
    5. Obieg pracy i przestrzeń robocza w programie Animate
    6. Używanie czcionek internetowych w dokumentach HTML5 Canvas
    7. Osie czasu a język ActionScript
    8. Praca z wieloma osiami czasu
    9. Ustawianie preferencji
    10. Korzystanie z paneli narzędziowych programu Animate
    11. Tworzenie warstw na osi czasu w programie Animate
    12. Eksportowanie animacji do aplikacji mobilnych i platform gier
    13. Przesuwanie i kopiowanie obiektów
    14. Szablony
    15. Znajdowanie i zamienianie w programie Animate
    16. Cofanie, ponawianie i panel Historia
    17. Skróty klawiaturowe
    18. Korzystanie z osi czasu w programie Animate
    19. Tworzenie rozszerzeń HTML
    20. Opcje optymalizacji obrazów i animowanych plików GIF
    21. Eksportowanie ustawień obrazów oraz plików GIF
    22. Panel Zasoby w programie Animate
  6. Multimedia i wideo
    1. Przekształcanie i łączenie obiektów graficznych w programie Animate
    2. Tworzenie i obsługa wystąpień symboli w programie Animate
    3. Obrys obrazu
    4. Używanie dźwięku w programie Adobe Animate
    5. Eksportowanie plików SVG
    6. Tworzenie plików wideo do używania w programie Animate
    7. Dodawanie wideo w programie Animate
    8. Rysowanie i tworzenie obiektów w programie Animate
    9. Przekształcanie linii i kształtów
    10. Obrysy, wypełnienia, i gradienty w programie Animate CC
    11. Korzystanie z programów Adobe Premiere Pro i After Effects
    12. Panel Kolory w programie Animate CC
    13. Otwieranie plików programu Flash CS6 w programie Animate
    14. Praca z tekstem klasycznym w programie Animate
    15. Umieszczanie kompozycji w programie Animate
    16. Zaimportowane bitmapy w programie Animate
    17. Grafika 3D
    18. Praca z symbolami w programie Animate
    19. Rysowanie linii i kształtów przy użyciu programu Animate
    20. Praca z bibliotekami w programie Animate
    21. Eksportowanie dźwięków
    22. Zaznaczanie obiektów w programie Animate CC
    23. Praca z plikami AI programu Illustrator w programie Animate
    24. Stosowanie trybów mieszania
    25. Układanie obiektów
    26. Automatyzacja zadań za pomocą menu Polecenia
    27. Teksty wielojęzyczne
    28. Korzystanie z kamery w programie Animate
    29. Filtry graficzne
    30. Dźwięk a język ActionScript
    31. Preferencje rysowania
    32. Rysowanie za pomocą narzędzia Pióro
  7. Platformy
    1. Konwertowanie projektów programu Animate na dokumenty innych typów
    2. Obsługa platform niestandardowych
    3. Tworzenie i publikowanie dokumentów HTML5 Canvas w programie Animate
    4. Tworzenie i publikowanie dokumentów WebGL
    5. Pakowanie aplikacji na potrzeby środowiska AIR for iOS
    6. Publikowanie aplikacji dla środowiska AIR for Android
    7. Publikowanie dla środowiska AIR na komputery
    8. Ustawienia publikowania kodu ActionScript
    9. Sprawdzone procedury — porządkowanie kodu ActionScript w aplikacji
    10. Korzystanie z kodu ActionScript w programie Animate
    11. Ułatwienia dostępu w przestrzeni roboczej programu Animate
    12. Pisanie skryptów i zarządzanie nimi
    13. Włączanie obsługi platform niestandardowych
    14. Omówienie obsługi platform niestandardowych
    15. Praca z wtyczkami obsługi platform niestandardowych
    16. Debugowanie kodu ActionScript 3.0
    17. Włączanie obsługi platform niestandardowych
  8. Eksportowanie i publikowanie
    1. Eksportowanie plików z programu Animate CC
    2. Publikowanie plików OAM
    3. Eksportowanie plików SVG
    4. Eksportowanie grafiki i wideo w programie Animate
    5. Publikowanie dokumentów ActionScript 3.0
    6. Eksportowanie animacji do aplikacji mobilnych i platform gier
    7. Eksportowanie dźwięków
    8. Sprawdzone procedury — wskazówki dotyczące tworzenia zawartości dla urządzeń przenośnych
    9. Sprawdzone procedury — konwencje dotyczące wideo
    10. Sprawdzone procedury — wskazówki dotyczące tworzenia aplikacji SWF
    11. Sprawdzone procedury — określanie struktury pliku FLA
    12. Sprawdzone procedury optymalizowania plików FLA dla programu Animate
    13. Ustawienia publikowania kodu ActionScript
    14. Określanie ustawień publikowania w programie Animate
    15. Eksportowanie plików projektora
    16. Eksportowanie obrazów i animowanych plików GIF
    17. Szablony publikowania w formacie HTML
    18. Korzystanie z programów Adobe Premiere Pro i After Effects
    19. Szybkie udostępnianie i publikowanie animacji
  9. Rozwiązywanie problemów
    1. Rozwiązane problemy
    2. Znane problemy

 

W przypadku animacji kształtu użytkownik rysuje kształt wektorowy przypisany do określonej klatki na osi czasu, a następnie zmienia kształt lub rysuje zupełnie nowy kształt w innej klatce. Program Animate interpoluje kształty pośrednie w klatkach pomiędzy dwiema określonymi klatkami, tworząc animację przedstawiającą przejście jednego kształtu w drugi.

W programie Animate można dodawać animacje kształtu zarówno do pociągnięć jednorodnych, jak i nieregularnych. Animacje kształtu można również stosować do pociągnięć udoskonalonych za pomocą narzędzia Zmienna szerokość. W celu uzyskania pożądanych wyników warto wykonać kilka prób z kształtami. Za pomocą wskaźników kształtów można wygenerować dla programu Animate instrukcję dotyczącą punktów w kształcie początkowym, które odpowiadają określonym punktom w kształcie końcowym.

Animacja kształtu może również dotyczyć pozycji i koloru kształtu.

Aby drugą z wymienionych metod można było zastosować do grup, obiektów lub obrazów bitmapowych, należy dokonać ich podziału. Aby można ją było zastosować do tekstu, należy podzielić go dwukrotnie, czyli przekonwertować tekst na obiekty. Zapoznaj się z sekcją Dzielenie wystąpienia symbolu.

Tworzenie animacji kształtu

Poniżej opisano procedurę tworzenia animacji kształtu od klatki 1 do klatki 30 na osi czasu. Animacje można tworzyć w dowolnej części wybranej osi czasu.

  1. W klatce 1 narysuj kwadrat za pomocą narzędzia Prostokąt.
  2. Wybierz klatkę 30 tej samej warstwy i dodaj pustą klatkę kluczową, wybierając opcje Wstaw > Oś czasu > Pusta klatka kluczowa lub naciskając klawisz F7.

  3. Na stole montażowym, w klatce 30, narysuj koło za pomocą narzędzia Owal.

    Teraz w klatce 1 zawierającej kwadrat i w klatce 30 zawierającej koło powstały klatki kluczowe.

  4. Na osi czasu wybierz jedną z klatek między dwiema klatkami kluczowymi w warstwie zawierającej te dwa kształty.

  5. Wybierz opcję Wstaw > Animacja kształtu.

    Program Animate dokona interpolacji kształtów we wszystkich klatkach między dwiema klatkami kluczowymi.

  6. W celu wyświetlenia podglądu animacji należy przesunąć głowicę odtwarzania między klatkami kluczowymi na osi czasu lub nacisnąć klawisz Enter.

  7. Aby animować ruch dodatkowo do kształtu, przenieś kształt do klatki 30 w innym miejscu niż w klatce 1.

    W celu wyświetlenia podglądu animacji naciśnij klawisz Enter.

  8. W celu animowania koloru kształtu należy ustawić kolor dla kształtu w klatce 1 inny niż dla kształtu w klatce 30.
  9. Aby dodać do animacji linie napięcia, należy wybrać jedną z klatek, a następnie wprowadzić wartość do pola Krzywa dynamiki w inspektorze Właściwości.

    W celu zdefiniowania dynamiki na początku animacji wprowadź wartość ujemną. Aby uzyskać dynamikę na końcu animacji, wprowadź wartość dodatnią.

Tworzenie predefiniowanych i własnych krzywych dynamiki

Predefiniowane krzywe dynamiki zawierają wstępne konfiguracje dynamiki, które można stosować do obiektów na stole montażowym.

Dla animacji kształtu jest dostępny zestaw często stosowanych predefiniowanych krzywych dynamiki. Można wybrać jedną z nich z listy i zastosować do wybranej właściwości. Można też zastosować własną krzywą dynamiki do animacji kształtu.

  1. Kliknij warstwę zawierającą animację kształtu na osi czasu programu Animate.

  2. Aby otworzyć właściwości animacji, kliknij kategorię Animowanie metodą klatek pośrednich w panelu właściwości.

    Właściwości animacji
    Właściwości animacji

  3. Wybierz predefiniowaną krzywą dynamiki z menu podręcznego typu krzywej dynamiki. Kliknij ustawienie predefiniowane, aby je zastosować. 

    Zastosowanie klasycznej krzywej dynamiki pozwala też zwiększyć lub zmniejszyć intensywność modyfikacji przy użyciu suwaka. 

    Typy predefiniowanych krzywych dynamiki
    Typy predefiniowanych krzywych dynamiki

  4. Kliknij ikonę Edytuj w obszarze Krzywa dynamiki, aby zastosować własną krzywą dynamiki.

    W oknie dialogowym Niestandardowa krzywa dynamiki jest widoczna krzywa (tzw. krzywa dynamiki), która obrazuje rozkład procentowy zmian animowanych obiektów w czasie. Wartości na osi x reprezentują kolejne klatki animacji, wartości na osi y odpowiadają procentowym zmianom wyglądu animowanych obiektów. Pierwszej klatce kluczowej odpowiada wartość 0% (brak zmian), ostatniej klatce kluczowej wartość — 100% (pełna zmiana)

    Kąt nachylenia krzywej obrazuje szybkość zmian. Gdy krzywa jest pozioma (zerowy kąt nachylenia), szybkość zmian wynosi 0; gdy krzywa jest pionowa, pełna zmiana dokonuje się natychmiast.

    Własną krzywą dynamiki można zapisać do użytku w przyszłości. Będzie ona dostępna na liście Własne. Po wprowadzeniu zmian kliknij w trybie edycji przycisk Zapisz i zastosuj. Na poniższym zrzucie ekranu przedstawiono dostosowaną predefiniowaną krzywą dynamiki o nazwie MyEase1.

    Predefiniowane krzywe dynamiki mogą być używane w wielu zakresach na osi czasu. W tym celu należy zaznaczyć odpowiednie zakresy i zastosować krzywą dynamiki.

    Predefiniowana krzywa dynamiki dla wielu zakresów
    Stosowanie predefiniowanej krzywej dynamiki do wielu zakresów

Sterowanie zmianami kształtów za pomocą punktów zmiany kształtu

Sterowanie złożonymi lub nietypowymi zmianami kształtów umożliwiają punkty zmiany kształtu. Punkty te identyfikują elementy, które sobie odpowiadają w kształcie początkowym i końcowym. Na przykład, jeśli animacja dotyczy twarzy zmieniającej wyraz, to za pomocą punktów zmiany kształtu można oznaczyć oczy. Dzięki takiemu zabiegowi twarz nie będzie zmieniała się w sposób jednolity; oczy zostaną wyodrębnione i będą zmieniały się niezależnie od reszty elementów.

Punkty zmiany kształtu jako litery
Punkty zmiany kształtu jako litery

Punkty zmiany kształtu zawierają litery (od a do z) informujące o tym, które punkty kształtu końcowego i początkowego muszą sobie odpowiadać. Można użyć maksymalnie 26 punktów zmiany kształtu.

Punkty zmiany kształtu w pierwszej ramce kluczowej są żółte, w ostatniej — zielone, a jeśli nie znajdują się na krzywej, są czerwone.

Chcąc uzyskać możliwie najlepszy wynik generowania klatek pośrednich kształtu, warto przestrzegać następujących zasad:

  • W przypadku złożonych zmian kształtu należy utworzyć kształty pośrednie i dla nich generować klatki pośrednie, a nie zdefiniować jedynie kształt początkowy i końcowy.

  • Należy upewnić się, czy punkty zmiany kształtu są logiczne. Jeśli na przykład dla pewnego trójkąta zdefiniowano trzy punkty zmiany, to ich kolejność w trójkącie pierwotnym nie może różnić się od kolejności w trójkącie docelowym. Nie można użyć kolejności a, b, c w pierwszej klatce kluczowej i a, c, b w drugiej.

  • Punkty zmiany kształtu działają najlepiej, jeśli rozmieszcza się je w kierunku przeciwnym do ruchu wskazówek zegara, począwszy od lewego górnego rogu kształtu.

Korzystanie z punktów zmiany kształtu

  1. Zaznacz pierwszą klatkę kluczową generowanej sekwencji kształtów pośrednich.
  2. Wybierz polecenie Modyfikuj > Kształt > Dodaj punkt zmiany kształtu. Pierwszy punkt zmiany kształtu jest oznaczany czerwonym kółkiem i literką a.

  3. Przesuń punkt zmiany kształtu w wybrane miejsce,
  4. Zaznacz ostatnią klatkę kluczową generowanej sekwencji kształtów pośrednich. Ostatni punkt zmiany kształtu jest oznaczany zielonym kółkiem i literką a w obrębie kształtu.

  5. Przesuń punkt zmiany kształtu w miejsce kształtu końcowego, które odpowiada pierwszemu ze wskazanych punktów.

  6. Aby sprawdzić, jak punkty zmiany kształtu wpływają na sposób generowania kształtów pośrednich, ponownie odtwórz animację. W razie konieczności dostosuj położenie punktów zmiany kształtu.
  7. Aby dodać więcej punktów zmiany kształtu, powtórz ten proces. Nowe punkty będą oznaczane kolejnymi literami (b, c itd).

Wyświetlanie wszystkich punktów zmiany kształtu

  1. Wybierz polecenie Widok > Pokaż punkty zmiany kształtu. Aby polecenie Pokaż punkty zmiany kształtu było aktywne, warstwa i klatka kluczowa muszą zawierać punkty zmiany kształtu.

Usuwanie punktu zmiany kształtu

  1. Przeciągnij punkt poza stół montażowy.

Usuwanie wszystkich punktów zmiany kształtu

  1. Wybierz polecenie Modyfikuj > Kształt > Usuń wszystkie punkty zmiany.

Dodawanie animacji kształtu do pociągnięć o zmiennej szerokości

Program Animate umożliwia dodawanie animacji kształtu do pociągnięć ze zmienną szerokością. Dotąd program Animate obsługiwał jedynie tworzenie animacji kształtu w przypadku jednolitych kształtów i pociągnięć. Ograniczało to swobodę projektowania, gdyż nie było można tworzyć animacji kształtów w przypadku niejednolitych pociągnięć — na przykład udoskonalonych za pomocą narzędzia Zmienna szerokość. Animowanie pociągnięć o zmiennej szerokości znacznie wzbogaca wachlarz możliwości projektowania oferowanych przez program Animate

Dodawanie animacji kształtów do złożonych pociągnięć przebiega analogicznie do animowania kształtu czy jednolitego pociągnięcia. W obiegu pracy konieczne jest zdefiniowanie początkowego i ostatecznego kształtu animacji. Program Animate tworzy klatki przejściowe animacji.

Informacje o narzędziu Zmienna szerokość

Korzystając z narzędzia Zmienna szerokość, można udoskonalić jednolite pociągnięcie w celu uzyskania pięknego, nietuzinkowego kształtu.

Dodawanie animacji kształtu do pociągnięć o zmiennej szerokości

  1. W programie Animate CC narysuj linię przy użyciu narzędzia Linia.

    Obrys linii z wartością pociągnięcia ustawioną na dwa piksele
    Pociągnięcie liniowe narysowane przy użyciu narzędzia Linia na stole montażowym z wartością pociągnięcia ustawioną na dwa piksele

  2. Za pomocą narzędzia Zmienna szerokość dodaj szerokość na środku pociągnięcia (patrz ilustracja poniżej). Informacje na temat używania narzędzia Zmienna szerokość można znaleźć w artykule Wzbogacanie pociągnięć za pomocą narzędzia Zmienna szerokość.

    Pociągnięcie o zmiennej szerokości z wartością 68 pikseli
    Pociągnięcie o zmiennej szerokości utworzone przy użyciu narzędzia Zmienna szerokość z wartością pociągnięcia ustawioną na 68,0 pikseli

  3. Zaznacz na osi czasu inną klatkę, na przykład klatkę 30, a następnie utwórz kształt ostateczny pociągnięcia na potrzeby animacji.

    Kształt ostateczny dodany do ostatniej klatki kluczowej animacji kształtu
    Kształt ostateczny dodany do ostatniej klatki kluczowej animacji kształtu

  4. Kliknij prawym przyciskiem myszy w dowolnej klatce między 1 a 30 i wybierz polecenie Utwórz animację kształtu.

Dodawanie animacji kształtu do profilów zmiennych szerokości

W programie Animate można też dodawać animacje kształtów do złożonych pociągnięć zapisanych jako profile zmiennych szerokości. Wystarczy zastosować profile szerokości do początkowego i ostatecznego kształtu w animacji, a program Animate utworzy płynną animację kształtu.

Profile szerokości są to złożone pociągnięcia, które utworzono przy użyciu narzędzia Zmienna szerokość i zapisano do użytku w przyszłości. Aby dodać animacje kształtów do profilów zmiennych szerokości, wykonaj następujące kroki:

  1. W programie Animate narysuj linię na stole montażowym przy użyciu narzędzia Linia.

    Obrys linii z wartością dwóch pikseli
    Pociągnięcie liniowe narysowane przy użyciu narzędzia Linia na stole montażowym z wartością pociągnięcia ustawioną na dwa piksele

  2. W inspektorze Właściwości wybierz i zastosuj profil szerokości z menu rozwijanego Szerokość.

    Pociągnięcie o zmiennej szerokości z wartością pociągnięcia 68 pikseli
    Pociągnięcie o zmiennej szerokości utworzone przy użyciu narzędzia Zmienna szerokość z wartością pociągnięcia ustawioną na 68,0 pikseli

  3. Zaznacz inną klatkę na osi czasu, na przykład klatkę 30, a następnie wybierz żądany profil szerokości z menu rozwijanego Szerokość w inspektorze Właściwości.

  4. Aby dodać animację kształtu do wybranych profilów szerokości, kliknij prawym przyciskiem myszy dowolną z klatek od 1 do 30 i wybierz opcję Utwórz animację kształtu.

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?