Im Zuge der Corona-Pandemie hat das Thema E-Learning an Hochschulen weiter an Bedeutung gewonnen. Das erfordert von den Lehrenden die Weiterentwicklung alter und Umsetzung neuer digitaler Lehrmethoden. Eine Methode ist die Vermittlung von Lehrinhalten mithilfe interaktiver Videos. Doch wie setze ich diese ein und was sind überhaupt interaktive Videos? Mehr dazu erfahren Sie in diesem Beitrag.
Interaktive Videos bestehen aus zwei grundlegenden Komponenten: dynamische und audiovisuelle Medien (z.B. Videos oder Animationen) als Basis sowie darin eingebundene aktivierbare und zeitgestempelte Multimedia-Elemente (z.B. digitale Texte, Bilder, Graphiken, Links, Referenzen, Audio- oder Videodateien). Durch die Einbettung dieser Elemente wird die lineare Struktur eines Videos aufgebrochen, was dem Betrachtenden eine aktive Auseinandersetzung mit dem Inhalt – je nach Bedürfnis bzw. Wissensstand – ermöglicht. Im Kontext eines interaktiven Videos wird der passive Betrachtende also zum aktiven Nutzenden.
Geht man vom Einsatz interaktiver Videos im Bereich des E-Learning aus, kann man zwischen drei grundlegenden, kombinierbaren Formen differenzieren:
Interaktive Videos als Videos mit verzweigenden Handlungssträngen
Interaktive Videos als Videos mit bereitgestellten Zusatzinformationen
Interaktive Videos mit integrierten Zusatzfunktionen (Vgl. zu diesem Abschnitt: Lehner, Siegel 2009, S. 44-45)
Interaktive Videos mit verzweigenden Handlungssträngen
Interaktive Videos mit verzweigenden Handlungssträngen ermöglichen den Nutzenden, den weiteren Verlauf des Videos aktiv und je nach Bedürfnis zu beeinflussen. Im Kontext von E-Learning gewinnt diese Form des interaktiven Videos beispielswiese an Bedeutung, wenn es um die Vermittlung wichtiger Grundlagen zu einem bestimmten Thema geht: Der Lernende kann im Verlauf des Videos dann selbst entscheiden, ob er bereits zum nächsten Themenschwerpunkt übergehen möchte oder weitere, vertiefendere Informationen zum gerade dargestellten Themenschwerpunkt benötigt. (Vgl. zu diesem Abschnitt: Lehner, Siegel 2009, S. 45)
Interaktive Videos mit bereitgestellten Zusatzinformationen
Mit den bereitgestellten Zusatzinformationen sind die Möglichkeiten gemeint, bewegtes Bildmaterial mit wichtigen Informationen in Form von Annotationen und Kommentaren anzureichern. Sowohl die Erstellenden interaktiver Videos, als auch die Nutzenden können den dargestellten Inhalt durch Videoannotationen erweitern oder Kommentare beifügen, die zur Diskussion anregen. Studierende haben hierdurch außerdem die Möglichkeit, sich mit inhaltlichen Fragen an die Lehrenden zu wenden. Interaktive Videos dienen in diesem Sinne als „aktive und soziale Austauschplattform“ (Georg-August-Universität Göttingen o.J.) für Lehrende und Lernende – gerade beim E-Learning ist dieser Punkt nicht zu unterschätzen. (Vgl. zu diesem Abschnitt Lehner, Siegel 2009, S. 46)
Interaktive Videos mit integrierten Zusatzfunktionen
Unter den integrierten Zusatzfunktionen kann man im E-Learning Bereich beispielsweise die Möglichkeit fassen, Fragen verschiedenster Fragetypen oder Aufgabenstellungen im Video zu implementieren. Die Lehrenden können mithilfe dieser Zusatzfunktionen eine aktive Auseinandersetzung mit den dargestellten Inhalten fördern. Den Studierenden dienen Sie außerdem zur Einschätzung ihres Wissensstandes.
Ein interaktives Video
Die Umsetzung eines interaktiven Videos kann beispielsweise so aussehen:
2. Was können interaktive Videos in der Hochschullehre leisten?
Interaktive Videos können folgende Aspekte im Lehrprozess der Lehrenden und im Lernprozess der Studierenden erleichtern oder begünstigen:
Asynchrones Lernen (zeit- und ortsunabhängig)
Individuelle Gestaltung und Kontrolle des Lernprozesses
Förderung des Verstehens und Erinnerns der Lerninhalte durch visuelle Darstellung
Förderung des analytischen Denkens (Anwenden, Analysieren, Beurteilen und Gestalten) durch aktive Vermittlung von Lerninhalten
Förderung der intensiveren, inhaltlichen Auseinandersetzung und Entwicklung eigener Ideen durch aktives Erarbeiten der Lerninhalte und Filterung wichtiger Informationen (z.B. durch Annotationen, Kommentare, Fragen)
Anstoß zur Diskussion, sozialer Interaktion und Austausch: aktiver Reflektions- und Diskussionsprozess trotz räumlicher Distanz
Möglichkeit zum Feedback und zur Überprüfung des Lernerfolges
Umsetzung aufwendiger Formen der Wissensüberprüfung (z.B. Einbettung von Fragen verschiedener Fragetypen)
Spaß am Lernen durch kreative Lehrmethode
3. Welche Herausforderungen bieten interaktive Videos in der Hochschullehre?
Interaktive Videos können Lehrende und Lernende vor verschiedene Herausforderungen stellen, die es von der Hochschule zu berücksichtigen gilt. Eine Überwindung der Herausforderungen und die Lösung von Problemen kann nur in Zusammenarbeit und im gemeinsamen Austausch erfolgen.
Technische Herausforderungen und Infrastruktur
Um das E-Learning im Allgemeinen sowie das Lehren und Lernen mit interaktiven Videos überhaupt anbieten zu können, ist es notwendig, dass Hochschulen die entsprechende technische Infrastruktur bereitstellen. Diese kann die Lehrenden maßgeblich bei der Gestaltung ihrer Lehre unterstützen und sie darin bestärken auch auf digitale Lehrmethoden zu setzen. Optimal ist die Bereitstellung von Lernplattformen, mit deren Hilfe internetbasierte Lernmaterialen für E-Learning erstellt werden können. Im Umgang mit solchen Lernplattformen müssen Lehrende dann entsprechend geschult werden.
Didaktische Herausforderungen
Die Umsetzung didaktisch guter, interaktiver Videos stellt hohe Ansprüche an die Lehrenden. Die Videos müssen so gestaltet werden, dass sie die Studierenden in ihrem Lernprozess unterstützen und motivieren. In diesem Zusammenhang müssen Zusatzinformationen präzise formuliert und Zusatzfunktionen sinnvoll genutzt werden. Das interaktive Video soll die Studierenden zur intensiven Auseinandersetzung mit den Inhalten animieren und zur Diskussion anregen. In diesem Zuge sollte eine didaktische Beratung oder Fortbildung für die Lehrenden in Betracht gezogen werden. (Vgl. zu diesem Abschnitt: Krüger, Steffen, Vohle 2012, S. 206-209)
Probleme des Lernens mit Video
Dazu gehören u.a. technische Probleme, aber auch Studierende, die aufgrund mangelnder technischer Ausstattung oder Begebenheiten zu Hause keine Möglichkeit haben adäquat am E-Learning teilzunehmen. Des Weiteren muss berücksichtigt werden, dass nicht alle Studierenden von digitalen Lehrmethoden profitieren können, sondern den traditionellen Unterricht vorziehen. Außerdem kann die „Gefahr der Individualisierung“ (Dubs 2019, S. 35) bestehen, wenn Studierende sich ausschließlich auf das Video konzentrieren, die Interaktion in der Lerngruppe aber ansonsten ablehnen.
4. Für welche Art von Lehrinhalten eignen sich interaktive Videos?
Interaktive Videos eignen sich für…
Selbstlerneinheiten
die Einführung neuer Themen
die visuelle Darstellung von Lerninhalten
die Überprüfung des bisherigen Wissensstandes
die Darstellung/Behandlung praxisnaher Themen
die aktive Gestaltung einer Vorlesungsaufzeichnung
die aktive Gestaltung einer asynchronen Lehreinheit
die Anregung eines Diskussionsprozesses zwischen Studierenden
die Analyse von Aufzeichnungen (z.B. Vorträge, Präsentationen, Filmsequenzen) (Vgl. Georg-August-Universität Göttingen o.J.)
5. Wie erstelle ich ein interaktives Video? (Am Beispiel von ILIAS)
ILIAS (Integriertes Lern-, Informations- und Arbeitskooperations-System) ist ein Open Source Learning Management System, das bereits an vielen Hochschulen zum Einsatz kommt. Mithilfe der Lernplattform ILIAS können Lern- und Übungsmaterialen leicht erstellt und den Lernenden zur Verfügung gestellt werden. (Vgl. zu diesem Abschnitt: ILIAS 2022)
Im Kontext der Erstellung interaktiver Videos bietet ILIAS das Interaktive Video Plug-In an, welches die Gestaltung und Bereitstellung interaktiver Videos ermöglicht. Ein Tutorial über die Möglichkeiten zur Gestaltung von interaktiven Videos mit ILIAS finden Sie hier:
Bundeszentrale für politische Bildung / bpb (2015): Was ist eigentlich E-Learning?. Video publiziert am 11.09.2015 auf Youtube. Online unter https://www.youtube.com/watch?v=XHwDtmSFrOA [Abruf am 28.12.2022]
Dubs, Rolf (2019): Die Vorlesung der Zukunft. Theorie und Praxis der interaktiven Vorlesung. Opladen, Toronto: Verlag Barbara Budrich
Krüger, Marc; Steffen, Ralf; Vohle, Frank (2012): Videos in der Lehre durch Annotationen reflektieren und aktiv diskutieren. In: Csanyi, Gottfried; Reichl, Franz; Steiner, Andreas (Hg.): Digitale Medien – Werkzeuge für exzellente Forschung und Lehre. Münster: Waxmann, S. 198-210
Lehner, Franz; Siegel, Beate (2009): E-Learning mit interaktiven Videos – Prototypisches Autorensystem und Bewertung von Anwendungsszenarien. In: Schwill, Andreas & Apostolopoulos, Nicolas (Hg.): DeLFI 2009 – 7. Tagung der Fachgruppe E-Learning der Gesellschaft für Informatik e.V.. Bonn: Gesellschaft für Informatik e.V., S. 43-54
Universität Stuttgart (2022): Interaktives Video in ILIAS. Video publiziert am 07.02.2022 auf Youtube. Online unter https://www.youtube.com/watch?v=jDrn2O7KcVo [Abruf am 11.12.2022]
Von Anfang an war es mein Plan, ein simples und optisch ansprechendes kleines Spiel zu designen, bei dem Animationen sinnvoll zum Einsatz kommen.
Nach ein paar verworfenen Ideen entschied ich mich für diese Variante, bei der die räumliche Wahrnehmung und das Gedächtnis des Spielers auf die Probe gestellt wird. Das Konzept des Spiels ist angelehnt an einen Intelligenztest für Schimpansen, bei dem deren Arbeitsgedächtnis getestet wird. Bei diesem werden aufeinanderfolgende Zahlen auf einem Bildschirm abgebildet, diese zahlen müssen dann in der richtigen Reihenfolge gedrückt werden. Nachdem die erste Zahl gedrückt wurde, werden alle anderen hinter identisch aussehenden Feldern versteckt.
Mein Spiel „forty in 49“ funktioniert nach einem ähnlichen Prinzip. Anstatt einer bestimmten Reihenfolge geht es hierbei aber um die Position der Felder. In einem Raster sind 7×7 Felder angeordnet,. Zu Beginn des Spiels verschwinden 40 der 49 Felder für wenige Sekunden. Der Spieler muss sich die Position der übrigen 9 Felder (Bomben) merken und diese vermeiden. Das Ziel ist es, möglichst viele der 40 Felder anzuklicken. Klickt man auf eine Bombe, ist das Spiel vorbei.
Animationen
Die Animationen erfüllen sowohl funktionale als visuelle Zwecke.
Um die Orientierung zu vereinfachen, werden Felder größer und ändern ihre Farbe, wenn der Mauszeiger darüber hovert. Wird ein Feld angeklickt, wird es entweder grün und verschwindet in einer rotierenden Animation, oder es wird rot und dreht sich langsam um 180° um die y-Achse und um 45° um die z-Achse. Dadurch wird dem Spieler visuell verdeutlicht, ob er richtig lag. Um das Ganze auditiv zu unterstützen, gibt es für den Klick auf die zwei Arten von Feldern jeweils einen Soundeffekt.
Ist das Spiel vorbei (alle richtigen Felder oder eine Bombe wurden geklickt), erscheint eine Karte mit der Punktzahl. Sie bewegt sich von unten nach oben und landet mittig über dem Spielfeld. Außerdem gibt es natürlich die fade-out/fade-in Animation am Anfang, ohne die das Spiel überhaupt nicht möglich wäre.
Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, Amy Linh Hoang, Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.
Dieser Beitrag ist ein Tutorial zu der Animation „Ein Tag mit Bobby“ bei dem auf die Details zum Code, Inhalt, Besonderheiten, das Konzept und Schwierigkeiten eingegangen wird. Die Bilder dienen zur Veranschaulichung und Nachvollziehbarkeit und sind anklickbar, sodass man diese in Vollbildmodus und besserer Auflösung betrachten kann.
Die Animation ist ein Storytelling, bei dem der User mit Hilfe von Buttonklicks durch die einzelnen Szenen geleitet wird. Dieser begleitet den Hauptcharakter Bobby durch den Tag und führt verschiedene Anweisungen durch, die Bobby in der Sprechblase gibt. Diese können durch einen Buttonklick realisiert werden. Sobald der User auf einen Button klickt, wird entweder die Szene gewechselt oder ein visueller Effekt erzeugt.
Das Ziel ist es mit dem User eine Interaktion zu starten, wobei dieser den Ablauf der Animation lenkt. Der User wird zu Beginn auch direkt von Bobby mit dem Namen angesprochen und aufgefordert mit ihm den Tag zu verbringen.
Die Idee eine Animation mit Hund(en) zu erstellen, kommt von der persönlichen Liebe zu Tieren und insbesondere zu Hunden. Die kindliche und amüsante Darstellung soll den User animieren und erfreuen. Die Hintergrundmusik sorgt für eine zusätzliche entspannte Atmosphäre, die die Stimmung der Animation unterstützt. Der User kann sich somit entspannen, zurücklehnen und die Animation genießen.
Aufbau
Die Animation ist in vier Szenen aufgeteilt:
Start-Szene (div class=“ story_start_scene“)
Bobby im Wohnzimmer (div-class= „dog_in_livingroom_scene“)
Bobby im Park (div class=“background_image_park_day“)
Schluss-Szene bei der Bobby im Park nachts ist (div class=“dog_in_park_night“)
Start Szene
Bei der Start Szene sieht man den schlafenden Bobby auf einem Teppich ohne jeglichen Hintergrund, das sich zu den restlichen Szenen unterscheidet. Der Grund dafür ist, dass man zum einen den beweglichen und farbwechselnden Hintergrund auf sich wirken lassen kann und zum anderen sollte es schlicht gehalten werden, damit der Wechsel zu den Hauptszenen spannender gestaltet wird. Zudem soll der Fokus zu Beginn auf dem Hauptcharakter liegen. Mit dem Buttonklick auf „Aufwecken“ startet die ganze Animation.
Start Szene
Zweite Szene
In der zweiten Szene befindet sich Bobby im Wohnzimmer, wo er zuvor auf dem Teppich geschlafen hat. Der User hat ihn aufgeweckt und nun fragt Bobby ihn nach seinem Namen. Die Abfrage passiert zwischen der ersten und der zweiten Szene, die mit Hilfe von JavaScript erzeugt wurde. Je nachdem welchen Namen der User eingibt, erscheint dieser in dem Begrüßungstext in der Sprechblase. Hier wird der User aufgefordert die Anweisungen von Bobby durchzuführen. In dieser Szene soll der User mit Bobby in den Park gehen.
Zweite Szene
Dritte Szene
Die dritte Szene spielt sich im Park tagsüber ab in den mehrere Aktionen passieren. Zu Beginn sieht man den Park, in dem sich ein Grill und Bobby befinden. Bobby weist darauf hin, dass es vom Grill sehr gut riecht und er gerne einen Hot Dog haben möchte. Dieser Bitte kann der User nachgehen, indem er auf den langsam erscheinenden Button „Hot Dog geben“ klicken kann. Sobald dies gemacht wurde, erscheint ein animierter Hot Dog, der vom Grill aus zu Bobby in einer 360 Grad Drehung geworfen wird. Daraufhin bedankt sich Bobby und gibt den nächsten Hinweis, dass er seinen Freund Bello sieht und mit ihm Ball spielen möchte.
Dritte Szene
Auch hier kann der User der Anweisung nachgehen, indem er auf den nächsterscheinenden Button „Mit Bello spielen“ klickt. Hier erfolgt die nächste Animation, bei der sich Bello und Bobby den Ball zu werfen. Dabei springen beide versetzt hoch und werfen den Ball mit ihrem Kopf einander zu. Nun erscheint der fünfte Button „Weiter“, der den User darauf hinweist, dass danach die nächste Szene erscheint.
Vierte Szene
Vierte Szene
Die vierte und letzte Szene findet in dem selben Park statt. Jedoch ist es schon spät geworden und Bobby ist müde. Er macht vor Freude Rückwärtssaltos und bedankt sich für den großartigen Tag, den er mit dem User erlebt hat. Auch hier weist Bobby daraufhin, dass er müde und erschöpft ist. Hier ist es Zeit sich von Bobby zu verabschieden und ihm eine Gute Nacht zu wünschen.
Letzte Szene
Mit dem Buttonklick kann man dies tun, wobei das Bild von Bobby in den ursprünglich schlafenden Zustand zurückgebracht wird. Es taucht ein Eyecatcher auf, der zoomt und sich hin und her in verschiedene Winkel dreht. Dies ist der Abschluss der Animation, der durch den animierten Text „Gute Nacht, Bobby“ kenntlich gemacht wird. Der letzte Button unterscheidet sich in der Erscheinungsweise von allen anderen, denn dieser macht auf sich Aufmerksam, indem sich dieser hin und her bewegt und dabei vertikal spiegelt. Der Grund für diese Erscheinungsweise ist das Aufmerksam machen, dass ab hier keine neue Szene erscheint, sondern alles nochmal vom Anfang beginnt. Somit ermöglicht dieser Button die Animation nochmal neu zu starten
Der Code
Für die Animationen wurden HTML5, CSS3 sowie JavaScript und jQuery benutzt. HTML5 wurde für das Grundgerüst und Aufbau, CSS3 für die Animation sowie das Styling und JavaScript bzw. jQuery für das Auslösen/Verstecken verschiedener Animationsobjekte benutzt.
Allgemeine Einstellungen
In der ID „animation_start“ in HTML5 spielt sich die gesamte Animation ab. Die jeweiligen Szenen sind in einzelne div-classes unterteilt in denen die dazugehörigen Objekte enthalten sind. Die div-classes sind nach den Szenarien benannt, das das Erkennen der Inhalte vereinfacht.
<div id="animation_start"class="whole_animation"> <!--ID der gesamten Animation-->
<div class="story_start_scene"><!--Erste Szene: Startbildschrim-->
<img src="sleeping_dog.png" id="sleep"/>
<img src="carpet.png" id="carpet"/>
</div>
<div class="dog_in_livingroom_scene"> <!---Zweite Szene: Bobby im Wohnzimmer Szene samt Begrüßung-->
<div class="living_room_background">
<img src="room.png" class="backgroundimage_livingroom" style="visibility: hidden;"/>
</div>
<div class="dog_character">
<img src="standing_dog.png" id="hello_dog" style="visibility: hidden;"/>
<img src="sprechblase.png" id="speak1" style="visibility: hidden;"/>
<p id="welcome_text" style="visibility: hidden;">Hallo! Ich bin Bobby. Lass uns den Tag zusammen verbringen.</p>
</div>
</div>
<div class="dog_in_park_day"> <!--Dritte Szene: Bobby im Park Szene mit dazugehörigen Objekten-->
<div class="background_image_park_day">
<img src="meadow_at_day.png" class="backgroundimage_park_day" style="visibility: hidden;"/>
</div>
<div class="park_items">
<img src="grill.png" id="bbq" style="visibility: hidden;"/>
<img src="food.png" id="hot_dog" style="visibility: hidden;"/>
<img src="standing_dog2.png" id="dog_at_park" style="visibility: hidden;"/>
<img src="sprechblase2.png" id="speak2" style="visibility: hidden;"/>
<p id="hot_dog_text" style="visibility: hidden;">Das riecht aber toll! Kannst du mir einen Hot Dog geben?</p>
<p id="thank_you_hot_dog_text" style="visibility: hidden;">Danke! Ouh Schau! Da ist Bello. Ich möchte mit ihm Ball spielen.</p>
<img src="playing_dog_brown.png" id="bello" style="visibility: hidden;"/>
<img src="playing_dog_grey.png" id="bobby" style= "visibility: hidden;"/>
<img src="ball.png" id="toy" style="visibility: hidden;"/>
</div>
</div>
<div class="dog_in_park_night"><!--Abschlussszene: Bobby im Park nachts.-->
<div class="background_image_park_night">
<img src="meadow_at_night.png" id="backgroundimage2" style="visibility: hidden;"/>
<img src="dog_by_night.png" id="night_dog" style="visibility: hidden;"/>
<img src="sprechblase3.png" id="speak4" style="visibility: hidden;"/>
<img src="sleeping_dog2.png" id="tired" style="visibility: hidden;"/>
<p id="thank_you_for_the_day" style="visibility: hidden;">Danke dir für den schönen Tag! Ich bin jetzt aber müde.</p>
<p id="good_night_bobby" style="visibility: hidden;">Gute Nacht, Bobby</p>
</div>
</div>
</div><!--Ende der "animation_start"-->
In der aside-class wurden alle Buttons und der Titel der der Animation eingetragen, da diese Inhalte sich immer an der selben Position befinden.
<body>
<!--Alle Elemente sind auf "visibility:hidden" gesetzt, die über JavaScript aktiviert werden, wenn man auf einen Button klickt-->
<script src="animation_functions.js"></script> <!--Einbindung der JavaScript Datei-->
<aside class="title_and_buttons"> <!--Übergreifende Class für alle Buttons und Titel der Animation (h1) damit die Position die selbe bleibt-->
<h1> Ein Tag mit Bobby</h1>
<button id="button_aufwecken">
<a class="button_1">Aufwecken</a>
</button>
<button id="button_park" style="visibility: hidden;">
<a class="button_2">Lass uns in den Park gehen</a>
</button>
<button id="button_hot_dog" style="visibility: hidden;">
<a class="button_3">Hot Dog geben </a>
</button>
<button id="button_play" style="visibility: hidden;">
<a class="button_4">Mit Bello spielen</a>
</button>
<button id="button_next" style="visibility: hidden;">
<a class="button_5">Weiter</a>
</button>
<button id="button_good_night" style="visibility: hidden;">
<a class="button_6">Gute Nacht!</a>
</button>
<button id="button_reload" style="visibility: hidden;">
<a class="button_7">Neustart</a>
</button>
</aside>
Auffallend im Code ist, dass alle Objekte nicht sichtbar sind (visibility: hidden). Diese werden zu dem Zeitpunkt wann die jeweiligen Objekte zu sehen sein sollen mit Hilfe von jQuery sichtbar gemacht. Die allgemeine Position aller Elemente ist in der ID „animation“ sowie dessen class „whole_animation“ zu sehen. So entsteht ein Rahmen für die verschiedenen Bilder, das die Zentrierung der Szenen möglich macht. Die gewählte Größe und Position erstellt eine Box, wo sich die Animation abspielt. Dies soll ein Gefühl erzeugen, als würde man in einem Kino vor einer Leinwand sitzen.
Im Body ist die Animation des ineinanderfließenden Hintergrundes zu sehen. Die keyframes bringen diese Animation zum Laufen. Zunächst muss man drei Farben definieren, die man in dem Übergang haben möchte. Des Weiteren war es wichtig die Dauer und Länge zu definieren. In diesem Fall sollte der gesamte Übergang 13 Sekunden dauern und unbegrenzt durchlaufen.
body {
font-family: "Comic sans MS";
background-size: cover;
justify-content:center;
background-position: center;
background: -webkit-linear-gradient(132deg, #FC415A, #591BC5, #4a8ead);
background-size: 400% 400%;
align-items: center;
min-height: 100%;
overflow:hidden;
-webkit-animation: moving_background 13s ease infinite;
animation: moving_background 13s ease infinite;
}
@-webkit-keyframes moving_background { /*Animation des Backgrounds, der in Dauerschleife die Farben wechselt*/
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%; /*Inspired by https://www.sliderrevolution.com/resources/css-animated-background/*/
}
100% {
background-position: 0% 50%;
}
}
Die Buttons
Die Buttons haben wie schon zuvor erwähnt den funktionalen Zweck den User durch die Szenen zu geleiten und verschiedene Animationen hervorzurufen. Somit sind diese essenziel für das Abspielen der Animation. Aus diesem Grund werden diese oberhalb der Animationsbox dargestellt, damit die Aufmerksamkeit des Users zu den bestimmten Zeitpunkten darauf gelenkt wird.
Die Buttons haben alle den selben Stil, jedoch haben alle verschiedene Dauer und Art und Weise der Animation. Daher wurde jeder einzelne Button in CSS3 angelegt. Das Aussehen der Buttons ist Oval und hat drei Farbverläufe, das in zarten und hellen Farben gehalten ist, um mit dem Hintergrund zu harmonieren. Beim Hovern erfolgt ein Spiegeleffekt bei dem die Farben von rechts nach links ineinander laufen. Durch das bewegte Gelb wir ein Relief- bzw. Spiegeleffekt erzeugt. Die transition ermöglicht dies.
#button_aufwecken { /*Design und Animation der Buttons. Alle haben die gleiche Einstellung nur andere Animationsangaben. Daher jeden Button einzeln angelegt, anstatt die zusammenzufassen*/
border-radius: 50%;
align-items: center;
font-size: 15px;
display: flex;
margin: auto;
background-image: linear-gradient(135deg, #ee9ca7 0%, #fbed96 51%, #ee9ca7 100%); /*Inspired by https://blog.avada.io/css/button-hover-effects/*/
background-size: 200% auto;
box-shadow: #a05a9c 0px 0px 5px;
-webkit-animation: push_buttom 3s infinite;
animation: push_button 3s infinite;
outline: none;
}
@-webkit-keyframes push_button { /*Inspired by https://css-tricks.com/css-animation-libraries/*/
0% {
box-shadow: 0px 0px 4px rgb(255,250,250);
}
50% {
box-shadow: 0px 0px 23px rgb(255,250,250);
}
100% {
box-shadow: 0px 0px 12px rgb(255,250,250);
}
}
@keyframes push_button {
0% {
box-shadow: 0px 0px 4px rgb(255,250,250);
}
50% {
box-shadow: 0px 0px 23px rgb(255,250,250);
}
100% {
box-shadow: 0px 0px 12px rgb(255,250,250);
}
}
#button_aufwecken:hover {
background-position: right center;
transition: all 0.5s ease-out;
}
.button_1{
flex: 1 auto;
margin:5px;
padding:10px 25px;
text-align:center;
transition: all 0.5s ease-out;
cursor:pointer;
background-size: 200% auto;
font-family: "Comic sans MS";
}
Animierte Objekte
Alle benutzen Bilder, bis auf die Hintergrundbilder der Szenen, haben einen funktionalen Zweck. Alle Bilder sind PNG Dateien und von Pixabay. Durch die position: relativ war es einfach alle Objekte in einer Szene zu platzieren. Ausgerichtet und an den gewünschten Platz gebracht wurde mit bottom, top, left, right und margin. Keyframes erzeugen die Animationen der Objekte. Die nachfolgenden Abschnitte beschreiben die einzelnen animierten Objekte.
Text in Sprechblase
Der sprechende Text, den Bobby in der Sprechblase sagt zoomt rein und raus und wechselt dabei zwischen drei Farben. So sollte die Aufmerksamkeit auf den Text gelenkt werden, damit der User den Anweisungen folgen kann. Dazu wird die animation-timing-function auf ease gesetzt. Zudem soll der Zoomeffekt in Dauerschleife ablaufen. Daher der Wert infinite. Durch scale() konnte die Größe der Transformation des Textes eingerichtet werden. Color sorgt für den Farbverlauf, der sich über die verschiedenen Sequenzen (0%, 50%, 100%) ändert.
Für die Animation des fliegenden Hot Dogs wurden in den keyframes die Werte translateX(), translateY() und rotate() verwendet. Die beiden ersten Werte sorgen für die Verschiebung auf der X- und Y-Aschse, wobei ein negativer translateY() Wert das Objekt nach oben versetzt. Daher ist bei 50%, das der höchste Punkt der Flugbahn sein soll, ein negativer Wert von -80px. rotate() sorgt für die Rotation des Objektes. Hierbei müssen Gradzahlen eingetragen werden.
Die Animation der zwei spielenden Hunde war am schwierigsten zu gestalten, da hier der Zeitfaktor eine große Rolle spielt, damit alles synchron abläuft. Zunächst die Gestaltung der beiden springenden Hunde. Hierbei muss man die Sequenzen (0%-100%) der bottom-Wert ändern. Je größer der Wert, desto höher steigen die Objekte auf. Die ease-out Eigenschaft sorgt dafür, dass das Ende der Sequenz langsamer abläuft. So kommt der fließende Sprung zustande. Beide Hunde haben die selben Animationseigenschaften. Der Unterschied liegt im animation-delay. Bello fängt eine Sekunde später an zu springen als Bobby. So entsteht der abwechselnde Sprung.
Die Animation des Balls wurde nach dem selben Konzept wie die des Hot Dogs gestaltet. Hier bestand die Schwierigkeit mit der Positionierung und der Dauer des fliegenden Balls. Es musste alles auf die beiden springenden Hunde angepasst werden, sodass der Effekt eines Kopfballs entsteht.
Saltomachender Bobby
In der letzten Szene macht Bobby ein Rückwärtssalto. Dieser Effekt wurde mit den gleichen Eigenschaften wie bei dem fliegenden Hot Dog und Ball animiert. Da der Charakter sich auf einer Stelle bewegt und nur hochspringt und dreht, bleibt der translateX()vWert bei 0px. Dem entsprechend muss der translateY() und rotate() angepasst werden.
Die Buttons wurden im vorherigen Kapitel schon beschrieben. Nun wird näher auf die animierenden Effekte eingegangen. Der Effekt des Einblendens wurde durch die opacity Eigenschaft erzeugt, der von 0 auf 1 steigt und durch die animation-duration in die Länge gezogen wird. Der erste und letzte Button haben jedoch ein paar zusätzliche Effekte. Beim ersten Button „Aufwecken“ leuchtet der Button-Hintergrund in Weiß. Durch den versetzten box-shadow und der Dauerschleife (infinite) wird das pulsierende Leuchten erzeugt (siehe Bild ). Der letzte Button „Neustart“ dreht und bewegt sich von links nach rechts und rückwärtsrum, während sich dieser vertikal spiegelt. Die animation-direction: alternate-reverse gibt an, dass die Animation sich vor- und zurückspielen soll. Animation-timing-function sorgt für den linearen. also gleichbleibenden/flüssigen Ablauf. translateX() sorgt dafür, dass sich der Button von links nach rechts bewegt. scaleX() hingegen sorgt für die Spiegelung, wobei der negative Wert die Spiegelung an der X-Achse erzeugt.
Gute Nacht, Bobby Schrift
Der Abschließende Text „Gute Nacht, Bobby“ wurde mit einer Zoom-, Leucht- und Rotations-Funktion gestaltet. Wie schon zuvor erwähnt erzeugt scale() den Zoomeffekt. Für das Textleuchten ist text-shadow zuständig. rotate() sorgt für die Drehung des Textes. Der Unterschied bei dieser Textanimation liegt in der animation-timing-function. Hierbei setzt man cubic-bezier () ein um, einen Verzerrungseffekt zu erstellen.
var name = "Snoopy" /*Variable für die Namensabfrage für die Begrüßung von Bobby*/
$(document).ready(function(){
/*Funktion, bei der bei einem Buttonklick bestimmte Objekte sichtbar oder ausgeblendet werden*/
$("#button_aufwecken").on("click", function() { /*Button "Aufwecken"*/
$(".story_start_scene").css({"visibility": "hidden"});
$(".backgroundimage_livingroom").css({"visibility": "visible"});
$("#hello_dog").css({"visibility": "visible"});
$("#speak1").css({"visibility": "visible"});
$("#button_park").css({"visibility": "visible"});
$("#button_aufwecken").css({"visibility": "hidden"})
$("#welcome_text").css({"visibility": "visible"});
$("#name_text").css({"visibility": "visible"});
$("form").css({"visibility": "visible"});
$("#button_park").css({"-webkit-animation-play-state": "running"}); /*Animationen, die pausiert werden, werden hierbei zum Abspielen gebracht*/
$("#welcome_text").css({"-webkit-animation-play-state": "running"});
name = prompt("Bitte gib deinen Namen ein", "Snoopy"); /*Namensabfrage. Inspired by https://www.w3schools.com/jsref/met_win_prompt.asp*/
console.log(name);
if (name != null) {
document.getElementById("welcome_text").innerHTML =
"Hallo " + name + "! Ich bin Bobby. Lass uns den Tag zusammen verbringen.";
}
});
Um die Übergänge zwischen den einzelnen Szenen und Animationen möglich zu machen, wurde jQuery eingesetzt. Durch den Buttonklick werden Objekte, die in HTML5 auf „hidden“ gesetzt sind, sichtbar gemacht. Dafür nutzt man die $(„#button“).on(„click“, function() {}}); . Diese zeigt welche Objekte beim Buttonklick gezeigt werden und welche verschwinden sollen. Die Namensabfrage zwischen der ersten und der zweiten Szene erfolgte über JavaScript mit der promt() Methode.
Bobby JS
Hierbei wurde eine Variable erstellt, das einen default Wert liefert, der in der promp() Abfrage und if-loop eingefügt ist. Es öffnet sich ein Pop-up Fenster bei dem die Aufforderung „Bitte gib deinen Namen ein“ und dem default Wert „Snoopy“ steht. Diese wurden zuvor definiert. Wenn der User seinen Namen eintippt, nimmt die p id=“welcome_text“ diesen entgegen und Bobby begrüßt den User mit „Hallo [Username]! Ich bin Bobby. Lass und den Tag zusammen verbringen“. Falls das Eingabefeld leer bleibt, begrüßt Bobby den User mit dem Namen null. Durch diese Funktion wird eine Bindung zum User aufgebaut.
Die Animationen, die mit Hilfe von transitions und keyframes in CSS3 erstellt wurden, wurden bei webkit-animation-play-state auf paused gesetzt. Der Grund dafür ist, dass bestimmte Funktionen wie animation-delay oder animation-duration ab der Start Szene anfangen zu zählen. Das war aber nicht die Intention. Es sollten alle Abläufe erst nach einem Buttonklick starten. So war das Problem z.B. bei dem zweiten Button „Lass und in den Park gehen“. Dieser wird nach 3 Sekunden eingeblendet. Wäre -webkit-animation-play-state auf running gesetzt, so hätte das Einblenden des Buttons nach 3 Sekunden nicht funktioniert, wenn man sich länger als 3 Sekunden in der Start Szene befunden hätte. Der Button wäre dann beim Szenenwechsel schon da und der Einblende Effekt wäre nicht sichtbar. Damit die einzelnen Animationen erst beim Buttonklick abspielen, muss man diese über jQuery bei -webkit-animation-play-state auf running setzen.
Eine Besonderheit ist die im Hintergrund eingesetzte Musik, um die Animation spannender zu gestalten und den User in eine angenehme Stimmung zu versetzen. Des Weiteren wurden so gut wie alle benutzen Objekte animiert. Es wurde versucht jedes Animationselement individuell zu gestalten, um verschiedene visuelle Effekte zu erzeugen. Die letzte Besonderheit ist, dass der letzte Button einen Neustart der Animation ermöglicht, falls man erneut das Story Telling durchspielen möchte.
Schwierigkeiten
Beim Erstellen der Animation traten zwei Probleme auf.
Der animierte Sprechtext sollte ursprünglich abgetippt werden. Dafür wurde die step() Methode verwendet. Leider konnte ein Zeilenumbruch für die Animation nicht erstellt werden, da ansonsten der „abgetippte Text“ nicht korrekt funktioniert hat wie er es sollte. Dieser hätte in die Sprechblase passen müssen. Daher wurde eine alternative Darstellung des Textes eingebaut.
Die Hintergrundmusik wird manchmal in Google Chrome nicht abgespielt. Daher wird empfohlen sich die Animation in Microsoft Edge anzuschauen.
Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, Amy Linh Hoang, Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.
Lade Kommentare …
Diese Website benutzt Cookies. Wenn du die Website weiter nutzt, gehen wir von deinem Einverständnis aus.OK