Form-Tweening

  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

Beim Form-Tweening zeichnen Sie eine Vektorform in einem bestimmten Einzelbild der Zeitleiste und ändern diese Form bzw. zeichnen eine andere Form anschließend in einem Einzelbild der Zeitleiste. Animate interpoliert anschließend die Zwischenformen für die dazwischenliegenden Bilder, sodass eine Animation von einer Form, die sich zu einer anderen ändert, erstellt wird.

Animate bietet Ihnen die Möglichkeit, einheitlichen, durchgängigen Konturen sowie nicht einheitlichen, individuellen Konturen Form-Tweens hinzuzufügen. Sie können auch Form-Tweens zu Konturen hinzufügen, die mit dem variablen Breitenwerkzeug verbessert wurden. Experimentieren Sie mit den Formen, die Sie verwenden möchten, um das Ergebnis zu bestimmen. Mithilfe von Formmarken können Sie Animate anweisen, welche Punkte der Ausgangsform mit bestimmten Punkten der Endform übereinstimmen.

Außerdem können Sie auch die Position und Farbe von Formen innerhalb eines Form-Tweens tweenen.

Gruppen, Instanzen und Bitmapbilder müssen vor dem Tweenen geteilt werden. Text, den Sie mit Form-Tweening bearbeiten möchten, müssen Sie zuvor zwei Mal teilen, um ihn in seine einzelnen Objekte zu zerlegen. Weitere Informationen finden Sie unter Teilen einer Symbolinstanz.

Erstellen von Form-Tweens

Die folgenden Schritte zeigen, wie Sie aus Bild 1 bis Bild 30 auf der Zeitleiste ein Form-Tween erstellen. Sie können jedoch an jeder beliebigen Stelle der Zeitleiste Tweens erstellen.

  1. Zeichnen Sie in Bild 1 mit dem Rechteckwerkzeug ein Quadrat.
  2. Wählen Sie auf derselben Ebene Bild 30 und fügen Sie ihm ein leeres Schlüsselbild hinzu, indem Sie entweder Einfügen > Zeitleiste > Leeres Schlüsselbild wählen oder F7 drücken.

  3. Zeichnen Sie auf der Bühne mit dem Ellipsenwerkzeug in Bild 30 einen Kreis.

    Sie verfügen jetzt über ein Schlüsselbild in Bild 1 mit einem Quadrat und ein Schlüsselbild in Bild 30 mit einem Kreis.

  4. Wählen Sie in der Zeitleiste in der Ebene, die die beiden Formen enthält, ein zwischen den beiden Schlüsselbildern liegendes Bild aus.

  5. Wählen Sie Einfügen > Form-Tween.

    Animate interpoliert die Formen in allen Bildern zwischen den beiden Schlüsselbildern.

  6. Wenn Sie eine Vorschau des Tweens anzeigen möchten, können Sie den Abspielkopf über die Bilder in der Zeitleiste scrubben oder die Eingabetaste drücken.

  7. Wenn Sie nicht nur die Form, sondern auch die Bewegung tweenen möchten, verschieben Sie die Form in Bild 30 an eine andere Position als in Bild 1.

    Drücken Sie die Eingabetaste, um eine Vorschau der Animation anzuzeigen.

  8. Um die Farbe der Form zu tweenen, geben Sie der Form in Bild 1 eine andere Farbe als der Form in Bild 30.
  9. Um dem Tween eine Beschleunigung hinzuzufügen, wählen Sie eines der Bilder aus und geben Sie im Eigenschafteninspektor im Feld Beschleunigung einen Wert ein.

    Um den Anfang des Tweens zu beschleunigen, geben Sie einen negativen Wert ein. Um das Ende des Tweens zu beschleunigen, geben Sie einen positiven Wert ein.

Erstellen von Beschleunigungsvorgaben oder benutzerdefinierten Beschleunigungen

Beschleunigungsvorgaben sind vorkonfigurierte Beschleunigungen, die auf ein Objekt auf der Bühne angewendet werden können.

Eine Reihe häufig verwendeter Vorgaben ist für Form-Tweens verfügbar. Sie können die Vorgaben aus einer Liste auswählen und auf die gewünschte Eigenschaft anwenden. Sie können auch eine benutzerdefinierte Beschleunigung auf ein Form-Tween anwenden.

  1. Klicken Sie in der Zeitleiste von Animate auf die Ebene, die ein Form-Tween enthält.

  2. Um die Tweening-Eigenschaften zu öffnen, klicken Sie im Eigenschaftenbedienfeld auf die Kategorie Tweening.

    Tweening-Eigenschaften
    Tweening-Eigenschaften

  3. Wählen Sie im Popupmenü für den Beschleunigungstyp eine Beschleunigungsvorgabe aus. Doppelklicken Sie auf die Vorgabe, die Sie anwenden möchten. 

    Wenn Sie eine klassische Beschleunigung anwenden möchten, können Sie die Intensität der Beschleunigung zudem erhöhen oder reduzieren, indem Sie den Schieberegler verschieben. 

    Beschleunigungsvorgabetypen
    Beschleunigungsvorgabetypen

  4. Klicken Sie auf das Symbol „Bearbeiten“ neben Beschleunigung, um eine benutzerdefinierte Beschleunigung anzuwenden.

    Im Dialogfeld Benutzerdefinierte Beschleunigung wird ein Diagramm angezeigt, das den Bewegungsgrad im Zeitverlauf darstellt. Die horizontale Achse stellt Bilder dar, und die vertikale Achse stellt den Veränderungsgrad dar. Das erste Schlüsselbild hat den Wert 0 %, das letzte Schlüsselbild den Wert 100 %.

    Die Neigung der Diagrammkurve repräsentiert die Änderungsrate des Objekts. Wenn die Kurve horizontal (keine Neigung) ist, die die Geschwindigkeit Null. Wenn die Kurve vertikal ist, liegt eine sofortige Änderungsrate vor.

    Diagramm „Benutzerdefinierte Beschleunigung“ mit konstanter Geschwindigkeit
    Diagramm „Benutzerdefinierte Beschleunigung“ mit konstanter Geschwindigkeit. Öffnen Sie dieses Dialogfeld, indem Sie in einem Form-Tween ein Bild auswählen und im Bereich „Beschleunigung“ des Eigenschafteninspektors auf die Schaltfläche „Bearbeiten“ klicken.

    Sie können eine benutzerdefinierte Beschleunigung speichern und wiederverwenden, indem Sie sie aus der Liste Benutzerdefiniert wählen. Klicken Sie nach Vornahme der Änderungen im Bearbeitungsmodus auf die Schaltfläche Speichern und anwenden. Der nachfolgende Screenshot zeigt die benutzerdefinierte Beschleunigungsvorgabe mit dem Titel MyEase1.

    Angepasste Beschleunigungsvorgabe
    Angepasste Beschleunigungsvorgabe

    Sie können die Beschleunigungsvorgaben für mehrere Bereiche der Zeitleiste nutzen, indem Sie die entsprechenden Bereiche auswählen und die Beschleunigung darauf anwenden.

    Beschleunigungsvorgabe für mehrere Bereiche
    Anwenden der Beschleunigungsvorgabe auf mehrere Bereiche

Steuern von Formveränderungen mithilfe von Formmarken

Mithilfe von Formmarken können Sie komplexe oder ausgefallene Formveränderungen steuern. Sie dienen zur Kennzeichnung kritischer Punkte und ihrer Positionen in der Ausgangs- und Endform. Wenn Sie beispielsweise den Ausdruck eines gezeichneten Gesichts mit Form-Tweening ändern, können Sie die beiden Augen im ersten und im letzten Bild jeweils mit einer Formmarke kennzeichnen, um zu verhindern, dass sich das Gesicht während Änderung in eine formlose Masse verwandelt. Die Augen bleiben dann während der gesamten Animation klar erkennbar und verschmelzen nicht mit den übrigen Gesichtszügen.

Formmarken als Buchstaben
Formmarken als Buchstaben

Den einzelnen Formmarken sind Buchstaben (a bis z) zugeordnet, an denen sich erkennen lässt, welche Marken in der Ausgangsform und in der Endform einander jeweils entsprechen. Sie können in einer Animation bis zu 26 Formmarken verwenden.

Formmarken sind im Anfangsschlüsselbild gelb und im Endschlüsselbild grün gekennzeichnet. Formmarken, die sich nicht auf einer Kurve befinden, werden rot dargestellt.

Die besten Ergebnisse erzielen Sie, wenn Sie beim Tweenen von Formen die folgenden Regeln beachten:

  • Wenn Sie komplexe Form-Tweening-Animationen erzeugen möchten, sollten Sie Zwischenbilder erstellen und tweenen, anstatt einfach eine Ausgangs- und eine Endform zu definieren.

  • Setzen Sie Formmarken stets nach logischen Gesichtspunkten. Wenn Sie für ein Dreieck beispielsweise drei Formmarken verwenden, müssen diese im Anfangs-Dreieck und im getweenten Dreieck dieselbe Reihenfolge aufweisen. Sie dürfen also nicht im ersten Schlüsselbild in der Reihenfolge abc und im zweiten Schlüsselbild in der Reihenfolge acb gesetzt werden.

  • Am besten funktionieren Formmarken, wenn Sie sie beginnend mit der linken oberen Ecke der Form entgegen dem Uhrzeigersinn platzieren.

Verwenden von Formmarken

  1. Wählen Sie das erste Schlüsselbild einer Form-Tweening-Sequenz aus.
  2. Wählen Sie Modifizieren > Form > Formmarke hinzufügen. Die Anfangsformmarke erscheint als roter Kreis mit dem Buchstaben a an einer beliebigen Stelle auf der Form.

  3. Verschieben Sie die Formmarke an einen Punkt, den Sie markieren möchten.
  4. Wählen Sie das letzte Schlüsselbild der Tweening-Sequenz aus. Die Endformmarke erscheint als grüner Kreis mit dem Buchstaben a an einer beliebigen Stelle auf der Form.

  5. Verschieben Sie die Formmarke an den Punkt in der Endform, der mit dem zuerst markierten Punkt in der Anfangsform übereinstimmt.

  6. Spielen Sie die Animation erneut ab, um festzustellen, wie das Form-Tweening durch die Formmarken beeinflusst wird. Sie können die Formmarken nach Belieben verschieben, um das Tweening genauer einzustellen.
  7. Um weitere Formmarken hinzuzufügen, wiederholen Sie diesen Vorgang. Die neuen Marken sind stets mit dem jeweils nachfolgenden Buchstaben des Alphabets gekennzeichnet (b, c usw.).

Anzeigen von allen Formmarken

  1. Wählen Sie Ansicht > Formmarken einblenden. Diese Option ist nur verfügbar, wenn die Ebene und das Schlüsselbild mit den Formmarken ausgewählt wurden.

Entfernen von Formmarken

  1. Ziehen Sie die Formmarke aus der Bühne heraus.

Entfernen aller Formmarken

  1. Wählen Sie Modifizieren > Form > Alle Marken löschen.

Anwenden von Form-Tweens auf Konturen mit variabler Breite

Animate bietet Ihnen die Möglichkeit, Form-Tweens auf Konturen mit variabler Breite anzuwenden. In früheren Versionen unterstützte Animate lediglich die Erstellung von Form-Tweens für einheitliche, durchgängige Konturen und Formen. Dadurch konnten Designer keine Form-Tweens für nicht-einheitliche Konturen erstellen, beispielsweise für Konturen, die mit dem variablen Breitenwerkzeug verbessert wurden. Durch das Tweenen von Konturen mit variabler Breite werden die Design-Möglichkeiten in Animate deutlich erweitert.

Das Hinzufügen von Form-Tweens zu individuellen Konturen unterscheidet sich nicht vom Tweenen einer Form oder einer durchgängigen, einheitlichen Kontur. Im Arbeitsablauf müssen Sie die Anfangs- und Endform des Tweens definieren. Animate erstellt dann die Übergangsbilder des Tweens.

Das variable Breitenwerkzeug

Mit dem variablen Breitenwerkzeug können Sie einheitliche durchgängige Konturen so optimieren, dass ansprechende individuelle Konturen entstehen. Weitere Informationen zum Verbessern von Konturen mit dem variablen Breitenwerkzeug finden Sie unter Verbessern von Konturen und Formen mit dem variablen Breitenwerkzeug.

Hinzufügen von Form-Tweens zu Konturen mit variabler Breite

  1. Zeichnen Sie in Animate CC eine Linie mit dem Linienwerkzeug.

    Linienkontur mit einem Konturwert von zwei Pixeln
    Eine mit dem Linienwerkzeug gezeichnete Konturlinie auf der Bühne mit einem Konturwert von zwei Pixeln.

  2. Verwenden Sie das variable Breitenwerkzeug, um die Breite in der Mitte der Kontur zu vergrößern (siehe Abbildung unten). Weitere Informationen zum Verwenden des variablen Breitenwerkzeugs finden Sie unter Verbessern von Konturen mit dem variablen Breitenwerkzeug.

    Kontur mit variabler Breite und einem Wert von 68,0 Pixeln
    Kontur mit variabler Breite, erstellt mit dem variablen Breitenwerkzeug mit einem Konturwert von 68,0 Pixeln.

  3. Wählen Sie in der Zeitleiste ein anderes Bild aus, z. B. Bild 30, und erstellen Sie die Endform der Kontur für das Tween.

    Endform, zum letzten Schlüsselbild im Form-Tween hinzugefügt
    Die Endform, zum letzten Schlüsselbild im Form-Tween hinzugefügt.

  4. Klicken Sie mit der rechten Maustaste auf ein beliebiges Bild zwischen 1 und 30 und wählen Sie Form-Tween erstellen.

Hinzufügen von Form-Tweens zu variablen Breitenprofilen

In Animate können Sie Form-Tweens auch individuellen Konturen hinzufügen, die als variable Breitenprofile gespeichert wurden. Sie können Breitenprofile auf die Anfangs- und Endform eines Tweens anwenden und so in Animate ein geglättetes Form-Tween erstellen.

Bei Breitenprofilen handelt es sich um individuelle Konturen, die zur einfachen Wiederverwendung mit dem variablen Breitenwerkzeug gespeichert wurden. Weitere Informationen zu Breitenprofilen finden Sie unter Speichern von Breitenprofilen.

Um variablen Breitenprofilen Form-Tweens hinzuzufügen, gehen Sie wie folgt vor:

  1. Zeichnen Sie in Animate auf der Bühne eine Linie mit dem Linienwerkzeug.

    Linienkontur einem Wert von zwei Pixeln
    Eine mit dem Linienwerkzeug gezeichnete Konturlinie auf der Bühne mit einem Konturwert von zwei Pixeln.

  2. Wählen Sie im Eigenschafteninspektor in der Dropdownliste Breite ein Breitenprofil und wenden Sie dieses an.

    Kontur mit variabler Breite und einem Konturwert von 68,0 Pixeln
    Kontur mit variabler Breite, erstellt mit dem variablen Breitenwerkzeug mit einem Konturwert von 68,0 Pixeln.

  3. Wählen Sie in der Zeitleiste ein anderes Bild aus, z. B. Bild 30, und wählen Sie im Eigenschafteninspektor in der Dropdownliste „Breite“ das gewünschte Breitenprofil aus.

  4. Um den ausgewählten Breitenprofilen ein Form-Tween hinzuzufügen, klicken Sie mit der rechten Maustaste auf einen beliebigen Frame zwischen 1 und 30 und wählen Sie Form-Tween erstellen.

Adobe-Logo

Bei Ihrem Konto anmelden