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

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

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

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

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.

    Component_example_7
    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 CC automatycznie przypisze nazwę wystąpienia do zaznaczonego przycisku. Dodany kod można wyświetlić w panelu Operacje.

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

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

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

Wymaganie

Narzędzie do zarządzania rozszerzeniami. Aby wyświetlić instrukcje pobierania, kliknij opcję Pomoc > Zarządzaj rozszerzeniami w produkcie Animate CC.

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.

    ManageExtensions
  2. Kliknij opcję Zainstaluj rozszerzenie i wybierz rozszerzenie (plik ZXP) do zainstalowania.

  3. Aby wyświetlić zainstalowany składnik w programie Animate CC, 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.

    reloading-components

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