Jul 22

Wir schreiben den 22. Juli 2010 und können mit Erleichterung, Freude und Stolz verkünden, dass unser Projekt „idb treasury“ nun endgültig abgeschlossen ist. Wir haben wirklich viel gelernt und einige Erfahrungen mehr gesammelt. Obwohl uns das Projekt oft viele Nerven geraubt hat, waren wir stets motiviert und mit viel Spaß an der Sache dran.

An dieser Stelle wollen wir nicht zuletzt auch unseren Helfern danken:

Ein großes Dankeschön an Nadine, die uns wirklich bei jedem Problem zur Seite stand, uns immer wieder neue Denkanstöße gab und uns damit oft auf eine Lösung bracht!

Außerdem danken wir noch Chris von Gestureworks, der unsere Fragen immer sehr zeitnah und ausführlich beantwortet hat!

Natürlich wollen wir unseren Professor Ralph Tille auch nicht vergessen, der immer sehr beruhigend unseren verzweifelten Gesprächen beigestanden hat.

Um unser Projekt abrundend zu präsentieren, haben wir ein Video gedreht (siehe oben), welches sämtliche Interaktionen unserer Anwendung zeigt. Viel Spaß beim Anschauen!

Hier noch ein kleiner Eindruck vom Making of! 😉

DSC_0642

Tagged with:
Jul 21

idb treasury
PROJEKTFOLIO DES STUDIENGANGS INFORMATIONSDESIGN

Das Projekt „idb treasury“ ist im Sommersemester
2010 an der Hochschule der Medien (HdM)
entstanden. Innerhalb des Seminars „ILab-Interaktionslabor“
wurden innovative Interaktionskonzepte
für unterschiedliche Interaktionsdevices
entwickelt. Für dieses Projekt stand im Interaktionslabor
der HdM ein 47‘‘ Multitouch Tisch von
Evoluce zur Verfügung.

Das Projekt „idb treasury“ ist im Sommersemester 2010 an der Hochschule der Medien (HdM) entstanden. Innerhalb des Seminars „ILab-Interaktionslabor“ wurden innovative Interaktionskonzepte für unterschiedliche Interaktionsdevices entwickelt. Für dieses Projekt stand im Interaktionslabor der HdM ein 47‘‘ Multitouch Tisch von Evoluce zur Verfügung.

Die Multitouch-Applikation „idb treasury“ stellt ein Projektfolio des Studiengangs IDB dar. Damit soll sie sich von den meist sehr unterhaltungslastigen Multitouch-Anwendungen abheben und vorallem durch ihre nützliche Funktion sowie vielseitige Einsetzbarkeit und Erweiterbarkeit herausstechen. Neben dem Ideenaustausch unter den Studenten selbst, dient sie außerdem der Repräsentation des Studiengangs nach außen. Sowohl Studienanfängern als auch Medieninteressierten vermittelt sie einen Eindruck über die interdisziplinären Studieninhalte und deren spannende Ergebnisse. Selbst Skeptiker werden durch die Applikation „idb treasury“ vom Know-How und den Fähigkeiten eines Informationsdesigners überzeugt sein.

Der Name des Projektes (engl. treasury = Schatzkammer) soll den Projekten des Studienganges gerecht werden und auf den hohen Wert, die Kreativität, das Herzblut und die Mühe, die hinter den Projekten steckt, anspielen. Dieser Schatz soll nicht verborgen bleiben und durch diese Multitouch-Applikation spürbar und erlebbar gemacht werden.

Die Grundstruktur unserer Anwendung bilden Projekt-Fächer. Jeder Fächer hält die Informationen, Ausschnitte aus dem Konzept und verschiedene Abbildungen eines Projektes zusammen. Durch diese sehr übersichtliche und klare Darstellung können die Projekte deutlich auseinandergehalten werden. Die Metapher des Auffächerns bietet die Möglichkeite komplexe Inhalte sehr platzsparend aufzubereiten. Die Entscheidung bleibt beim Nutzer, welche und wieviel Informationen er sich anschauen möchte. Weitere Vorteile dieser Fächer-Metapher sind die beliebige Erweiterbarkeit der Fächerinhalte sowie die flexible Interaktion mit den Fächern, die die Möglichkeiten der gestenbasierten Interaktion völlig ausschöpft.

Die abgerundeten Fächerblätter besitzen eine farbige Kontur, die eine weitere Unterscheidung der einzelnen Projekt-Fächer zulässt. Je nach Farbe der Kontur handelt es sich um ein Print- oder Interaktiv-Projekt (grün/ blau). Eine gelbe Kontur symbolisiert die Projektart „Raum“ welche Lehrveranstaltungen wie Wayshowing oder Ausstellungsdesign beschreibt. Film-Projekte, wie das AV-Projekt werden durch eine lila Kontur gekennzeichnet.

Die einzelnen Projekt-Fächer lassen sich an separaten Interaktionsbereichen auffächern, rotieren, skalieren oder durch einen Doppelklick auf das Deckblatt wieder zusammenklappen. Die Inhalte sowie Bildergalerien innerhalb der Projekt-Fächer können mit einer 2-Finger-Geste horizontal gescrollt werden.

Neben den Grundfunktionen der Projekt-Fächer, beinhaltet die Multitouch-Anwendung „idb treasury“ noch weitere, vielseitige Funktionen. Beispielsweise besitzen interaktive Projekt-Fächer eine interaktive Karte, die vom Fächer abgerissen werde kann. Daraufhin leuchtet eine Andockstation im linken unteren Bildschirmbereich auf. Sobald die interaktive Karte mit der Andockstation verbunden wird, erscheint in der Mitte des Multitouch Tisches ein Video-Ausschnitt des interaktiven Projektes, beispielsweise die Interaktion mit einer Website oder einer Infografik. Wird die interaktive Karte von der Andockstation entfernt, wird das Video wieder entladen.

Eine sogenannte „Schnellmerkleiste“ am rechten Rand des Multitouch Tisches ist mit einer Scrollleiste zu vergleichen, wie sie von Computern bekannt ist. An diese können favorisierte und besonders interessante Fächer angedockt werden. Dadurch kann der Nutzer die zunächst zufällig platzierten Fächer nach Wunsch ordnen und sich somit einen besseren Überblick verschaffen. Weiterhin können die angedockten Fächer mit einer 2-Finger-Geste gescrollt werden.

Am linken oberen Rand befinden sich außerdem noch drei Laschen, die durch Icons als Hilfe, Filter und Pinnwand kenntlich gemacht wurden. Mit einer sogenannte Flick-Geste können die Laschen aus- und eingeklappt werden. Die Hilfe erläutert alle möglichen Interaktionen und verwendeten Gesten unserer Anwendung. Durch Schiebe- und Drehregler, sowie durch aktive und inaktive Zustände kann nach Projektart, Jahr, Semester und Professor gefiltert werden. Die Pinnwand soll es ermöglichen Projekte zu sammeln und verschiedene Aktionen damit durchzuführen. Neben der Funktion „Notiz schreiben“ besteht weiterhin die Möglichkeit sich Fächer per E-Mail zuzuschicken oder auch auszudrucken. Diese Druckfunktion kann vorallem bei Studieninfotagen ihre Anwendung finden. So können sich Interessierte die druckoptimierten Fächer ausdrucken und ihren eigenen Papier-Fächer zusammenbasteln, als schöne Erinnerung an den Studiengang Informationsdesign.

Für die Programmierung dieser Multitouch-Applikation stand uns ein Framework von Gestureworks zur Verfügung. Umgesetzt wurde das Konzept in Flash CS4 mit Actionscript 3.0, was für uns zunächst reines Neuland war. Umso stolzer waren wir am Ende, als wir unsere funktionierende Multitouch-Applikation „idb treasury“ nach viel Mühe und Durchhaltevermögen erfolgreich präsentieren konnten.

Tagged with:
Jul 03

Nach 3 Tagen ununterbrochener Progammierung, langer Nächte und harter Arbeit konnten wir unser Projekt erfolgreich auf der Medianight präsentieren. Hier ein paar wenige Eindrücke von unserer Anwendung, die auch erstmals die endgültige Gestaltung zeigen:

In Kürze werden wir noch ein Video online stellen, das alle Interaktionsmöglichkeiten unserer Anwendung zeigt und erläutert.

Tagged with:
Jun 30

Die in letzter Zeit eher selter gewordenen Posts lassen schon vermuten, dass die Zeit mal wieder sehr knapp ist und wird. Denn morgen steht schon die Medianight vor der Tür, auf der wir unsere Multitouch-Anwendung präsentieren werden. Bis dahin muss alles stehen, deshalb wollen wir nicht lange reden und gleich weiter programmieren.

mn_01

Nur noch schnell die Einladung zur Medianight:

1. Juli 2010 , HdM Nobelstraße
von 18-22 Uhr

Der Link zur Website der Medianight:
http://www.hdm-stuttgart.de/medianight

Das interaktive Programm zum Durchblättern:
http://www.hdm-stuttgart.de/medianight/Medianight_SS10.swf

Tagged with:
Jun 30

Wie man in den letzten Posts erkennen kann, haben wir für jede kleine Interaktion unserer Anwendung einen Dummy erstellt. Dadurch konnten wir Problem für Problem lösen ohne auf die Gestaltung Rücksicht nehmen zu müssen.

Vor etwa 2 Wochen haben wir nun alle Dummys erstellt. Seitdem arbeiten wir daran, alle Dummys zusammen zu kopieren, zu verknüpfen und für unsere endgültige Anwendung anzupassen. Natürlich muss beim Zusammenfügen der Dummys nun auch endlich die Gestaltung mit einfließen.

Beim Zusammenfügen der Dummys gab es sehr viele Probleme, mal größere, mal kleinere. Manche Variablen waren plötzlich doppelt definiert, Funktionen kollidierten und das Skript wurde ewig lang – obwohl wir noch nicht einmal alle Fächer drin hatte.

Somit machten wir uns daran, das Skript zu verkürzen. Wir erstellten zahlreiche Arrays, if-Abfragen, for-Schleifen, verrückte Arrays usw. … Nach stundenlangem Ausprobieren, Testen, Verzweifeln….haben wir es dann auch endlich geschafft unser Skript um einiges zu verkürzen! ….das ist sehr ratsam und vorteilhaft! 🙂

Tagged with:
Jun 10

Reimen ist schön 😉

Nun haben wir für unseren Fächer eine minimale und maximale Größe definiert. Somit kann er nicht mehr so klein skaliert werden, dass er auf dem Multitouch Tisch nicht mehr mit den Finger „gegriffen“ werden kann.

Außerdem hat unsere Rotation keinen Versatz mehr, das heißt die Flächerblätter liegen beim Rotieren nun besser am Finger an und erleichtert dem Nutzer die Interaktion.

faecher_dummy05

Tagged with:
Jun 10

Und wieder einmal sind wird noch ein paar Schritte weiter, wenn auch die Nerven das ein oder andere mal etwas darunter leiden mussten 😉

In diesem Dummy sind unsere spätere Bildergalerie und scrollbarer Text zu sehen, für beide Funktionen bewegt man zwei parallele Finger in x-Richtung. Beide Container können gedraggt, skaliert und rotiert werden:

(! Da wir keine txt.-Datei in die Mediathek hochladen können, funktioniert das Scrollen hier auf dem Blog leider nicht, trotzdem seht ihr auf diese Abbildung den ersten Textblock, der dynamisch geladen wird !)

faecher_dummy04

Zur Bildergalerie:

  • die einzelnen Bilder werden dynamisch über ein Array geladen und gleichzeitig im richtigen Abstand zueinander platziert
  • das Scrollen der Bilder ist nach links und rechts begrenzt!! juhuu 🙂
  • damit die Bilderleiste nur in dem entsprechenden Container sichtbar ist, haben wir eine Maske verwendet

Zum Scrolltext:

  • die Textfelder werden in der as.-Datei erzeugt
  • auch hier wird der erste Textblock aus einer txt.-Datei geladen und dabei html Formatierung übernommen
  • der Text verschwindet beim Rotieren nicht, da er nun richtig und ordnungsgemäß eingebettet ist 🙂
  • außerdem haben wir den einzelnen Textfeldern verschiedene Schriftarten/Textformate zugewiesen
  • natürlich muss auch hier das Scrollen nach links und rechts begrenzt sein
Tagged with:
Jun 09

Wieder einmal haben wir eine der vielen Hürden mit extrem viel Hirnschmalz in Angriff genommen und haben das Problem, ja, sagen wir mal zu 83% gelöst. Hier und da hat unser „Dock“ noch ein paar kleine Schönheitsfehler, aber die lassen wir jetzt mal außen vor und präsentieren stolz unseren neusten Dummy:

…das Fächer-Dock

faecher_dock

seine Fähigkeiten:

  • die Fächerblätter lassen sich skalieren und bewegen
  • die Fächerbältter können rechts an das Dock angeheftet werden, wenn sie darüber bewegt werden
  • die Fb können auch wieder vom Dock gelöst werden, indem man sie wegzieht
  • die Fb am Dock können gescrollt werden indem man das Dock mit zwei Fingern (hier einmal strg drücken, um den zweiten Finger zu simulieren) bedient

zu den Fächerblättern:
Objekt selbst, Verlauf, Farbe, Kontur, sowie Glow sind in AS3 erzeugt. Das spart unnötige Ladezeiten und verpixelt auch nicht. Außerdem können wir das jetzt 😉

Tagged with:
Mai 31

Wie wir kürzlich berichteten, hatten wir so einige Probleme damit, einen SWF-Film ordentlich zu laden. Nach langem hin und her und unter viel Einsatz von reichlich Gehirnschmalz 😉 konnten wir das Problem nun lösen.

Im Nachhinein betrachtet ist es wirklich sehr einfach: Das Problem, weshalb unser SWF immer verschwunden ist, war die Schrift. Die lässt sich im „Normalzustand“ nicht rotieren – deshalb sollte man die Schrift einfach einbetten (oder gegebenenfalls auch in einen Movieclip umwandeln) und voilà, Problem gelöst.

Wir haben natürlich mal wieder hervorragendes Anschauungsmaterial, auf das wir sehr stolz sind.

swf

Tagged with:
Mai 19

Wir haben uns natürlich nicht nur in der Programmierung versucht, sondern auch schon etwas gestaltet.

Zunächst haben wir uns an den Hintergrund gemacht. Der sollte sich zurücknehmen und den Projektfächern den Vortritt lassen.

Hierzu zwei Entwürfe. Dabei waren die Ideen bei ersterem die Farben, die wir auch zur Codierung unserer Projekte verwenden in den Hintergrund zu integrieren – sowie das Logo der HdM unter zu bringen. Allerdings befürchten wir, dass hier die Farben etwas zu stark in den Vordergrund treten und somit den Fächern etwas die Show stehlen.

Die zweite Version zeigt eine farblich etwas zurückhaltenderen Hintergrund. Hier ist nicht das HdM Logo integriert, sondern der Titel unserer Anwendung, der – natürlich nutzerfreundlich – von oben und unten zu lesen ist 🙂

02_Schritt03 100506_background_3

Als Nächstes gestalteten wir die Fächer.

Zunächst haben wir ihnen unsere Farben zugewiesen um zu testen wie sie in ihren zwei Zuständen (nicht ausgewählt / ausgewählt) aussehen müssen. Dabei haben wir festgestellt, dass lila nicht gut geeignet ist, daher haben wir die Farbe durch ein helles Grau ersetzt.

faecher-farben

Danach haben wir unser Gestaltungsraster auf die Fächer angewendet. Dazu haben wir verschiedene Versionen des Deckblatts erstellt und auch ausgetestet, wie die Fächerblätter für die Textdarstellung aussehen könnten. Das Bild zeigt die Ergebnisse:

faecher-versionen

Was selbstverständlich nicht fehlen darf, sind einige Icons – um unser Konzept besser zu verstehen und den direkten Einstieg zu ermöglichen.

Für unsere „Funktionsecken“ wollten wir einprägsame Icons erstellen, damit der Nutzer direkt weiß, mit was er es bei dieser „Ecke“ eigentlich zu tun hat. In diesem Fall also: Anpinnen, suchen, filtern und Multimedia-Objekte verwenden.

eck-icons

Auf der Pinnwand sollen „Aktionsfelder“ aufzeigen, was der Nutzer alles, supertolles machen kann. Nämlich mails versenden, Notizen schreiben und Fächerblätter drucken.

aktions-icons

Tagged with:
preload preload preload