Používání komponent v dokumentech HTML5 Canvas

Hledat

Naposledy aktualizováno 19. 5. 2021

V tomto tématu naleznete informace o tom, jak používat upravitelné komponenty.

Komponenta poskytuje funkci nebo jde o skupinu souvisejících, opakovaně použitelných a upravitelných komponent, které zvyšují produktivitu tvůrců obsahu. Předchozí verze Animate podporovala komponenty Flash používané pro flashový obsah. Od této verze Animate podporuje formát HTML5 Canvas.

Vyberte Soubor > Nový.

V dialogovém okně Nový dokument zvolte v horní části obrazovky možnost Další volby a potom vyberte HTML5 Canvas.

HTML5 Canvas
Zvolte příkaz Okno > Komponenty.

Výchozí komponenty
Vyberte Komponenty > Video. Přetáhněte spojené komponenty na plátno.
Na ploše vyberte instanci komponenty Video a v inspektoru vlastností můžete prohlížet a upravovat její parametry. Parametr Zdroj umožňuje vybrat videosoubor z místního umístění. Nebo můžete zadat adresu URL odkazující na přehrávané video (ve formátu mp4, ogg, ogv nebo webm).

Přetažení komponent
Zaškrtnutím políčka Přizpůsobit zdrojovým rozměrům změníte velikost videa tak, aby odpovídalo rozměrům vstupního videa. Tato funkce je k dispozici pouze pro videa ve formátu mp4. Pokud chcete zachovat poměr stran u ostatních formátů videa, je potřeba velikost videa upravit ručně.
Když chcete zobrazit náhled filmu, stiskněte Ctrl+Enter (na počítači Mac Cmd+Enter). Video se přehraje ve výchozím prohlížeči.Ve výchozím nastavení jsou ovládací prvky pro přehrávání videa viditelné, takže pokud je chcete během přehrávání zobrazit, stačí nad video umístit kurzor.

Stejný postup můžete použít i pro další komponenty.

Náhled výstupu komponenty

Poznámka:

Komponenty se do dokumentu HTML přidají jako prvky DOM, takže interaktivitu můžete do komponent doplnit pomocí fragmentů kódu komponent (Fragmenty kódu > HTML5 Canvas > Komponenty).

Doplnění interaktivity do komponent pomocí fragmentů kódu

Zvolte příkaz Okno > Komponenty.
Chcete-li do komponent doplnit interaktivitu, vyberte Okno > panel Fragmenty kódu. Můžete si prohlédnout mapování různých dostupných chování komponent.
Na obrazovce Fragmenty kódu vyberte HTML5 Canvas > Komponenty.

Výchozí fragmenty kódu
Vyberte požadovanou komponentu a dvakrát klikněte na odpovídající fragment kódu, který se zobrazí na panelu Akce. Další informace o přidávání interaktivity do fragmentů kódu naleznete v tématu Přidání interaktivity pomocí fragmentů kódu v Animate.

Příklad

V následujícím příkladu si ukážeme, jak používat fragmenty kódu, ve kterých je přehrávání videa řízeno kódem.

Na ploše vyberte instanci videa a v Inspektoru vlastností vypněte nastavení Automaticky spustit.
Na panelu Komponenty dvakrát klikněte na komponentu Tlačítko. Tím na ploše vytvoříte dvě instance tlačítek, která můžete umístit. Komponenty můžete z panelu komponent také přímo přetáhnout na plochu.

Umístění tlačítek
Vyberte první instanci tlačítka a v Inspektoru vlastností změňte popisek prvního tlačítka na Přehrát a druhého na Pozastavit.
Kliknutím na Okno > Fragmenty kódu otevřete panel Fragmenty kódu. Přejděte na HTML5 Canvas > Komponenty a rozbalte složku Uživatelské rozhraní.
Vyberte na ploše tlačítko Přehrát, v panelu Fragmenty kódu dvakrát klikněte na položku Událost kliknutí na komponentu Button a klikněte na tlačítko OK.Aplikace Animate přiřadí název instance k vybranému tlačítku. Nově přidaný kód si můžete zobrazit v panelu Akce.

Přidání fragmentu kódu
Vyberte na ploše video a v panelu Fragmenty kódu rozbalte složku Video. Dvakrát klikněte na položku Přehrát video. Do panelu Akce se přidá kód potřebný k přehrání videa.

Kód přidaný do panelu Akce.
Aby se video přehrálo po kliknutí na tlačítko, přesuňte kód mezi část <Start your custom code> a <End your custom code>.

Přesunutí kódu mezi tagy
Pokud chcete přidat kód, který video pozastaví, vyberte tlačítko Pozastavit, přiřaďte novému tlačítku obslužnou rutinu kliknutí a přidejte kód pro pozastavení videa.
Zobrazte náhled filmu. Kliknutím na tlačítko Přehrát video přehrajete a kliknutím na tlačítko Pozastavit jej pozastavíte.

Poznámka:

V inspektoru vlastností je nyní u jednotlivých komponent k dispozici atribut Název třídy. Tyto názvy tříd umožňují měnit vzhled komponent pomocí stylů CSS. Pomocí komponenty CSS můžete načíst vlastní styly CSS. Komponenta CSS umožňuje vybrat libovolný místní soubor CSS, který je součástí filmu.

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 rozšíření.

Základní informace

Instalace komponent

Při instalaci distribuovaných komponent postupujte následujícím způsobem:

Dvakrát klikněte na soubor ManageExtensions.exe. Zobrazí se dialogové okno Správa rozšíření.
Klikněte na tlačítko pro instalaci rozšíření a vyberte rozšíření (soubor .zxp), které chcete nainstalovat.Další informace najdete v tématu Instalace rozšíření.
Chcete-li v aplikaci Animate zobrazit nainstalovanou komponentu, klikněte na Okno > Komponenta. Otevře se dialogové okno Komponenty.
Klikněte na ikonu hamburgeru v pravém horním rohu a klikněte na Načíst znovu komponenty.