Komponente „3D-Animation“

Mit der Komponente „3D-Animation“ können Sie Creatives in einem immersiven Displayformat mit einem interaktiven 3D-Modell erstellen. Sobald die Anzeige zu sehen ist, beginnt die 3D-Animation. Das Abspielen der Animation ist mit dem Scrollen der Seite verknüpft. Nutzer können direkt mit dem Modell interagieren und die Anzeige auf den Vollbildmodus erweitern, um mehr zu sehen.

Diese Komponente kann nur für Creatives vom Typ „3D-Animation“ in Display & Video 360 verwendet werden, nicht in Microsoft Edge.

So fügen Sie die Komponente „3D-Animation“ Ihrem Projekt hinzu:

1. Öffnen Sie das Steuerfeld Komponenten und dann den Ordner Grafiken und Effekte.
2. Ziehen Sie die Komponente 3D-Animation in den Anzeigebereich.
3. Klicken Sie doppelt auf die Komponente, um den Bearbeitungsdialog der 3D-Animation zu öffnen.
4. Wählen Sie im Bereich Ebenen die Ebene 3D-Modell aus.
5. Suchen Sie im Bereich Eigenschaften im Feld URL nach der GLB-Datei des 3D-Assets, das Sie verwenden möchten. Sie können auch andere Eigenschaften anpassen (siehe unten).
6. Ziehen Sie Bilddateien aus Ihrem Dateisystem in den Anzeigebereich oder in den Bereich Ebenen (nur Windows oder Mac), um Ebenen hinzuzufügen. Alternativ können Sie unten im Bereich Fotogalerie auf die Schaltfläche Assets importieren  klicken. Bei der Komponente „3D-Animation“ können Sie nur Bilder als Ebenen hinzufügen.
7. Positionieren Sie die Ebenen mithilfe der Tabs Anfang und Ende dort, wo sie zu Beginn und zum Ende der Animation erscheinen sollen. Sie können die Ebenen an die gewünschte Position ziehen oder im Bereich in Eigenschaften die Positionsfelder Anfang und Ende verwenden.
8. Legen Sie bei Bedarf weitere Konfigurationsoptionen wie unten beschrieben fest.
9. Sie können sich eine Vorschau anzeigen lassen, während Sie an der Komponente arbeiten. Wenn Sie mit der Komponente zufrieden sind, klicken Sie auf Speichern. Sie kehren dann zur normalen Google Web Designer-Benutzeroberfläche zurück.

Konfigurationsoptionen

Klicken Sie im Anzeigebereich doppelt auf die Komponente oder wählen Sie sie aus und klicken Sie im Bereich Eigenschaften auf Einstellungen… .

Mittleren Status zuweisen

Für eine genauere Steuerung der 3D-Animation können Sie an dieser Stelle einen mittleren Status zuweisen und die Ebeneneigenschaften ändern.

1. Bewegen Sie den Mauszeiger auf den Tab Anfang und klicken Sie auf die Schaltfläche . Der Tab Mitte wird angezeigt.
2. Standardmäßig befindet sich der mittlere Status in der Mitte zwischen Beginn und Ende der Animation. Sie können das Timing der Animation anpassen.
3. Wechseln Sie zum Tab Mitte, um die Ebeneneigenschaften an dieser Stelle festzulegen.

Um den mittleren Status zu entfernen, bewegen Sie den Mauszeiger auf den Tab Mitte und klicken Sie auf X.

Timing der Animation ändern

Das Timing der Komponente „3D-Animation“ hängt davon ab, wie weit sie bereits in die Seite oder aus der Seite gescrollt wurde. Standardmäßig beginnt die Animation, wenn der obere Rand der Komponente auf der Seite sichtbar wird (0 %), und sie endet, wenn der untere Rand oben auf der Seite verschwindet (100 %). Wenn Sie einen mittleren Zustand hinzugefügt haben, können Sie hierfür auch den Zeitpunkt während der Animation festlegen. Es gibt zwei Möglichkeiten, das Timing der Animation anzupassen:

• Ziehen Sie im Steuerfeld Animations-Timing das Anfangs-, Mittel- und Endfeld oder den Schieberegler auf den gewünschten Prozentsatz.
• Geben Sie im Steuerfeld Animations-Timing in die Felder den Anfangs-, Mittel- und Endprozentsatz ein.

Hintergrund des 3D-Modells transparent machen

1. Wählen Sie das 3D-Modell aus.
2. Klicken Sie im Bereich Eigenschaften auf das Kästchen Transparenter Hintergrund für 3D-Modell.

Gesten-Hinweis hinzufügen

1. Wählen Sie das 3D-Modell aus.
2. Klicken Sie im Bereich Eigenschaften auf das Drop-down-Menü Symbol und wählen Sie entweder ein Bild aus der Fotogalerie aus oder klicken Sie auf Durchsuchen…, um ein Bild aus Ihrem Dateisystem auszuwählen.
3. Geben Sie optional Text ein, der zusammen mit dem Symbol im Feld Text angezeigt werden soll.

Der Gesten-Hinweis erscheint über dem 3D-Modell, um den Nutzer zur Interaktion aufzufordern.

3D-Modell drehen

1. Wählen Sie das 3D-Modell aus.
2. Legen Sie im Bereich Eigenschaften den Gierwinkel für den Anfang, die Mitte und das Ende der Animation fest.

Der Gierwinkel steht für die Rotation des Modells um die Vertikalachse.

Bildebenen hinzufügen

Es gibt zwei Möglichkeiten, um eine Ebene hinzuzufügen:

• Ziehen Sie eine Datei aus Ihrem Dateisystem in den Anzeigebereich oder in das Steuerfeld Ebenen (nur Windows oder Mac).
• Klicken Sie unten im Bereich Fotogalerie auf Assets importieren .

Neue Ebenen in der Komponente „3D-Animation“ müssen Bilder sein. Standardmäßig ist nur eine Ebene für ein 3D-Modell zulässig.

Ebenen verschieben

1. Wählen Sie die Ebene aus, die Sie verschieben möchten.
2. Wählen Sie den Tab Anfang, Mitte oder Ende aus.
3. Positionieren Sie die Ebene mithilfe einer der folgenden Methoden:
   • Ziehen Sie die Ebene an die neue Position.
   • Legen Sie im Bereich Eigenschaften die Position fest: Anfang, Mitte oder Ende. Sie können nur die Eigenschaften bearbeiten, die im aktuellen Tab enthalten sind. Verwenden Sie die Schaltfläche An Startposition angleichen, An mittlere Position angleichen oder An Endposition angleichen , um die jeweils andere Position zu kopieren.

Wechseln Sie zum Tab Anfang, Mitte oder Ende, um die andere Position der Ebene anzupassen.

Bilder austauschen

1. Klicken Sie mit der rechten Maustaste auf das Bild im Anzeigebereich, das Sie austauschen möchten, und wählen Sie im Pop-up-Menü Bild tauschen... aus.
2. Wählen Sie ein Bild in der Fotogalerie aus oder klicken Sie auf die Schaltfläche Dateien importieren , um ein Bild auf Ihrem Computer auszuwählen.

Das neue Bild ersetzt das Originalbild. Wenn Sie das Bild, das Sie ausgetauscht haben, zuvor geändert haben, werden für das neue Bild auch die geänderten Abmessungen verwendet. Haben Sie nichts geändert, werden für das neue Bild die natürlichen Abmessungen verwendet.

Ebenen neu anordnen

Ziehen Sie im Steuerfeld Ebenen eine Ebene an eine neue Position in der Liste.

Anhand der Reihenfolge wird festgelegt, an welcher Position die Ebenen angezeigt werden. Ebenen, die oben in der Liste aufgeführt sind, erscheinen vor den Ebenen, die weiter unten in der Liste stehen.

Bildebenen löschen

1. Wählen Sie die Ebene aus, die Sie löschen möchten.
2. Klicken Sie unten im Steuerfeld Ebenen auf die Schaltfläche Löschen .

Die Ebene des 3D-Modells ist für die Komponente „3D-Animation“ erforderlich und kann nicht gelöscht werden.

Größe der Ebenen anpassen

1. Wählen Sie die Ebene aus, deren Größe Sie anpassen möchten.
2. Positionieren Sie die Ebene mithilfe einer der folgenden Methoden:
   • Legen Sie im Bereich Eigenschaften die Breite und Höhe der Ebene fest. Klicken Sie auf Seitenverhältnis beibehalten , um festzulegen, ob das Seitenverhältnis zwischen Breite und Höhe beibehalten werden soll.
   • Ziehen Sie im Anzeigebereich an den Ecken und Kanten der Ebene einen der Ziehpunkte.

Die Ebene wird für die gesamte Dauer der Animation an die angegebene Größe angepasst.

Ebenendeckkraft ändern

1. Wählen Sie die Ebene aus, die Sie ändern möchten.
2. Legen Sie im Bereich Eigenschaften die Anfangs- oder Enddeckkraft auf einen Wert zwischen 0 und 1 fest. 0 ist transparent und 1 ist undurchsichtig.

Die Ebene des 3D-Modells ist am Ende der Animation immer undurchsichtig.

Easing der Ebenenanimation ändern

1. Wählen Sie die Ebene aus, die Sie ändern möchten.
2. Wählen Sie im Bereich Eigenschaften unter Erweiterte Eigenschaften einen Easing-Typ aus dem Drop-down-Menü Easing aus.

Benutzerdefiniertes Easing ist nicht verfügbar.

Ebenen ein- und ausblenden

Klicken Sie im Steuerfeld Ebenen unter der Schaltfläche Alle Ebenen ausblenden  auf das Kästchen neben der Miniaturansicht der Ebene.

Sie können alle Ebenen ein- oder ausblenden. Klicken Sie hierfür auf Alle Ebenen ausblenden .

Wenn Sie eine Ebene ausblenden, können Sie einfacher an einer anderen Ebene arbeiten, da die ausgeblendete Ebene nicht in der Konfigurationsvorschau angezeigt wird. Dies hat jedoch keine Auswirkungen auf die Browser-Vorschau oder das veröffentlichte Creative.

Inaktiven Status ein- und ausblenden

1. Wählen Sie eine Bildebene aus.
2. Klicken Sie im Bereich Eigenschaften unter Erweiterte Eigenschaften auf das Kästchen Inaktiven Status anzeigen.

Ein inaktiver Status ist eine durchscheinende Version einer Ebene an einer Position, die Sie derzeit nicht bearbeiten. Auf diese Weise können Sie die Start-, mittleren und Endpositionen visuell miteinander vergleichen. Der inaktive Status dient lediglich der Referenz und wird in der Vorschau oder veröffentlichten Datei nicht angezeigt.

Eigenschaften

Eigenschaften der Komponente „3D-Animation“

Eigenschaft	Beschreibung
Name	Name der Komponente „3D-Animation“.
Scroll-Faktor	Eine Zahl zwischen 0 und 1. Diese Zahl gibt an, wie weit der Betrachter gescrollt hat. Diese Eigenschaft wird nur für die Anzeige im Anzeigebereich von Google Web Designer verwendet. Der Standardwert ist 0,5.

Im Bearbeitungsdialog der 3D-Animation können Sie die Eigenschaften von Ebenen abrufen und bearbeiten, sofern eine Ebene ausgewählt ist.

Eigenschaften der Ebenen eines 3D-Modells

Hinweis: Komponenten des Typs „3D-Animation“, die vor Google Web Designer Version 11.0.0 erstellt wurden, haben einige andere Eigenschaften für die Ebene des 3D-Modells.

Eigenschaft	Beschreibung
Name	Name der Komponente „3D-Modell“
URL	Die GLB-Quelldatei für das 3D-Asset. Prüfen Sie mithilfe des glTF-Validierungstools Khronos, ob Ihre GLB-Datei gültig ist. Für ältere Komponenten des Typs „3D-Animation“ URL oder ID des 3D-Assets Es werden nur in Poly gehostete Assets mit aktivierter Linkfreigabe unterstützt. Die Asset-Datei darf nicht größer als 2 MB sein, da größere Assets in Google Web Designer möglicherweise nicht geladen werden. Weitere Anforderungen finden Sie im Leitfaden für 3D-Assets. URLs müssen mit https://poly.google.com/view/ beginnen. Sie finden die ID am Ende der URL der Poly-Ansichtsseite, z. B. https://poly.google.com/view/0CkCZrXqCWW. Beispiele: https://poly.google.com/view/0CkCZrXqCWW 0CkCZrXqCWW Assets aktualisieren : Sie können das 3D-Asset aktualisieren, indem Sie im Feld URL auf diese Schaltfläche klicken. Wenn keine Änderungen angezeigt werden, wird das Asset möglicherweise noch verarbeitet. Warten Sie eine Minute und versuchen Sie es dann noch einmal.
Transparenter Hintergrund für 3D-Modell	(Nur für ältere Komponenten des Typs „3D-Animation“) Klicken Sie dieses Kästchen an, wenn der Hintergrund der Komponente „3D-Modell“ transparent sein soll.
Gesten-Hinweis
Symbol	Ein Bild, das über dem 3D-Modell angezeigt werden soll, um den Nutzer zur Interaktion mit dem Modell anzuregen. Der Gesten-Hinweis bewegt sich leicht, um die Aufmerksamkeit des Nutzers zu erregen, bis das Zeitlimit für die Animation erreicht ist, und verschwindet, sobald der Nutzer mit dem Modell interagiert.
Text	Der Text, der unter dem Symbol des Gesten-Hinweises angezeigt werden soll. Er ist nur in Verbindung mit einem Symbol für den Gesten-Hinweis verfügbar.
Zeitlimit für die Animation festlegen	Klicken Sie auf dieses Kästchen und geben Sie in Sekunden an, wie lange die Animation für den Gesten-Hinweis dauern soll.
Position und Größe
Anfang	Der Abstand der Ebene zur linken Seite und zum oberen Rand der Komponente „3D-Animation“ am Anfang der Animation. Diese Eigenschaft kann bearbeitet werden, wenn der Tab Anfang ausgewählt ist.
Mitte	Der Abstand der Ebene zur linken Seite und zum oberen Rand der Komponente „3D-Animation“, wenn sich die Animation im Mittleren Status befindet. Diese Eigenschaft kann bearbeitet werden, wenn der Tab Mitte ausgewählt ist.
Ende	Der Abstand der Ebene von der linken und oberen Seite der Komponente „3D-Animation“ am Ende der Animation. Diese Eigenschaft kann bearbeitet werden, wenn der Tab Ende ausgewählt ist.
Größe	Breite und Höhe der Ebene. Diese Eigenschaft wirkt sich für die gesamte Dauer der Animation auf die Ebene aus.
Rotation
Gierwinkel	Die Anfangs-, Mittel- und Endrotation des Modells um die Vertikalachse in Grad.
Schriftstil
Deckkraft	Die Anfangs-, Mittel- und Enddeckkraft der Ebene, dargestellt durch eine Zahl zwischen 0 (transparent) und 1 (undurchsichtig).
Erweiterte Eigenschaften
Easing	Der Easing-Typ für die Animation der Ebene. Benutzerdefiniertes Easing ist nicht verfügbar.

Eigenschaften der Bildebene

Eigenschaft	Beschreibung
Quelle	Die Quelle der Bilddatei. Diese Eigenschaft kann nicht bearbeitet werden.
Exit-URL	Die Exit-URL, wenn der Nutzer auf das Bild klickt.
Position und Größe
Anfang	Der Abstand der Ebene zur linken Seite und zum oberen Rand der Komponente am Anfang der Animation. Diese Eigenschaft kann bearbeitet werden, wenn der Tab Anfang ausgewählt ist.
Mitte	Der Abstand der Ebene zur linken Seite und zum oberen Rand der Komponente, wenn sich die Animation im Mittleren Status befindet. Diese Eigenschaft kann bearbeitet werden, wenn der Tab Mitte ausgewählt ist.
Ende	Der Abstand der Ebene zur linken Seite und zum oberen Rand der Komponente am Ende der Animation. Diese Eigenschaft kann bearbeitet werden, wenn der Tab Ende ausgewählt ist.
Größe	Breite und Höhe der Ebene. Diese Eigenschaft wirkt sich für die gesamte Dauer der Animation auf die Ebene aus.
Schriftstil
Deckkraft	Die Anfangs-, Mittel- und Enddeckkraft der Ebene, dargestellt durch eine Zahl zwischen 0 (transparent) und 1 (undurchsichtig).
Erweiterte Eigenschaften
Easing	Der Easing-Typ für die Animation der Ebene. Benutzerdefiniertes Easing ist nicht verfügbar.
Inaktive Elemente anzeigen	Wenn diese Eigenschaft aktiviert ist, wird eine durchscheinende Version der Ebene an einer inaktiven Position angezeigt, die Sie derzeit nicht bearbeiten.

Ereignisse und Aktionen

Ereignisse

Mithilfe von Ereignissen können andere Aktionen in Ihrer Anzeige ausgelöst werden. Die Komponente „3D-Animation“ sendet das folgende Ereignis:

Ereignis	Beschreibung
3D-Animation geladen	Wird gesendet, wenn alle in der Komponente enthaltenen Assets geladen wurden.

Wenn Sie dieses Ereignis im Dialogfeld „Ereignis“ auswählen möchten, legen Sie die Komponente „3D-Animation“ als Ziel fest.

Sie können auch Ereignisse und Aktionen für das 3D-Modell festlegen, das in der Komponente „3D-Animation“ enthalten ist.

Vorschau

Während der Konfiguration

Sie können die Komponente „3D-Animation“ in der Vorschau anzeigen, während Sie daran arbeiten:

1. Wenn Sie den Bearbeitungsmodus für Komponenten aufrufen möchten, klicken Sie doppelt auf die Komponente im Anzeigebereich.
2. Klicken Sie oben auf den Tab Vorschau.
3. Scrollen Sie nach oben und unten, um sich anzusehen, wie die sichtbaren Ebenen in einem Probelayout für Mobilgeräte funktionieren. Ausgeblendete Ebenen werden nicht angezeigt.
4. Sie können die Komponente während der Vorschau nicht bearbeiten. Klicken Sie auf den Tab Anfang, Mitte oder Ende, nehmen Sie die gewünschten Änderungen vor und klicken Sie noch einmal auf den Tab Vorschau, um diese Änderungen anzusehen.

Im Browser

Wenn Sie für die Komponente eine Vorschau in Ihrem Browser anzeigen lassen möchten, beenden Sie den Bearbeitungsmodus für Komponenten und klicken Sie in Google Web Designer auf Vorschau. Auf der Vorschauseite wird emuliert, wie die Anzeige auf einer Webseite zu sehen ist. Hierbei ist ausreichend Inhalt sichtbar, damit Sie über und unter die Komponente scrollen können.

Sie können aus den folgenden Optionen für den Vorschaumodus auswählen:

• Gerät: Wählen Sie ein Mobilgerät oder Benutzerdefiniert aus.
• Gerät drehen : Sie können zwischen Hoch- und Querformat wechseln.
• Größe des Darstellungsbereichs: Wenn Sie für das Gerät die Option Benutzerdefiniert auswählen, können Sie eine neue Größe festlegen. Hierfür bearbeiten Sie entweder dieses Feld oder ziehen die Ziehpunkte der Vorschau.

Bei Anzeigen des Typs „3D-Animation“ wird immer der Parallaxe-Vorschaumodus im Browser verwendet.