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. 

Poznámka:

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

panorama outside vacation wooden village home in sunny evening day . Full 360 degree seamless panorama in equirectangular spherical projection
  • 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. 

VR 360

panorama outside vacation wooden village home in sunny evening day . Full 360 degree seamless panorama in equirectangular spherical projection
  • 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

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

Vlastnosti

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

Vlastnosti

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

Vlastnosti

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();

 

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online