Animate biedt u nu de documenttypen VR 360 en VR Panorama waarmee u heel eenvoudig deze aantrekkelijke inhoud kunt maken. Met het documenttype voor virtual reality kunt u ook 3D-modellen (als glb-bestanden) importeren naar uw Animate-project en zo animaties op 3D-inhoud maken. 

In het nieuwe deelvenster VR-weergave ziet u een voorvertoning van de inhoud die u in de VR-documenttypen hebt gemaakt. Klik en verplaats MovieClip-instanties in het deelvenster VR-weergave. In Animate worden objecten automatisch gedetecteerd wanneer u erop klikt of ze verplaatst. Met VR-weergave kunt u de objecten in de 3D-ruimte plaatsen. De wijzigingen die worden gedaan in de plaatsing van de objecten (filmclip) in de VR-weergave, worden automatisch overgenomen in het 2D-werkgebied. U kunt ook lagen markeren als structuurlagen in het deelvenster Tijdlijn. Deze lagen worden dan ook voor de beide documenttypen respectievelijk op een cilinder of bolvorm gewikkeld.

In Animate kunt u de virtual reality-animaties ook tijdens runtime beheren met behulp van allerlei veelzijdige API's. Zo kunt u bepaalde objecten in de virtual reality-omgeving introduceren wanneer een gebruiker op een knop klikt. 

Opmerking:

Virtual Reality (360) en Virtual Reality (Panorama) in Animate zijn bètaversies voor de release van oktober 2018. 

Virtual reality-documenttypen

Er zijn twee VR-documenttypen:

VR Panorama

panorama outside vacation wooden village home in sunny evening day . Full 360 degree seamless panorama in equirectangular spherical projection
  • Met dit documenttype maakt u panoramische inhoud voor VR-toepassingen. 
  • In dit documenttype wordt de inhoud die rechtstreeks op structuurlagen is getekend, op een cilinder gewikkeld.
  • U kunt ofwel een achtergrond tekenen, of een panoramische afbeelding op een structuurlaag plaatsen. 
  • Animate converteert uw 2D-animaties naar panoramische inhoud met interactiviteit. 

VR 360

panorama outside vacation wooden village home in sunny evening day . Full 360 degree seamless panorama in equirectangular spherical projection
  • Met dit documenttype maakt u 360 graden-inhoud voor VR-toepassingen.  
  • In dit documenttype wordt de inhoud die rechtstreeks op structuurlagen is getekend, op een bolvorm gewikkeld.
  • U kunt ofwel een equidistante afbeelding gebruiken of de inhoud tekenen. 
  • Animate converteert uw 2D-animaties naar inhoud van 360 graden en biedt interactiviteit.

VR 360 en Panorama in het opstartscherm
VR 360 en Panorama in het opstartscherm

Virtual reality-inhoud ontwerpen en publiceren

Gebruik de volgende stappen om virtuele werkelijkheidsinhoud in Animate te maken:

  1. Importeer een 360 graden-afbeelding of panoramische afbeelding op het werkgebied als achtergrond.

    Als de afbeelding te groot is, kunt u de weergave van het werkgebied aanpassen.

    • Selecteer Wijzigen > Document om de grootte in te stellen
    • Klik op Afstemmen voor identieke inhoud

    Kies het pictogram Werkgebied centreren rechtsboven in het venster om de afbeelding in het midden van het scherm te plaatsen.

  2. Als u een structuurlaag wilt maken, klikt u op het pictogram Structuurwikkel voor alle lagen maken in het deelvenster van de tijdlijn, zoals hieronder weergegeven:

    Een structuurwikkel voor lagen maken
    Een structuurwikkel voor lagen maken

    De structuurlaag wikkelt zich om de cilinder of de bol, afhankelijk van het geselecteerde documenttype.

  3. Voeg objecten aan het werkgebied toe, voeg (afhankelijk van uw elementen) klassieke tweening of bewegingstweening toe aan de objecten en maak uw animatie. 

    VR 360-werkgebied
    VR 360-werkgebied

    De bovenstaande schermafbeelding illustreert de weergave per werkgebied van Animate met de equidistante afbeelding in documenttype VR 360, een vogel met begeleid bewegingspad en klassieke tweening in de tijdlijn. 

  4. Bekijk een voorbeeld van de inhoud met Vensters > VR-weergave.

    VR-weergave gebruiken voor voorvertoning van VR-inhoud
    VR-weergave gebruiken voor voorvertoning van VR-inhoud

    Klik op Start VR-weergave in het deelvenster VR-weergave.

    Deelvenster VR-weergave
    Deelvenster VR-weergave

    In de VR-weergave gebruikt u de knop Herstellen om de inhoud in de oorspronkelijke staat terug te zetten. In de VR-weergave worden de wijzigingen in het ontwerpwerkgebied niet automatisch getoond. Klik op Vernieuwen om de wijzigingen in de elementen van het werkgebied te bekijken.

    De opties Vernieuwen en Opnieuw instellen in de VR-weergave
    De opties Vernieuwen en Opnieuw instellen in de VR-weergave

    U kunt MovieClip-instanties verplaatsen in de voorvertoningsmodus. In Animate worden objecten automatisch gedetecteerd wanneer u de muis erop plaatst. De vorm van de cursor verandert in een pictogram met vier pijlen wanneer u de muis op objecten plaatst zoals hieronder weergegeven. U kunt objecten verplaatsen langs een cilinder of een bolpad, afhankelijk van het geselecteerde documenttype.

    Klik op het voorvertoningsscherm en sleep de muis om in het deelvenster VR-weergave te pannen. 

    Pictogram met vier pijlen om objecten te verplaatsen
    Pictogram met vier pijlen om objecten te verplaatsen
  5. Gebruik Bestand > Publiceren of Ctrl + Enter om de inhoud te publiceren. Wanneer u het project publiceert, wordt de afbeelding op een cilindrisch of bolvormig raster gewikkeld in Animate. U kunt extra lagen en animatie-inhoud toevoegen aan deze lagen.

    De werkelijk gepubliceerde VR 360-uitvoer zal eruitzien als in de onderstaande geanimeerde gif. 

    Voorbeeld van VR-uitvoer
    Voorbeeld van VR-uitvoer
    Voorbeeld van VR-panorama-uitvoer
    Voorbeeld van VR-panorama-uitvoer

    Wanneer u de VR-inhoud publiceert, kunt u ervoor kiezen om gehoste Javascript-bibliotheken te gebruiken als runtime. Standaard maakt Animate gebruik van de runtime voor gepubliceerde inhoud van de gehoste bibliotheken. U kunt deze optie uitschakelen in de publicatie-instellingen als u de runtime wilt inpakken met uw gepubliceerde uitvoer. 

    Publicatie-instellingen
    Publicatie-instellingen voor bibliotheken

3D-inhoud gebruiken

Met het VR-documenttype kunt u 3D-modelinhoud (glb-bestanden) importeren naar uw Animate-project en zo 3D-inhoud maken.

  1. Maak een document van het type VR (360) of VR (panorama).

  2. Kies Bestand > Importeren en blader naar het .glb-bstand om in het werkgebied of de bibliotheek te importeren.

    3D-inhoud importeren in het werkgebied
    3D-inhoud importeren in het werkgebied
  3. Voeg uw animaties en interactiviteit toe, net als MovieClip-objecten, en publiceer uw project.

    U kunt het 3D-model ook bekijken in de VR-weergave.

Virtual reality gebruiken tijdens runtime

In Animate kunt u de virtual reality-animaties ook tijdens runtime beheren met behulp van API's. Zo kunt u bepaalde objecten in een virtual reality-omgeving introduceren wanneer een gebruiker op een knop klikt. 

De lijst met runtime API's voor virtual reality is als volgt:

Pakket: anWebgl

Eigenschappen

Naam

Type / Klasse

Toegang

Beschrijving

Voorbeeld

Stage

Stage

RW

Eigenschappen van werkgebied ophalen/instellen

anWebgl.stage

virtualCamera

VirtualCamera

RW

Toegang tot standaardcamera

anWebgl.virtualCamera

Hoofdmap (root)

MovieClip

RO

Bovenste weergaveobject (tijdlijn huidige scène).

anWebgl.root

Methoden

Naam

Prototype

Beschrijving

Voorbeeld

addGLBFile

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

Laad het 3D-model van het opgegeven GLB-bestand

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

playAll

playAll() : void

Speelt animatie voor alle filmclips, inclusief hoofdmap

anWebgl.playAll();

stopAll

stopAll() : void

Stopt animatie voor alle filmclips, inclusief hoofdmap

anWebgl.stopAll();

Klasse: MovieClip

Overerft: DisplayObjectContainer

Eigenschappen

Methoden

Naam

Prototype

Beschrijving

Voorbeeld

Play

play(): void

Speelt animatie af voor de filmclip.

anWebgl.root.getChildByName("name").play();
(of)

this.play(); 

Stop

stop(): void

Stopt animatie voor filmclip

anWebgl.root.getChildByName("name").stop();

 

playAll

playAll() : void

Speelt animatie af voor alle filmclips, inclusief de hoofdmap.

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

 

stopAll

stopAll():void

Hiermee wordt animatie gestopt voor alle filmclips, inclusief de hoofdmap.

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

 

Klasse: DisplayObject

Overerft: IEventDispatcher

Naam

Prototype

Beschrijving

Voorbeeld

hitTestPoint

hitTestPoint(x, y, Boolean).

retourneert displayObject/displayObjectContainer/movieClip op basis van het type van het getroffen object.

x en y zijn puntcoördinaten op het scherm.

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

Naam

Type / Klasse

Toegang

Beschrijving

Voorbeeld

X

Number

RW

Vertaling op X-as

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

 

J

Number

RW

Vertaling op Y-as

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

 

Z

Number

RW

Vertaling op Z-as

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

 

scaleX

Number

RW

Schaal langs X-as

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

 

scaleY

Number

RW

Schaal langs Y-as

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

 

scaleZ

Number

RW

Schaal langs Z-as

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

 

rotationX

Number

RW

Rotatie langs X-as

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

(or)

anWebgl.root.movieClip_name.rotationX+=30;

rotationY

Number

RW

Rotatie langs Y-as

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

 

rotationZ

Number

RW

Rotatie langs Z-as

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

 

Parent

DisplayObjectContainer

RO

Bovenliggende container

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

 

Visible

Boolean

RW

Zichtbaarheid objecten

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

Klasse: DisplayObjectContainer

Inherits: DisplayObject

Naam

Prototype

Beschrijving

Voorbeeld

numChildren

numChildren:num

retourneert aantal onderliggende elementen van een object

anWebgl.root.movieClipInstanceName.numChildren;

removeChild

removeChild(obj:DisplayObject):void

verwijderd argumentobject indien aanwezig

anWebgl.root.movieClipInstanceName.removeChild(childObj);

Contains

contains(obj:DisplayObject):boolean

retourneert waar als het argumentobject onderliggend is, anders onwaar

anWebgl.root.movieClipInstanceName.contains(childObj);

getChildAt

getChildAt(index:Number): DisplayObject

retourneert onderliggend element bij argumentindex

anWebgl.root.movieClipInstanceName.getChildAt(2);

getChildByName

getChildByName(name:String):DisplayObject

retourneert onderliggend element met argumentnaam indien deze bestaat

anWebgl.root.movieClipInstanceName.getChildByName(childName);

Klasse: Stage

Eigenschappen

Naam

Toegang

Beschrijving

Voorbeeld

stageWidth

RO

Breedte van werkgebied

anWebgl.stage.stageWidth

stageHeight

RO

Hoogte van werkgebied

anWebgl.stage.stageHeight

Color

RW

Achtergrondkleur van werkgebied

anWebgl.stage.color

Klasse: VirtualCamera

Methoden

Naam

Prototype

Beschrijving

Voorbeeld

getCamera

getCamera()

Cameraobject ophalen. Hiermee kunt u de camera-eigenschappen ophalen of instellen tijdens runtime.

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

 

getPosition

getPosition()

Hiermee wordt het object geretourneerd met x-, y- en z-eigenschappen waarmee de huidige locatie van de camera wordt aangeduid.

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

 

setPosition

setPosition()

Hiermee wordt de camera op basis van invoerparameters naar een absolute positie verplaatst. Standaardwaarde = 0.

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

 

moveBy

moveBy()

Verplaats de camera ten opzichte van de huidige positie.

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

 

resetPosition

resetPosition()

Hiermee wordt de oorspronkelijke positie van de camera hersteld, bijvoorbeeld (0,0,0).


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

 

SetRotation

SetRotation()

Hiermee wordt de camera geroteerd met een absolute hoek die als invoerparameter is opgegeven.

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

 

resetRotation

resetRotation()

Hiermee wordt de camerahoek ingesteld op nul.

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

 

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid