Animationen und interaktive Inhalte erstellen mit Wick

Animationen und interaktive Inhalte erstellen mit Wick

Auf Twitter bin ich dank Anna Do heute auf Wick aufmerksam geworden und ich war sofort begeistert von Möglichkeiten, die sich daraus potenziell ergeben können zur Erstellung von Animationen und insbesondere zum komplett freien Erstellen von interaktiven Lernmaterialien.

Screenshot der Wick Startseite


Mit Wick, einem kostenlosen, browserbasierten Content Authoring Tool, das noch dazu open source ist, kann man Animationen erstellen, ganz klassisch über Keyframes. Nutzer*innen von anderen Animations-Tools oder ehemalige Flash/Macromedia-Nutzer*innen von früher werden sich da bestimmt gleich zu Hause fühlen, auch wenn die Oberfläche natürlich deutlich rudimentärer daherkommt als vergleichbare, kommerzielle Animations-Tools.

Besonders spannend für mich sind aber nicht die Animationen, sondern die Möglichkeiten zur Erstellung interaktiver Inhalte. Die kann man sowohl innerhalb eines Keyframes erstellen als auch über mehrere Keyframes hinaus, um etwa interaktive Geschichten, EduBreakouts, differenzierende Aufgabenstellungen und mehr zu erzeugen. Das Navigieren zwischen den „Folien“ passiert über Keyframes und Buttons, die man als Grafik hochladen oder direkt in Wick erstellen und mit entsprechendem Code versehen kann.

Quick’n’Dirty Beispiel: Mathe-Rechenübung

Zugegeben – unfassbar hässlich – aber auch nur in ca. 10 Minuten erstellt habe ich das folgende kleine Beispiel: Eine Mathe-Übung, die per Knopfdruck immer neue Rechen-Aufgaben im Zahlenraum von 1 – 100 erstellt. Erst kann man rechnen und dann lässt man sich per MouseOver das Ergebnis anzeigen:

Animation: Der Mathe-Generator erzeugt Aufgaben mit Zufallszahlen

Auch spontan denkbar ist, dass durch das Klicken bestimmter Elemente Dinge in einem Schaubild hervorgehoben werden, Lernende selbst verzweigte Geschichten schreiben und diese mit Wick umsetzen oder naturwissenschaftliche Zusammenhänge ohne allzu vertiefte Programmier-Kenntnisse visualisiert werden können. Zugegeben, ohne Grundlagen in JavaScript wird man dabei allerdings nicht weit kommen.

Gute Tutoriale und Beispiele helfen

Zum Glück findet man auf https://www.wickeditor.com/ viele gut gemachte Erklärvideos, Tutorials und Beispiele, die man ausprobieren kann. Und da man bei allen Beispielen „hinter die Kulissen“ schauen kann, eignen sich diese prima zum Lernen und Experimentieren. Das ist ja auch bei H5P ganz großartig.

Auszug aus den Tutorials auf der Homepage von Wick

Einbinden ins eigene LMS

Die interaktiven Inhalte lassen sich ganz komfortabel als HTML-Datei exportieren. Lernmanagement-Systeme wie moodle (bzw. die mebis-Lernplattform in Bayern), aber auch andere Tools ermöglichen es, HTML-Dateien bereitzustellen und am besten auch unmittelbar anzuzeigen. So können Schülerinnen und Schüler das Material auf allen Geräten nutzen, ohne eine Datei auf den Computer herunterladen zu müssen.

Grafische Highlights brauchen Arbeit

Wenn man H5P nutzt, um interaktive Inhalte zu erstellen, schauen die ohne Aufwand recht schnell passabel bis hervorragend aus. Bei Wick ist das leider anders: Man startet auf einem leeren Canvas, und wenn es schön werden soll, ist ganz viel Eigenleistung nötig, am besten in dezidierten Grafik-Programmen, aus denen man sich die Assets exportiert, um sie dann wiederum in Wick zu importieren und dort als Grafiken, Buttons und mehr zu nutzen. Mir selbst fehlt dazu ein bisschen das Talent, aber ich wäre extrem gespannt zu sehen, was kreative Köpfe wie Dunja oder Kristina daraus machen.