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

Přidání interaktivity pomocí fragmentů kódu v Animate

  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. Práce se startovacími body videa
    9. Kreslení a vytváření objektů v aplikaci Animate
    10. Změna čar a tvarů
    11. Tahy, výplně a přechody v aplikaci Animate
    12. Práce s aplikacemi Adobe Premiere Pro a After Effects
    13. Panely barev v aplikaci Animate
    14. Otevírání souborů aplikace Flash CS6 v aplikaci Animate
    15. Práce s klasickým textem v aplikaci Animate
    16. Vložení grafiky do aplikace Animate
    17. Importované bitmapy v aplikaci Animate
    18. 3D grafika
    19. Práce se symboly v aplikaci Animate
    20. Kreslení čar a tvarů v aplikaci Adobe Animate
    21. Práce s knihovnami v aplikaci Animate
    22. Export zvuků
    23. Výběr objektů v aplikaci Animate
    24. Práce se soubory aplikace Illustrator (AI) v aplikaci Animate
    25. Nanášení vzorů pomocí nástroje Stopa spreje
    26. Používání režimů prolnutí
    27. Uspořádání objektů
    28. Automatizace úloh pomocí nabídky Příkazy
    29. Vícejazyčný text
    30. Používání kamery v aplikaci Animate
    31. Používání aplikace Animate s nástrojem Adobe Scout
    32. Práce se soubory aplikace Fireworks
    33. Grafické filtry
    34. Zvuk a ActionScript
    35. Předvolby kreslení
    36. 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. Osvědčené postupy – Pravidla usnadnění přístupu
    12. Usnadnění přístupu v pracovním prostoru aplikace Animate
    13. Psaní a správa skriptů
    14. Povolení podpory vlastních platforem
    15. Přehled podpory vlastních platforem
    16. Vytváření přístupného obsahu
    17. Práce se zásuvným modulem pro podporu vlastní platformy
    18. Ladění jazyka ActionScript 3.0
    19. 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. Export videosouborů QuickTime
    9. Ovládání externího přehrávání videa s použitím jazyka ActionScript
    10. Osvědčené postupy – Tipy pro vytváření obsahu pro mobilní zařízení
    11. Osvědčené postupy – Konvence videa
    12. Osvědčené postupy – Pravidla pro vývoj aplikací SWF
    13. Osvědčené postupy – Strukturování souborů FLA
    14. Osvědčené postupy pro optimalizaci souborů FLA pro Animate
    15. Nastavení publikování jazyka ActionScript
    16. Nastavení publikování v aplikaci Animate
    17. Export souborů projektoru
    18. Export obrázků a animovaných souborů GIF
    19. Předlohy publikování HTML
    20. Práce s aplikacemi Adobe Premiere Pro a After Effects
    21. Rychlé sdílení a publikování animací

Panel Fragmenty kódu byl navržen s cílem zajistit, aby i uživatelé bez programátorských zkušeností mohli snadno a rychle začít používat jednoduché fragmenty kódu jazyka JavaScript a ActionScript 3.0. Pomocí tohoto panelu můžete do souboru FLA přidat kód jazyka umožňující běžné funkce. K používání panelu Fragmenty kódu nemusíte znát JavaScript ani ActionScript 3.0

Pomocí panelu Fragmenty kódu můžete provádět tyto činnosti:

  • přidat kód, který bude mít vliv na chování objektu na ploše,

  • přidat kód, který bude řídit pohyb přehrávací hlavy na časové ose,

  • (pouze CS5.5) – Přidání kódu, který umožňuje interakci uživatele pomocí dotykové obrazovky

  • přidat na panel nově vytvořené fragmenty kódu.

Používání fragmentů kódu, které jsou v aplikaci Animate, je také vhodné, když se chcete začít učit JavaScript nebo ActionScript 3.0. Prohlížením fragmentů kódu a dodržováním pokynů k těmto fragmentům se začnete orientovat ve struktuře kódu a jeho slovníku.

Fragmenty kódu v aplikaci Animate
Fragmenty kódu v aplikaci Animate

Než začnete

Při práci s panelem Fragmenty kódu je nezbytné, abyste chápali tato základní pravidla aplikace Animate:

  • U mnoha fragmentů kódu je nutné přizpůsobit některé jejich položky. V aplikaci Animate to můžete udělat na panelu Akce. Každý fragment obsahuje k tomuto úkolu konkrétní pokyny.

  • Všechny dodané fragmenty kódu jsou v jazyce JavaScript nebo ActionScript 3.0.

  • Některé fragmenty mají vliv na chování objektu, takže na objekt lze kliknout nebo aktivovat pohyb nebo zmizení objektu. Tyto fragmenty používáte na objekt na ploše.

  • Některé fragmenty vyvolají akci, k níž dojde okamžitě poté, co přehrávací hlava vstoupí do snímku obsahujícího tento fragment kódu. Tyto fragmenty kódu používáte na snímek časové osy.

  • Jestliže použijete fragment kódu, přidá se kód do aktuálního snímku vrstvy akcí na časové ose. Pokud sami nevytvoříte vrstvu Akcí, přidá ji aplikace Animate nad všechny ostatní vrstvy na časové ose.

  • Ovládání objektu na ploše pomocí jazyka ActionScript vyžaduje, aby měl objekt v Inspektoru vlastností přiřazen název instance.

  • Klikněte na tlačítko Zobrazit popis a Zobrazit kód, které se zobrazí, když na panelu vyberete fragment.

Přidání fragmentu kódu k objektu nebo snímku na časové ose

Postup přidání akce, která bude mít vliv na objekt nebo přehrávací hlavu:

  1. Vyberte objekt na ploše nebo snímek v časové ose.

    Pokud vyberete objekt, který není instancí symbolu, a použijete fragment kódu, aplikace Animate objekt převede na symbol filmového klipu.

    Pokud vyberete objekt, který nemá název instance, aplikace Animate ho při použití fragmentu doplní.

  2. Na panelu Fragmenty kódu (Okno > Fragmenty kódu) dvakrát klikněte na fragment, který chcete použít.

    Pokud vyberete objekt na ploše, aplikace Animate přidá ve snímcích, které vybraný objekt obsahují, fragment kódu na panel Akce.

    Pokud vyberete snímek na časové ose, aplikace Animate přidá fragment jen do tohoto snímku.

  3. V panelu Akce si prohlédněte nově přidaný kód a podle pokynů v horní části fragmentu nahraďte potřebné položky.

Fragment kódu v panelu Akce

Přidání nových fragmentů na panel Fragmenty kódu

Nové fragmenty kódu můžete na panel Fragmenty kódu přidávat dvěma způsoby:

  • Zadáním nového fragmentu v dialogovém okně Vytvořit nový fragment kódu.

  • Importováním souboru XML fragmentu kódu.

Použití dialogového okna Vytvořit nový fragment kódu:

  1. Vyberte na panelu Fragmenty kódu z nabídky panelu volbu Vytvořit nový fragment kódu.

  2. V dialogovém okně zadejte název, text bublinové nápovědy a kód JavaScript nebo ActionScript 3.0 svého fragmentu.

    Když na panelu Akce kliknete na tlačítko Automaticky vyplnit, přidáte jakýkoli právě vybraný kód.

  3. Pokud váš kód obsahuje řetězec „instance_name_here“ a chcete, aby aplikace Animate při použití fragmentu tento řetězec nahradila správným názvem instance, zaškrtněte políčko Automaticky při použití fragmentu kódu nahrazovat položku instance_name_here.

    Aplikace Animate přidá nový fragment na panel Fragmenty kódu do složky Vlastní.

Postup importu fragmentu kódu ve formátu XML:

  1. Vyberte na panelu Fragmenty kódu z nabídky panelu volbu Importovat soubor XML s fragmenty kódu.

  2. Vyberte soubor XML, který chcete importovat, a klikněte na tlačítko Otevřít.

Chcete-li zobrazit správný formát jazyka XML pro fragmenty kódu, vyberte z nabídky panelu volbu Upravit soubor XML s fragmenty kódu.

Chcete-li fragment kódu odstranit, klikněte na panelu na fragment pravým tlačítkem a z kontextové nabídky vyberte možnost Odstranit fragment kódu.

Interaktivní animace s HTML5

Některé animace vyžadují fragmenty kódu pro podporu různých publikačních platforem. Chcete se dozvědět, jak používat fragmenty kódu, aby byla vaše animace interaktivní? Podívejte se na výukové video na konci tohoto příkladu a postupujte podle těchto kroků.

  1. V Knihovně klikněte na Nastavení publikování.

  2. Vyberte JavScript/HTML.

  3. Na kartě HTML/JS klikněte na Exportovat a vyberte následující možnosti:

    • Název souboru: Zadejte název souboru.
    • Uložit jako typ: Vyberte HTML.
  4. Klikněte na tlačítko OK.

Jak vylepšit interaktivní animace HTML5

Podívejte se na video a zjistěte, jak upravit kódy.
Logo Adobe

Přihlaste se ke svému účtu.