Podręcznik użytkownika Anuluj

Używanie składników w zawartości HTML5 Canvas

  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 tym artykule omówiono używanie własnych składników.

Składnik udostępnia funkcję lub grupę powiązanych składników wielokrotnego użytku, co ułatwia pracę twórcom reklam. Dawniej program Animate obsługiwał składniki Flash używane z elementami docelowymi Flash. Od tej wersji program Animate obsługuje zawartość HTML5 Canvas. 

  1. Wybierz polecenie Plik > Nowy.

    Wybierz zakładkę Zaawansowane u góry ekranu w oknie dialogowym Nowy dokument i wybierz opcję HTML5 Canvas.

    Nowy dokument
    HTML5 Canvas

  2. Wybierz polecenia Okno > Składniki.

    Składniki domyślne

  3. Wybierz opcję Składniki > Wideo. Przeciągnij skojarzone składniki i upuść je na obszar roboczy. 

  4. Zaznacz na stole montażowym wystąpienie składnika wideo. Wyświetl i zmień jego parametry w inspektorze Właściwości. Parametr Źródło pozwala na wybranie pliku wideo z lokalizacji lokalnej lub wpisanie dowolnego adresu URL do odtworzenia filmu (w formacie MP4, OGG, OGV lub WEBM).

    Przeciąganie i upuszczanie składników

  5. Aby dopasować rozmiar odtwarzacza wideo do rozmiaru wideo wejściowego, wybierz opcję Dopasuj do wymiarów źródła. Funkcja ta działa tylko dla filmów w formacie MP4. W przypadku innych typów filmów zmień ręcznie rozmiar wystąpienia elementu wideo na stole montażowym. Pamiętaj, aby zadbać o zachowanie proporcji.

  6. Aby wyświetlić podgląd filmu, naciśnij klawisze Ctrl + Enter (Cmd + Enter w systemie macOS). Wideo zostanie odtworzone w przeglądarce domyślnej.Ponieważ elementy sterujące są domyślnie widoczne, można je wyświetlić, ustawiając w przeglądarce kursor nad filmem.

    Tej samej procedury można użyć dla innych składników.

    Podgląd wyjścia składnika

Składniki są dodawane do dokumentów HTML jako elementy DOM. Aby dodać funkcje interaktywne do składnika, należy użyć wycinków kodu typu Składnik (Wycinki kodu > HTML5 Canvas > Składniki).

Dodawanie funkcji interaktywnych przy użyciu wycinków kodu

  1. Wybierz opcję Okno > Składniki.

  2. Aby dodać do tych elementów funkcje interaktywne, wybierz panel Okno > Wycinki kodu. Można przejrzeć odwzorowania różnych dostępnych zachowań składników.

  3. Na ekranie Wycinki kodu wybierz opcję HTML5 Canvas > Składniki.

    Domyślne wycinki kodu

  4. Odpowiednio do wybranego składnika kliknij dwukrotnie właściwy wycinek kodu. Pojawi się on w panelu Operacje.Więcej informacji na temat dodawania funkcji interaktywnych do wycinków kodu podano w sekcji Dodawanie funkcji interaktywnych przy użyciu wycinków kodu w programie Animate .

Przykład

W poniższym przykładzie przedstawiono sposób używania wycinków kodu tam, gdzie odtwarzanie wideo jest sterowane kodem.

  1. Zaznacz na stole montażowym wystąpienie składnika wideo i wyłącz ustawienie Autoodtwarzanie w inspektorze Właściwości. 

  2. Aby utworzyć na stole montażowym dwa wystąpienia przycisków i rozmieścić je, w panelu Składniki kliknij dwukrotnie składnik Przycisk. Można je także bezpośrednio przeciągnąć z panelu Składniki i umieścić na stole montażowym.

    Rozmieszczanie przycisków

  3. Zaznacz pierwsze wystąpienie przycisku i w inspektorze Właściwości zmień jego etykietę na Odtwórz. Dla drugiego przycisku zmień etykietę na Wstrzymaj. 

  4. Otwórz panel Wycinki kodu, klikając polecenie Okno > Wycinki kodu. Wybierz opcję HTML5 Canvas > Składniki i rozwiń sekcję Interfejs użytkownika. 

  5. Zaznacz na stole montażowym przycisk Odtwórz, w panelu Wycinki kodu kliknij dwukrotnie pozycję Zdarzenie kliknięcia przycisku i kliknij przycisk OK.Program Animate automatycznie przypisze nazwę wystąpienia do zaznaczonego przycisku. Dodany kod można wyświetlić w panelu Operacje.

    Dodawanie wycinków kodu

  6. Zaznacz na stole montażowym element wideo i obszarze wycinków kodu rozwiń sekcję Wideo. Kliknij dwukrotnie polecenie Odtwarzaj wideo. Kod wymagany do odtworzenia filmu wideo zostanie dodany do panelu Operacje.

    Kod dodany do panelu Operacje

  7. Aby odtworzyć wideo po kliknięciu przycisku, przenieś kod do obszaru między sekcjami <Start your custom code> oraz <End your custom code>. 

    Przenoszenie kodu między znacznikami

  8. Aby dodać kod wstrzymujący wideo, wybierz przycisk wstrzymania, przypisz do niego procedurę obsługi kliknięć i dodaj kod wstrzymania wideo.

  9. Wyświetl podgląd filmu. Kliknij przycisk odtwarzania, aby włączyć odtwarzanie filmu. Kliknij przycisk wstrzymania, aby je wstrzymać. 

Dla każdego składnika można w inspektorze Właściwości wyświetlić jego atrybut className (nazwa klasy). Za pomocą tych nazw klas oraz plików CSS można nadać składnikom pożądany wygląd. Do wczytania dostosowanego pliku CSS użyj składnika CSS. Składnik CSS umożliwia wybranie dowolnego lokalnego pliku CSS, który dołączono do filmu.

Interesujące składniki HTML5

Dodawanie funkcji interaktywnych do zawartości jest interesujące i wiąże się z pracą ze składnikami HTML 5. Czy chcesz dowiedzieć się, jak korzystać z tych składników HTML5 w programie Animate? Obejrzyj samouczek na końcu tego przykładu i wykonaj poniższe kroki.

  1. Kliknij opcję Windows i wybierz opcję Składniki.

  2. Rozwiń folder Wideo, kliknij ikonę wideo i przeciągnij ją na stół montażowy.

  3. W oknie Właściwości rozwiń zakładkę Położenie i rozmiar, a następnie ustaw wymagane wartości.

Ulepszanie kompozycji programu Animate za pomocą składników HTML5

Obejrzyj wideo, aby dowiedzieć się, jak dodać więcej składników do kompozycji.

Instalowanie składników rozpowszechnionych

Projektanci i programiści korzystający z programu Animate mogą instalować rozpowszechniony składnik z pliku ZXP, korzystając z narzędzia Zarządzanie rozszerzeniami. Więcej informacji znajduje się w sekcji Instalowanie rozszerzeń.

Wymaganie

Instalowanie składników

Aby zainstalować składniki rozpowszechnione, wykonaj następujące czynności: 

  1. Kliknij dwukrotnie plik ManageExtensions.exe. Zostanie wyświetlone okno dialogowe Zarządzaj rozszerzeniami.

  2. Kliknij opcję Zainstaluj rozszerzenie i wybierz rozszerzenie (plik ZXP) do zainstalowania.Więcej informacji znajduje się w sekcji Instalowanie rozszerzeń.

  3. Aby wyświetlić zainstalowany składnik w programie Animate, kliknij opcję Okno > Składniki.Zostanie wyświetlone okno dialogowe Składniki.

  4. Kliknij ikonę hamburgera w prawym górnym rogu i kliknij opcję Ponownie załaduj składniki.

Adobe

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?

Adobe MAX 2024

Adobe MAX

The Creativity Conference

14–16 października, plaża Miami Beach i online

Adobe MAX 2024

Adobe MAX

The Creativity Conference

14–16 października, plaża Miami Beach i online