Erfahren Sie, wie Sie eine vektorbasierte 2D-Figur animieren, die Bewegungen der Figur steuern, Assets aus Adobe Stock importieren und das Ergebnis in verschiedenen Formaten ausgeben.

Möchten Sie diese Animation nachbilden? Holen Sie sich die Assets.

Speichern Sie die 2D-Animations-Assets in Ihrem Creative Cloud-Konto. Sobald sich die Assets in Ihrer Creative Cloud-Bibliothek befinden, können Sie über das Bedienfeld „CC Libraries“ in Animate CC darauf zugreifen.

Hinweis: Sie müssen bei Creative Cloud angemeldet sein, um die Bibliothek in Ihrem Konto speichern zu können. Legen Sie eine Adobe ID an, falls Sie noch keine haben.

1. Bühne für die Animation einrichten

Erstellen Sie ein HTML5-Canvas-Dokument, und richten Sie die Bühne sowie die Dokumenteneigenschaften für Ihr Animationsprojekt ein. Wählen Sie eine Vektorgrafik aus Adobe Stock als Hintergrund für die Animation.

2. Szene erstellen

Fügen Sie Ebenen zur Komposition hinzu, und verwenden Sie Zeichenwerkzeuge wie Rechteck, Zeichenstift oder Pinsel, um die Hintergrundszene fertigzustellen.

3. Figur importieren und vorbereiten

Erstellen Sie eine neue Ebene für die Figur. Importieren Sie die Figur, die in Illustrator CC gezeichnet wurde, über das Bedienfeld „CC Libraries“. Erstellen Sie Movieclip-Symbole, und trennen Sie die Ebenen, um alle Bestandteile der Figur für die Animation vorzubereiten. 

Hinweis: Klicken Sie auf 2D Animation Asset, um die Figur in Ihrem Creative Cloud-Konto zu speichern.

4. Figur animieren

Lernen Sie den Unterschied zwischen Bildern und Schlüsselbildern sowie Bewegungs-Tweens und Form-Tweens kennen. Wenden Sie anschließend Animationsschleifen auf die einzelnen Teile der Figur an, um realistische Bewegungen zu simulieren.

5. Animation zur Hauptzeitleiste hinzufügen

Lernen Sie den Unterschied zwischen der Animation von Movieclips und der Animation in der Hauptzeitleiste kennen. Animieren Sie die Figur in der Hauptzeitleiste, und justieren Sie den Bewegungspfad. Definieren Sie eine separate Animation für eine Wolke am Himmel, und spielen Sie die Animation ab.

6. Projekt veröffentlichen

Über die Einstellungen für Veröffentlichungen können Sie Ihr Projekt für das Web, ein anderes Adobe-Programm wie Dreamweaver, Muse oder InDesign oder für ein benutzerdefiniertes Publishing-Ziel exportieren.

7. Ergebnis präsentieren

Teilen Sie Ihre Animation in sozialen Netzwerken mit dem Hashtag #MadeWithAnimate.

 

Das war schon alles! Damit ist dieses Training abgeschlossen. Teilen Sie uns Ihre Meinung zu diesem Tutorial mit.

 

02/13/2017

Contributors: Joseph Labrecque, Ryan Bubnis

War diese Seite hilfreich?
Ja
Nein