Interactive Footprint

Unser Seminar ist beendet und die Interaktive Infografik unter dem Namen „Interactive Footprint“ fertiggestellt.

Bei Progammieren der Infografik in Flash können wir rückblickend sagen, dass uns die Animation durch Einsatz von den GIF’s doch einige Probleme gemacht hat. GIF’s in Flash bergen so einige Schwierigkeiten, die vorher nicht abzusehen waren. Vor allem die Steuerung und das Abspielen der Animationen über die Zeitleiste hat uns viel Zeit gekostet.

Im Nachhinein war die Vorbereitung der Animation, das heißt das Freistellen und Bearbeiten der Fotos sowie die Umsetzung der GIF’s die größte Arbeit. Hier konnten wir wieder feststellen, wie viele einzelne Bilder für eine relativ kurze Sequenz eines Stop-Motion Films benötigt. Die lange Vorarbeit war auch der Grund weshalb für die Programmierung, dann nur wenig Zeit blieb. Bei der nächsten Arbeit mit Stop-Motion-Filmen oder animierten Sequenzen müsste man dafür auf jeden Fall eine längere Zeit einplanen. Auch bei der Sequenz haben wir aus Zeitgründen nur geschafft eine erste Frage umzusetzen, gerne hätten wir hier noch weitere Fragen umgesetzt.

Insgesamt war es aber sehr interessant einmal relativ frei zu arbeiten und vor allem in Sachen Gestaltung. Hier haben wir viel ausprobiert um am Ende eine „etwas andere“ Infografik zu erhalten.

Hier nun der fertige Prototyp des „Interactive Footprint“ als Link (es wird Flash Player 11 benötigt):

http://mars.iuk.hdm-stuttgart.de/~vh026/footprint.html

oder:

http://mars.iuk.hdm-stuttgart.de/~vh026/footprint.swf

Da einige Elemente eine längere Ladezeit haben, hier auch noch einmal die einzelnen Teile als HTML-Dateien:

Bildschirmfoto 2013-07-21 um 15.46.07 Bildschirmfoto 2013-07-21 um 15.46.17 Bildschirmfoto 2013-07-21 um 15.46.28 Bildschirmfoto 2013-07-21 um 15.46.37

Die Bildquellen dazu:

flickr: Dominik Klein; flickr: Andrew Fort; flickr: Martyn Wright

Icons 2.0

Unsere Icons sind jetzt fertig. Wir haben uns nun für die Wasserfarben-Version auf dem dunklen Papier entschieden. Da wir das gleiche Papier auch als Hintergrund verwenden fügen sich die passenden Icons auch ganz gut in das Gesamtbild ein.

icons_überblick

Für die Menü-Leiste haben wir auch noch Pikogramme erstellt, die denen für die Bestandteile ähnlich sind.

Bildschirmfoto 2013-07-14 um 17.36.34

So sieht das ganze dann zusammen aus:

Bildschirmfoto 2013-07-14 um 17.35.47

Im Fotostudio

Gestern haben wir im Fotostudio die Bilder für unsere interaktive Infografik erstellt. Da wir jeden einzelnen Bewegungszustand der Bauklötzchen fotografieren mussten sind dabei sehr viele Bilder entstanden. Eine Schwierigkeit lag darin keinen Zustand dabei zu vergessen um einen durchgängigen Bewegungsablauf zu erhalten. Dabei war das zuvor angefertigte Storyboard sehr hilfreich.

Foto 04.07.13 12 38 51

Kompliziert war auch einige Bewegung mit dem Papier darzustellen. Um sicherzustellen, dass der Bauklötzchenturm auch immer an der gleichen Stelle steht überlegten wir uns eine Hilfskonstruktion. Durch einen Draht, der durch den Boden und den Turm geschoben wurde ließen sich die Klötzchen einfacher drehen und wir vermieden Veränderungen an der Position.

neu

Im nächsten Schritt werden wir die Bilder bearbeiten. Da das Fotografieren der Papier-Hintergründe nicht den gewünschten Effekt brachte haben wir uns auch dazu entschlossen die Türme freizustellen und in einen anderen Hintergrund einzusetzen. Wir hoffen, dass die Papier-Struktur des Hintergrunds und die Dreidimensionalität so besser zur Geltung kommen kann.

Entwürfe Piktogramme

Hier die ersten Entwürfe für die Piktogramme. Die Gestaltung der einzelnen Bestandteile also Wasser, Energie usw. soll relativ „einfach“ und klar sein. Es soll nur die Form als Kontur dargestellt werden und eventuell durchgängig noch einen Art Schatten abgebildet werden. Damit die Icons individueller aussehen könnte man mit der Beschaffenheit des Hintergrunds spielen. Statt einer farbigen Fläche könnten wir auch wieder mit einer Papierstruktur arbeiten. Hierbei wäre für uns auch mit Wasserfarbe bemaltes Papier denkbar. Die Wasserfarbe gibt den Icons einen eher „gebastelten“ Charakter, was auch dem Aufbau von dem Papier-Turm nahe kommt. Für welche Art der Gestaltung wir wählen müssen wir wohl allerdings im Zusammenspiel mit dem Hintergrund und den digitalen Elementen entscheiden. Vielleicht wir der Gesamteindruck mit den Wasserfarben-Icons dann auch „zu bunt“ und wir wählen eher die einfarbigen Icons, die wie in das Papier gestanzt wirken.

eins

6

Test in Flash

Bevor wir im Fotostudio die Bilder für die Animation machen, erstellten wir noch einen Prototyp in Flash. Durch den Prototyp konnten wir erkennen, worauf wir bei den Fotos dann achten müssen.

In Flash bot sich zum einen die Möglichkeit jedes Bild als einzelnen Frame einzusetzen und über eine Aktion dann jeweils zum nächsten Bild-Frame zu springen. Der Nutzer könnte dann beispielsweise über Klicken, die Geschwindigkeit selbst steuern. Allerdings hatten wir die Befürchtung, dass der Nutzer dann durch das viele Weiterklicken, das Interessen und den Spass an der Infografik verliert und eher davon genervt ist.

Deshalb haben wir uns nun dazu entschieden, die einzelnen Bildsequenzen als gif’s aufzubauen und dann erst in Flash einzusetzen. Der Nutzer springt dann immer direkt zum nächsten „Film“. Vielleicht können wir den Nutzer den Ablauf sogar über bestimmte Gesten steuern lassen. Das Weiterdrehen der Bauklötze zum Beispiel über ein Wischen am Touchpad oder ähnliches.

In den gif’s haben wir versucht zu veranschaulichen wie die Animation für das Intro dann ungefähr aussehen soll. Die Bilder sind dabei grob in Photoshop auf die Kästchen montiert worden. Hier ist uns aufgefallen wie wichtig es für die Fotos ist, immer in der gleichen Position zu fotografieren, um ein „Verwackeln“ der Montagen zu vermeiden. Das Montieren der Bilder auf die Fotos wird wohl viel Zeit in Arbeit nehmen, da die Bilder ja in jedem Zustand der Drehung aufgebracht werden müssen.

gif1_klein gif2_klein