Auf Algebra sitzt in der Bildschirmecke eine kleine Figur: ein gezeichnetes Ich, mit Brille und großem Kopf. Wenn ein Schüler richtig antwortet, ballt sie die Faust zu einem „Ja!“, nach einem Fehler fasst sie sich ans Kinn und denkt nach, und am Ende eines Quiz feiert sie. Ich wollte, dass die Seite jemanden hat, der reagiert, statt trockener Meldungen, und lange dachte ich, das sei eine einfache Sache. Es stellte sich heraus, dass eine lebendige, bewegte Figur zu den schwierigsten Dingen gehört, die ich bei Websites je gemacht habe.
Erster Versuch: jede Bewegung von Hand beschrieben
Im Juni habe ich meine erste Animation in einem Werkzeug gebaut, in dem ein Video ähnlich wie eine Website entsteht, aus Anweisungen in Textform. Eine Figur im vereinfachten Cartoonstil schrieb mit Kreide f(x) = x² an die Tafel, und eine vier Sekunden lange Schleife lief auf der Seite „Über mich“. Das sah sympathisch aus, aber jede Bewegung musste Schritt für Schritt beschrieben werden, und so war an eine zweite, dritte oder zehnte Pose gar nicht zu denken.
Eine Figur aus Posenbögen
Also habe ich mit dem Aussehen angefangen und die Bewegung auf später verschoben. Die Figur habe ich mit einem Bildgenerator erstellt und ihre Beschreibung so festgehalten, dass jede neue Pose gleich aussieht: dieselbe Frisur, eine dicke schwarze Brille, ein großer Kopf auf einem kleinen Körper, und nur Kleidung und Requisiten wechseln. Heraus kamen vier Bögen voller Posen: mit Kaffeetasse, mit Laptop, an der Tafel, mit Telefon und sogar mit Bauhelm am Steuer eines Minibaggers.
Die erste Falle steckte schon in den Dateien. Die Bögen sahen aus, als stünde die Figur auf einem transparenten Hintergrund, aber das graue Schachbrett, das Grafikprogramme dort zeigen, wo kein Hintergrund ist, war einfach ins Bild gemalt, und auf der Seite hätte die Figur graue Kästchen hinter sich gehabt. Ich habe ein kleines Programm geschrieben, das dieses Schachbrett an seinen hellen, fast grauen Punkten erkennt, es von der Figur trennt und die Bögen in einzelne Posen zerschneidet, diesmal mit wirklich transparentem Hintergrund. Aus vier Bögen wurden 36 Posen.
Ausgetauschte Bilder und ein Skelett in Rive
Am 13. Juli kam das Maskottchen zum ersten Mal auf Algebra, als Satz von Bildern, die je nach Situation ausgetauscht wurden, mit einem leichten „Atmen“. Das funktionierte, aber die Figur war steif wie ein Scherenschnitt. Am selben Tag habe ich deshalb in Rive, einem Programm zum Animieren von Figuren auf Websites, etwas Ehrgeizigeres versucht: Ich habe die Zeichnung in einzelne Teile zerlegt, ein Skelett gebaut, das sie bewegt, und eine ruhige Animation für die Momente vorbereitet, in denen die Figur nichts tut. Im Programm war alles fertig, und gestoppt hat mich eine Kleinigkeit, denn der kostenlose Tarif erlaubte nicht, die Datei in einer Form zu speichern, die ich auf der Seite hätte einbauen können.
Video statt Animation
Am nächsten Tag habe ich das Problem umgedreht. Statt die Figur selbst zu animieren, gab ich die fertigen Posen einem Werkzeug, das aus einem einzigen Bild einen fünf Sekunden langen Clip macht, in dem die Figur blinzelt, Kaffee trinkt oder auf ein Tablet tippt. Angefangen habe ich mit einem kostenlosen chinesischen Dienst, bei dem alles nur auf Chinesisch war. Das Bild musste dem Formular mit einem kleinen Programm untergeschoben werden, und die Beschreibungen der Bewegung funktionierten am besten, wenn ich sie ebenfalls auf Chinesisch schrieb. Ein Clip brauchte über zwanzig Minuten, und die ersten beiden Versuche landeten im Papierkorb: Im einen fuhr die Kamera zurück und die Figur wurde winzig, im anderen löste sich alles in grauen Nebel auf, nachdem ich die voreingestellte Liste dessen entfernt hatte, was das Bild vermeiden soll.
Der Musterclip mit dem Kaffee gelang im dritten Anlauf, aber in diesem Tempo hätte ein vollständiger Satz Posen Wochen gedauert. Also bin ich auf die kostenpflichtige Version desselben Werkzeugs bei einem anderen Dienst umgestiegen, wo ein Clip etwa zehn Cent kostet und nach zwei, drei Minuten fertig ist. Dafür habe ich ein Programm geschrieben, das die nächste Pose von einer Liste nimmt, sie auf grünen Hintergrund setzt, die Animation bestellt, den Hintergrund entfernt und die fertige Datei speichert. An einem einzigen Tag entstanden sechzehn Clips.
Ein grüner Hintergrund, der Anzüge verschluckte
Aus einem solchen Werkzeug kommt ein gewöhnliches Video mit Hintergrund, auf der Seite sollte die Figur aber auf jeder Farbe stehen können, also musste der Hintergrund weg. Deshalb ging jede Pose auf einfarbig grünem Hintergrund in die Animation, und das Grün habe ich danach herausgeschnitten, so wie das Fernsehen das Grün hinter einem Moderator entfernt. Theoretisch ein simpler Trick, in der Praxis habe ich eine ganze Liste von Fallen gesammelt:
- dunkelblaue und dunkle Kleidung liegt farblich nah am Grün, sodass ein Anzug bei zu sanftem Ausschneiden voller Löcher war und ein hellblaues Hemd komplett verschwinden konnte,
- bei schnellen Bewegungen, etwa im Clip mit dem Gehen, vermischte sich die Figur mit dem Hintergrund und wurde halb durchsichtig wie ein Geist,
- eine Pose im grünen Pullover auf grünem Hintergrund hatte keine Chance, also bekamen solche Posen einen knallrosa Hintergrund und eine eigene Korrektur gegen Farbsäume,
- das Programm, mit dem ich den Hintergrund herausschnitt, verlor beim erneuten Öffnen der fertigen Datei standardmäßig die Transparenz, wenn man ihm nicht ausdrücklich sagte, wie es die Datei lesen soll, und so habe ich eine Weile einen Fehler gesucht, den es nicht gab,
- Safari spielt Transparenz in dieser Art von Video überhaupt nicht ab, also zeigt es statt des Clips das erste Bild als gewöhnliche Grafik.
Eine Pose brauchte noch einen eigenen Arbeitsschritt. Den Mathelehrer an der Tafel gab es auf keinem Bogen, also entstand er aus einer anderen Pose, die ich mit einem Bildbearbeitungswerkzeug umgebaut habe, und das Symbol π an der Tafel habe ich am Ende per Programm ergänzt.
Wo es heute steht
Seit Mitte Juli besteht das Maskottchen auf Algebra aus Videoclips mit transparentem Hintergrund, passend zur Situation: das Tablet, wenn es wartet, „Ja!“ bei einer richtigen Antwort, Nachdenken nach einem Fehler, Jubel am Ende eines Quiz und Winken zur Begrüßung beim Login. Dieselben Clips sind auch in Panel Biznesu gelandet, wo die Figur im Bereich für den Inhaber am Laptop sitzt.
Aus der ganzen Geschichte habe ich eine Lehre gezogen: Bevor ich etwas selbst baue, lohnt es sich zu prüfen, ob es sich aus fertigen Bausteinen zusammensetzen lässt. Das Skelett in Rive hat mich ein paar Stunden gekostet und ist an einem Preismodell gescheitert, während sechzehn Clips aus dem Videowerkzeug etwa zwei Dollar gekostet haben. Die meiste Arbeit steckte trotzdem nicht in der Animation selbst, sondern in allem drumherum: ein einheitliches Aussehen der Figur, ein sauberer transparenter Hintergrund und die Sicherheit, dass jeder Browser wenigstens ein Bild zeigt.