Podręcznik użytkownika Anuluj

Tworzenie własnych składników HTML5

Szukaj
Animate

Animate

Otwórz aplikację
  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 wyjaśniono sposób tworzenia własnych składników dla zawartości HTML5 Canvas.

Program Animate jest dostarczany ze zbiorem składników domyślnych. Czasami w projekcie jest potrzebne coś więcej. W tym temacie przestawiono sposób tworzenia własnych składników HTML5 w programie Animate.

Definicja składnika składa się z trzech najważniejszych obszarów:

  • Metadane: Informacje o składniku, takie jak nazwa wyświetlana, wersja, zbiór konfigurowalnych właściwości czy ikona. Znajdują się one w pliku o nazwie components.js. Składniki można grupować w kategoriach, a za pomocą tego pliku można podać metadane wszystkich składników należących do wskazanej kategorii.
  • Źródło: Informacje na temat rzeczywistego źródła składników. Jest osadzany w środowisku wykonawczym w momencie podglądu lub publikacji filmu za pomocą składników.
  • Zasoby: Informacje na temat zależności środowiska wykonawczego, takie jak biblioteka JavaScript, arkusz CSS lub zasoby i ikony środowiska wykonawczego. Zasobów można używać w środowisku projektowym programu Animate.

 Definicja składnika obejmuje także zasoby powiązane z lokalizacją.

Przykładowa konfiguracja folderu z kategorii własnego składnika

W momencie uruchomienia program Animate sprawdza poniższe foldery pod kątem obecności własnych składników HTML5 i wczytuje je przy uruchamianiu:

• Windows:

<AppData>/Local/Adobe/Adobe Animate 2017/en_US/Configuration/HTML5Components

 

• macOS:

~/Biblioteki/Application Support/Adobe/Animate 2017/en_US/Configuration/HTML5Components/

Powyższa ścieżka folderu dotyczy języka angielskiego (USA). Jeśli jest używana inna wersja językowa programu Animate, należy poszukać folderu odpowiadającego temu językowi (z innym oznaczeniem niż en_US).

Dla każdego folderu w danej lokalizacji zawierającego plik components.js program Animate tworzy oddzielną kategorię i wczytuje do niej wszystkie składniki.

Metadane składnika

Metadane składnika znajdują się w pliku components.js umieszczonym w oddzielnym folderze w katalogu HTML5Components. 

Przykładowe metadane składnika wideo

Components.js

Components.js

to plik JSON z następującymi sekcjami:

  • Category: Widoczna w panelu Składniki nazwa danego zestawu składników. Można ją przetłumaczyć.
  • Components: Tablica, w której poszczególne pozycje zawierają metadane składnika. Powyższy przykład ma w tablicy tylko jeden element. Metadane zawierają następujące sekcje:

Nazwa

Czy wymagane

Opis

ClassName

Tak

Nazwa klasy składnika podanego w pliku źródłowym. Nazwa klasy obsługuje jeden poziom przestrzeni nazw. Na przykład: Video.

 

Version

Nie

Numer wersji składnika. Używany w razie przyszłych uaktualnień składnika. Odpowiednia procedura nie jest tutaj definiowana.

Source

Tak

Ścieżka względna do głównego pliku źródłowego składnika. Więcej informacji na temat zawartości tego elementu podano w następnej sekcji.

Icon

Nie

Ścieżka względna do ikony składnika. Ikona (razem z nazwą składnika) jest używana w panelu składników oraz na stole montażowym po ustawieniu wystąpienia składnika. Przy braku informacji użyta zostanie ikona domyślna.

Podaj nazwę pliku PNG z ikoną do wczytania (przeważnie w rozmiarze 32x32). Można także podać dwie różne ikony, do jasnego i ciemnego interfejsu użytkownika. Należy wówczas użyć nazw w następującym formacie:

wlasna_ikona_N.png — ikona do ciemnego interfejsu użytkownika

wlasna_ikona_D.png — ikona do jasnego interfejsu użytkownika

W tym polu wystarczy wówczas wpisanie wartości „wlasna_ikona”. Przyrostki zostaną dopisane automatycznie odpowiednio do bieżących ustawień użytkownika.

Dimensions

Nie

Domyślny rozmiar wystąpienia składnika. Za każdym razem, gdy użytkownik przeciąga składnik z panelu na stół montażowy, tworzone jest jego nowe wystąpienie. W tym polu można wpisać domyślny rozmiar początkowy wystąpienia składnika. Wartość należy podać w formie tablicy [szerokość, wysokość]. Jeśli nie zostanie podana żadna wartość, program Animate pobierze rozmiar domyślny. Dodatkowo program Animate ogranicza rozmiar do przedziału od [2,2] do [1000, 1000].

Dependencies

Nie

Zbiór zależności danego składnika. Jest to tablica, w której każda pozycja jest ścieżką względną do źródła lokalnego (klucz „src”) oraz ścieżką do systemu CDN (klucz „cdn”). Ścieżka do systemu CDN nie jest wymagana. Używa się jej po wpisaniu bibliotek na serwerach w ustawieniach publikowania. W przeciwnym razie przy podglądzie lub publikacji użyte zostanie źródło lokalne.

W przykładzie powyżej należy zwrócić uwagę na ścieżkę względną (video). Elementy zależne są wczytywane z jednego poziomu wyżej, co pozwala na ich udostępnianie między różnymi zbiorami składników.

Properties

Tak

Jest to tablica właściwości. Po utworzeniu wystąpienia danego składnika na stole montażowym w inspektorze Właściwości automatycznie pojawia się skonfigurowany w tym miejscu zestaw właściwości. Użytkownicy tego składnika mogą skonfigurować te właściwości w programie Animate. Spowoduje to ich udostępnienie dla tworzonego w środowisku wykonawczym wystąpienia składnika.

Każda pozycja właściwości zawiera następujące klucze:

  1. Nazwa: Nazwa danej właściwości wyświetlana w inspektorze Właściwości. Zalecane jest, aby była zrozumiała dla użytkownika. Można ją przetłumaczyć.
  2. Zmienna: Wewnętrzna nazwa danej właściwości. Skonfigurowane wartości będą dostępne pod tą nazwą w czasie wykonywania. Więcej informacji na ten temat podano w dalszych sekcjach.
  3. Typ: Typ właściwości. Program Animate obsługuje następujące typy właściwości:
    1. Boolean: Pole wyboru w inspektorze Właściwości.
    2. Number: Pole liczbowe w inspektorze Właściwości.
    3. String: Pole tekstowe
    4. w inspektorze Właściwości.List: Konfigurowana przez użytkownika tablica wartości.
    5. Collection: Umożliwia użytkownikom skonfigurowanie listy par <key, value>. (Patrz pole listy kombinowanej).
    6. File Path: Pozwala na wskazanie i wybranie dowolnego pliku lokalnego. Wartość ciągu jest przekazywana podczas uruchomienia. Plik jest automatycznie kopiowany do wyjścia opublikowanego w folderze assets, a ścieżka względna jest udostępniana podczas pracy.
    7. Image Path: Pozwala użytkownikowi na wskazanie i wybranie dowolnego obrazu. Plik jest automatycznie kopiowany do wyjścia opublikowanego w skonfigurowanym folderze obrazów, a ścieżka względna jest udostępniana w czasie wykonywania.
    8. Video Content Path: Pozwala użytkownikowi na znalezienie i wybranie dowolnego wideo w formacie internetowym (MP4, OGG , OGV , WEBM ). Skonfigurowany zasób jest kopiowany do folderu „videos” w opublikowanym wyjściu.
    9. Color: Próbnik kolorów w inspektorze Właściwości.
  4. Default: Domyślna wartość właściwości. Wartość domyślna powinna być tego samego typu co typ właściwości.

Źródło składnika

Każdy składnik powinien mieć powiązany plik źródłowy z kodem do obsługi: następujące czynności:

  • tworzenia wystąpienia składnika w środowisku wykonawczym ze skonfigurowanym zestawem wartości właściwości,
  • przyłączania się do modelu DOM i odłączania od niego,
  • aktualizacji właściwości w każdej klatce.

Klasę bazową i funkcję narzędziową podano w pliku anwidget.js. Ułatwia on tworzenie własnych składników. Interfejs ten zostanie udoskonalony w przyszłości, ale z zachowaniem zgodności z wcześniejszymi wersjami. Obecnie obsługiwane są wyłącznie składniki oparte na modelu DOM. W przyszłości wprowadzona zostanie także obsługa składników opartych na standardzie Canvas. Obecnie obsługiwane są jedynie widżety. W przyszłości rozszerzymy platformę o możliwość przyłączania zachowań (składników spoza zakresu interfejsu użytkownika).

Plik anwidget.js znajduje się w folderze HTML5Components/sdk umieszczonym w folderze pierwszego uruchomienia. Podano w nim klasę bazową AnWidget dla własnych składników oraz metodę narzędziową $.anwidget(<className>, {Object Prototype}) do rejestracji własnych składników. W bieżącej implementacji użyto środowiska jQuery. Dlatego gdy używane są usługi oferowane przez widżet, środowisko jQuery jest zawsze dodawane jako zależność. Aby nie dodawać pośredniej zależności od środowiska jQuery, należy wdrożyć klasę Component bez środowiska jQuery. Zapewnia ona ten sam interfejs co klasa Widget.

 

Szablon HTML

Kod HTML zawiera domyślnie następujące sekcje (poza sekcją div modułu wczytywania wstępnego):

Domyślne sekcje kodu HTML (poza sekcją div modułu wczytywania wstępnego)

Na poprzedniej ilustracji wskazano kolejność dodawania elementów do modelu DOM. Element div dom_overlay_container przedstawiono nad elementem canvas.

 Nie należy zmieniać identyfikatora elementu div dom_overlay_container. Tak jak w pierwszej wersji, istnieje szereg funkcji, które zależą od tego identyfikatora. Są to między innymi wycinki kodu.

Zgodnie z poprzednią ilustracją element div dom_overlay_container jest umieszczany jako nakładka nad elementem canvas. Aby upewnić się, że zdarzenia myszy są prawidłowo propagowane do bazowego elementu canvas, użyto w tym elemencie div właściwości CSS {pointer-events: none}. Wszystkie wystąpienia składnika, które skonfigurowano w projekcie w programie Animate, są tworzone i przyłączane jako element podrzędny tego elementu div dom_overlay_container. W środowisku wykonawczym względna kolejność wystąpień składnika jest kontrolowana, obecnie jednak wszystkie wystąpienia składnika są prezentowane jako nakładka. Ustawienie właściwości {pointer-events: all} we wszystkich wystąpieniach składnika w środowisku wykonawczym pozwala uzyskać także wykrywanie zdarzeń myszy.

Cykl życia składnika

Cykl życia składnika

  1. Wystąpienie składnika jest tworzone w momencie budowania modelu DOM dla składnika.

  2. Wystąpienie jest przyłączane do modelu DOM, gdy głowica odtwarzania osiąga klatkę, w której użyto tego wystąpienia. Następnie przyłączany jest mechanizm obsługi aktualizacji, który jest wywoływany w każdym cyklu pracy środowiska wykonawczego. W tym momencie składnik wywołuje także w elemencie nadrzędnym zdarzenie „attached” z następującymi danymi zdarzenia {id: identyfikator_wystąpienia}.

  3. Właściwości są aktualizowane przy każdym wywołaniu zwrotnym aktualizacji. Wszystkie aktualizacje właściwości są buforowane i wprowadzane jednocześnie w ramach procedury obsługi cyklu. Animacje właściwości niestandardowych nie są obecnie obsługiwane. Aktualizacja obejmuje tylko podstawowe właściwości, takie jak przekształcenie czy widoczność.

  4. Po osiągnięciu przez głowicę odtwarzania klatki, w której wystąpienie składnika jest usuwane, następuje jego odłączenie od modelu DOM. W elemencie nadrzędnym wywoływane jest zdarzenie detached.

Klasa bazowa ma nazwę $.AnWidget i oferuje następujące nadpisania:

Nazwa

Czy obowiązkowe

Opis

getCreateOptions()

Nie

Zwraca wszystkie opcje, które mają być stosowane w momencie tworzenia wystąpienia składnika. Typowe użycie zastąpienia służy do przypisania unikatowego identyfikatora do każdym wystąpieniu. Używa się w tym celu zmiennej globalnej _widgetID. Sposób użycia został wyjaśniony w następnej sekcji.

getCreateString()

Tak

Zwraca ciąg tworzenia wystąpienia modelu DOM. Ciąg ten jest przekazywany do środowiska jQuery w celu utworzenia rzeczywistego elementu modelu DOM przyłączanego do bazowego modelu DOM.

 

Na przykład dla składnika obrazu zostanie zwrócony ciąg „<image>”.

 

Rzeczywisty element jest tworzony w środowisku wykonawczym. Odwołanie do mechanizmu opakowującego jQuery jest zapisywane w wystąpieniu składnika:

 

this._element = $(this.getCreateElement())

 

// this._element to mechanizm opakowujący jQuery dla utworzonego bazowego elementu modelu DOM.

 

Można także tworzyć elementy złożone. Szczegółowe informacje na ten temat zostaną podane w sekcji z przykładami.

getProperties()

Nie

Zwraca tablicę z nazwami właściwości CSS, które można konfigurować. Przeważnie odpowiada to wszystkim właściwościom skonfigurowanym w pliku components.json.

 

Na przykład dla składnika wideo ta tablica zawiera następujące pozycje:

 

["left", "top", "width", "height", "position", "transform-origin", "transform"]

getAttributes()

Nie

Zwraca tablicę atrybutów, które można skonfigurować. Przeważnie odpowiada to wszystkim atrybutom, które można skonfigurować w pliku components.json.

 

Na przykład dla składnika wideo ta tablica zawiera następujące pozycje:

 

["id", "src", "controls", "autoplay", "loop", "class"]

attach(parent)

Nie

Ta funkcja jest wywoływana, kiedy wystąpienie składnika ma zostać przyłączone do nadrzędnego elementu modelu DOM.

 

Domyślna implementacja realizuje między innymi następujące operacje:

 

// Przyłącza element do nadrzędnego modelu DOM

$(parent).append(this._element);

 

// Przechowuje odniesienie w zmiennej this._$this

this._$this = $(this._element);

 

// Wywołuje wymuszoną aktualizację wszystkich właściwości

this.update(true);

this._attached = true;

 

// Wywołuje zdarzenie attached w elemencie nadrzędnym

$(parent).trigger("attached", this.getEventData("attached"))

 

Nadpisanie tej funkcji nie jest konieczne. Jednak w elementach złożonych może to być niezbędne. Więcej informacji można znaleźć w sekcji z przykładami.

 

Uwaga: Za pomocą metody this._superApply(arguments) można wywołać dowolną metodę klasy bazowej z dowolnego kodu nadpisującego.

detach()

Nie

Ta funkcja jest wywoływana za każdym razem, gdy z modelu DOM ma zostać usunięte wystąpienie składnika. Domyślna implementacja realizuje następujące operacje:

 

// Usuwa element z modelu DOM

this._$this.remove();

// Wywołuje zdarzenie detached w elemencie nadrzędnym

$(parent).trigger("detached", this.getEventData("detached"));

setProperty(k,v)

Nie

Ta funkcja służy do ustawienia dowolnej właściwości wystąpienia. Zmiany są buforowane i stosowane jednocześnie w momencie wywołania funkcji update() względem każdej klatki i każdej nieskorygowanej właściwości.

update(force)

Nie

Ta funkcja jest wywoływana w każdej klatce, gdy składnik jest elementem modelu DOM i jest widoczny. Domyślna implementacja wprowadza wszystkie właściwości i atrybuty CSS, jeśli zostały zmienione, lub jeśli parametr force ma wartość true.

show()

Nie

Pokazuje wystąpienie elementu. Nie jest to przeważnie konieczne. Może być niezbędne w elementach złożonych.

hide()

Nie

Ukrywa wystąpienie elementu. Nie jest to przeważnie konieczne. Może być niezbędne w elementach złożonych.

getEventData(e)

Nie

Zwraca wszystkie dostosowane dane dla zdarzenia o nazwie „e”. Domyślna implementacja przesyła dane {id: identyfikator_wystąpienia} dla przyłączonych i odłączonych zdarzeń.

destroy()

Nie

Zwalnia pamięć, gdy wystąpienie składnika zostaje odłączone od modelu DOM. Przeważnie nie trzeba zastępować tej funkcji.

applyProperties(e)

Nie

Ta pomocnicza funkcja interfejsu API służy do wprowadzania właściwości CSS do mechanizmu opakowującego jQuery „e”.

applyAttributes(e)

Nie

Ta pomocnicza funkcja interfejsu API służy do wprowadzania atrybutów do mechanizmu opakowującego jQuery „e”.

Lokalizacja

Lokalizacji podlega ciąg kategorii, nazwa wyświetlana składnika oraz nazwa właściwości. Utwórz plik o nazwie strings.json w folderze o nazwie locale umieszczonym w folderze składników. Podaj pary klucz-wartość dla wszystkich ciągów, które mają zostać zlokalizowane, i użyj klucza w pliku components.js. W przypadku innych ustawień regionalnych należy podać potrzebne ciągi w odpowiednich folderach umieszczonych w folderze locale.

Ciąg .json

Pakowanie i rozpowszechnianie własnych składników HTML5

Programiści i projektanci korzystający z programu Animate mogą zapewnić twórcom animacji dostęp do składników bez konieczności pisania kodu, udostępniając gotowe, wstępnie spakowane składniki. Wcześniej twórcy animacji musieli dysponować wiedzą o strukturze plików i programowaniu oraz ręcznie przenosić pliki do odpowiednich folderów w celu uaktywnienia rozszerzeń HTML5.

Wymagania

  • Dowolny składnik utworzony przez programistę. Kliknij tutaj, aby uzyskać instrukcje na temat tworzenia składników.
  • Zestaw narzędzi do podpisywania rozszerzeń CC.

Przed spakowaniem składnika utwórz plik MXI z metadanymi — ścieżkami źródłową i docelową składnika. Przykład:

<file source=&quot;jquery-ui-1.12.0&quot; destination=&quot;$FLASH\HTML5Components\jQueryUI\&quot; file-type=&quot;ordinary&quot; />

Tych informacji o plikach źródłowych i docelowych wymaga narzędzie do obsługi rozszerzeń, aby precyzyjnie zainstalować składnik.

Pakowanie składników

Aby spakować własny składnik HTML5, wykonaj następujące czynności: 

  1. Aby utworzyć plik MXI, wprowadź nazwę podobną do przykładowej abc.mxi w edytorze tekstu i zapisz plik z rozszerzeniem MXI.

    Pobierz

    Pobierz plik
    Pobierz przykładowy plik abc.mxi.

  2. Dodaj plik MXI składnika i inne skojarzone pliki do folderu.

  3. Utwórz plik z rozszerzeniem ZXP, korzystając z narzędzia do podpisywania rozszerzeń CC (ZXPSignCmd.exe). Aby utworzyć plik ZXP, użyj następujących poleceń w narzędziu do tworzenia plików ZXP:

    1. Utwórz certyfikat samopodpisany, korzystając z opcji -selfSignedCert.

    Ten krok można pominąć, jeśli już istnieje certyfikat.

    ZXPSignCmd -selfSignedCert US NY MyCompany MyCommonName password FileName.p12

    W bieżącym folderze zostanie wygenerowany plik FileName.p12.

    2. Podpisz rozszerzenie przy użyciu następującego polecenia: 

    ZXPSignCmd -sign projectName projectName.zxp FileName.p12 password

    Fragment nazwaProjektu to nazwa projektu rozszerzenia. W bieżącym folderze zostanie utworzony plik nazwaProjektu.zxp.

Rozpowszechnianie składników

Spakowany plik składnika nazwaProjektu.zxp można rozpowszechnić u dowolnych użytkowników programu Animate.

 Firma Adobe zaleca rozpowszechnianie produktów przy użyciu witryny dodatków firmy Adobe. Dodatki można rozpowszechniać publicznie (bezpłatnie lub płatnie) oraz prywatnie (bezpłatnie dla wskazanych użytkowników).

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 materiałów tego typu

Adobe

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?

Podręczne łącza

Wyświetl swoje plany Zarządzaj planami
Wyświetl podręczne łącza
Ukryj podręczne łącza
Adobe MAX 2024

Adobe MAX
The Creativity Conference

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

Zarejestruj się

Adobe MAX

The Creativity Conference

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

Zarejestruj się
Adobe MAX 2024

Adobe MAX
The Creativity Conference

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

Zarejestruj się

Adobe MAX

The Creativity Conference

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

Zarejestruj się

Informacje prawne    |    Zasady prywatności online