Erfahre, wie du eine animierte Infografik gestalten kannst. Bewege und drehe Objekte mithilfe von Bewegungs-Tweens. Animiere Elemente entlang eines Pfads. Und blende ein Popup-Fenster mithilfe des Bedienfelds „Aktionen“ ein und aus.
animated-infographic_1000x560

Adobe Illustrator-Datei importieren.

So importierst du eine Adobe Illustrator-Datei in Adobe Animate.

Adobe Illustrator-Datei in Adobe Animate importieren – Zusammenfassung.

  • Die Ebenenstruktur eines Adobe Illustrator-Dokuments wird in Adobe Animate auf die Zeitleiste übertragen. Es ist daher wichtig, die Ebenen schon in Adobe Illustrator richtig festzulegen. Die Beispieldatei für dieses Projekt enthält zwei Ebenen: eine Ebene für alle Objekte, die animiert werden sollen, und eine Ebene für alle Hintergrundobjekte.
  • Richte die Adobe Animate-Datei ein. Wähle auf dem Startbildschirm von Animate „Erweitert > HTML5 Canvas“. Die Datei muss genauso groß sein wie das Illustrator-Dokument: 900 x 500 Pixel.
  • Wähle „Datei > Importieren > In Bühne importieren“. Wähle die Illustrator-Datei aus, und stelle sicher, dass „Alle Ebenen auswählen“ ausgewählt ist. Klicke dann auf „Importieren“. Alle Objekte werden im Dokument platziert und lassen sich nun einzeln auswählen.
  • Bevor du mit der Animation beginnst, solltest du die Hintergrundebene sperren, damit Hintergrundelemente nicht versehentlich verschoben werden. Klicke auf der Zeitleiste für die Hintergrundebene in die Spalte mit dem Schlosssymbol.

Wolke animieren.

So animierst du eine Wolke mithilfe eines Bewegungs-Tweens in Endlosschleife.

Bewegungs-Tween erstellen und Wolke animieren – Zusammenfassung.

  • Klicke auf der Werkzeugleiste auf das Auswahl-Werkzeug. Wähle die Wolke auf der Bühne aus, mache einen Rechtsklick bzw. Ctrl-Klick, und wähle „In Symbol konvertieren“.
  • Daraufhin erscheint das Dialogfeld „In Symbol konvertieren“. Gib den Namen „Cloud“ (Wolke) für das Symbol ein, und klicke auf „OK“.
  • Das erstellte Symbol lässt sich nun animieren. Verschiebe zunächst die Wolke an die Anfangsposition links außerhalb der Bühne.
  • Mache einen Doppelklick auf die Wolke, um die Zeitleiste des Wolkensymbols aufzurufen. Du arbeitest somit „innerhalb“ des Symbols. Links oben im Bearbeitungsfenster von Adobe Animate kannst du sehen, ob du gerade in einem Symbol arbeitest. Bei diesem Beispielprojekt müsste dort jetzt „Szene 1 > Cloud“ stehen.
  • Mache einen Rechtsklick bzw. Ctrl-Klick auf die Wolke, und wähle „Bewegungs-Tween erstellen“, um ein Bewegungs-Tween zum Wolkensymbol hinzuzufügen. Nun kannst du das Symbol von links nach rechts bewegen.
  • Animate weist darauf hin, dass die Wolke wieder in ein Symbol konvertiert werden muss. Danach kann das Symbol animiert werden. Diesen Schritt kann man jetzt oder auch schon zu einem früheren Zeitpunkt erledigen. Bestätige mit „OK“.
  • Adobe Animate fügt nun automatisch ein Bewegungs-Tween zur Zeitleiste hinzu. Diese Animation dauert eine Sekunde (momentan passiert aber nichts).
  • Verschiebe die Wolke nach rechts an eine Stelle außerhalb der Bühne.
  • Animate hat jetzt eine Animation erstellt. Drücke die Eingabetaste, um sie abzuspielen. Die Animation verläuft sehr schnell, weil sie nur eine Sekunde dauert. Im nächsten Schritt änderst du die Dauer.
  • Erweitere das Bewegungs-Tween auf der Zeitleiste von der Endposition nach rechts, bis du 16 Sekunden erreicht hast.
  • Wähle im Menü „Steuerung“ den Befehl „Testen“, um die Animation im Browser zu testen.

Windrad und Rundpfeile drehen.

So kannst du mithilfe von Bewegungs-Tweens Drehungen erzeugen.

Drehungen mithilfe eines Bewegungs-Tweens erzeugen – Zusammenfassung.

  • Wähle die Rotorblätter des Windrads mit dem Auswahl-Werkzeug aus.
  • Mache einen Rechtsklick bzw. Ctrl-Klick auf das Windrad, und wähle „In Symbol konvertieren“.
  • Gib im Dialogfeld „In Symbol konvertieren“ den Namen „windmill“ (Windrad) für das Symbol ein, und klicke auf „OK“.
  • Mache einen Doppelklick auf die Rotorblätter, um die Zeitleiste des Symbols aufzurufen. Links oben sollte „Szene 1 > windmill“ zu sehen sein.
  • Mache wieder einen Rechtsklick bzw. Ctrl-Klick auf die Rotorblätter, und wähle „Bewegungs-Tween erstellen“.
  • Klicke im nächsten Dialogfeld auf „OK“.
  • Klicke in die Mitte des Bewegungs-Tweens auf der Zeitleiste.
  • Rufe das Bedienfeld „Eigenschaften“ auf, und gib im Feld „Drehen“ den Wert 1 ein. Die Rotorblätter machen jetzt innerhalb von einer Sekunde eine Umdrehung.
  • Drücke die Eingabetaste, um die Animation abzuspielen.
  • Die Rotorblätter drehen sich zu schnell. Erweitere das Bewegungs-Tween auf der Zeitleiste von der Endposition nach rechts, bis du drei Sekunden erreicht hast.
  • Wähle im Menü „Steuerung“ den Befehl „Testen“, um die Animation im Browser zu testen.

Pfeile entlang eines Bewegungspfads animieren.

So bewegst du Elemente entlang eines benutzerdefinierten Pfads.

Elemente entlang eines benutzerdefinierten Bewegungspfads bewegen – Zusammenfassung.

  • Die grundlegenden Schritte zur Animation der Pfeile entlang eines Bewegungspfads sind fast dieselben wie im vorherigen Video.
  • Als Erstes muss der Illustrator-Pfad, der in der Grafik eine Leitung darstellt, in die Zwischenablage kopiert werden. Wähle den Pfad aus, und kopiere ihn mit Befehl+C bzw. Strg+C, um ihn später verwenden zu können.
  • Wähle den Pfeil mit dem Auswahl-Werkzeug aus.
  • Mache einen Rechtsklick bzw. Ctrl-Klick auf den Pfeil, und wähle „In Symbol konvertieren“.
  • Gib im Dialogfeld „In Symbol konvertieren“ den Namen „arrow1“ (Pfeil 1) für das Symbol ein, und klicke auf „OK“.
  • Mache einen Doppelklick auf den Pfeil, um die Zeitleiste des Symbols aufzurufen. Links oben sollte „Szene 1 > arrow1“ zu sehen sein.
  • Mache wieder einen Rechtsklick bzw. Ctrl-Klick auf den Pfeil, und wähle „Bewegungs-Tween erstellen“.
  • Klicke im nächsten Dialogfeld auf „OK“.
  • Stelle sicher, dass sich der Abspielkopf auf der Zeitleiste am Ende des Bewegungs-Tweens befindet. Verschiebe den Pfeil auf die rechte Seite der Leitung. Halte dabei die Umschalttaste gedrückt.
  • Drücke die Eingabetaste, um die Animation zu überprüfen. Die Animation ist zu schnell. Ziehe das Ende des Bewegungs-Tweens auf der Zeitleiste, bis du sechs Sekunden erreicht hast. Das sollte lang genug sein.
  • Drücke die Eingabetaste, um die Geschwindigkeit der Animation zu überprüfen.
  • Wähle den Bewegungspfad auf der Bühne aus. Jetzt kannst du den Bewegungspfad durch den Pfad ersetzen, den du vorhin kopiert hast. Wähle dafür einfach „Bearbeiten > Einfügen“.
  • Verschiebe den Pfad ein wenig nach oben, damit er genau auf der Leitung liegt. Klicke auf den Pfad, und verschiebe ihn an die gewünschte Position.
  • Drücke die Eingabetaste, um die Animation zu überprüfen. Der Pfeil wechselt nicht die Richtung, wo er das tun sollte. Um das zu ändern, wähle das Bewegungs-Tween aus, und aktiviere im Bedienfeld „Eigenschaften“ die Option „An Pfad ausrichten“.
  • Klicke links oben auf „Szene 1“, um zur Hauptzeitleiste zurückzukehren. Nun kannst du den anderen Pfeil animieren.
  • Wähle im Menü „Steuerung“ den Befehl „Testen“, um die Animation im Browser zu testen.    

Interaktive Buttons erstellen.

So machst du Buttons und Popup-Fenster mithilfe des Bedienfelds „Aktionen“ interaktiv.

Interaktive Elemente definieren – Zusammenfassung.

  • In den vorherigen Videos hast du Drehungen und Bewegungen definiert. Als Nächstes fügst du Interaktivität zu deinem Dokument hinzu.
  • Um dieses Tutorial möglichst einfach zu halten, wird im Video das Hinzufügen von Interaktivität anhand eines relativ leeren Dokuments erklärt.
  • Teste das Dokument im Browser. Wähle „Steuerung > Testen“.
  • Das Dokument enthält eine Animation in Endlosschleife. Ein Popup-Fenster mit Infos wird kontinuierlich geöffnet und wieder geschlossen. Der erste Schritt besteht darin, die Animation mithilfe von Stop-Aktionen anzuhalten. Danach fügst du Aktionen zum Info-Button hinzu, die bewirken, dass die Animation gestartet wird, sobald ein Anwender darauf klickt.
  • Doppelklicke auf das Popup-Fenster rechts neben dem Button.
  • Drücke die Eingabetaste, um die Animation zu überprüfen.
  • Die Popup-Animation soll im ersten Frame angehalten werden. Klicke auf den ersten Frame der Ebene „Actions“ (Aktionen), die bereits erstellt wurde.
  • Wähle „Fenster > Aktionen“, um das Bedienfeld „Aktionen“ zu öffnen. Hier kannst du mit dem Aktionsassistenten Code hinzufügen.
  • Klicke auf „Mit Assistent hinzufügen“. Lege fest, was Animate an dieser Position auf der Zeitleiste tun soll. In diesem Fall soll die Animation angehalten werden. Scrolle im ersten Menü nach unten, und klicke auf „Stop“.
  • Klicke im nächsten Menü auf „This timeline“ und dann auf „Weiter“, um fortzufahren. Klicke dann auf „With this frame“. Klicke auf „Hinzufügen“, um den Code hinzuzufügen.
  • Wiederhole diese Schritte für den zehnten Frame. Die Animation soll hier wieder anhalten, wenn ein Anwender auf den Button klickt. Wähle den zehnten Frame auf der Zeitleiste aus, klicke auf „Mit Assistent hinzufügen“, und wähle im ersten Menü „Stop“. Klicke auf „This timeline“, dann auf „Weiter“. Wähle anschließend „With this frame“ und „Hinzufügen“.
  • Damit hast du alle gewünschten Stop-Aktionen hinzugefügt. Kicke auf „Szene 1“, um zu Szene 1 zurückzukehren.
  • Bevor du Interaktivität hinzufügen kannst, musst du alle Symbolinstanzen auf der Hauptzeitleiste benennen. Klicke mit dem Auswahl-Werkzeug auf den Info-Button. Rufe das Bedienfeld „Eigenschaften“ auf, und gib „info_button“ in das Feld für den Instanznamen ein.
  • Wähle die Popup-Instanz aus. Gib in das Feld für den Instanznamen „popup“ ein.
  • Füge dem ersten Frame der Ebene „Actions“ die gewünschte Interaktivität hinzu. Klicke auf der Zeitleiste auf Frame 1, und rufe dann das Bedienfeld „Aktionen“ auf.
  • Klicke auf „Mit Assistent hinzufügen“. Scrolle im ersten Menü nach unten, und klicke auf „Play“. Damit bewirkst du, dass die Popup-Animation abgespielt wird, wenn ein Anwender auf den Info-Button klickt. Deswegen musst du im nächsten Feld „popup“ auswählen.
  • Klicke auf „Weiter“. Jetzt legst du den Auslöser für die Animation fest. Der Auslöser soll ein Mausklick sein. Wähle daher „On Mouse Click“. Wähle im nächsten Feld das Objekt aus, das angeklickt wird: „info_button“. Klicke auf „Hinzufügen“.
  • Der Code wird zum ersten Frame hinzugefügt.
  • Der Button ist nun interaktiv. Wähle „Steuerung > Testen“, um das Ergebnis im Browser zu testen.
09/26/2019

Sprecher: Rob de Winter   

Training von: DWM Trainingen

War diese Seite hilfreich?