Benutzerhandbuch Abbrechen

Authoring und Veröffentlichen für VR

Suchen

Zuletzt aktualisiert am 24. Mai 2023

Animate führt die VR 360- und VR Panorama-Dokumenttypen ein, mit denen Sie ansprechende Inhalte einfach erstellen können. Außerdem können Sie mit diesem neuen VR-Dokumenttyp 3D-Modelle (als GLB-Dateien) in Ihre Animate-Projekte importieren und Animationen des 3D-Inhalts erstellen.

Um eine Vorschau des in den VR-Dokumenttypen erstellten Inhalts zu sehen, können Sie das neu eingeführte Bedienfeld „VR-Ansicht“ nutzen. Sie können im Bedienfeld „VR-Ansicht“ auf MovieClip-Instanzen klicken und sie verschieben. Animate erkennt die Objekte automatisch, wenn Sie darauf klicken und sie verschieben. In der VR-Ansicht können Sie Objekte im 3D-Raum platzieren. Die in der VR-Ansicht beim Platzieren der Objekte durchgeführten Änderungen (Movieclip) werden automatisch in der 2D-Bühne übernommen. Sie können auch Ebenen als Texturebenen auf dem Zeitachsen-Bedienfeld markieren, die je nach Dokumenttyp auf einem Zylinder bzw. einer Kugel platziert werden sollen.

Mithilfe von zahlreichen APIs können Sie in Animate auch VR-Animationen zur Laufzeit verwalten. Beispielsweise können Sie in der VR-Umgebung mit einem Klick auf eine Schaltfläche einige Objekte einfügen.

VR 360 und VR Panorama sind in der Animate-Version für Oktober 2018 als Beta-Versionen enthalten.

Dokumenttypen für VR-Umgebungen

Es gibt zwei Dokumenttypen für virtuelle Realität (VR):

VR Panorama

Verwenden Sie diesen Dokumenttyp, um Panorama-Inhalte für VR-Anwendungen zu erstellen.
Bei diesem Dokumenttyp wird der Inhalt, der direkt in die Texturebenen gezeichnet wird, auf einem Zylinder platziert.
Sie können festlegen, ob das Panoramabild auf einer Texturebene oder im Hintergrund gezeichnet werden soll.
Animate konvertiert erstellte 2D-Animationen in Panorama-Inhalte mit Interaktivität.

VR 360-

Verwenden Sie diesen Dokumenttyp, um 360-Grad-Inhalte für VR-Anwendungen zu erstellen.
Bei diesem Dokumenttyp wird der Inhalt, der direkt in die Texturebenen gezeichnet wird, auf einer Kugel platziert.
Sie können auswählen, ob Sie ein equirektangulares Bild haben möchten oder den Inhalt zeichnen möchten.
Animate konvertiert erstellte 2D-Animationen in 360-Grad-Inhalte mit Interaktivität.

Authoring und Veröffentlichen von VR-Inhalten

Gehen Sie wie nachfolgend beschrieben vor, um VR-Inhalte in Animate zu erstellen:

Importieren Sie ein 360-Grad- oder Panorama-Bild als Hintergrund.
Wenn die Bildgröße groß ist, können Sie die Größe der Bühnenansicht anpassen.
- Wählen Sie zum Festlegen der Größe die Option Ändern > Dokument.
- Klicken Sie auf Inhalte anpassen.
Wählen Sie Bühne zentrieren oben rechts im Fenster, um das Bild in der Mitte des Bildschirms zu zentrieren.
Um eine Ebene als Texturebene zu erstellen, klicken Sie auf das Symbol Texturumhüllung für Ebene erstellen im Zeitleistenfenster (siehe Screenshot unten):

Texturumhüllung für Ebenen erstellen

Je nach dem ausgewählten Dokumenttyp legt sich die Texturebene um einen Zylinder oder eine Kugel.
Fügen Sie der Bühne Objekte hinzu, fügen Sie den Objekten je nach Assets klassische oder Bewegungs-Tweens hinzu und erstellen Sie Ihre Animation.

VR 360-Bühne

Der Screenshot oben zeigt die Bühnenansicht von Animate mit dem equirektangularen Bild im Dokumenttyp VR 360, einen Vogel mit einem geführten Bewegungspfad sowie klassisches Tweening in der Zeitleiste.
Zeigen Sie eine Vorschau des Inhalts an, indem Sie Fenster > VR-Ansicht auswählen.

„VR-Ansicht“ zur Vorschau für VR-Inhalte verwenden

Klicken Sie im Bedienfeld „VR-Ansicht“ auf die Schaltfläche VR-Ansicht starten.

Bedienfeld „VR-Ansicht“

Im Vorschaumodus „VR-Ansicht“ können Sie den Inhalt über Zurücksetzen auf seinen Anfangszustand zurücksetzen. Die VR-Ansicht übernimmt nicht automatisch Authoring-Änderungen. Um die Änderungen in der Staging-Umgebung anzuzeigen, klicken Sie auf Aktualisieren.

Optionen „Aktualisieren“ und „Zurücksetzen“ in der VR-Ansicht

Sie können MovieClip-Instanzen im Modus „Vorschau“ verschieben. Animate erkennt die Objekte automatisch, wenn Sie den Mauszeiger darüber bewegen. Wenn Sie die Maus über ein Objekt bewegen, ändert sich die Cursorform in ein Kreuzbalken-Symbol (siehe Screenshot unten). Je nach ausgewähltem Dokumentformat können Sie Objekte entlang dem Pfad eines Zylinders oder einer Kugel verschieben.

Um im Fenster „VR-Ansicht“ zu schwenken, klicken Sie in den Vorschaubildschirm und ziehen Sie mit der Maus.

Kreuzbalken-Symbol zum Verschieben von Objekten
Über Datei > Veröffentlichen oder Strg + Eingabetaste können Sie den Inhalt veröffentlichen. Bei der Veröffentlichung wird das Bild auf einem zylinder- oder kugelförmigen Gitter in Animate platziert. Sie können auf diesen Ebenen weitere Ebenen und Animationsinhalte hinzufügen.

Die veröffentlichte VR 360-Beispielausgabe wird wie in dem animierten GIF unten angezeigt.

Beispiel für VR 360-Ausgabe

Beispiel für VR Panorama-Ausgabe

Wenn Sie den VR-Inhalt veröffentlichen, können Sie gehostete JavaScript-Bibliotheken als Laufzeit verwenden. Standardmäßig verwendet Animate die Laufzeit für veröffentlichten Inhalt der gehosteten Bibliotheken. Sie können die Option in den Veröffentlichungseinstellungen deaktivieren, wenn Sie die Laufzeit mit Ihrer veröffentlichten Ausgabe verwenden möchten.

Veröffentlichungseinstellungen für Bibliotheken

Modernisieren von Animationen mit Virtual Reality (VR)

VR ist ein Trend, der auf dem Markt vorherrscht. Möchten Sie VR in Ihre Inhalte integrieren? Sehen Sie sich einfach das Tutorial am Ende dieses Beispiels an und befolgen Sie die Schritte.

Klicken Sie auf der Startseite auf Erweitert.
Wählen Sie VR-Panorama aus und klicken Sie auf Erstellen.

Erstellen von Panoramainhalten mit Animate

Sehen Sie sich das Video an, um zu erfahren, wie Sie weitere Effekte in der Panoramaansicht hinzufügen, um ein virtuelles Erlebnis zu intensivieren.

Videotutorial zum WebGL-glTF-Export („Standard“ und „Extended“)

Video zur Verwendung des WebGL-glTF-Exports („Standard“ und „Extended“)

Verwenden von 3D-Inhalten

Sie können mit dem VR-Dokumenttyp 3D-Modelle (GLB-Dateien) in Ihre Animate-Projekte importieren und 3D-Inhalte erstellen.

Erstellen Sie ein Vorschaudokument des Typs „VR (360)“ oder „VR (Panorama)“.
Wählen Sie Datei > Importieren und navigieren Sie zur .glb-Datei, die in die Bühne oder Bibliothek importiert werden soll.

3D-Inhalte in die Bühne importieren
Fügen Sie Animationen und Interaktivität ähnlich wie MovieClip-Objekte hinzu und starten Sie die Veröffentlichung.

Sie können das 3D-Modell in der VR-Ansicht auch in einer Vorschau anzeigen.

Verwenden von VR zur Laufzeit

Mithilfe von APIs können Sie in Animate auch VR-Animationen zur Laufzeit verwalten. Beispielsweise können Sie in einer VR 360-Umgebung mit einem Klick auf eine Schaltfläche einige Objekte einfügen.

Nachfolgend sehen Sie die Liste der VR-Laufzeit-APIs:

Paket: anWebgl

Eigenschaften

Name	Typ / Klassenname	Zugriff	Beschreibung	Beispiel
Stage	Stage	RW	Ruft die Bühnen-Eigenschaften ab bzw. legt sie fest	anWebgl.stage
virtualCamera	VirtualCamera	RW	Zugriff auf Standardkamera	anWebgl.virtualCamera
Root	MovieClip	RO	Oberstes Anzeigeobjekt (Zeitleiste „Aktuelle Szene“)	anWebgl.root

Methoden

Name	Prototyp	Beschreibung	Beispiel
addGLBFile	addGLBFile (filePath: Zeichenfolge, successCallback: Funktion, errorCallback: Funktion):void	Lädt das 3D-Modell aus einer bestimmten GLB-Datei	anWebgl.addGLBFile("model.glb", successCallbackFunction, errorCallbackFunction)
playAll	playAll() : void	Gibt die Animation für alle MovieClips wieder, einschließlich Stammelemente	anWebgl.playAll();
stopAll	stopAll() : void	Stoppt die Animation für alle MovieClips, einschließlich Stammelemente	anWebgl.stopAll();

Klasse: MovieClip

Erbt von: DisplayObjectContainer

Eigenschaften

Methoden

Name	Prototyp	Beschreibung	Beispiel
Wiedergabe	play(): void	Gibt die Animation für den MovieClip wieder	anWebgl.root.getChildByName("Name").play(); (oder) this.play();
Stop	stop(): void	Stoppt die Animation für den MovieClip	anWebgl.root.getChildByName("Name").stop();
playAll	playAll() : void	Gibt die Animation für den MovieClip wieder, einschließlich Stammelemente	anWebgl.root.getChildAt(0).playAll();
stopAll	stopAll():void	Stoppt die Animation für den MovieClip, einschließlich Stammelemente	anWebgl.root.getChildAt(0)).stopAll();

Klasse: DisplayObject

Erbt von: IEventDispatcher

Name	Prototyp	Beschreibung	Beispiel
hitTestPoint	hitTestPoint (x, y, boolesch)	Gibt „displayObject/displayObjectContainer/movieClip“ zurück, basierend auf dem Typ des Hit-Objekts. „x“ und „y“ sind Punktkoordinaten auf dem Bildschirm.	anWebgl.root.hitTestPoint(300, 200, true, false);

Name	Typ / Klassenname	Zugriff	Beschreibung	Beispiel
X	Number	RW	Verschiebung entlang der X-Achse	var name =anWebgl.root.getChildByName("name"); name.x+=10;
Y	Number	RW	Verschiebung entlang der Y-Achse	var name = anWebgl.root.getChildByName("name"); name.y+=10;
Z	Number	RW	Verschiebung entlang der Z-Achse	var name = anWebgl.root.getChildByName("name"); name.z+=10;
scaleX	Number	RW	Skalierung entlang der X-Achse	var root = anWebgl.root; var child = root.getChildAt(0); child.scaleX=2;
scaleY	Number	RW	Skalierung entlang der Y-Achse	var root = anWebgl.root; var child = root.getChildAt(0); child.scaleY=10;
scaleZ	Number	RW	Skalierung entlang der Z-Achse	var root = anWebgl.root; var child = root.getChildAt(0); child.scaleZ=10;
rotationX	Number	RW	Drehung entlang der X-Achse	anWebgl.root.getChildByName("name").rotationX+=30; (oder) anWebgl.root.movieClip_name.rotationX+=30;
rotationY	Number	RW	Drehung entlang der Y-Achse	anWebgl.root.getChildByName("name").rotationY+=30;
rotationZ	Number	RW	Drehung entlang der Z-Achse	anWebgl.root.getChildByName("name").rotationZ+=30;
Übergeordnet	DisplayObjectContainer	RO	Übergeordneter Container	var root = anWebgl.root; var child = root.getChildAt(0); console.log(child.parent)
Visible	Boolean	RW	Objektsichtbarkeit	var root = anWebgl.root; var child = root.getChildAt(0); console.log(child.visible);

Klasse: DisplayObjectContainer

Erbt: DisplayObject

Name	Prototyp	Beschreibung	Beispiel
numChildren	numChildren:num	Gibt die Anzahl der untergeordneten Elemente eines Objekts zurück	anWebgl.root.movieClipInstanceName.numChildren;
removeChild	removeChild(obj:DisplayObject):void	Entfernt das Argumentobjekt, sofern vorhanden	anWebgl.root.movieClipInstanceName.removeChild(childObj);
Contains	contains(obj:DisplayObject):boolean	Gibt „true“ zurück, wenn es sich bei dem Argumentobjekt um ein untergeordnetes Element handelt, ansonsten „false“	anWebgl.root.movieClipInstanceName.contains(childObj);
getChildAt	getChildAt(index:Number): DisplayObject	Gibt das untergeordnete Element als Argumentindex zurück	anWebgl.root.movieClipInstanceName.getChildAt(2);
getChildByName	getChildByName(name:String):DisplayObject	Gibt das untergeordnete Element mit Argumentnamen zurück, sofern vorhanden	anWebgl.root.movieClipInstanceName.getChildByName(childName);

Klasse: Stage

Eigenschaften

Name	Zugriff	Beschreibung	Beispiel
stageWidth	RO	Breite der Bühne	anWebgl.stage.stageWidth
stageHeight	RO	Höhe der Bühne	anWebgl.stage.stageHeight
Color	RW	Farbe des Bühnenhintergrunds	anWebgl.stage.color

Klasse: VirtualCamera

Methoden

Name	Prototyp	Beschreibung	Beispiel
getCamera	getCamera()	Kameraobjekt abrufen. Zum Abrufen oder Einstellen von Kameraeigenschaften.	let cam = anWebgl.virtualCamera.getCamera(); let pos = cam.getPosition(); console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);
getPosition	getPosition()	Gibt das Objekt mit den Eigenschaften „x“, „y“ und „z“ zurück, die den derzeitigen Standort der Kamera angeben.	let cam = anWebgl.virtualCamera.getCamera(); let pos = cam.getPosition(); console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);
setPosition	setPosition()	Verschiebt die Kamera an die absolute Position, die durch die Eingabeparameter angegeben wird. Standardwert = 0.	let cameraPos = {x: 10, y:10, z:10}; anWebgl.virtualCamera.getCamera().setPosition(cameraPos);
moveBy	moveBy()	Verschiebt die Kamera relativ zur aktuellen Position.	let moveByPos = {x: 10, y:10, z:10}; anWebgl.virtualCamera.getCamera().moveBy(moveByPos);
resetPosition	resetPosition()	Setzt die Kameraposition auf die ursprüngliche Position zurück, d. h. (0,0,0).	anWebgl.virtualCamera.getCamera().resetPosition();
SetRotation	SetRotation()	Dreht die Kamera um den absoluten Winkel, der durch Eingabeparameter angegeben wird.	let __rotation__ = {x: 10, y:10, z:10}; anWebgl.virtualCamera.getCamera().setRotation(__rotation__);
resetRotation	resetRotation()	Setzt den Kamerawinkel auf null zurück.	anWebgl.virtualCamera.getCamera().resetRotation();

Mehr

Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?

Authoring und Veröffentlichen für VR

Dokumenttypen für VR-Umgebungen

VR Panorama

VR 360-

Authoring und Veröffentlichen von VR-Inhalten

Modernisieren von Animationen mit Virtual Reality (VR)

Erstellen von Panoramainhalten mit Animate

Videotutorial zum WebGL-glTF-Export („Standard“ und „Extended“)

Verwenden von 3D-Inhalten

Verwenden von VR zur Laufzeit

Mehr

Schneller und einfacher Hilfe erhalten

Fragen an die Community

Wenden Sie sich an Adobe