Authoring und Veröffentlichen für VR

  1. Adobe Animate-Benutzerhandbuch
  2. Einführung in Animate
    1. Neue Funktionen in Animate
    2. Visuelles Glossar
    3. Systemanforderungen für Animate
    4. Tastaturbefehle für Animate
    5. Mit verschiedenen Dateitypen in Animate arbeiten
  3. Animation
    1. Grundlagen von Animationen in Animate
    2. So verwenden Sie Bilder und Schlüsselbilder in Animate
    3. Einzelbildanimation in Animate
    4. So arbeiten Sie in Animate mit klassischen Tween-Animationen
    5. Pinselwerkzeug
    6. Bewegungsführung
    7. Bewegungs-Tweens und ActionScript 3.0
    8. Bewegungs-Tween-Animationen
    9. Bewegungs-Tween-Animationen
    10. Erstellen von Bewegungs-Tween-Animationen
    11. Verwenden von Eigenschaftenschlüsselbildern
    12. Animieren der Position mithilfe eines Tweens
    13. So bearbeiten Sie Bewegungs-Tweens mit dem Bewegungs-Editor
    14. Bearbeiten des Bewegungspfades einer Tween-Animation
    15. Manipulieren von Bewegungs-Tweens
    16. Hinzufügen von benutzerdefinierten Beschleunigungen
    17. Erstellen und Anwenden von Bewegungsvoreinstellungen
    18. Einrichten von Animations-Tween-Bereichen
    19. Arbeiten mit als XML-Dateien gespeicherten Bewegungs-Tweens
    20. Vergleich von Bewegungs-Tweens und klassischen Tweens
    21. Form-Tweening
    22. Verwenden von Animation mit dem Bone-Werkzeug in Animate
    23. Arbeiten mit Figuren-Rigging in Animate
    24. So verwenden Sie Maskenebenen in Adobe Animate
    25. So arbeiten Sie in Animate mit Szenen
  4. Interaktivität
    1. So erstellen Sie in Animate Schaltflächen
    2. Konvertieren von Animate-Projekten in andere Dokumenttypen
    3. HTML5 Canvas-Dokumente in Animate erstellen und veröffentlichen
    4. Interaktivität mit Codefragmenten in Animate hinzufügen
    5. Erstellen benutzerdefinierter HTML5-Komponenten
    6. Verwenden von Komponenten in HTML5 Canvas
    7. Erstellen von benutzerdefinierten Komponenten: Beispiele
    8. Codefragmente für benutzerdefinierte Komponenten
    9. Empfohlene Verfahren – Anzeigen mit Animate
    10. Authoring und Veröffentlichen für VR
  5. Arbeitsbereich und Arbeitsablauf
    1. Erstellen und Verwalten von Pinseln
    2. Verwenden von Google Fonts in HTML5 Canvas-Dokumenten
    3. Verwenden von Creative Cloud Libraries in Adobe Animate
    4. Bühne und Bedienfeld „Werkzeuge“ in Animate verwenden
    5. Arbeitsablauf und Arbeitsbereich in Animate
    6. Verwenden von Webschriftarten in HTML5 Canvas-Dokumenten
    7. Zeitleisten und ActionScript
    8. Arbeiten mit mehreren Zeitleisten
    9. Festlegen von Voreinstellungen
    10. Verwenden der Animate-Authoring-Bedienfelder
    11. Zeitleisten-Ebenen in Animate erstellen
    12. Exportieren von Animationen für Apps und Game-Engines
    13. Verschieben und Kopieren von Objekten
    14. Vorlagen
    15. Suchen und Ersetzen in Animate
    16. Rückgängigmachen, Wiederholen und das Bedienfeld „Protokoll“
    17. Tastaturbefehle
    18. So verwenden Sie die Zeitleiste in Animate
    19. Erstellen von HTML-Erweiterungen
    20. Optimierungsoptionen für Bilder und animierte GIF-Dateien
    21. Exporteinstellungen für Bilder und GIF-Dateien
    22. Bedienfeld „Elemente“ in Animate
  6. Multimedia und Video
    1. Transformieren und Kombinieren von Grafikobjekten in Animate
    2. Erstellen von und Arbeiten mit Symbolinstanzen in Animate
    3. Bildnachzeichner
    4. So verwenden Sie Sound in Adobe Animate
    5. Exportieren von SVG-Dateien
    6. Erstellen von Videodateien zur Verwendung in Animate
    7. So fügen Sie in Animate ein Video hinzu
    8. Arbeiten mit Video-Cue-Points
    9. Objekte in Animate zeichnen und erstellen
    10. Umformen von Linien und Formen
    11. Striche, Füllungen und Farbverläufe in Animate CC
    12. Adobe Premiere Pro und After Effects
    13. Farb-Bedienfelder in Animate CC
    14. Öffnen von Flash CS6-Dateien mit Animate
    15. In Animate mit klassischem Text arbeiten
    16. Platzieren von Bildern in Animate
    17. Importierte Bitmaps in Animate
    18. 3D-Grafiken
    19. Arbeiten mit Symbolen in Animate
    20. Zeichnen von Linien und Formen mit Adobe Animate
    21. Mit Bibliotheken in Animate arbeiten
    22. Exportieren von Sounds
    23. Auswählen von Objekten in Animate CC
    24. Arbeiten mit Adobe Illustrator AI-Dateien in Animate
    25. Anwenden von Mustern mit dem Sprühen-Werkzeug
    26. Anwenden von Mischmodi
    27. Anordnen von Objekten
    28. Automatisieren von Aufgaben mit dem Menü „Befehle“
    29. Mehrsprachiger Text
    30. Verwenden der Kamera in Animate
    31. Verwenden von Animate mit Adobe Scout
    32. Arbeiten mit Fireworks-Dateien
    33. Grafikfilter
    34. Sounds und ActionScript
    35. Zeichnungsvoreinstellungen
    36. Zeichnen mit dem Stiftwerkzeug
  7. Plattformen
    1. Konvertieren von Animate-Projekten in andere Dokumenttypen
    2. Unterstützung benutzerdefinierter Plattformen
    3. HTML5 Canvas-Dokumente in Animate erstellen und veröffentlichen
    4. Erstellen und Veröffentlichen eines WebGL-Dokuments
    5. So packen Sie Apps für AIR for iOS:
    6. Veröffentlichen von Apps für AIR for Android
    7. Veröffentlichen für Adobe AIR für den Desktop
    8. ActionScript-Veröffentlichungseinstellungen
    9. Empfohlene Verfahren – Organisieren von ActionScript in einer Anwendung
    10. So verwenden Sie ActionScript mit Animate
    11. Empfohlene Verfahren – Richtlinien für Eingabehilfen
    12. Eingabehilfen für den Animate-Arbeitsbereich
    13. Schreiben und Verwalten von Skripts
    14. Aktivieren der Unterstützung für benutzerdefinierte Plattformen
    15. Unterstützung benutzerdefinierter Plattformen – Übersicht
    16. Erstellen barrierefreier Inhalte
    17. Arbeiten mit Plug-ins zur Unterstützung benutzerdefinierter Plattformen
    18. Debuggen von ActionScript 3.0
    19. Aktivieren der Unterstützung für benutzerdefinierte Plattformen
  8. Exportieren und Veröffentlichen
    1. So exportieren Sie Dateien aus Animate CC
    2. OAM-Veröffentlichung
    3. Exportieren von SVG-Dateien
    4. Exportieren von Grafiken und Videos mit Animate
    5. Veröffentlichen von AS3-Dokumenten
    6. Exportieren von Animationen für Apps und Game-Engines
    7. Exportieren von Sounds
    8. Exportieren von QuickTime-Videodateien
    9. Steuern der Wiedergabe von externen Videos mithilfe von ActionScript
    10. Empfohlene Verfahren – Tipps zum Erstellen von Inhalten für mobile Geräte
    11. Empfohlene Verfahren – Videokonventionen
    12. Empfohlene Verfahren – Authoring-Richtlinien für SWF-Anwendungen
    13. Empfohlene Verfahren – Strukturierung von FLA-Dateien
    14. Empfohlene Verfahren für die Optimierung von FLA-Dateien für Animate
    15. ActionScript-Veröffentlichungseinstellungen
    16. Veröffentlichungseinstellungen für Animate festlegen
    17. Exportieren von Projektor-Dateien
    18. Exportieren von Bildern und animierten GIF-Dateien
    19. HTML-Veröffentlichungsvorlagen
    20. Adobe Premiere Pro und After Effects
    21. Schnelles Teilen und Veröffentlichen Ihrer Animationen

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. 

Hinweis:

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

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/Klasse

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/Klasse

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

 

Adobe-Logo

Bei Ihrem Konto anmelden