Benutzerhandbuch Abbrechen

Authoring und Veröffentlichen für VR

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.
VR 360 und Panorama im Startbildschirm
VR 360 und Panorama im Startbildschirm

Authoring und Veröffentlichen von VR-Inhalten

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

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

  2. 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
    Texturumhüllung für Ebenen erstellen

    Je nach dem ausgewählten Dokumenttyp legt sich die Texturebene um einen Zylinder oder eine Kugel.

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

  4. Zeigen Sie eine Vorschau des Inhalts an, indem Sie Fenster > VR-Ansicht auswählen.

    „VR-Ansicht“ zur Vorschau für VR-Inhalte verwenden
    „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“
    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
    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
    Kreuzbalken-Symbol zum Verschieben von Objekten

  5. Ü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 360-Ausgabe

    Beispiel für VR Panorama-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
    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.

  1. Klicken Sie auf der Startseite auf Erweitert.

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

  1. Erstellen Sie ein Vorschaudokument des Typs „VR (360)“ oder „VR (Panorama)“.

  2. 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
    3D-Inhalte in die Bühne importieren

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

 

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?