Redaktion - 23.05.2024
Courselet-Tipp: So erstellen Sie kleine Animationen mit der Diashow
Wussten Sie schon, dass Sie mit dem Spezial-Block "Diashow" mehrere Bilder als Animation nacheinander ablaufen lassen können?
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öße haben, damit die Übergänge fließend sind und das Bild nicht springt.
Im Spezialblock "Diashow" benötigen Sie die folgenden Elemente:
Bearbeitungsansicht
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 weiß, 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 schließen 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:
Bearbeitungsansicht
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® School.
Jetzt anmelden