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

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

  1. Příručka uživatele aplikace Adobe Animate
  2. Úvod do aplikace Animate
    1. Novinky v aplikaci Animate
    2. Grafický glosář
    3. Systémové požadavky pro aplikaci Animate
    4. Klávesové zkratky aplikace Animate
    5. Práce s různými typy souborů v aplikaci Animate
  3. Animace
    1. Základy animování v aplikaci Animate
    2. Používání snímků a klíčových snímků v aplikaci Animate
    3. Animace po jednotlivých snímcích v aplikaci Animate
    4. Práce s animacemi klasických doplnění v aplikaci Animate
    5. Nástroj Štětec
    6. Vodítko pohybu
    7. Doplnění pohybu a ActionScript 3.0
    8. O animacích s doplněními pohybu
    9. Animace s doplněním pohybu
    10. Vytvoření animace s doplněním pohybu
    11. Používání klíčových snímků vlastností
    12. Animování polohy pomocí doplnění
    13. Úpravy doplnění pohybu v editoru pohybu
    14. Úpravy cesty pohybu u animace s doplněním
    15. Úpravy doplnění pohybu
    16. Přidání vlastního náběhu nebo doběhu
    17. Vytváření a aplikování přednastavení pohybu
    18. Nastavení rozsahu doplnění animace
    19. Práce s doplněními pohybu uloženými jako soubory XML
    20. Srovnání doplnění pohybu a klasických doplnění
    21. Doplňování tvarů
    22. Používání animací nástroje Kost v aplikaci Animate
    23. Sestavování postav v aplikaci Animate
    24. Používání vrstev masek v aplikaci Adobe Animate
    25. Práce se scénami v aplikaci Animate
  4. Interaktivita
    1. Vytváření tlačítek v aplikaci Animate
    2. Převod projektů aplikace Animate na jiné typy dokumentů
    3. Vytváření a publikování dokumentů HTML5 Canvas v aplikaci Animate
    4. Přidání interaktivity pomocí fragmentů kódu v aplikaci Animate
    5. Vytváření vlastních komponent HTML5
    6. Používání komponent v dokumentech HTML5 Canvas
    7. Vytváření vlastních komponent: Příklady
    8. Fragmenty kódu pro vlastní komponenty
    9. Osvědčené postupy – Tvorba reklam v aplikaci Animate
    10. Vytváření a publikování virtuální reality
  5. Pracovní plocha a pracovní postupy
    1. Vytváření a správa malířských štětců
    2. Používání písem Google v dokumentech HTML5 Canvas
    3. Používání knihoven Creative Cloud v aplikaci Adobe Animate
    4. Používání vymezené plochy a panelu nástrojů v aplikaci Animate
    5. Pracovní postupy a pracovní plocha aplikace Animate
    6. Používání webových písem v dokumentech HTML5 Canvas
    7. Časové osy a ActionScript
    8. Práce s více časovými osami
    9. Nastavení předvoleb
    10. Používání vývojových panelů aplikace Animate
    11. Vytváření vrstev časové osy v aplikaci Animate
    12. Export animací pro mobilní aplikace a herní moduly
    13. Přemísťování a kopírování objektů
    14. Předlohy
    15. Příkaz Hledat a nahradit v aplikaci Animate
    16. Vrácení akce, její zopakování a panel Historie
    17. Klávesové zkratky
    18. Používání časové osy v aplikaci Animate
    19. Vytvoření rozšíření HTML
    20. Možnosti optimalizace obrázků a animovaných souborů GIF
    21. Export nastavení pro obrázky a soubory GIF
    22. Panel Datové zdroje v aplikaci Animate
  6. Multimédia a video
    1. Transformace a kombinování grafických objektů v aplikaci Animate
    2. Vytváření a práce s instancemi symbolů v aplikaci Animate
    3. Vektorizace obrazu
    4. Používání zvuku v aplikaci Adobe Animate
    5. Export souborů SVG
    6. Vytváření souborů videa používaných v aplikaci Animate
    7. Přidání videa v aplikaci Animate
    8. Kreslení a vytváření objektů v aplikaci Animate
    9. Změna čar a tvarů
    10. Tahy, výplně a přechody v aplikaci Animate
    11. Práce s aplikacemi Adobe Premiere Pro a After Effects
    12. Panely barev v aplikaci Animate
    13. Otevírání souborů aplikace Flash CS6 v aplikaci Animate
    14. Práce s klasickým textem v aplikaci Animate
    15. Vložení grafiky do aplikace Animate
    16. Importované bitmapy v aplikaci Animate
    17. 3D grafika
    18. Práce se symboly v aplikaci Animate
    19. Kreslení čar a tvarů v aplikaci Adobe Animate
    20. Práce s knihovnami v aplikaci Animate
    21. Export zvuků
    22. Výběr objektů v aplikaci Animate
    23. Práce se soubory aplikace Illustrator (AI) v aplikaci Animate
    24. Používání režimů prolnutí
    25. Uspořádání objektů
    26. Automatizace úloh pomocí nabídky Příkazy
    27. Vícejazyčný text
    28. Používání kamery v aplikaci Animate
    29. Grafické filtry
    30. Zvuk a ActionScript
    31. Předvolby kreslení
    32. Kreslení nástrojem Pero
  7. Platformy
    1. Převod projektů aplikace Animate na jiné typy dokumentů
    2. Podpora vlastní platformy
    3. Vytváření a publikování dokumentů HTML5 Canvas v aplikaci Animate
    4. Vytvoření a publikování dokumentu ve formátu WebGL
    5. Balení aplikací pro prostředí AIR for iOS
    6. Publikování aplikací prostředí AIR for Android
    7. Publikování pro prostředí Adobe AIR pro počítače
    8. Nastavení publikování jazyka ActionScript
    9. Osvědčené postupy – Uspořádání ActionScriptu v aplikaci
    10. Používání jazyka ActionScript v aplikaci Animate
    11. Usnadnění přístupu v pracovním prostoru aplikace Animate
    12. Psaní a správa skriptů
    13. Povolení podpory vlastních platforem
    14. Přehled podpory vlastních platforem
    15. Práce se zásuvným modulem pro podporu vlastní platformy
    16. Ladění jazyka ActionScript 3.0
    17. Povolení podpory vlastních platforem
  8. Export a publikování
    1. Export souborů z aplikace Animate
    2. Publikování OAM
    3. Export souborů SVG
    4. Export grafiky a videa v aplikaci Animate
    5. Publikování dokumentů AS3
    6. Export animací pro mobilní aplikace a herní moduly
    7. Export zvuků
    8. Osvědčené postupy – Tipy pro vytváření obsahu pro mobilní zařízení
    9. Osvědčené postupy – Konvence videa
    10. Osvědčené postupy – Pravidla pro vývoj aplikací SWF
    11. Osvědčené postupy – Strukturování souborů FLA
    12. Osvědčené postupy pro optimalizaci souborů FLA pro Animate
    13. Nastavení publikování jazyka ActionScript
    14. Nastavení publikování v aplikaci Animate
    15. Export souborů projektoru
    16. Export obrázků a animovaných souborů GIF
    17. Předlohy publikování HTML
    18. Práce s aplikacemi Adobe Premiere Pro a After Effects
    19. Rychlé sdílení a publikování animací
  9. Řešení problémů
    1. Opravené problémy
    2. Známé problémy

 

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. 

  1. Vyberte Soubor > Nový.

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

    Nový dokument
    HTML5 Canvas

  2. Zvolte příkaz Okno > Komponenty.

    Výchozí komponenty

  3. Vyberte Komponenty > Video. Přetáhněte spojené komponenty na plátno. 

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

  5. 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ě.

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

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

  1. Zvolte příkaz Okno > Komponenty.

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

  3. Na obrazovce Fragmenty kódu vyberte HTML5 Canvas > Komponenty.

    Výchozí fragmenty kódu

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

  1. Na ploše vyberte instanci videa a v Inspektoru vlastností vypněte nastavení Automaticky spustit. 

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

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

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

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

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

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

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

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

 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.

Zajímavé komponenty HTML5

Přidání interaktivity do vašeho obsahu je zajímavé a zahrnuje mnoho funkcí s komponentami HTML 5. Chcete se dozvědět, jak používat tyto komponenty HTML5 v aplikaci Animate? Podívejte se na výukové video na konci tohoto příkladu a postupujte podle těchto kroků.

  1. Klikněte na tlačítko Windows a vyberte položku Komponenty.

  2. Rozbalte složku Videa, klikněte na ikonu videa a přetáhněte ji na plochu.

  3. V okně Vlastnosti rozbalte kartu Poloha a velikost a nastavte požadované hodnoty.

Jak vylepšit kompozice aplikace Animate pomocí komponent HTML5

Podívejte se na video, abyste věděli, jak do kompozice zahrnout více komponent.

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:

  1. Dvakrát klikněte na soubor ManageExtensions.exe. Zobrazí se dialogové okno Správa rozšíření.

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

  3. Chcete-li v aplikaci Animate zobrazit nainstalovanou komponentu, klikněte na Okno > Komponenta. Otevře se dialogové okno Komponenty. 

  4. Klikněte na ikonu hamburgeru v pravém horním rohu a klikněte na Načíst znovu komponenty.

Adobe, Inc.

Získejte pomoc rychleji a snáze

Nový uživatel?