Courselet-Tipp: So erstellen Sie kleine Animationen mit der Diashow

Die Diashow in Courselets eignet sich, um mehrere Bilder nacheinander abzuspielen: entweder nach Klick oder automatisch. So lassen sich nicht nur klassische Diashows mit Fotomotiven erstellen, sondern auch kleine Animationen oder Grafiken, die mit jedem Klick weitere Informationen bieten.

Option 1: Animation

Das Video links zeigt ein Beispiel. Die Animation startet mit dem Klick auf das Bild. Alle eingebundenen Bilder werden automatisch nacheinander abgespielt. Legen Sie selbst fest, wie schnell der Wechsel erfolgt und ob es einen Übergangseffekt geben soll. Achten Sie darauf, dass alle Grafiken die gleiche Grösse haben, damit die Übergänge fliessend sind und das Bild nicht springt.

Im Spezialblock "Diashow" benötigen Sie die folgenden Elemente:

Das erste Element ist ein "Icon". Laden Sie hier ein Bild hoch, das sich als Startbild eignet. Anbieten würde sich etwa eine Grafik mit einem Startbutton oder dem Hinweis "Animation starten", damit der Lernende weiss, was er zu tun hat.

Es folgt das Element "Übergang". Tragen Sie beim ersten Übergang keine Verzögerung ein, damit die Animation nicht sofort, sondern erst nach Klick auf das erste Bild startet.

Laden Sie nacheinander weitere Bilder in Icon-Elemente hoch und trennen diese durch einen Übergang. Damit die Animation automatisch durchläuft, ist in diesem Beispiel eine Verzögerung von einer Sekunde eingetragen.

Die Reihe endet mit dem Element "Übergang" inklusive Verzögerung. So gelangt der Lernende nach dem Durchlauf wieder zur ersten Grafik und kann die Animation erneut starten.

Tipp: Soll nur ein Durchlauf möglich sein? Dann lassen Sie den letzten Übergang weg und schliessen den Diashow-Block einem Icon-Element ab. So kann der Lernende erst beim erneuten Besuch der Seite die Diashow neu starten.

Option 2: Grafik zum Durchklicken

Diese Option ähnelt der klassischen Diashow. Anstelle von Fotografien haben wir hier jedoch ein Tortendiagramm eingebunden. Die jeweils nächste Grafik erscheint beim Klick auf das Bild. Lernende haben Zeit, sich die Inhalte in Ruhe anzuschauen und können dann weiterklicken. In diesem Beispiel steckt hinter jedem Klick eine separate Grafik des Tortendiagramms. Diese können Sie beispielsweise in einer Tabellenkalkulation erstellen und per Screenshot abspeichern.

Im Spezialblock "Diashow" benötigen Sie die folgenden Elemente:

Im ersten Icon-Element laden Sie das Startbild hoch.

Es folgt das Element "Übergang". Da das nächste Bild nicht automatisch, sondern erst beim Klick erscheinen soll, ist hier keine Verzögerung eingetragen.

Fügen Sie weitere Icon-Elemente im Wechsel mit einem Übergang hinzu.

Tipp: Sie können unter jedem Icon-Element übrigens auch ein Text-Element hinzufügen. Der Text erscheint dann nach Klick zeitgleich unter der Grafik. Wir empfehlen in diesem Fall, die Elemente durch das Standard-Element "Umbruch" zu trennen.

Die Reihe endet mit dem Element "Übergang" ohne Verzögerung. So gelangt der Lernende nach dem Durchlauf wieder zur ersten Grafik und kann sich erneut durchklicken.

Vorlagen nutzen

Auf den meisten WebWeaver®-Plattformen finden Sie für Option 1 unter "Animation" bzw. "Diashow" eine passende Vorlage zur Auswahl, wenn Sie eine neue Seite anlegen. Nutzen Sie diese, wenn Sie die einzelnen Elemente nicht selbst hinzufügen möchten.

Immer auf dem Laufenden bleiben

Abonnieren Sie unseren Newsletter mit allen Neuerungen, Tipps und Terminen rund um WebWeaver®.