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

Vytváření a publikování virtuální reality

  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í

Animate představuje typy dokumentů VR 360 a VR Panorama, se kterými snadno vytvoříte poutavý obsah.Můžete také použít nový typ dokumentu virtuální reality a importovat 3D modely (soubory .glb) do projektu aplikace Animate a vytvářet tak animace s 3D obsahem. 

K zobrazení náhledu obsahu vytvořeného v dokumentech VR použijte zbrusu nový panel VR pohled. Na tomto panelu můžete kliknout na instance filmového klipu a přesunout je. Jakmile na objekty kliknete a začnete je přesouvat, Animate je automaticky rozpozná. VR pohled vám umožní umístit objekty ve 3D prostoru. Změny provedené při umísťování objektů (filmový klip) ve VR pohledu se automaticky promítnou do 2D scény. Na panelu Časová osa také můžete označit požadované vrstvy jako vrstvy textury, které v těchto dvou typech dokumentu obalí válec nebo kouli.

Animate vám také umožní spravovat animace virtuální reality za běhu pomocí řady rozhraní API. Můžete například použít objekty v prostředí virtuální reality, které se zobrazí, když uživatel klikne na nějaké tlačítko. 

 Virtuální realita (360) a Virtuální realita (Panorama) v Animate jsou Beta verzemi pro verzi vydanou v říjnu 2018.

Typy dokumentů virtuální reality

Pro virtuální realitu (VR) existují dva typy dokumentů:

VR Panorama

  • Tento typ dokumentu můžete použít k vytvoření panoramatického obsahu pro aplikace virtuální reality. 
  • Obsahem nakresleným přímo na vrstvách textury se v tomto typu dokumentu obalí válec.
  • Můžete si buď zvolit panoramatický obraz na vrstvě textury, nebo nakreslit pozadí. 
  • Animate převádí vámi vytvořené 2D animace do panoramatického obsahu s interaktivitou. 

Plocha

  • Tento typ dokumentu můžete použít k vytvoření 360stupňového obsahu pro aplikace virtuální reality.  
  • Obsahem nakresleným přímo na vrstvách textury se v tomto typu dokumentu obalí koule.
  • Můžete si zvolit buď ekvidistantní válcový obrázek, nebo obsah nakreslit. 
  • Animate převádí vámi vytvořené 2D animace do 360stupňového obsahu s interaktivitou.
VR 360 a VR Panorama na úvodní obrazovce
VR 360 a VR Panorama na úvodní obrazovce

Vytváření a publikování obsahu virtuální reality

Pomocí následujících kroků můžete v Animate vytvořit obsah virtuální reality:

  1. Naimportujte 360stupňový nebo panoramatický obraz na plochu pro pozadí.

    Pokud je obrázek příliš velký, můžete upravit velikost zobrazení plochy.

    • Velikost nastavte výběrem Změnit > Dokument
    •  Klikněte na Sjednotit obsah.

    Kliknutím na ikonu Vystředit plochu v pravém horním rohu umístíte obrázek do středu obrazovky. 

  2. Pokud chcete vytvořit vrstvu jako vrstvu textury, klikněte na ikonu Vytvoření pokřivení textury pro všechny vrstvy na panelu časové osy, jak je vidět na následujícím snímku obrazovky:

    Vytvoření obalu textury pro vrstvy
    Vytvoření obalu textury pro vrstvy

    Vrstva textury se obalí kolem válce nebo koule v závislosti na zvoleném typu dokumentu.

  3. Přidejte objekty na plochu, poté k nim v závislosti na typu objektů přidejte klasické doplnění nebo doplnění pohybu a vytvořte animaci. 

    Plocha VR 360
    Plocha VR 360

    Na snímku obrazovky výše si můžete prohlédnout zobrazení plochy aplikace Animate obsahující ekvidistantní obrázek v dokumentu ve formátu VR 360, ptáčka s vodicí cestou pohybu a klasické doplnění na časové ose. 

  4. Náhled obsahu můžete zobrazit kliknutím na Okno > VR pohled.

    Použití dialogu VR pohled k zobrazení náhledu obsahu VR
    Použití dialogu VR pohled k zobrazení náhledu obsahu VR

    Na panelu VR pohled klikněte na tlačítko Spustit VR pohled.

    Panel VR pohled
    Panel VR pohled

    V režimu náhledu VR pohledu můžete obnovit původní stav obsahu pomocí tlačítka Obnovit. Pohled VR automaticky neodráží změny ve fázi tvorby. Pokud chcete zobrazit změny použité na datové zdroje v testovacím prostředí, klikněte na Aktualizovat.

    Možnosti Aktualizovat a Obnovit v dialogu VR pohled
    Možnosti Aktualizovat a Obnovit v dialogu VR pohled

    V režimu náhledu můžete přesunovat instance filmového klipu. Animate objekty rozpozná automaticky, když na ně najedete myší. Když myší na objekty najedete, tvar kurzoru se změní na křížek se šipkami, jak je vidět na snímku obrazovky níže. Objekty můžete posunovat podél válce nebo koule v závislosti na zvoleném typu dokumentu.

    Pokud se chcete posouvat v okně VR pohled, klikněte na obrazovku náhledu a potáhněte myší. 

    Ikona křížku se šipkami pro přesouvání objektů
    Ikona křížku se šipkami pro přesouvání objektů

  5. Publikujte obsah kliknutím na Soubor > Publikovat nebo stisknutím kláves Ctrl+Enter. Při publikování se obrázek v aplikaci Animate obalí kolem mřížky ve tvaru válce nebo koule. Můžete přidat další vrstvy a na tyto vrstvy můžete přidat animační obsah.

    Ukázkový publikovaný soubor ve formátu VR 360 se zobrazí tak, jak je znázorněno níže v animovaném GIFu. 

    Výstupní vzorek ve formátu VR 360
    Výstupní vzorek ve formátu VR 360

    Výstupní vzorek ve formátu VR panorama
    Výstupní vzorek ve formátu VR panorama

    Při publikování obsahu virtuální reality si můžete zvolit, zda chcete jako běhový modul použít hostované knihovny JavaScriptu. Ve výchozím nastavení aplikace Animate používá pro publikovaný obsah běhový modul z hostovaných knihoven. Zrušte zaškrtnutí této možnosti v nastavení publikování, pokud chcete běhové prostředí zabalit s publikovaným obsahem. 

    Nastavení publikování
    Nastavení publikování pro knihovny

Modernizace animací pomocí virtuální reality

Virtuální realita je trend, který na trhu převládá. Chcete do svého obsahu vnést virtuální realitu? Podívejte se na výukovou lekci na konci tohoto příkladu a postupujte podle těchto kroků.

  1. Na kartě Home klikněte na Další volby.

  2. Vyberte VR Panorama a klikněte na Vytvořit .

Jak vytvořit panoramatický obsah pomocí aplikace Animate

Podívejte se na video, ve kterém se dozvíte, jak přidat další efekty v panoramatickém zobrazení a vylepšit tak virtuální zážitek.

Výuková lekce pro export ve formátu WebGL-glTF (Standard a Extended)

Video s ukázkou exportu ve formátu WebGL-glTF (Standard a Extended)

Používání 3D obsahu

Můžete použít typ dokumentu virtuální reality a importovat 3D modely (soubory .glb) do projektu Animate a vytvořit tak 3D obsah.

  1. Vytvořte dokument typu VR (360) náhled nebo VR (panorama).

  2. Zvolte Soubor > Importovat a vyhledejte soubor .glb, který chcete importovat na plochu nebo do knihovny.

    Import 3D obsahu na plochu
    import 3D obsahu na plochu

  3. Přidejte k objektů filmového klipu animace a interaktivitu a publikujte výstup.

    Náhled 3D modelů si můžete zobrazit na panelu VR pohled. 

Použití virtuální reality za běhu

Animate vám také umožní spravovat animace virtuální reality za běhu s pomocí rozhraní API. Můžete například použít objekty v prostředí 360stupňové virtuální reality, které se zobrazí, když uživatel klikne na nějaké tlačítko. 

Toto je seznam rozhraní API modulu runtime virtuální reality:

Balíček: anWebgl

Properties

Název

Typ/třída

Přístup

Popis

Příklad

Stage

Stage

Čtení i zápis

Získání/nastavení vlastností plochy

anWebgl.stage

virtualCamera

VirtualCamera

Čtení i zápis

Přístup k výchozí kameře

anWebgl.virtualCamera

Root

MovieClip

Jen ke čtení

Objekt zobrazený zcela navrchu (časová osa aktuální scény)

anWebgl.root

Metody

Název

Prototyp

Popis

Příklad

addGLBFile

addGLBFile(filePath: string, successCallback : function, errorCallback : function):void

Načítá 3D model ze zadaného souboru GLB

anWebgl.addGLBFile("model.glb" , successCallbackFunction, errorCallbackFunction).

playAll

playAll() : void

Přehraje animaci pro všechny filmové klipy včetně kořene.

anWebgl.playAll();

stopAll

stopAll() : void

Zastaví animaci pro všechny filmové klipy včetně kořene.

anWebgl.stopAll();

Třída: MovieClip

Zdědí: DisplayObjectContainer

Properties

Metody

Název

Prototyp

Popis

Příklad

Play

play(): void

Přehraje animaci pro filmový klip.

anWebgl.root.getChildByName(„název").play();
(nebo)

this.play(); 

Stop

stop(): void

Zastaví animaci pro filmový klip.

anWebgl.root.getChildByName(„název").stop();

 

playAll

playAll() : void

Přehraje animaci pro všechny filmové klipy včetně kořene.

anWebgl.root.getChildAt(0).playAll();

 

stopAll

stopAll():void

Zastaví animaci pro všechny filmové klipy včetně kořene.

anWebgl.root.getChildAt(0)).stopAll();

 

Třída: DisplayObject

Dědí: IEventDispatcher

Název

Prototyp

Popis

Příklad

hitTestPoint

hitTestPoint(x, y, Boolean).

Vrátí displayObject/displayObjectContainer/movieClip v závislosti na typu zasaženého objektu.

x a y jsou souřadnice bodu na obrazovce.

anWebgl.root.hitTestPoint(300, 200, true, false);

Název

Typ/třída

Přístup

Popis

Příklad

X

Číslo

Čtení i zápis

Převod na osu X

var name =anWebgl.root.getChildByName("name");
name.x+=10;

 

Y

Číslo

Čtení i zápis

Převod na osu Y

var name = anWebgl.root.getChildByName("name");
name.y+=10;

 

Z

Číslo

Čtení i zápis

Převod na osu Z

var name = anWebgl.root.getChildByName("name");
name.z+=10;

 

scaleX

Číslo

Čtení i zápis

Měřítko podél osy X

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleX=2;

 

scaleY

Číslo

Čtení i zápis

Měřítko podél osy Y

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleY=10;

 

scaleZ

Číslo

Čtení i zápis

Měřítko podélk osy Z

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleZ=10;

 

rotationX

Číslo

Čtení i zápis

Otočení kolem osy X

anWebgl.root.getChildByName("name").rotationX+=30;

(nebo)

anWebgl.root.movieClip_name.rotationX+=30;

rotationY

Číslo

Čtení i zápis

Otočení kolem osy Y

anWebgl.root.getChildByName("name").rotationY+=30;

 

rotationZ

Číslo

Čtení i zápis

Otočení kolem osy Z

anWebgl.root.getChildByName("name").rotationZ+=30;

 

Parent

DisplayObjectContainer

Jen ke čtení

Nadřízený kontejner

var root = anWebgl.root;
var child = root.getChildAt(0);
console.log(child.parent)

 

Visible

Boolean

Čtení i zápis

Viditelnost objektu

var root = anWebgl.root;
var child = root.getChildAt(0);
console.log(child.visible);

Třída: DisplayObjectContainer

Zdědí: DisplayObject

Název

Prototyp

Popis

Příklad

numChildren

numChildren:num

Vrátí počet podřízených elementů objektu.

anWebgl.root.movieClipInstanceName.numChildren;

removeChild

removeChild(obj:DisplayObject):void

Odebere objekt argumentu, pokud existuje.

anWebgl.root.movieClipInstanceName.removeChild(childObj);

Contains

contains(obj:DisplayObject):boolean

Vrátí hodnotu true, pokud je objekt argumentu podřízený, v opačném případě vrátí hodnotu false.

anWebgl.root.movieClipInstanceName.contains(childObj);

getChildAt

getChildAt(index:Number): DisplayObject

Vrátí podřízený objekt v indexu argumentu.

anWebgl.root.movieClipInstanceName.getChildAt(2);

getChildByName

getChildByName(name:String): DisplayObject

Vrátí podřízený objekt s názvem argumentu, pokud existuje.

anWebgl.root.movieClipInstanceName.getChildByName(childName);

Třída: Stage

Properties

Název

Přístup

Popis

Příklad

stageWidth

Jen ke čtení

Šířka plochy

anWebgl.stage.stageWidth

stageHeight

Jen ke čtení

Výška plochy

anWebgl.stage.stageHeight

Color

Čtení i zápis

Barva pozadí plochy

anWebgl.stage.color

Třída: VirtualCamera

Metody

Název

Prototyp

Popis

Příklad

getCamera

getCamera()

Získá objekt kamery. Získá nebo nastaví vlastnosti kamery za běhu.

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

getPosition

getPosition()

Vrátí objekt s vlastnostmi x, y a z, které určují aktuální polohu kamery.

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

setPosition

setPosition()

Přesune kameru do absolutní polohy danou vstupními parametry. Výchozí hodnota = 0.

let cameraPos = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setPosition(cameraPos);

 

moveBy

moveBy()

Přesune kameru vzhledem k aktuální poloze.

let moveByPos = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().moveBy(moveByPos);

 

resetPosition

resetPosition()

Obnoví výchozí polohu kamery, tzn. (0,0,0).


anWebgl.virtualCamera.getCamera().resetPosition();

 

SetRotation

SetRotation()

Otočí kameru o absolutní úhel daný vstupními parametry.

let __rotation__ = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setRotation(__rotation__);

 

resetRotation

resetRotation()

Obnoví úhel kamery na nulu.

anWebgl.virtualCamera.getCamera().resetRotation();

 

Logo Adobe

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