Pop-Up-The-Bathroom
Text von Frank Hellenkamp
10 Badtrends
Bei Pop-Up-The-Bathroom geht es um die Visualisierung von 10 Badtrends. Das Projekt entstand zur ISH im Auftrag des VDS in Zusammenarbeit mit FAR_consulting, Karsten Jipp und Verena Landgraf.
Verena Landgraf hat die 10 Badtrends in Einzelbildern illustriert. Auf dieser Basis war unsere Aufgabe, diese interaktiv für die Verwendung im Internet und zur automatischen Präsentation auf der ISH aufzubereiten.
Um den 2D-basierten Illustrationen etwas mehr Räumlichkeit zu verleihen, fiel die Entscheidung, diese Räume in "Quasi"-3D-Räume umzusetzen. Eine richtige 3D-Umsetzung wäre innerhalb des Zeitrahmes nicht möglich gewesen, hätte vor allem aber auch den zweidimensionalen Charakter der Illustrationen zerstört.
Folgende Trends wurden illustriert:
Die Umsetzung
Die Umsetzung erfolgte komplett in Flash und zwar mit Hilfe von Einzeltweens. Für jeden Raum gibt es einen Tween zwischen Frame 2 und Frame 100. Über die Mausposition wird dann die Position innerhalb des Tweens (X-Position) und die Zoomstärke (Y-Position) bestimmt.
Hinter den einzelnen Objekten befinden sich dann jeweils interaktive Flächen, die bei Klick ein Popup mit Zusatzinfos aufpoppen lassen.
Easy Bathroom: Keyframe 2
Easy Bathroom: Keyframe 50
Easy Bathroom: Keyframe 100
Easy Bathroom: Keyframe 50
Zusätzlich zu der Markierung der interaktiven Flächen »onMouseOver«, werden für alle Objekte, die ein Popup auslösen können, zusätzlich eine kurze Eingangsanimation angezeigt, so dass dem Benutzer schon zu Anfang ein Hinweis gegeben ist, wo sich diese Flächen befinden. Dieser Hinweis ist so kurz gehalten, dass er eher intuitiv erflogen soll, als dass er wirklich bewusst wahr genommen werden soll.
Eine Auswahl der Räume
Easy Bathroom:
Green Bathroom:
Designer:
Automatischer Ablauf
Um als Präsentation bei der Messe auch automatisch ablaufen zu können, wurde zusätzlich ein Präsentationstool umgesetzt, dass alle Räume der Reihe nach lädt und alle interaktiven Flächen des Raumes einzeln anwählt. Dabei wird ebenfalls die Bewegung simuliert, die der Benutzer sonst mit der Maus selbst ausführt.
Um die Präsentation bei Bedarf auch stoppen zu können ist in den Präsentationsplayer eine Pausenfunktion integriert, die bei Bedarf ein Standbild einblendet, dass sich in den Hintergrund des Messestandes integriert.
Die Website
Die Website selbst besteht ansonsten aus recht umfangreichen Texten zu den jeweiligen Badtrends. Da viele Benutzer im Internet eher keine langen Texte am Bildschrim lesen, wurde die Seite so optimiert, dass sich diese auch problemlos ausdrucken lässt.
Da Flash-Objekte normalerweise nicht mit dem HTML-basierten Seiteninhalt ausgedruckt werden, wurde für den Ausdruck jeweils die Originalillustration als Bild hinterlegt, welches auch dann angezeigt wird, wenn einem Benutzer kein Flash zur Verfügung steht, wie am beispielsweise am iPhone.
Die Seite ist komplett zweisprachig.
