Export animací pro mobilní aplikace a herní moduly

  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í

Vytvořte přehled pohyblivých symbolů nebo atlas textur a exportujte animace pro mobilní aplikace a herní moduly. Pomocí zásuvného modulu importujte atlas textur do modulu Unity nebo do jiného vašeho oblíbeného herního modulu.

Přehled

Animate umožňuje vytvořit přehled pohyblivých symbolů nebo atlas textur a exportovat je pro mobilní aplikace a herní moduly. 

Přehled pohyblivých symbolů

Přehled pohyblivých symbolů je soubor bitmapových obrazů, který obsahuje několik menších obrázků uspořádaných jako dlaždice. Kompilací několika grafických souborů do jednoho souboru umožníte aplikaci Animate a dalším používat tuto grafiku, aniž by bylo nutné načítat víc než jeden soubor. Tento efektivní způsob načítání je užitečný v situacích, jako je vývoj her, kdy je kladen zvláštní důraz na rychlost.

Přehled pohyblivých symbolů
Přehled pohyblivých symbolů obsahuje pohyblivé symboly v animaci jednotlivých rámců vedle sebe.

Přehled pohyblivých symbolů můžete vytvořit z výběru libovolné kombinace filmových klipů, symbolů tlačítka, grafických symbolů nebo bitmap. Položky můžete vybírat na panelu Knihovna nebo na ploše, ne však na obou. Každá bitmapa a každý snímek vybraných symbolů se v přehledu pohyblivých symbolů zobrazuje jako samostatný obrázek. Při exportu z plochy zůstanou v obrazovém výstupu zachovány všechny transformace (škálování, zkosení atd.), které jste použili u instance symbolu.

Atlas textur

Atlas textur je kolekce textur ve formátu jednoho velkého obrázku nebo více obrázků požadovaného rozměru. Atlas textur slouží k optimalizaci her. 

V aplikaci Animate můžete atlas textur vytvořit ze symbolů, jako jsou například filmové klipy, grafické prvky nebo tlačítka. Položky můžete vybírat na panelu Knihovna nebo na ploše, ne však na obou. Každý vektor a každý klíčový snímek vybraných symbolů se v atlasu textur zobrazují jako samostatné bitmapy. Při exportu z plochy zůstanou v obrazovém výstupu zachovány všechny transformace (škálování, zkosení atd.), které jste použili u instance symbolu.

Rozdíl mezi přehledem pohyblivých symbolů a atlasem textur

V závislosti na vašich potřebách můžete ve svých mobilních aplikacích použít přehled pohyblivých symbolů nebo atlas textur. V následující tabulce naleznete některé z klíčových rozdílů mezi přehledem pohyblivých symbolů a atlasem textur. 

Funkce

Přehled pohyblivých symbolů

Atlas textur

Výkon v mobilních aplikacích

Nízký

Vysoký

Efektivita v načítání aplikace

Vysoká, nejsou potřeba žádné výpočty

Nízká, jsou prováděny výpočty souboru JSON

Velikost

Zabírá více místa

Zabírá méně místa

Kvalita animace

Střední

Vysoká

Počet generovaných souborů

Dvou soubory: jedna bitmapa a jeden soubor json

Proměnná: Podle rozměru obrazu.

Počet generovaných bitmap

Podle počtu snímků použitých v přehledu pohyblivých symbolů; počet bitmapových souborů se může zvýšit, což má za následek vyšší velikost přehledu pohyblivých symbolů

V pohyblivém symbolu jsou generovány pouze jedinečné bitmapy, čímž se snižuje celková velikost

Vytvoření přehledu pohyblivých symbolů

Chcete-li vytvořit přehled pohyblivých symbolů, proveďte následující kroky:

  1. Vyberte jeden nebo více symbolů na panelu Knihovna nebo instancí symbolů na ploše. Výběr může obsahovat také bitmapy.

  2. Klikněte pravým tlačítkem na výběr a vyberte příkaz Vytvořit přehled pohyblivých symbolů.

  3. V dialogovém okně Vytvořit přehled pohyblivých symbolů vyberte požadované možnosti a klikněte na tlačítko Exportovat.

    Možnost exportu

    Popis

    Rozměr obrázku

    Celková velikost přehledu pohyblivých symbolů (v obrazových bodech) Výchozí nastavení je Automatická velikost, kdy se mění velikost přehledu, aby obsáhl všechny přidávané pohyblivé symboly.

    Formát obrázku

    Formát souboru exportovaného přehledu pohyblivých symbolů. 8bitový soubor PNG a 32bitový soubor PNG podporují použití průhledného pozadí (alfa kanál). 24bitový PNG a JPG nepodporují průhledné pozadí. Celkový vizuální rozdíl mezi 8bitovým a 32bitovým souborem PNG je malý. 32bitové soubory PNG jsou čtyřikrát větší než 8bitové soubory PNG.

    Odsazení okraje

    Odsazení kolem okrajů přehledu pohyblivých symbolů (v obrazových bodech).

    Odsazení tvaru

    Odsazení mezi jednotlivými obrázky v přehledu pohyblivých symbolů (v obrazových bodech)

    Algoritmus

    Postup používaný k zabalení snímků do přehledu pohyblivých symbolů. K dispozici jsou dvě možnosti:

    • Základní (výchozí)
    • MaxRects

    Formát dat

    Interní formát používaný k zobrazení dat. Vyberte formát, který nejvíce vyhovuje vašemu zamýšlenému pracovnímu postupu pro přehled pohyblivých symbolů po exportu.

    Otočit

    Otočí pohyblivé symboly o 90 stupňů. Tato možnost je dostupná jenom pro některé formáty dat.

    Oříznout

    Tato možnost ušetří místo v přehledu pohyblivých symbolů tím, že z každého snímku symbolů, který je součástí přehledu, ořízne nepoužívané obrazové body.

    Vrstvit snímky

    Výběrem této možnosti zabráníte tomu, aby se duplicitní snímky uvnitř vybraných symbolů duplikovaly i ve výsledném přehledu pohyblivý symbolů.

Export animace přehledu pohyblivých symbolů pro mobilní aplikace

Train Simple - Matthew Pizzi

Vytvoření atlasu textur

Vývojáři her mohou aplikaci Animate použít k uspořádání animací a jejich exportu v podobě atlasu textur do herního modulu Unity nebo do jiných oblíbených herních platforem. 

Proces generování atlasu textur v aplikaci Animate a jeho import do Unity znázorňuje následující diagram:

Obrázek zachycující pracovní postup pro generování atlasu textur a jeho import do Unity.

Chcete-li pro animaci vytvořit atlas textur, proveďte následující kroky:

  1. V Animate můžete atlas textur vytvořit pro symbol vybraný na panelu Knihovna nebo pro instanci symbolu na ploše. 

  2. Klikněte na něj pravým tlačítkem myši a z nabídky vyberte Generovat atlas textur. Zobrazí se okno Generovat atlas textur.

    Generovat atlas textur

  3. Vyberte požadované možnosti exportu atlasu textur. 

    Možnost exportu Popis
    Rozměr obrázku Celková velikost atlasu textur (v obrazových bodech) Výchozí nastavení je Automatická velikost, kdy se mění velikost přehledu, aby obsáhl všechny přidávané obrázky.
    Optimalizovat rozměry
    • Když je zaškrtnuto políčko Optimalizovat rozměry, jsou z bitmapy odstraněny prázdné obrazové body a rozměry nejsou mocninou dvou (výchozí možnost). Toto platí pro všechny generované bitmapy.
    • Když políčko Optimalizovat rozměry není zaškrtnuto, jsou bitmapy generovány s využitím vybraných rozměrů.
    Formát obrázku Formát souboru exportovaného přehledu pohyblivých symbolů. 8bitový soubor PNG a 32bitový soubor PNG podporují použití průhledného pozadí (alfa kanál). Celkový vizuální rozdíl mezi 8bitovým a 32bitovým souborem PNG je malý. 32bitové soubory PNG jsou čtyřikrát větší než 8bitové soubory PNG.
    Rozlišení Zvolte libovolnou hodnotu v rozsahu od 0,3 do 3,0
    Odsazení okraje Odsazení kolem okrajů atlasu textu (v obrazových bodech)
    Odsazení tvaru Odsazení mezi jednotlivými obrazy v atlasu textu (v obrazových bodech)
    Algoritmus

    Postup používaný k zabalení snímků do atlasu textur. K dispozici jsou dvě možnosti:

    • Základní 
    • MaxRects (výchozí)
    Formát dat Interní formát používaný k zobrazení dat. Výchozí formát je JSON.
    Otočit Otočí obrázky o 90 °. Tato možnost je dostupná pouze pro některé formáty dat.
    Sloučit zkosené objekty do bitmapy Tuto možnost vyberte, pokud pro objekty používáte zkosené transformace. Animate převede tyto objekty na bitmapové obrázky, protože některé herní moduly nedokáží odpovídajícím způsobem interpretovat zkosené transformace. 
    Optimalizovat soubor Animation.json
    • Pokud je zaškrtnuta možnost Optimalizovat soubor Animation.json, odstraní se odsazení a rozložená matice a zkrátí se použité názvy (výchozí možnost).
    • Pokud není zaškrtnuta možnost Optimalizovat soubor Animation.json, proběhne export s odsazením a smysluplnými názvy.
  4. Můžete zvolit, že chcete symbol exportovat do více bitmap podle rozměru.

    Generovat atlas textur pro více bitmap

    Poznámka:

    U podkladů přesahujících velikost vybraného rozměru obrázku se zobrazí upozornění.

  5. Chcete-li zobrazit výstup v podobě náhledu atlasu textur, klikněte na kartu Náhled.

    Náhled vytvořeného atlasu textur

  6. Klikněte na tlačítko Procházet a vyberte pro výstupní soubor cílovou cestu na počítači nebo zadejte cestu do textového pole a klikněte na tlačítko Exportovat

Vygenerovaná výstupní složka atlasu textur obsahuje následující soubory:

Animation.json

Tento soubor obsahuje informace o animaci. Identické snímky v souboru Animation.json jsou ve výchozím nastavení optimalizovány a konsolidovány.

spritemap.json

Tento soubor obsahuje informace o souboru spritesheet.png.

spritemap.png

U exportovaného symbolu obsahuje tento soubor bitmapovou podobu všech minimálně jedinečných textur potřebných k rekonstrukci animace.

Vygenerovaný atlas textur můžete použít v libovolném herním modulu, jako je Unity, pokud má vhodný zásuvný modul pro import.

Import atlasu textur do modulu Unity

Soubory atlasu textur generované v aplikaci Animate můžete importovat do vašich oblíbených herních modulů. Pokud chcete soubory atlasu textur importovat, můžete si vytvořit zásuvné moduly, které odpovídají herním modulům. Vzorový zásuvný modul pro import je určený pro nástroj Unity. 

Atlas textur můžete exportovat do Unity provedením následujících kroků: 

  1. V nástroji Unity vytvořte v určitém umístění projekt. V tomto umístění se vytvoří složka s podsložkou Assets (Datové zdroje).

  2. Ve složce Assets vytvořte dvě podsložky:Resources (Zdroje) a Editor.

  3. Klikněte sem a stáhněte si ukázkový zásuvný modul pro import určený pro platformu Unity. Na kartě Downloads (Soubory ke stažení) zvolte Unity Plugin (Zásuvný modul Unity) a vyberte číslo verze, kterou chcete stáhnout.

    Komprimovaný soubor unity-plugin.zip obsahuje soubory Plugin.cs, WrapperPlugin.cs, AnimateEditor.cs a Effect.shader.

    Stažením ukázkového zásuvného modulu vyjadřujete souhlas s podmínkami používání a online zásadami ochrany osobních údajů. 

  4. Přesuňte soubory atlasu textur, jako jsou Animation.json, spritemap.json a spritemap.png, a soubory zásuvného modulu Unity, jako Plugin.cs a Effect.shader, do složky Assets > Resources.

  5. Přesuňte soubory AnimateEditor.cs a Wrapperplugin.cs do složky Assets

  6. V nástroji Unity klikněte na soubor AnimateEditor.cs a přetáhněte ho do složky Main Camera (Hlavní kamera).

  7. Přehrajte projekt. Při přehrávání je mapa pohyblivých souborů rozdělena na různé pohyblivé symboly.

  8. Přesuňte soubor AnimateEditor.cs do složky Editor.

  9. V nástroji Unity klikněte na soubor Wrapperplugin.cs a přetáhněte ho do složky Main Camera (Hlavní kamera).Také zrušte výběr nebo odstraňte soubor AnimateEditor.cs ze složky Main Camera.

  10. Podle vašich požadavků přehrajte nebo publikujte výstup. 

Zásuvný modul si můžete přizpůsobit svým požadavkům úpravou souboru Wrapperplugin.cs.

Zásuvný modul Unity podporuje barevné efekty pro soubory atlasu textur generované v aplikaci Animate a také podporuje maskování pomocí vrstev. Funkce maskování se týká pouze platformy Unity počínaje verzí 2017. 

Publikování textur

Animátoři mohou vytvářet obsah ve vektorovém formátu a poté exportovat vektorový nebo bitmapový obsah pro platformy podporující HTML 5. V nastavení publikování byla také přidána možnost exportovat animace jako atlas textur, což umožňuje zvýšit výkon animací.

1. Vytvořte dokument Canvas. Výběrem možnosti Soubor > Nový zobrazte dialogové okno Nový dokument. 

2. Vyberte kartu Další volby a klikněte na HTML5 Canvas. Otevře se nový dokument FLA.

Klikněte na Soubor > Nastavení publikování. Pokud je na kartě Základní zaškrtnuto políčko Exportovat dokument jako texturu, zobrazí se na kartě Nastavení snímku volba Možnosti publikování textury. Ve výchozím nastavení jsou při publikování do textury zahrnuty všechny symboly. Chcete-li pro textury vybrat jen některé symboly, klikněte na ikonu nastavení.

Ačkoli tato možnost může zvýšit velikost datových zdrojů, zvyšuje výkon. Můžete také 2x nebo 3x zvýšit původní rozlišení obrázků, pokud chcete textury publikovat pro displeje HiDPI. Chcete-li změnit nastavení rozlišení, klikněte na ikonu klíče vedle políčka Exportovat dokument jako texturu, jak je znázorněno na následujícím snímku obrazovky. Nastavte číslo v poli Rozlišení na násobek 2x nebo 3x.

Výchozí rozlišení při exportu textur je nastaveno na hodnotu 2x. Rozlišení můžete nastavit v rozsahu 0,3 až 3x.

Poznámka:

Publikování textury lze použít pouze pro dokument ve formátu HTML5 Canvas.

Povolená možnost Exportovat dokument jako texturu
Povolená možnost Exportovat dokument jako texturu

Výběr vektorového nebo bitmapového souboru je jako volba mezi velikostí souboru a výkonem. Platformy HTML5 jsou optimalizovány pro bitmapový obsah. U některých složitých tvarů je proto lepší předem převést vektorové obrázky na bitmapové. Pro základní obsah můžete stále používat vektory. Animate vám tuto možnost nabízí prostřednictvím dialogového okna pro částečný výběr symbolů. Tento výběr vám umožňuje zvolit symboly, které chcete převést na bitmapy, přičemž zbývající symboly zůstanou vektorové.

Chcete-li provést částečný výběr symbolů, klikněte na tlačítko Změnit v dialogovém okněNastavení publikování a v seznamu vyberte symboly. Ve výchozím nastavení jsou vybrány všechny symboly.

Změna částečného výběru symbolů
Změna částečného výběru symbolů

Vyberte požadované symboly v seznamu. 

Částečný výběr symbolů
Částečný výběr symbolů

Výuková lekce o publikování textur

Zjistěte, jak můžete vytvářet podklady pomocí vektorových kreseb nabízejících flexibilitu a věrnost a poté je publikovat jako bitmapové textury.
Logo Adobe

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