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

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie