Podręcznik użytkownika Anuluj

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

Szukaj

Ostatnia aktualizacja Feb 11, 2022 04:26:13 AM GMT

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.

Wybierz polecenie Plik > Nowy.

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

HTML5 Canvas
Wybierz polecenia Okno > Składniki.

Składniki domyślne
Wybierz opcję Składniki > Wideo. Przeciągnij skojarzone składniki i upuść je na obszar roboczy.
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
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.
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

Wybierz opcję Okno > Składniki.
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.
Na ekranie Wycinki kodu wybierz opcję HTML5 Canvas > Składniki.

Domyślne wycinki kodu
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.

Zaznacz na stole montażowym wystąpienie składnika wideo i wyłącz ustawienie Autoodtwarzanie w inspektorze Właściwości.
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
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.
Otwórz panel Wycinki kodu, klikając polecenie Okno > Wycinki kodu. Wybierz opcję HTML5 Canvas > Składniki i rozwiń sekcję Interfejs użytkownika.
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
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
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
Aby dodać kod wstrzymujący wideo, wybierz przycisk wstrzymania, przypisz do niego procedurę obsługi kliknięć i dodaj kod wstrzymania wideo.
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.

Kliknij opcję Windows i wybierz opcję Składniki.
Rozwiń folder Wideo, kliknij ikonę wideo i przeciągnij ją na stół montażowy.
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:

Kliknij dwukrotnie plik ManageExtensions.exe. Zostanie wyświetlone okno dialogowe Zarządzaj rozszerzeniami.
Kliknij opcję Zainstaluj rozszerzenie i wybierz rozszerzenie (plik ZXP) do zainstalowania.Więcej informacji znajduje się w sekcji Instalowanie rozszerzeń.
Aby wyświetlić zainstalowany składnik w programie Animate, kliknij opcję Okno > Składniki.Zostanie wyświetlone okno dialogowe Składniki.
Kliknij ikonę hamburgera w prawym górnym rogu i kliknij opcję Ponownie załaduj składniki.

Więcej materiałów tego typu

Zaloguj się na swoje konto