Benutzerhandbuch Abbrechen

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. Arbeiten mit verschiedenen Dateitypen in Animate
  3. Animation
    1. Grundlagen von Animationen in Animate
    2. So verwenden Sie Bilder und Schlüsselbilder in Animate
    3. Einzelbildanimation in Animate
    4. Arbeiten mit klassischen Tween-Animationen in Animate
    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. Objekte in Animate zeichnen und erstellen
    9. Umformen von Linien und Formen
    10. Striche, Füllungen und Farbverläufe in Animate CC
    11. Adobe Premiere Pro und After Effects
    12. Farb-Bedienfelder in Animate CC
    13. Öffnen von Flash CS6-Dateien mit Animate
    14. In Animate mit klassischem Text arbeiten
    15. Platzieren von Bildern in Animate
    16. Importierte Bitmaps in Animate
    17. 3D-Grafiken
    18. Arbeiten mit Symbolen in Animate
    19. Zeichnen von Linien und Formen mit Adobe Animate
    20. Mit Bibliotheken in Animate arbeiten
    21. Exportieren von Sounds
    22. Auswählen von Objekten in Animate CC
    23. Arbeiten mit Adobe Illustrator AI-Dateien in Animate
    24. Anwenden von Mischmodi
    25. Anordnen von Objekten
    26. Automatisieren von Aufgaben mit dem Menü „Befehle“
    27. Mehrsprachiger Text
    28. Verwenden der Kamera in Animate
    29. Grafikfilter
    30. Sounds und ActionScript
    31. Zeichnungsvoreinstellungen
    32. 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. Eingabehilfen für den Animate-Arbeitsbereich
    12. Schreiben und Verwalten von Skripts
    13. Aktivieren der Unterstützung für benutzerdefinierte Plattformen
    14. Unterstützung benutzerdefinierter Plattformen – Übersicht
    15. Arbeiten mit Plug-ins zur Unterstützung benutzerdefinierter Plattformen
    16. Debuggen von ActionScript 3.0
    17. 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. Empfohlene Verfahren – Tipps zum Erstellen von Inhalten für mobile Geräte
    9. Empfohlene Verfahren – Videokonventionen
    10. Empfohlene Verfahren – Authoring-Richtlinien für SWF-Anwendungen
    11. Empfohlene Verfahren – Strukturierung von FLA-Dateien
    12. Empfohlene Verfahren für die Optimierung von FLA-Dateien für Animate
    13. ActionScript-Veröffentlichungseinstellungen
    14. Veröffentlichungseinstellungen für Animate festlegen
    15. Exportieren von Projektor-Dateien
    16. Exportieren von Bildern und animierten GIF-Dateien
    17. HTML-Veröffentlichungsvorlagen
    18. Adobe Premiere Pro und After Effects
    19. Schnelles Teilen und Veröffentlichen Ihrer Animationen
  9. Fehlerbehebung
    1. Behobene Probleme
    2. Bekannte Probleme

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.

    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.

    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.

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

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?