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

Součástí aplikace Animate CC 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 CC.

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.

Poznámka:

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

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

Animate CC 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 CC 2017/en_US/Configuration/HTML5Components

 

• MAC:

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

Poznámka:

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

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ázevtřídy komponenty zadaný ve zdrojovém souboru. Název třídy podporuje jednu úroveň oboru názvů. Příklad: Video.

 

Version

Ne

Čísloverze 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 souborunaleznetev 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řenainstance 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émpří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íinstancekomponenty 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 CC 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:

  1. 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.
  2. 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.
  3. Type: Určuje typ vlastnosti. Animate CC podporuje následující typy:
    1. Boolean – V inspektoru vlastností se zobrazí jako zaškrtávací políčko.
    2. Number – V inspektoru vlastností se zobrazí jako pole pro zadání čísla.
    3. StringV inspektoru vlastností se zobrazíjako textové pole.
    4. List – Umožníuživatelikonfigurovat pole hodnot.
    5. Collection – Umožňuje uživateli konfigurovat seznam párů <key, value>. (Viz kombinované pole.)
    6. 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.
    7. Image Path – Umožňuje uživateli vyhledat a vybratlibovolný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.
    8. Video Content Path – Umožňuje uživateli vyhledat a vybrat zdrojové video ve webovém formátu (mp4,ogg,ogv,webm). Konfigurované video bude v publikovaném výstupu zkopírováno do složky videos .
    9. Color – V inspektoru vlastností se zobrazí nástroj pro výběr barvy.
  4. Default: Výchozí hodnota vlastnosti. Výchozí hodnota by měla býtstejnéhotypu 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.

 

AnWidget
Šablona HTML

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.

Poznámka:

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

  1. Instance komponenty se vytvoří, když je pro kontejner vytvářen model DOM.

  2. 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}.

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

  4. 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 od 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 .

localization
.json string

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

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="jquery-ui-1.12.0" destination="$FLASH\HTML5Components\jQueryUI\" file-type="ordinary" />

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:

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

    Download

    Stáhnout

  2. Přidejte do složky svůj soubor MXI s komponentou a další přidružené soubory.

    Add-MXI-file-to-component
  3. 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.

    Self-signature
    ZXPSignCmd -selfSignedCert US NY MyCompany MyCommonName password FileName.p12

    Soubor FileName.p12 se vygeneruje do aktuální složky.

    2. Podepište rozšíření následujícím příkazem:

    Create-ZXP-file
    ZXPSignCmd -sign projectName projectName.zxp FileName.p12 password

    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.

Poznámka:

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

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

Další informace najdete v tématu Instalace distribuovaných komponent.

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online