Vor einigen Jahren entdeckte ich ein Tutorial darüber, wie man mit Adobe Animate eine animierte und interaktive Infografik erstellt. Zuletzt hatte ich so was, damals noch in Flash, als Teil meiner Bewerbung fürs Studium gemacht. Ich folgte dem Tutorial, spielte ein wenig mit den Projektdaten herum und beschloss, erst einmal abzuwarten, bis ein passendes Projekt kommt, um dann die Methoden darauf zu übertragen.
Aus dieser illustrierten Infografik über „Die Welt der Insekten“ entstand eine interaktive Infografik
Mit der illustrierten Infografik über „Die Welt der Insekten“, die ich im späten Frühjahr 2024 für das Mitgliedermagazin des NABU e.V. entwarf, hatte das Warten ein Ende und ich zum Glück große Lust darauf, noch ein wenig Zeit mit den illustrierten Krabbeltieren zu verbringen. Bis ich die interaktive Infografik abgeschlossen hatte, verging dann aber doch deutlich mehr als „ein wenig Zeit“.
Ich musste immer wieder ganz von vorn beginnen, weil sich beim Veröffentlichen plötzlich herausstellte, dass der ein oder andere Browser meine Scripts blockierte. Was mit der Test-Funktion innerhalb von Adobe Animate prima lief, lief live ganz und gar nicht.
In diesem Beitrag schreibe ich darüber, wie ich die Infografik schließlich doch bug-frei machte, was das Tutorial nicht verrät und wie das Ergebnis unkompliziert auf jeder Website responsiv eingebunden werden kann.
Allem voran: Das Tutorial von Rob de Winter ist großartig! Es lässt keine Fragen offen, wenn es darum geht, was in Adobe Animate zu erledigen ist, um einem Element Interaktivität oder Animation hinzuzufügen. Außerdem lässt es sich wirklich problemlos auf jeden interaktiven Plan den man mit einer Illustration oder Infografik hat, übertragen. Was fehlt, ist, worauf man beim Anlegen der Daten achten muss, die man in Adobe Animate importieren möchte, und wie man seine animierte und interaktive Infografik exportiert und in eine Website einbindet.
An diesen Punkten möchte ich ansetzen. Ich werde neben der Erläuterung meines Prozesses in Adobe Animate also den Fokus besonders auf die Pre- und Postproduction sowie auf Stolpersteine legen.
Du lernst:
wie du Daten für ein Adobe Animate Projekt vorbereitest
wie du in Adobe Animate Interaktionen und Animationen zu Elementen hinzufügst
wie du das Projekt exportierst und es auf deiner Website einbindest
Illustrationen und Infografiken für den Import in Adobe Animate vorbereiten
„Content with both Bitmaps and Buttons may generate local security errors in some browsers if run from the local file system.“
Dieser Fehler in der Konsole von Adobe Animate hat mich die meiste Zeit gekostet. Erst, um ihn zu begreifen, dann, um ihn zu lösen. An dieser Stelle möchte ich unbedingt die Adobe Community empfehlen. Jede App hat ihr eigenes Diskussionsforum und jedes ist voll von Lösungen und Menschen, die nicht müde werden, noch mehr Lösungen zu finden. Für mich löste der Beitrag „HTML5 code snippets placed on buttons not working when published but do work while testing inside Animate CC“ das Problem, bzw. brachte er mich mit seiner „Top-Antwort“ auf den richtigen Weg.
„It looks like the error only happens in Chrome. The problem seems to be when there is a bitmap that is inside a button. You could get the same effect by having a button that only has a hit area frame, and sit that on top of the bitmap. That seems to solve the errors in Chrome.“
Das Problem war, dass ein Teil meiner Illustrationen Verläufe und Ebeneneffekte enthielt, wie z.B. die Fliege. Beim Umwandeln dieser in Adobe Illustrator werden aus den Flächen Bitmaps, die wie der Fehler schon erahnen lässt, problematisch werden, wenn sie Teil eines Button sind.
Im Animate-Test funktionierte alles, aber nach dem Publish ging kein einziger Button mehr, auch nicht die ohne Verläufe. Der Fehler trat selbst dann auf, wenn das Element gar nicht als Button angelegt war. In meinem Fall nicht nur auf dem lokalen Dateisystem, sondern auch nach dem Upload auf die Website. Es schien so, als würde die bloße Anwesenheit dieser Bitmaps dafür sorgen, dass nichts mehr geht. Nicht die Fliege selbst als Button zu nutzen, sondern nur eine Silhouette von ihr, änderte also zumindest in meinem Fall nichts daran, dass der Fehler auftrat. Die Verläufe und Transparenzen nicht in Adobe Illustrator zu reduzieren, resultierte ebenfalls in diesem Fehler. Ich gehe davon aus, dass diese Reduzierung an irgendeiner Stelle automatisch erfolgt und somit immer ein Bitmap entsteht.
Es wäre nun eine Option gewesen, die wenigen Insekten mit Verläufen in Pixelgrafiken umzuwandeln, und alle übrigen als Vektorgrafik zu belassen. Was mir an dieser Lösung nicht gefiel, war, dass eben jene Pixel-Insekten neben den Vektor-Insekten unangenehm unscharf ins Auge gefallen wären.
Ich entschied mich deshalb dazu, alle Insekten als Pixelgrafik zu importieren und lediglich die Popups als Vektorgrafik zu nutzen, damit die Schrift in jedem Fall verlustfrei skalierbar bliebe. Die Idee, nur die Silhouette der Insekten als Klick-Bereich für meine Buttons zu nutzen, übernahm ich aus dem Lösungsvorschlag trotzdem. Der Klick-Bereich sollte unbedingt nur auf dem jeweiligen Insekt liegen und nicht auf eine rechteckige Fläche erweitert werden.
Ich importierte schließlich:
die gesamte Infografik mit allen Insekten inkl. Rahmen und Headline als *.png
die Popups in einer .*ai-Datei so platziert wie sie auf der Infografik erscheinen sollen; Text in Pfade gewandelt
die Silhouetten/Button-Flächen der Insekten, eingefärbt in der Hintergrundfarbe, in einer .*ai-Datei so platziert wie sie auf der Infografik erscheinen sollen
Während das *.png einzeln von mir importiert wurde, habe ich beides, die Popups und Silhouetten, in einer *.ai-Datei auf den Ebenen „popups“ und „buttons“ arrangiert und diese importiert. Adobe Animate übernimmt die Ebenenstruktur aus Adobe Illustrator. Die Gruppierung zusammengehörender Elemente (z.B. Popup-Fläche und Popup-Text) ist zu empfehlen.
Die Silhouetten wie im Adobe-Lösungsvorschlag mit transparenter Füllung vor mein PNG zu legen, funktionierte in meinem Fall nicht. Die Fläche wurde nicht als Klick-Bereich erkannt. Aus diesem Grund habe ich die Silhouetten mit der Hintergrundfarbe gefüllt und sie in Adobe Animate hinter der Infografik platziert.
Meine Ebenen in Adobe Animate sahen dann also so aus:
Die *.png wird separat auf eine extra Ebene importiert, gesperrt und zwischen den zuvor importierten popups und buttons platziert
popups
– hier befinden sich alle Popups jeweils Text und Hintergrund gruppiert als Vektorgrafikpng
– hier befindet sich die komplette Infografik als PNG ohne Popups, inkl. Headline und Rahmen, also alles Statischebuttons
– hier liegen die Silhouetten der Insekten als Vektorgrafik, welche als Buttonfläche genutzt werden sollen, gefüllt mit der Hintergrundfarbe
Merke:
1. Enthalten die Elemente, die als Button eingesetzt werden sollen, Verläufe, Transparenzen oder Ebeneneffekte, sollten diese Elemente als Pixelgrafik importiert werden, um die Funktionalität des Scripts browserübergreifend sicher zu stellen.
2. Adobe Animate übernimmt die Benennung und Ebenenstruktur der importierten *.ai-Dateien. Wie auch in After Effects ist es zu empfehlen, Elemente, die zusammenhängen sollen, in Illustrator zusätzlich durch Gruppierungen zu strukturieren.
Animationen und Interaktionen in Adobe Animate hinzufügen
Wie Rob de Winter stelle auch ich euch an dieser Stelle meine Projektdatei reduziert auf die Illustration der Königslibelle zur Verfügung. Damit könnt ihr meinen Schritten folgen. Die Elemente habe ich bereits für euch importiert. Zusätzlich dazu findet ihr im ZIP auch die fertiggestellte Datei (_FINAL).
< Projektdaten herunterladen >
Nachdem nun alle Daten in der richtigen Form importiert waren, konnte ich meine Buttons, also die Silhouetten der Insekten, die im Hintergrund der Grafik platziert sind, anlegen, die Animation der Popups erstellen und sie schließlich an die Buttons koppeln.
Merke:
Bevor einem Element in Adobe Animate eine Animation oder Interaktion hinzugefügt werden kann, muss dieses immer erst zum Symbol umgewandelt und einem Typ zugeordnet werden. Soll es Teil eines Scripts werden, muss es außerdem als Instanz benannt werden. Am besten erledigt man das zum Beginn eines Projekts einmal für alle Elemente, die man verarbeiten möchte.
Elemente in Symbole umwandeln
Element auswählen → Rechtsklick-Menü „Convert to Symbol“ → die Bezeichnung ist an dieser Stelle nicht ganz so wichtig; wichtig ist jedoch, dass der Typ korrekt definiert ist: Button = Button, Animation (in diesem Fall das Popup) = Movie Clip → OK
Instanz benennen
Properties Panel am rechten Bildschirmrand → unter dem Typ die Instanz benennen (diesen Namen nutzt das Script um auf das Element zuzugreifen)
Für Animationen wählt man den Typ „Movie Clip“, Buttons müssen zwingend als „Button“ definiert sein
Der „Instance Name“ ist der Name, mit dem das Script das Element anspricht
Damit sind alle Vorbereitungen abgeschlossen und es kann losgehen. Schauen wir uns erst ein mal an, wo die Reise hingehen soll:
Klick mal auf die Libelle.
Die Silhouette der Königslibelle, die hinter der Illustration liegt, also mein Button, enthält folgenden Code:
/* Definiert die genutzten Variablen */
var _this = this;
/* Löst per „Click“ auf die Königslibelle
das Abspielen der Funktion aus */
_this.koenigslibelle.on('click', function(){
/* Funktion = die Pop-Animation wird abgespielt */
_this.koenigslibellepopup.play(); });Das Popup, welches sich mit einem Klick auf die Libelle öffnet bzw. schließt, enthält diesen Code:
/* Definiert die genutzten Variablen */
var _this = this;
/* Stoppt die Timeline */
_this.stop();Klickst du also auf die Königslibelle, wird die Timeline des Popups abgespielt, und zwar genau ein Frame lang, denn dann verhindert die Stop-Funktion des Popups, dass die Timeline weiter abgespielt wird. Ohne diese Stop-Funktion würde sich das Popup in Dauerschleife öffnen und schließen.
Merke:
Jede Animation, die durch eine Interaktion gestartet oder gestoppt werden soll, muss mit einem Stop-Befehl versehen werden.
Das ist nun das Erste, was wir machen.
Animation und Stop-Befehl dem Popup hinzufügen
Wir beginnen mit der Animation des Popups:
1. Doppelklick aufs Popup
2. In diesem „Isolation“-Mode musst du das Popup noch einmal in ein Symbol konvertieren (Benennung vernachlässigen, einfach mit OK bestätigen); die Benennung der Instanz ist nicht nötig
3. Rechtsklick auf das 2. Frame in der Timeline → „Insert Keyframe“ auswählen
4. Das 1. Keyframe auswählen → das Popup im Canvas auswählen → und rechts im Properties-Panel unter Blend „Hide Object“ anhaken
Auf Keyframe 1 ist das Popup nun also ausgeblendet, auf Keyframe 2 wird es eingeblendet. Nun folgt der Stop-Befehl, der verhindert, dass die Animation in Dauerschleife abgespielt wird:
5. Neue Ebene „actions“ anlegen
6. In dieser Ebene ebenfalls Rechtsklick auf das 2. Frame und „Insert Keyframe“ auswählen
7. Rechtsklick auf das 1. Keyframe dieser Ebene und „Actions“ auswählen
Damit öffnest du den Code Editor. Hier kann man nun entweder selbst einem Element Script hinzufügen oder den „Code Wizard“ nutzen. Ich nutze den „Code Wizard“, um den oben gezeigten Stop-Befehl dem Popup hinzuzufügen:
8. Rechts im Actions-Fenster auf „Add using Wizard“ klicken
9. Unter „Select an action“ den Befehl „Stop“ auswählen
10. Unter „Object on which to apply the action“ wählst du die Option „This Timeline“ und klickst auf „Next“
11. Der „Triggering event“ ist „With this frame“ – das heißt, kommt die Animation an diesen Punkt, wird der Stop-Befehl ausgeführt und die Animation hier angehalten
12. Mit „Finish and add“ schließt du die Programmierung des 1. Keyframes ab
Die Schritte 7. bis 12. wiederholst du nun auch für das 2. Keyframe. Hierfür kannst du den Wizard einfach noch einmal durchlaufen oder den Code vom 1. Keyframe kopieren und im Actions-Fenster des 2. Keyframes einfügen. Beide Keyframes sollten danach in der Timeline mit einem kleinen „a“ gekennzeichnet sein.
Nun wechselst du über den kleinen Pfeil links oben im Canvas-Fenster zurück in die Hauptszene.
Im nächsten Schritt wird die Animation an den Button gekoppelt.
Interaktivität für den Button definieren
Auch hierfür legen wir als erstes eine neue Ebene an und nennen sie „actions“. Mit einem Rechtsklick in deren Timeline oder via F9 steuern wir uns in Actions-Fenster. Alles weitere läuft ähnlich wie beim Popup ab:
1. „Add using wizard“ anklicken
2. Action: „Play“
3. Object on which to apply the action: [Name der Instanz, den du für das Popup festgelegt hast] – ist der hier nicht zu sehen, hast du diesen Schritt vergessen
4. Select a triggering event: „On Mouse Click“
5. Select an object for the triggering event: [Name der Instanz, den du der Silhouette, die als Button dienen soll, gegeben hast] – ist der hier nicht zu sehen, hast du diesen Schritt vergessen
6. Finish and add
Wenn du jetzt im Menü unter „Control“ auf „Test“ klickst, kannst du prüfen, ob das Popup sich öffnet, sobald du auf die Libelle klickst. Ist dem nicht so, dann gehe alle Schritte noch einmal durch oder nutze mein finales Projekt-File, um auf Fehlersuche zu gehen.
„Publish“ deines Adobe Animate Projekts
Lief der Test erfolgreich, ist es an der Zeit, die interaktive Infografik zu exportieren. In Adobe Animate heißt das „Publish“. Die „Publish Settings“ findest du im Menü unter File → Publish Settings. Für die Veröffentlichung wird eine Kombination aus HTML und Javascript exportiert sowie das Bildmaterial.
Die Standardeinstellungen sind in den meisten Fällen ein gute Option. Lediglich an drei Stellen könnten Anpassungen sinnvoll sein:
Unter „Export image asset“ / „Export as“ hat für mich besonders hinsichtlich des Uploads auf die Website „Image Asset“ sehr viel besser funktioniert als die Standardeinstellung „Texture“. Bei letzterer erhielt ich statt nur eines Bildes, mehrere Bilder, die an Texture-Maps erinnerten.
Im Reiter „HTML/JS“ ist die Option „Include JavaScript in HTML“ vor allem davon abhängig, welche Möglichkeiten ihr zum Einbinden von Code in eure Website habt. Kannst du also keine Javascript-Datei hochladen, um auf deren URL zuzugreifen, solltest du diese Option anhaken. Dann erhältst du statt einer Javascript- und HTML-Datei, nur eine HTML-Datei. Das Javascript für die Interaktivität ist darin enthalten.
„Make Responsive“ ist nur bedingt zu empfehlen, da nicht wirklich ein responsives Design entsteht, sondern soweit ich es verstehe nur eine Skalierung auf Basis der Fenstergröße berechnet wird. Das hatte bei meiner sehr langen Infografik zur Folge, dass sie egal welche Einstellungen ich auch nutzte, sie immer auch auf die Fensterhöhe skaliert und damit auf die Unlesbarkeit geschrumpft wurde.
Ursächlich für die vielen Probleme mit der „Make responsive“-Option ist vermutlich, dass Adobe Animate nur mit Pixelwerten arbeitet. Selbst das nachträgliche Anpassen des exportierten Codes machte es mir nicht möglich auf Prozentwerte zu wechseln. Die sind für eine einwandfrei funktionierende responsive Lösung aber unerlässlich.
Um ein tatsächlich responsives Ergebnis zu erhalten, folgte ich schließlich wieder dem Rat, den man mir in der Adobe Community und auf StackOverflow gab. Beide empfohlen mir, das Problem über ein iframe zu lösen. Zugegebenermaßen eine Technik von der ich glaubte, sie sei längst veraltet. Aber sie sollte sich als perfekte Lösung herausstellen.
Unter den Publish-Einstellungen legte ich nun Folgendes fest:
Dadurch nimmt die Infografik die komplette Fensterbreite ein, wird in der Höhe jedoch nicht eingepasst, sondern bleibt scrollbar. Das ist die perfekte Basis für mein responsives iframe.
„Publish“-Daten aus Adobe Animate via iframe in eine Website einbinden (Squarespace)
Ich nutze für meine Website Squarespace und erkläre anhand dessen wie ich die exportierten Dateien eingebunden und das responsive iframe erstellt habe. Adaptiere meine Schritte auf das System, welches du nutzt und frage in der Community deines Anbieters, wenn du an einer Stelle nicht weiterkommst.
Mit den oben gezeigten Einstellung fand ich nach dem Klick auf „Publish“ die folgenden Daten in meinem Publish-Ordner:
interaktive-infografik-die-welt-der-insekten.js
(hier befindet sich das Script, welches Animation und Interaktion steuert)
interaktive-infografik-die-welt-der-insekten.png
(das ist die Infografik als PNG, so wie ich sie importiert habe)
interaktive-infografik-die-welt-der-insekten.html
(hier wird per HTML Bild und Script zusammengeführt)
Auf Squarespace habe ich verschiedene Möglichkeiten diese Daten einzubinden:
Bilder kann ich entweder direkt per Upload auf einer Seite platzieren oder im Datenbereich nur als Datei hochladen und auf deren URL zugreifen. Auch Code-Dateien wie *.js kann ich dort hochladen und über deren URL aufrufen. Außerdem habe ich die Möglichkeit sogenannte Header-Code-Injections entweder global oder nur für eine bestimmte Seite vorzunehmen und Code-Blocks auf einer Seite zu platzieren und darüber Code einzubetten.
Upload von PNG und Javascript, Aktualisierung der Quell-URLs
Als erstes habe ich das PNG als Datei hochgeladen und deren URL kopiert. Mit dieser URL habe ich in meiner Javascript-Datei an folgender Stelle die Bildquelle ersetzt:
lib.properties = {
id: '4A0DC7F22C54B9489C856D25CD90F5DC',
width: 650,
height: 2179,
fps: 24,
color: "#FFFFFF",
opacity: 1.00,
manifest: [
{src:"HIER URL DES PNG ERSETZEN", id:"nabuinsekteninfografikelisabethdeim1500px"} ],
preloads: []
};Im Anschluss habe ich eben diese Javascript-Datei hochgeladen, auch deren URL kopiert und die Javascript-Quelle in der HTML-Datei ersetzt:
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC"><title>Untitled-2</title><!-- write your code here -->
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="HIER URL DER JAVASCRIPT-DATEI ERSETZEN"></script>```Anlegen der Seite, auf welche das iframe zugreift
Um die Quellseite für das iframe zu gestalten, habe ich eine neue Seite angelegt und per CSS meinen Website-Header und Footer auf dieser ausgeblendet sowie alle Padding und Margin-Regelungen auf 0 gesetzt. Damit habe ich sicher gestellt, dass die interaktive Infografik wie in der lokalen Vorschau tatsächlich das gesamte Fenster füllt und nichts anderes auf dieser Seite zu sehen ist.
Den Javascript-Inhalt aus der *.html-Datei habe ich über die Seiten-Code-Injection dem Header dieser Seite hinzugefügt. Das ist vermutlich nicht zwingend notwendig, aber es erschien mir sauberer.
Den HTML-Inhalt habe ich über einen Code-Block direkt auf der Seite platziert.
Responsives iframe definieren und einbinden
Das Ergebnis sollte auf der Seite zum dazugehörigen Projekt zu sehen sein. Hier platzierte ich dafür nun einen weiteren Code-Block, um das iframe einzubinden.
<!-- Der div sorgt über den dazugehörigen
CSS-Style für das responsive Verhalten -->
<div class="iframe-container">
<iframe class="responsive-iframe"
title="Interaktive Infografik über Die Welt der Insekten"
scrolling="no"
frameBorder="0"
src="https://www.elisabethdeim.com/interaktive-infografik-die-welt-der-insekten">
</iframe>
</div>Das dazugehörige CSS fügte ich wieder per Header-Code-Injection der Seite hinzu:
<style>
.iframe-container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 335%;
/* Der Wert regelt die korrekte Höhe des iframes
und richtet sich nach dem Seitenverhältnis.
In meinem Fall war die Grafik 650 px breit und
2179 px hoch. 2179 / 650 = 3,35 bzw. in Prozent 335.
Die Libelle aus diesem HOW TO hat ein Seitenverhältnis
von 1:1. Welcher padding-top-Wert ist dann notwendig?*/
}
/* Das iframe soll den div-container vollständig
in Höhe und Breite ausfüllen */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>Damit ist die interaktive Infografik mit ihren 21 illustrierten Insekten und irren Fakten in die Seite zum Projekt eingebunden und das Tutorial abgeschlossen.
Gib mir gern Feedback zu diesem ersten Tutorial von mir und bitte mich gern um Rat, wenn du an einer Stelle nicht weiterkommst.
Fandest du dieses Tutorial nützlich?
Dann sag „Danke“mit einem 🍦.