Příručka uživatele Zrušit

Vytváření vlastních komponent HTML5

Hledat

Naposledy aktualizováno 25. 5. 2023

V tomto článku se dozvíte, jak vytvářet vlastní komponenty pro HTML5 Canvas.

Součástí aplikace Animate je sada výchozích komponent. S těmi si ale při tvorbě projektů nevystačíte. V tomto tématu se dozvíte, jak můžete vytvářet vlastní komponenty HTML5 pro aplikaci Animate.

Definice komponenty se skládá ze tří hlavních částí:

Metadata: Uvádí informace o komponentě jako její zobrazovaný název, verzi, sadu konfigurovatelných vlastností, ikonu a další. Metadata obsahuje soubor components.js. Komponenty můžete seskupit do kategorie a pomocí tohoto souboru můžete definovat metadata pro všechny komponenty v kategorii.
Zdroj: Uvádí informace o skutečném zdroji komponenty. Zdroj se vkládá za běhu, když film přehrajete nebo ho publikujete pomocí komponent.
Datové zdroje: Uvádí informace o všech závislých souborech běhového prostředí, například knihovně JavaScriptu nebo CSS, případně o běhových datových zdrojích a ikonách. Tyto zdroje se dají používat ve vývojovém prostředí Animate.

Součástí definice komponenty jsou i zdroje související s lokalizací.

componentsJS — Ukázková konfigurace složek pro vlastní kategorii komponenty

Animate při spuštění načte vlastní komponenty HTML5 uložené v následujících složkách:

• Windows:

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

• MAC:

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

Výše uvedená cesta složky je platná pro anglickou jazykovou verzi. Pokud Animate používáte v jiném jazyce, vyhledejte název složky pro váš jazyk s kódem prostředí nahrazujícím en_US.

Pro každou složku se souborem components.js, kterou nalezne v těchto umístěních, aplikace Animate vytvoří kategorii a načte všechny komponenty ve složce.

Metadata komponenty

Metadata komponenty jsou zaznamenána v souboru components.js, který je umístěn v samostatné složce v adresáři HTML5Components.

metadata-code — Ukázková metadata pro komponentu Video.

Components.js

je soubor JSON, který obsahuje následující části:

Category: Název, který se pro tuto sadu komponent zobrazí na panelu Komponenty. Je možné ho lokalizovat.
Components: Pole s položkami, které obsahují metadata o komponentě. Výše uvedený příklad obsahuje v tomto poli pouze jeden element. Metadata obsahují následující části:

Název	Povinné	Popis
ClassName	Ano	Název třídy komponenty zadaný ve zdrojovém souboru. Název třídy podporuje jednu úroveň oboru názvů. Příklad: Video.
Version	Ne	Číslo verze komponenty. Slouží pro budoucí upgrady komponenty. Posloupnost verzí není momentálně definována.
Source	Ano	Relativní cesta k hlavnímu zdrojovému souboru komponenty. Podrobné informace o obsahuje zdrojového souboru naleznete v další části.
Icon	Ne	Relativní cesta k ikoně příslušné komponenty. Tato ikona se spolu s názvem komponenty zobrazí na panelu komponent a také na ploše, když je vytvořena instance komponenty. Není-li zadána žádná cesta, použije se výchozí ikona. Můžete zadat název ikony ve formátu PNG, kterou chcete načíst (obvykle o velikosti 32x32). Chcete-li použít různé ikony pro světlé a tmavé uživatelské rozhraní, zadejte dva soubory PNG. Použijte následující konvenci pro vytváření názvů: vlastní_ikona_N.png – Ikona pro tmavé uživatelské rozhraní vlastní_ikona_D.png – Ikona pro světlé uživatelské rozhraní Místo části „vlastní_ikona“ zadejte v tomto poli jako hodnotu požadovaný název ikony. Přípony jsou automaticky připojeny podle aktuálního uživatelského nastavení.
Dimensions	Ne	Výchozí velikost pro instance komponenty. Přetažením komponenty z panelu Komponenty na plochu vytvoříte novou instanci. V tomto poli můžete zadat výchozí velikost instance komponenty. Tuto hodnotu je nutné zadat jako pole [šířka, výška]. Není-li zadána žádná hodnota, aplikace Animate použije výchozí velikost. Animate také omezuje možnou velikost na rozsah od [2,2] do [1000, 1000].
Dependencies	Ne	Sada závislých souborů pro danou komponentu. Položky v tomto poli obsahují relativní cestu k místnímu zdroji (klíč = “src”) nebo cestu CDN (klíč = “cdn“). Cesta CDN není povinná. Tato cesta se použije, pokud v nastavení publikování použijete hostované knihovny. V opačném případě se při náhledu nebo publikování použije místní zdroj. Všimněte si relativní cesty použité ve výše uvedeném příkladu pro komponentu Video. Načítá závislé soubory ze složky o úroveň výše, což umožňuje sdílet některé závislé soubory mezi několika sadami komponent.
Properties	Ano	Pole vlastností. Při vytvoření instance komponenty na ploše se v inspektoru vlastností automaticky zobrazí sada vlastností nakonfigurovaná v této části. Uživatelé této komponenty mohou tyto vlastnosti konfigurovat v aplikaci Animate a konfigurované vlastnosti jsou zpřístupněny během vytvoření komponenty za běhu. Každá položka vlastnosti obsahuje následující klíče: name: Název, který se pro tuto vlastnost zobrazí v inspektoru vlastností. Názvy by měly být jednoduché a srozumitelné. Názvy je možné lokalizovat. variable: Interní název použitý pro danou vlastnost. Konfigurované hodnoty budou za běhu dostupné pod tímto názvem proměnné. Další informace získáte v dalších částech. Type: Určuje typ vlastnosti. Animate podporuje následující typy: Boolean – V inspektoru vlastností se zobrazí jako zaškrtávací políčko. Number – V inspektoru vlastností se zobrazí jako pole pro zadání čísla. String – V inspektoru vlastností se zobrazí jako textové pole. List – Umožní uživateli konfigurovat pole hodnot. Collection – Umožňuje uživateli konfigurovat seznam párů <key, value>. (Viz kombinované pole.) File Path – Umožňuje uživateli vyhledat a vybrat libovolný místní soubor. Za běhu bude načtena textová hodnota. Soubor bude automaticky zkopírován v publikovaném výstupu do složky assets a za běhu bude zpřístupněna relativní cesta. Image Path – Umožňuje uživateli vyhledat a vybrat libovolný obrázek. Soubor bude automaticky zkopírován v publikovaném výstupu do konfigurované složky s obrázky a za běhu bude zpřístupněna relativní cesta. Video Content Path – Umožňuje uživateli vyhledat a vybrat zdrojové video ve webovém formátu (mp4, ogg , ogv , webm ). Konfigurovaný datový zdroj bude v publikovaném výstupu zkopírován do složky videos. Barva – V inspektoru vlastností se zobrazí nástroj pro výběr barvy. Default: Výchozí hodnota vlastnosti. Výchozí hodnota by měla být stejného typu jako typ vlastnosti.

Zdroj komponenty

Ke každé komponentě by měl být připojen zdrojový soubor obsahující kód, který ovládá tyto faktory:

Vytvoření instance komponenty za běhu pomocí konfigurované sady hodnot vlastností.
Připojení a odpojení modelu DOM.
Aktualizaci vlastností v každém snímku.

V souboru anwidget.js je definována základní třída a pomocná funkce pro snazší vývoj vlastních komponent. Toto rozhraní bude v budoucnu dále vylepšeno, bude však zachována zpětná kompatibilita. V současnosti jsou podporovány pouze komponenty založené na modelu DOM, je však plánována rozšířená podpora pro komponenty založené na formátu Canvas. Momentálně jsou podporovány pouze ovládací prvky, aplikační rozhraní však bude v budoucnosti rozšířeno o podporu souvisejícího chování (komponenty, které nejsou prvky uživatelského rozhraní)

Soubor anwidget.js je při prvním spuštění umístěn ve složce HTML5Components/sdk. Poskytuje základní třídu AnWidget pro vlastní komponenty a pomocnou metodu $.anwidget(<className>, {Object Prototype}) pro registraci vlastní komponenty. Aktuální implementace používá knihovnu jQuery, takže vždy, když použijete služby poskytované nějakým ovládacím prvkem, je jako závislost vždy přidána knihovna jQuery. Pokud nechcete přidat implicitní závislost na jQuery, musíte implementovat třídu komponenty bez jQuery, která poskytuje stejné rozhraní jako příslušný ovládací prvek.

HTML kód standardně obsahuje tyto části (kromě preloaderu div):

animation_container — Výchozí části HTML (kromě preloaderu div)

Všimněte si, že předchozí obrázek znázorňuje pořadí, ve kterém jsou elementy přidávány v modelu DOM. Proto je element div dom_overlay_container zobrazen nad elementem canvas.

Neměňte ID elementu div dom_overlay_container jako v naší první verzi. Existuje řada funkcí, které jsou na tomto ID závislé, například fragmenty kódu.

Jak zobrazuje předchozí obrázek, element div dom_overlay_container je zobrazen nad elementem canvas jako překrytí. Abychom zaručili že události myši budou správně propagovány také v podkladovém elementu canvas, používáme pro tento div vlastnost CSS {pointer-events: none}, takže události myši jsou propagovány v podkladovém elementu canvas. Všechny instance komponent, které jsou konfigurovány v aplikaci Animate ve vašem projektu, jsou vytvořeny a připojeny jako podřízené elementy tohoto elementu div dom_overlay_container. Relativní řazení instancí komponent je spravováno za běhu, v současné době se však všechny instance komponent vždy zobrazí jako překrytí. Pro všechny instance komponent za běhu se nastaví vlastnost {pointer-events: all}, takže také přijmou události myši.

Životní cyklus komponenty

component_lifecycle — Životní cyklus komponenty

Instance komponenty se vytvoří, když je pro kontejner vytvářen model DOM.
Instance je následně připojena k modelu DOM v okamžiku, kdy přehrávací hlava přejde na snímek, ve kterém je použita instance komponenty. Následně se připojí ovladač aktualizace, který je volán při každém průchodu za běhu. Komponenta také v tomto okamžiku pro nadřízený element spouští událost ‘attached’ s následujícími daty události {id: id_of_the_instance}.
Vlastnosti se aktualizují při každém zpětném volání aktualizace. Všechny aktualizace události se ukládají do mezipaměti a použijí se najednou během průchodu. V současné době nejsou podporována doplnění vlastních vlastností. Aktualizují se pouze základní vlastnosti jako transformace a viditelnost.
Když přehrávací hlava přejde na snímek, z něhož byla instance komponenty odebrána, odpojí se komponenta od modelu DOM. V tomto okamžiku se u nadřazeného prvku spustí událost ‘detached’.

Základní třída se nazývá $.AnWidget a obsahuje následující vlastnosti:

Název	Povinné	Popis
getCreateOptions()	Ne	Vrátí všechny možnosti, které komponenta chce použít při vytvoření instance komponenty. Tato funkce je typicky používána k přiřazení unikátního ID každé instanci použitím globální proměnné _widgetID. Příklad v následující části ozřejmí použití této funkce.
getCreateString:	Ano	Vrátí řetězec pro vytvoření instance DOM. Tento řetězec je předán do knihovny jQuery k vytvoření elementu DOM, který je později přiřazen k základnímu DOM. Například pro komponentu image by měl být vrácen řetězec <image>. Za běhu je vytvořen element a v instanci komponenty je uložen následující odkaz na jQuery wrapper: this._element = $(this.getCreateElement()) // this._element – Je vytvořen jQuery wrapper pro podkladový element DOM. Můžeme vytvořit také složené elementy. Podrobnosti naleznete v části s příklady.
getProperties()	Ne	Vrátí pole konfigurovatelných názvů vlastností CSS. Obvykle se shoduje se všemi vlastnostmi, které jste konfigurovali v souboru components.json. Například pro komponentu video toto pole obsahuje následující položky: ["left", "top", "width", "height", "position", "transform-origin", "transform"]
getAttributes()	Ne	Vrátí pole konfigurovatelných atributů. Obvykle se shoduje se všemi atributy, jejichž konfiguraci jste povolili v souboru components.json. Například pro komponentu video toto pole obsahuje následující položky: ["id", "src", "controls", "autoplay", "loop", "class"]
attach(parent)	Ne	Tato funkce je volána, když se instance komponenty připojuje k nadřazenému elementu modelu DOM. Výchozí implementace provádí následující akce (a některé další): // Připojení elementu k nadřazenému elementu DOM $(parent).append(this._element); //Uložení reference v this._$this this._$this = $(this._element); //Volání vynucené aktualizace kvůli použití všech vlastností this.update(true); this._attached = true; //Spuštění události „attached“ na nadřazeném elementu $(parent).trigger("attached", this.getEventData("attached")) Tuto funkci není potřeba potlačovat. U složených elementů však může být její potlačení potřebné. Další informace naleznete v části s příklady. Poznámka: Pomocí this._superApply(arguments) můžete volat jakoukoli metodu základní třídy z libovolné funkce.
detach()	Ne	Tato funkce je volána vždy, když se instance komponenty odpojuje od modelu DOM. Výchozí implementace provádí následující akce: //Odebrání elementu z modelu DOM this._$this.remove(); //Spuštění události „detached“ na nadřazeném elementu $(parent).trigger("detached", this.getEventData("detached"));
setProperty(k,v)	Ne	Tato funkce slouží k nastavení libovolné vlastnosti instance. Provedené změny jsou uloženy do mezipaměti a použity najednou během volání funkce update() pro každý snímek a každou vlastnost, jejíž stav se změnil.
update(force)	Ne	Tato funkce volá každý snímek, pokud je komponenta částí modelu DOM a je viditelná. Ve výchozí implementaci použije všechny vlastnosti CSS a atributy, které se změnily, nebo všechny vlastnosti, pokud je nastaven parametr force.
show()	Ne	Zobrazí instanci elementu. Tuto funkci obvykle není potřeba potlačovat, u složených elementů však může být její potlačení potřebné.
hide()	Ne	Skryje instanci elementu. Tuto funkci obvykle není potřeba potlačovat, u složených elementů však může být její potlačení potřebné.
getEventData(e)	Ne	Vrací všechna vlastní data pro událost s názvem „e“. Výchozí implementace vrací data {id: instance_id} pro události „attached“ a „detached“.
destroy()	Ne	Uvolní paměť po odpojení instance komponenty od modelu DOM. Tuto funkci obvykle není potřeba potlačovat.
applyProperties(e)	Ne	Pomocné rozhraní API pro použití vlastností CSS na jQuery wrapper e.
applyAttributes(e)	Ne	Pomocné rozhraní API pro použití atributů na jQuery wrapper e.

Lokalizace

Řetězce Kategorie, Zobrazovaný název komponenty a Název vlastnosti se dají lokalizovat. Vytvořte soubor strings.json ve složce nazvané locale, kterou najdete ve složce komponenty. Zadejte do něj páry klíč–hodnota všech řetězců, které chcete lokalizovat, a klíče pak použijte v souboru components.js. Pro další jazyky můžete vytvořit řetězce v odpovídajících složkách ve složce locale .

Balení a distribuce vlastních komponent HTML5

Vývojáři a návrháři, kteří pracují s aplikací Animate, mohou animátorům umožnit instalaci a používání komponent bez psaní kódu tím, že jim poskytnou zabalené komponenty, které jsou připraveny k použití. Dříve museli animátoři znát struktury souborů, museli umět programovat a ručně přesouvat soubory do určitých složek, aby bylo možné aktivovat rozšíření HTML5.

Základní informace

Libovolná komponenta, kterou vytvořil vývojář. Pokyny k vytváření komponent zobrazíte kliknutím sem.
Sada nástrojů CC pro podepisování rozšíření.

Než komponentu zabalíte, vytvořte soubor MXI s metadaty obsahujícími zdrojovou a cílovou cestu ke komponentám. Například

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

Informace o zdrojovém a cílovém souboru jsou nutné k tomu, aby nástroj rozšíření mohl komponentu přesně nainstalovat.

Balení komponent

Chcete-li sbalit vlastní komponenty HTML5, proveďte následující kroky:

Pokud chcete vytvořit soubor MXI, zadejte obsah podobný ukázkovému souboru abc.mxi. Použijte k tomu textový editor a soubor uložte s příponou MXI.

Stáhnout

Získat soubor
Stáhněte si ukázkový soubor abc.mxi.
Přidejte do složky svůj soubor MXI s komponentou a další přidružené soubory.
Vytvořte komprimovaný soubor s příponou ZXP. Použijte k tomu nástroj CC pro podepisování rozšíření (ZXPSignCmd.exe). K vytvoření souboru ZXP použijte v nástroji ZXP Sign Command následující příkazy:

1. Vytvořte certifikát s vlastním podpisem příkazem -selfSignedCert.

Pokud už certifikát máte, můžete tento krok přeskočit.
```
ZXPSignCmd -selfSignedCert CS BR MojeSpolečnost MůjBěžnýNázev heslo NázevSouboru.p12
```
Soubor FileName.p12 se vygeneruje do aktuální složky.

2. Podepište rozšíření následujícím příkazem:
```
ZXPSignCmd -sign názevProjektu názevProjektu.zxp NázevSouboru.p12 heslo
```
Proměnná projectName představuje název projektu rozšíření. Do aktuální složky se vygeneruje soubor s názvem projectName.zxp.

Distribuce komponent

Tento soubor projectName.zxp se zabalenou komponentou můžete distribuovat všem uživatelům aplikace Animate.

Společnost Adobe doporučuje, abyste své produkty distribuovali prostřednictvím webu Adobe Add-ons. Doplňky add-on můžete distribuovat veřejně (zdarma nebo za úplatu) nebo soukromě (zdarma pro konkrétní uživatele).

Instalace distribuovaných komponent

Návrháři nebo vývojáři, kteří pracují v aplikaci Animate, si mohou nainstalovat distribuovanou komponentu v podobě souboru ZXP pomocí nástroje Správa rozšíření.

Související témata

Získejte pomoc rychleji a snáze

Nový uživatel?