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

W tym artykule omówiono używanie własnych składników.

Składnik udostępnia funkcję lub grupę powiązanych elementó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

Uwaga:

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

Uwaga:

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.

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

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

Adobe MAX

The Creativity Conference

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