Was wäre wenn…?

Idee

Die Idee, eine Geschichte möglichst multimedial und interaktiv zu erzählen, hatte Nadja bereits im letzten Semester. Sie hatte die Vorstellung, eine Geschichte visuell aus einer Kombination von Fotografien und Zeichnungen zu erzählen, die mit Geräuschen und Musik unterstützt wird. Dazu sollte die Möglichkeit bestehen, die Geschichte selbst zu steuern. Der Umfang schien aber gewaltig und an Know How fehlte es auch. Darum schlug sie die Idee dieses Semester dem Team vor. Beim Planen und Diskutieren wurde die Idee weiterentwickelt: Die Geschichte wird nicht nur aufgeschrieben, sondern wie ein Hörbuch vorgelesen.

Story

In einem mehrtägigen Workshop entwickelten wir gemeinsam das Grundgerüst der Story. Mit Hilfe von vielen Postits und der Brainstorming-Technik “Brainwriting” entstand die Idee die Protagonistin ein Klassentreffen erleben zu lassen. Danach entwickelten wir die verschiedenen Erzählstränge. Mit jeder Entscheidung, die der Leser treffen kann, wachsen die Erzählstränge exponentiell. Schnell kamen wir beim analogen Arbeiten auf Papier an die Grenze und suchten deshalb ein digitales Tool. Lucid App vereinfachte uns das gemeinsame Entwickeln der Story massiv. Wir stellten fest, dass der Umfang unglaublich gross wird, würden wir mit jeder Entscheidung ein eigenes Ende der Geschichte anstreben. Wir bauten die Geschichte deshalb so, dass einzelne Erzählstränge wieder in andere Erzählstränge fliessen. Den gesamten Entscheidungsbaum gibt’s hier als PDF.

Nun musste die Story noch ausformuliert werden. Die Herausforderung dabei war einerseits spannend zu schreiben, andererseits die einzelnen Abschnitte so zu formulieren, dass die Geschichte Sinn macht, egal was die Protagonistin davor erlebt hat. Um dies zu kontrollieren organisierten wir acht Testleser, welche jeweils einen bestimmten Erzählstrang auf Logikfehler geprüft haben. Ihr Feedback setzten wir danach um.

Audio

Aufnahme der Texte
Da wir eine möglichst saubere Tonqualität erreichen wollten, entschieden wir uns, den Text im Radiostudio der FHGR aufzunehmen. Dort war die notwendige Einrichtung bereits vorhanden und wir mussten uns nicht um das Equipment kümmern. Leider konnten wir im Radiostudio die einzelnen Stimmen nicht auf einzelnen Spuren aufnehmen, da dies aufgrund der Konfiguration nicht möglich war. So mussten wir bereits bei den Aufnahmen darauf achten, dass wir alle möglichst gleich laut eingepegelt waren. Das war nicht ganz einfach und je nach Szene und Stimmdynamik mussten einige Passagen dann trotzdem in der Postproduction ein wenig angepasst werden. Alle Aufnahmen führten wir am gleichen Tag durch, der Zeitplan ging gut auf, es war allerdings ein ziemlich intensiver und anstrengender Tag.

Geräusche und Musik
In einem ersten Schritt lasen wir die gesamte Story durch und schrieben uns akribisch alle möglichen Geräusche jeder Szene in einer Exceltabelle auf. Um Zeit zu sparen, suchten wir zuerst nach bereits vorhandenen Geräuschen auf Freesound. In einem zweiten Schritt nahmen wir mit einem Zoom diese Geräusche auf, welche wir in keiner Library finden konnten. Passende Musik suchten wir mittels Keywords auf Artlist. Das A und O beim Suchen der Geräusche und Musik war eine saubere Benennung der Audiodateien.

Audio Postproduction
Für die Nachbearbeitung und Zusammenführung der Töne mit Adobe Audition einigten wir uns auf einige Eckwerte, damit wir zu zweit daran arbeiten konnten und die Ergebnisse trotzdem gut zusammenpassen. So legten wir beispielsweise für immer wieder vorkommende Töne oder die Texte einheitliche Lautstärken fest.
Durch die sauberen Aufnahmen aus dem Radiostudio benötigten die Texte nicht mehr viel Bearbeitung, hie und da musste die Lautstärke noch etwas korrigiert werden. Da wir bei der Suche und Aufnahme der Töne bereits auf eine gute Struktur achteten, war der Schnitt sehr angenehm und wir wussten genau, welche Töne wo benötigt werden.

Illustrationen

Für die Zeichnungen probierten wir verschiedene Techniken und Programme aus. Schnell war klar, dass sich der Vektor-Style im Zusammenspiel mit den Hintergrundfotos am besten eignet. Um den Arbeitsprozess zu vereinfachen erstellten wir zu Beginn ein Stylesheet für jeden Charakter. Auf diesem Stylesheet wurde vermerkt, was die Personen tragen, wie ihre Frisuren aussehen usw. Eine Schwierigkeit war, die Layer im Illustrator peinlichst genau anzuschreiben und anzuordnen. Warum? Weil das illustrieren und colorieren auf verschiedene Personen aufgeteilt wurde. Die Illustrationen nahmen einige Zeit in Anspruch doch bis zum Schluss, wurden die Charakter locker aus dem Handgelenk illustriert. Die einzigen Stolpersteine legte uns die Technik in den Weg. Zwischendurch gab es Probleme mit dem Programm Illustrator, weil es ständig abstürzte und der Surface Pen gab auch noch seinen Geist auf. Doch wir wären keine MMP-Studenten, wenn wir nicht für alles eine Lösung hätten.

Fotos

Die Location für unsere Geschichte hatten wir schnell gefunden. Ein Freund stellte uns sein Maiensäss zur Verfügung, um die nötigen Fotos zu schiessen. Leider machte uns die Jahreszeit einen Strich durch die Rechnung. Fotos von draussen konnten keine verwendet werden, weil überall noch Schnee zu sehen war, sich unsere Story aber im Sommer abspielt. Deshalb mussten wir etwas schummeln und eigene Fotos von früheren Wanderungen verwenden.

Website

Planung/Prototyp
Um einen ersten Eindruck zu erhalten, wie die Umsetzung aussehen könnte, erstellten wir einen ersten Prototypen mit Hilfe von Adobe XD. In einer gemeinsamen Besprechung kamen wir den Wünschen und Vorstellungen von allen immer näher und so hatten wir schlussendlich eine gute Grundlage, um mit der Programmierung zu starten.

Die Umsetzung sollte ohne Datenbanken erfolgen, damit die Geschichte als Subsite auf Digezz gehostet werden kann.

Design
Die Umsetzung des Designs war dank des Prototyps keine grosse Sache mehr. So wussten wir schon, wie es am Schluss aussehen sollte. Für die Icons haben wir uns entschieden, dass wir sie selbst designen, damit wir keine Quellenangaben machen müssen. Bei der Programmierung achteten wir darauf, dass wir bei den Farben und Schriftarten wo immer möglich mit CSS-Variablen arbeiteten, damit wir diese Dinge später unkompliziert anpassen können.

Struktur
Uns war es von Anfang an wichtig, eine saubere Struktur anzulegen und eine Lösung zu finden, wie wir die einzelnen Szenen mit möglichst wenig Code darstellen können. Es sind immerhin rund 60 Szenen und wenn man später irgendwo etwas anpassen muss, sollte das einfach und schnell möglich sein. So lagerten wir die wichtigsten Elemente in externe PHP-Dateien aus, die wir bei jeder Szene mit der Funktion require_once(); einfügten. Für ein nächstes Projekt würden wir hier sogar noch weitergehen und den Code noch extremer Modularisieren, das würde die Wartung zusätzlich erleichtern.

Damit die Bild- und Audiodateien einfach ausgetauscht werden können, erstellten wir eine Funktion, bei der die URL der aktuellen Seite ausgelesen und weiterverarbeitet wird. Da wir uns bereits bei der Planung der Geschichte auf eine vierstellige ID für jede Szene geeinigt hatten, entschieden wir uns die Szenen, Hintergründe und Audiodateien mit dieser ID zu benennen. So kann bei jeder Szene der Hintergrund und die Audiodatei mit der gleichen Nummer automatisch eingefügt werden.

Möglichkeit für einen Unterbruch
Um dem Besucher der Geschichte ein ideales Erlebnis bieten zu können, wollten wir eine Funktion integrieren, mit der die Besucher nach dem Verlassen der Seite an der selben Stelle wieder einsteigen können. Die grösste Schwierigkeit, die sich uns hier stellte war, dass die Besucher ihren ganzen Weg in der Geschichte zurückgehen können. Durch die vielen Entscheidungen gibt es je nach Szene sehr viele mögliche Varianten, wie der Besucher bis dahin gekommen sein könnte. Schlussendlich konnten wir das Problem mit einem Eintrag im local Storage lösen. Bei jeder Navigationsaktion (vorwärts/zurück oder bei einer Entscheidung) wird ein String aus dem local Storage geholt, angepasst und wieder abgespeichert. In diesem String sind dann alle bisher besuchten Szenen in der richtigen Reihenfolge abgespeichert. Beim betätigen des “Rückwärts”-Buttons wird die letzte Seiten-ID aus dem String geholt, für die neue URL verwendet und aus dem String gelöscht.

Audio
Ursprünglich planten wir, dass wir das Audio im Hintergrund einbauen, und die Dateien beim Aufruf einer Szene automatisch abgespielt werden. Falls der Besucher etwas verpasst haben sollte, sollte er über einen “Wiederholen”-Button die Möglichkeit haben, die Datei nochmals von vorne zu hören. Aus Gründen der Benutzerfreundlichkeit bauten wir zudem einen Button ein, mit dem das gesamte Audio stumm geschaltet werden konnte. Damit das Audio bei der nächsten Szene aber nicht direkt wieder abgespielt wird, arbeiteten wir auch hier mit einem Eintrag im local Storage, mit dem sich das System merken konnte, wenn ein Benutzer das Audio stumm geschaltet hat.
Da es von der Performance her keinen Sinn macht, die Audiodateien einfach im Hintergrund abzuspielen, wenn sie nicht gehört wurden, wurde das Audio beim Klick auf den Stummschalt-Button pausiert. So konnte der Benutzer an der gleichen Stelle weiterhören, wenn er die Stummschaltung wieder aufhob.
Da diese Lösung nicht sehr nutzerfreundlich ist und wir mit dieser Lösung irgendwie nicht glücklich waren, entschieden wir uns, die Audio-Integration nochmals neu zu gestalten.
So vergrösserten wir den Navigationsbereich am unteren Bildschirmrand und fügten dort einen richtigen einfachen Audioplayer ein. Da wir aber nicht einfach einen Standard-Player haben wollten, mussten wir uns ziemlich intensiv in die Thematik einlesen und mit der Hilfe von einigen Tutorials herausfinden, wie man einem Audioplayer ein eigenes Design verpassen kann. Jetzt können die Besucher, wenn sie etwas verpasst haben, auch einfach ein kleines Stück zurück springen und müssen nicht mehr ganz von vorne anfangen. Zudem wird jetzt die Gesamtzeit der jeweiligen Audiodatei angezeigt. Und auch der “Stummschalt-Button” erhielt nun seine richtige Funktion, und schaltet das Audio nun wirklich nur auf stumm.

Fazit

Gemeinsam haben wir ein Projekt mit allen MMP-Facetten umgesetzt. Dabei nutzten wir die Stärken von jedem Team-Mitglied. Nadja brachte die Idee und sorgte für die Hintergrundfotos. Ueli war gemeinsam mit Nadja für die Audio Postproduction zuständig. Zudem sorgte er dafür, dass unsere Story auf einer Website abrufbar ist. Gerry ist unsere Frau für Illustrationen. Mit ihren Zeichnungen gab sie den Figuren ein Gesicht. Anja formulierte die Texte, machte den Rohschnitt der Sprechertexte und hatte den Zeitplan im Griff. Und natürlich haben wir uns alle gegenseitig bei Schwierigkeiten unterstützt.