Ontwerp en publicatie van virtual reality

Laatst bijgewerkt op 24 mei 2023

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.

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

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

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.

Virtual reality-inhoud ontwerpen en publiceren

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

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.

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:

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

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

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.

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

VR-weergave gebruiken voor voorvertoning van VR-inhoud

Klik op Start VR-weergave in het 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

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

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.

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 voor bibliotheken

Animaties met moderniseren met Virtual Reality (VR)

Virtual Reality is een dominante trend in de branche. Wilt u VR toepassen op uw inhoud? Bekijk de zelfstudie aan het einde van dit voorbeeld en voer de volgende stappen uit.

Ga naar het tabblad Start en klik op Geavanceerd.

Selecteer VR-panorama en klik op Maken.

Panoramische inhoud maken met Animate

Bekijk de video om meer effecten toe te voegen in de panoramische weergave zodat de virtuele ervaring nog krachtiger wordt.

Een videozelfstudie over WebGL-glTF-export (Standard en Extended)

Video die laat zien hoe u WebGL-glTF-export (Standard en Extended) gebruikt

3D-inhoud gebruiken

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

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

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

Voeg uw animaties en interactiviteit toe, net als MovieClip-objecten, en publiceer uw project.

U kunt ook een voorvertoning van het 3D-model weergeven in 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	Omschrijving	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;
Ouder	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();

Verwante informatie

Interactieve animaties maken met Animate
Ontwerp animaties voor cartoons, banners, games en het web.

De app openen

Tips en trucs: adverteren met Animate

Leren

Leer met stapsgewijze zelfstudievideo's en praktische begeleiding, rechtstreeks in de app.

Community

Neem deel aan discussies, vind antwoorden, leer van experts en deel je kennis.

Adobe Home

Krijg toegang tot uw favoriete Creative Cloud-apps, services, bestandsbeheer en meer.