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

Naposledy aktualizováno 24. 5. 2023

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

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:

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.

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:

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

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.

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.

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

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

Na panelu VR pohled klikněte na tlačítko Spustit 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

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ů

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.

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.

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

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

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.

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

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

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

Náhled 3D modelu můžete také zobrazit v zobrazení VR.

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("name").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;
A	Čí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;
Rodič	DisplayObjectContainer	Jen ke čtení	Nadřízený kontejner	var root = anWebgl.root; var child = root.getChildAt(0); console.log(child.parent)
Viditelné	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();

Související témata

Vytvářejte interaktivní animace pomocí aplikace Animate
Navrhujte animace pro kreslené filmy, bannery, hry a web.

Aplikaci otevřete

Předchozí

Osvědčené postupy – Tvorba reklam v aplikaci Animate

Informace

Učte se pomocí podrobných výukových videí a praktických pokynů přímo v aplikaci.

Komunita

Zapojte se do diskuzí, najděte odpovědi, učte se od odborníků a sdílejte své znalosti.

Domovská stránka Adobe

Získejte přístup k oblíbeným aplikacím, službám, správě souborů a dalším funkcím Creative Cloud.