Untitled - netzspannung.org

DOKUMENTATION EINER BACHELORARBEIT
Konzeption und Realisation einer Flash-Website mit
dem Schwerpunkt in Gestaltung und Illustration.
Mareike Ottrand
2007
Referent:
Prof. Dr. rer. nat. Guido Falkemeier
Co-Referent:
Prof. Dipl.-Des. Christoph Althaus
VERZEICHNIS
Idee
Vorwort
Prozess
Inspiration
Intention
Umsetzung
Recherche
Von Insekten und Spinnen
Biologisches Wissen
Image der Insekten in den Medien
Image der Insekten in der Religion
Illustration im Web
Zeitplan
10
11
11
12
13
14
15
Gestaltung
Design
Logo & Typografie
Illustration
Workflow am Beispiel
Icons
Charakterentwicklung
16
17
18
20
21
22
23
Technik
Programme
Sound
Programmierung
Navigation
Animationen
Anforderungen
24
25
27
28
29
31
31
Erweiterungen
Vermarktung
32
33
33
Ausblick
INHALT
Seite
6
7
8
8
8
8
Rechtliches
Quellen
Erklärung
Daten-CD
34
35
35
37
VORWORT
Die Insekten WG ist eine Flash-Website. Den User, der diese
Seite unter der Domain www.insektenwg.de besucht, erwartet eine bunte Bilderwelt von Insekten, die in einer Wohngemeinschaft leben. Sich das von Menschen verlassene Haus
zu eigen gemacht, kreuchen und fleuchen die kleinen Wesen
umher und warten darauf, entdeckt zu werden. Der Spieltrieb und die Neugierde des Users sollen auf dieser Website
geweckt werden. Er arbeitet sich von Raum zu Raum und
kann die Tiere, und somit ihre Profile entdecken. Dies weckt
den Sammeltrieb des Anwenders.
Darüber hinaus verstecken sich viele andere Spielereien
und Interaktionsmöglichkeiten in dieser fantastischen Insektenwelt. Begeistert von der Artenvielfalt und den Persönlichkeiten der Insekten werden die User zu Fans und die Fans zu
Kunden.
IDEE INSEKTEN WG
IDEE
7
Der erste Entwurf einer Insekten WG
INTENTION
Auf der Suche nach der etwas anderen Bachelorarbeit
wurde ein Prozess durchlaufen, der fast ein halbes Jahr
andauerte. Am Anfang stand die Idee einer Kampagne für
mehr Toleranz und Akzeptanz gegenüber Insekten. Es sollte
eine Website entstehen, die mit einem Augenzwinkern dazu
aufruft, die Fliegenklatsche zu verkaufen. An ihrer statt sollte
der User sich im eigenen Shop mit angebotenen Merchandising-Artikeln ausstatten. Sympathiefigur dieser Kampagne
sollte eine Stubenfliege namens Louis werden.
Die Hauptfigur wandelte sich im Kreativprozess und an
dessen Ende steht die Wohngemeinschaft von Insekten, die
in ihrem einzigartigem Zuhause, einem verlassenen Haus auf
der Spitze eines Berges, ihre WG gegründet haben.
DOKUMENTATION INSEKTEN WG
8
Ebenfalls dient die Website der Selbstvermarktung und
soll als Teil des Portfolios Chancen in Karriere & Job verbessern.
INSPIRATION
UMSETZUNG
Die Inspirationsquellen für diese Website waren sehr
unterschiedlich. Zum einen begeisterten die Webwelten von
internationalen Kreativen die täglich mit Awards und Preisen
ausgezeichnet wurden. Zum Beispiel www.thefwa.com. Figuren wie die UglyDolls standen mit ihren Persönlichkeitsprofilen Pate. Zum anderen beflügelten Bücher, Zeitungen, Filme,
sogar materielle Stoffe und Gegenstände. Gespräche über
die Ideen gaben dem kreativen Prozess oft eine unerwartete
Richtung.
Realisation einer Website mit dem Schwerpunkt in Gestaltung und Illustration lautet der Arbeitstitel dieses Projekts. Da
in diesem Fall die Optik sehr wichtig ist, wurde die Erscheinung der Website besonders durchdacht. Man navigiert in
der Insekten WG durch Räume, die alle von Hand gezeichnet wurden. Diese „handmade-Optik“ erzeugt eine warme,
angenehme Atmosphäre. Die analoge Vorarbeit bedeutet
einen größeren Arbeitsaufwand, resultiert allerdings in einer
besonderen Erscheinung im Web.
IDEE INSEKTEN WG
PROZESS
Jeder Gestalter versucht seine Projekte gut aussehen
zu lassen. Dies ist jedoch kein Selbstzweck. Vor allem Medienschaffende wissen, wie viele Arbeiten nur eine kurze
Lebensdauer genießen. Vor allem Studierenden wird selten
die Verantwortung für nachhaltig medienwirksame Projekte
zugesprochen. Eine Marke zu erfinden, zu etablieren und zu
prägen ist ein sensibler und im Idealfall langfristig durchgeplanter Prozess.
Insekten WG soll solch eine Marke werden. Mit dem Besuch der Website soll der User dazu angeregt werden diese
wieder zu besuchen, er soll während des Besuches Spaß
haben und sich mit ihr auseinandersetzen.
Der Benutzer soll zum Fan werden. Er soll Sympathien zu
den Tieren und dadurch bedingt ein Verlangen nach dem
Besitz jener kauzigen Wesen entwickeln. Dies kann er ausleben, indem er nicht nur auf der Website Insekten sammelt.
Auch T-Shirts, Buttons, Taschen, Stofftiere und andere Artikel
können im Shop vom User erworben werden. Außerdem
können kostenlose Gimmicks wie Wallpaper, E-Cards und
Icons heruntergeladen werden.
Das Web ist ein geeignetes Mittel um kostengünstig viele
User zu erreichen und je nach Frequentierung und Resonanz
die Investitionen für die Artikel abzuschätzen.
9
VON INSEKTEN UND SPINNEN
Quelle: www.wikipedia.de
RECHERCHE
Spinnentiere gehören ebenfalls zu der als Gliederfüßler
bezeichneten Gruppe und dürfen in der Insekten WG, wenngleich es keine Insekten sind, nicht fehlen. Wenn in den nachfolgenden Texten von Insekten gesprochen wird, bezieht das
die Klasse der Spinnentiere mit ein.
BIOLOGISCHES WISSEN
Obwohl die Insekten karikiert und verändert dargestellt
wurden, war die Erarbeitung von Vorwissen über diese Tiere
notwendig. Dieses Wissen kann man in Foren und in Fachliteratur nachschlagen. Für jedes in der WG lebende Insekt wurde das Verhalten, das Aussehen und besondere Eigenschaften in Erfahrung gebracht und notiert. So sollte die Feldgrille
ihr zirpen mit den Flügeln erzeugen, und nicht, wie oft
fälschlicherweise angenommen, mit der Stimme. Außerdem
muss das Glühwürmchen, welches um die Laterne schwirrt,
männlich sein, denn Weibchen sind flugunfähig. Des Weiteren sind alle in der WG wohnhaften Tiere in Deutschland beheimatet und könnten, in der Theorie zumindest, tatsächlich
in dieser Zusammenstellung ein Haus bewohnen.
RECHERCHE INSEKTEN WG
Die Insekten (Insecta), auch Kerbtiere oder Kerfe genannt,
sind die artenreichste Klasse der Gliederfüßer (Arthropoda)
und mit weit über einer Million bekannter Arten zugleich
die artenreichste Gruppe der Tiere. Nach verschiedenen
Hochrechnungen rechnet man allerdings mit einem Vielfachen tatsächlich existierender Arten, wobei vor allem in
den tropischen Regenwäldern noch Millionen unentdeckter
Arten vermutet werden. Ihr wissenschaftlicher Name leitet
sich vom Lateinischen (in)secare, einschneiden, ab, was sich
auf die stark voneinander abgesetzten Körperteile bezieht.
Der deutsche Begriff Kerbtiere geht auf den deutschen
Schriftsteller Philipp von Zesen zurück. Der Name Insekt
wurde im 18. Jahrhundert aus dem lateinischen insectum
eingedeutscht. Dies gehört zu in-secare = einschneiden und
bedeutet demnach eigentlich eingeschnittenes (Tier). Es ist
eine Lehnübersetzung vom griechischen éntomon = Insekt
(zu entémnein = einschneiden), was sich heute in Begriffen
wie der Entomologie (Insektenkunde) spiegelt. Früher wurde
auch der wissenschaftliche Name Hexapoda (griechisch für
Sechsfüßer) verwendet, der heute für eine übergeordnete
Gruppe reserviert ist (siehe dazu die Anmerkung im Systematik-Abschnitt weiter unten). Die Wissenschaft von den
Insekten ist die Entomologie.
11
IMAGE DER INSEKTEN IN DEN MEDIEN
Außerdem treten die Insekten in anderer Form in Literatur
und Fernsehen in Erscheinung. In Nachrichten, Berichten
und Dokumentationen werden neue Erkenntnisse über die
Faszination Insekten gezeigt. Die Flugkünste von Fliegen
und Libellen inspirieren die Luftfahrt. Außerdem kann der
Einsatz von chemischen Mitteln gegen Schädlinge durch den
Gebrauch von sogenannten Nutzinsekten als biologische
Schädlingsbekämpfung wirkungsvoll ersetzt werden.
Hier unterscheidet man die Pflanzenfressenden Insekten,
die Schädlinge, von den räuberischen Insekten, den Nützlingen. Beispielsweise wird der Marienkäfer vor allem im
Bio-Weinanbau als Nützling eingesetzt, da er Schädlinge wie
die Blattlaus in Schach hält. Diese Methoden erhalten seit
dem Bio-Boom vermehrten Einzug in die ökologische Landwirtschaft und durch die Medien auch in das Bewusstsein der
Menschen.
DOKUMENTATION INSEKTEN WG
Die Zeitschrift GEO kompakt Nr. 11-06/07 glänzte mit einer
bemerkenswerten Fotostrecke über die Sechsbeiner. Der
Fotograf Gilles Mermet setzte die exotischen Artgenossen in
Szene und zeigte die Schönheit der Insekten.
12
Unten: Bilder aus einer Fotostrecke von Gilles Mermet, gezeigt in der GEO kompakt
Oben: Ein Wallpaper zu dem im Dezember in die deutschen Kinos kommenden
Animationsfilm BEE MOVIE.
Unten: Ein Filmplakat des aus dem Jahre 1977 stammenden Films Empire of the Ants
IMAGE DER INSEKTEN IN DER RELIGION
„Weigerst du dich aber, mein Volk ziehen zu lassen, siehe, so
will ich morgen Heuschrecken kommen lassen über dein Gebiet,
daß sie das Land so bedecken, daß man von ihm nichts mehr
sehen kann. Und sie sollen fressen, was euch noch übrig und verschont geblieben ist von dem Hagel, und sollen alle Bäume kahlfressen, die wieder sprossen auf dem Felde; und sie sollen füllen
deine Häuser und die Häuser deiner Großen und aller Ägypter,
wie es nicht gesehen haben deine Väter und deiner Väter Väter,
seit sie auf Erden waren, bis auf diesen Tag.“
Lutherbibel, Das zweite Buch Mose
Die Angst vor Insekten und Spinnen ist so alt wie die
Menschheit selbst. Drei der zehn biblischen Plagen die im
13. Jahrhundert v. Chr. das Land Ägypten plagten, waren
Verderben bringende Insekten. Im 2. Buch Mose des Alten
Testaments wird berichtet das Stechmücken, Ungeziefer und
Heuschrecken das alte Land heimsuchen, da der Pharao sich
weigert Aaron, den älteren Bruder Moses, ziehen zu lassen,
um das Volk Israel aus der Sklaverei zu führen. In der Angst
um die Ernte und das gesundheitliche Wohlergehen werden
die Tiere seither als Plage angesehen.
RECHERCHE INSEKTEN WG
Eine Reihe von Insekten sind als Schädlinge oder Parasiten bekannt. Manche von ihnen übertragen tot bringende
Krankheiten. Wo die kleinen Tiere in die Nähe von Menschen
kommen, werden sie selten willkommen geheißen.
Dieses Image wird in der Medienwelt verstärkt.
Arac Attack, Escape from Bug Island, Empire of the Ants sind
nur einige Filme in denen Insekten und Spinnen zu monsterartigen Killern werden. Vor allem die Spinne fasziniert in
vielerlei Hinsicht und inspiriert die Medienschaffenden. Im
Film Wild Wild West wird vom Bösewicht ein neumodisches
Transportmittel erfunden, welches einer Spinne gleicht.
Spiderman hat die Eigenschaften einer Spinne, und rettet mit
diesen oft unschuldige oder in Not geratene Menschen.
Serien und Filme wie Biene Maja, A bugs life, Antz oder der
demnächst erscheinende Bee Movie schaffen Sympathien
mit den Kleintieren. Bücher wie Die kleine Raupe Nimmersatt
erfreuen Kinderherzen.
13
ZEITPLAN
Von oben nach unten:
Die ungarische Illustratorin Róth Anikó präsentiert ihre Werke in animierter Form:
www.rothaniko.hu
Die Macher von Wallace und Gromit haben präsentieren sich durch eine illustrative,
Ausgabe der Bachelorarbeit:
Abgabe inkl. Verlängerung:
Kolloquium:
19.06.2007
25.09.2007
08.10.2007
gezeichnete Optik: www.aardman.com
Die Website des Computerspiels Rayman arbeitet mit 3D in Flash:
http://raymanzone.us.ubi.com/ravingrabbids
Juni
Juli
August
September
Oktober
Die amerikanische Versicherungsgesellschaft Traveler arbeitet mit Computergrafik:
www.travelersinsynch.com
Konzeption
Recherche
Illustration analog
Illustration digital
Programmierung
Charakterentwicklung
Animation
Designentwicklung
Optimierung
Sonstige Daten
Erste Animationstests
Neudefinition des Themas
Fertigstellung des Logos
Erster Upload
21.07.2007
11.08.2007
01.09.2007
03.09.2007
ILLUSTRATION IM WEB
14
Aufgrund des Arbeitsumfangs der Bachelorarbeit war eine
Verlängerung der Bearbeitungszeit nötig.
Dies wurde vor allem an einem ersten Zeitplan sichtbar. Es
fehlte an Zeit um sich mit allen Aufgaben des Projekts sorgfältig zu beschäftigen.
Folglich wurde der Zeitplan auf die neue Bearbeitungszeit
angepasst und aktualisiert.
Anhand der Daten wird sichtbar, dass die neue Einteilung
und Kalkulation des Aufwandes realistisch war und eingehalten werden konnte.
RECHERCHE INSEKTEN WG
DOKUMENTATION INSEKTEN WG
Die bewegte Illustration erhielt ihren Einzug in das Web
mit der DSL-Generation und der vermehrten Verbreitung
des FlashPlayers. Immer schnellere Internet-Verbindungen
und Prozessorleistungen ermöglichen dem Webdesigner
aufwendige Grafiken und Animationen im World Wide Web,
die von den Benutzern begeistert angenommen wurden.
Die meisten Illustrationen in der Netzkunstszene werden
digital angefertigt. Hier kommen die Bildgewalten direkt aus
3D-Programmen, Photoshop oder Illustrator. Die Vektor- oder
Pixelbasierten Formate werden in Flash in Bewegtbilder umformuliert und Webtauglich gemacht.
15
Die Insekten WG bei Tag
DESIGN
GESTALTUNG INSEKTEN WG
GESTALTUNG
Das Design steht und fällt mit dem optischen Erscheinungsbild des Hauses. Die typografischen Bestandteile und
das Logo sollten sich an die illustrativen Elemente optisch
anschmiegen. Sie sollten aber ebenfalls verspielt und harmonisch wirken, allerdings auch einen Kontrast zum Illustrativen
bilden. Dies wird durch die handgemachte Optik des Logos
gewährleistet, welches trotzdem in klaren Linien gezeichnet
ist. Die Oberfläche wirkt durch ihre analoge Optik und ihren
Detailreichtum warm, bunt und geheimnisvoll.
Abwechslungsreichtum ist durch die verschiedenen Stile
der Räume gegeben. Dennoch erscheinen die Zimmer und
das Haus zusammengehörig, da die Räume den gemeinsamen Nenner, die gleiche Feder, haben.
17
LOGO & TYPOGRAFIE
Bei der Suche nach der geeigneten Schrift für das Logo
schien jede Schrift entweder zu technisch, zu verschnörkelt
oder zu handgeschrieben. Ziel war es, eine Schrift zu finden,
die nicht technisch aussieht, allerdings auch nicht auf den
Zug der hippen Trashschriften aufspringt. Handschriften waren entweder zu sehr Comicstyle oder zu langweilig. Schließlich wurde das Logo, um dem gegebenen Stil gerecht zu werden, komplett handentworfen und vektorisiert. Ebenso sollte
das Thema Insekten in dem Logo aufgegriffen werden. Nach
einigen Skizzen entstand schnell der heutige Entwurf. Das,
im wahrsten Sinne des Wortes, i-Tüpfelchen des Logos ist
eine Fliege, die nach einer kurvigen Flugbahn um das Logo
dieses komplettiert. Es gleicht sinnbildlich einer Fotografie,
bei der der Fotograf den richtigen Moment abgewartet hat.
Dieses Logo ist in verschiedenen Farbvarianten für die jeweiligen verschiedenen Untergründe verfügbar. Der Schriftstil
des Logos wurde auch auf andere typografische Elemente
angewendet, wie beispielsweise auf die Profilnamen und den
Preloader, der zwischen verschiedenen Räumen den aktuellen Ladestatus angibt.
18
Prozess der Logoentwicklung
Logo-Varianten
Die verschiedenen Logovarianten sind für unterschiedliche Untergründe konzipiert worden. Steht das Logo auf
einem farbigen Grund, werden die linken Varianten benutzt.
Steht die Bildmarke auf weißem oder sehr hellem Grund,
dann werden die rechten Varianten benötigt.
GESTALTUNG INSEKTEN WG
DOKUMENTATION INSEKTEN WG
Auf der Website ist eine zweite Schrift zu sehen, die für
kleine Texte verwendet wird. Aufgrund von Schriftdarstellungsproblemen von Flash (trotz Antialiasing) wurde hier zu
einer sogenannten Pixelschrift, der Bit6 gegriffen. Diese Pixelschriften sind für eine bestimmte Punktauflösung auf dem
Monitor entwickelt worden. Bei deaktiviertem Antialiasing
in Flash und Benutzung einer Pixelschrift in der genannten
Punktzahl kann Flash den Font ohne Probleme scharf darstellen.
19
ILLUSTRATIONEN
Die Illustrationen sind mit Hilfe so genannter Mischtechniken entstanden. Gezeichnet wurde größtenteils auf
Aquarellpapier im Format DIN A2. Die Konturen wurden
mit schwarzer Künstlertusche gezogen. Koloriert wurde mit Aquarell, Acryl, Buntstift und Pastell. Außerdem
wurde viel mit Papier und Pappe gefertigt. Der Detailreichtum der Arbeiten ist nur möglich, da die Vorlagen in einem großen Format angelegt worden sind.
Darüber hinaus mussten die Räume und das Haus im Vorfeld gut durchdacht sein, um schon vor der ersten Linie zu
wissen, wo bestimmte Insekten sich verstecken. Positionen
von Collage-Elementen mussten geplant und vorskizziert
werden.
20
WORKFLOW
Schritte am Beispiel Badezimmer:
Schritt 1:
Erstellung der analogen Vorlage
Digital: Texturen, Fotografien
Schritt 2:
Erstellung von Masken und Färbung der
Flächen
Schritt 3:
Einfügen von Schattenflächen und
Texturen
GESTALTUNG INSEKTEN WG
DOKUMENTATION INSEKTEN WG
Techniken der unterschiedlichen Räume:
Haus:
Analog: Tusche, Aquarell, Acryl, Marker,
Strohseidenpapier
Digital: Texturen, Fotografien
Küche:
Analog: Tusche, Aquarell, Papier, Pappe,
Kreide, Stempelkissen
Bad:
Analog: Tusche, Marker
Digital: Texturen
Wohnzimmer: Analog: Tusche, Aquarell, Marker,
Digital: Collageelemente aus freien Fotografien, gescannte Papiere, Texturen
Schlafzimmer: Analog: Tusche, Aquarell, Acryl
Digital: Tapetenmuster
Dachboden: Analog: Tusche, Aquarell, Stempelkissen
Turm:
Analog: Tusche
Digital: Collageelemente aus freien Fotografien, Texturen
21
Standard-Buttons
Navigationshilfe-Button
Profil-Icons
Oben: Ein Wallpaper der Insekten WG mit der frustrierten Hummel namens Iso
Links: Das Profil des Glühwürmchens Öfff
ICONS
22
CHARAKTERENTWICKLUNG
Die Insekten in der WG stehen, wie auch Menschen, in sozialer Beziehung zueinander. Außerdem haben sie verschiedene Hobbys, Vorlieben, Eigenarten, Probleme und Ängste.
Die daraus entstehenden menschlichen Charakterzüge lassen uns die spezielle Welt dieser Insekten besser verstehen.
Diese Charaktereigenschaften sind in Profilen zusammengefasst und, sobald man einen Krabbler entdeckt hat, abrufbar.
Der User soll diese entdecken und sammeln können.
GESTALTUNG INSEKTEN WG
DOKUMENTATION INSEKTEN WG
Die Icons haben beim Durchspielen der Insektenwelt eine
wichtige Rolle. Sie befinden sich außerhalb des Rahmens, der
den animierten Content zeigt. Es gibt drei Arten von Icons.
Zum einen gibt es die Standard-Buttons: Ton aus/an, Home,
Info und Impressum. Klickt der User auf das Fragezeichen
(Info), erhält er eine Bedienungsanleitung für diese Website.
Außerdem wird man auf den Wegweiser-Button hingewiesen. Dieser Button blendet eine Navigationshilfe in Form
einer vereinfachten Hausansicht ein, mit Hilfe derer sich der
Nutzer orientieren kann. Er sieht in welchem Raum er sich
befindet, in welchem er schon war und welcher noch unentdeckt auf ihn wartet. Die dritte Art von Icons sind die 17
Insekten-Icons, die aktiviert werden, sobald man das zugehörige Insekt per Klick entdeckt hat.
23
PROGRAMME
Gearbeitet wurde mit verschiedenen Programmen, die
jeweils andere Aufgaben hatten. Der Workflow unter diesen
Programmen musste daher fehlerfrei und flüssig verlaufen,
welches mit einer intelligenten Ordner- und Namensstruktur
bewerkstelligt werden konnte.
Photoshop
Hier wurde jegliche Bildbearbeitung durchgeführt. Nach
dem Scannen der analogen Vorlage wurden die A4-Scans
wieder zu einem ganzen zusammengesetzt und in Photoshop bearbeitet. Nach einer Farbtonkorrektur wurde die
Vorlage dann weiterbearbeitet. Je nach Raum wurden Texturen und Collageelemente hinzugefügt. Die Ebenen wurden
separat erstellt. Auch die Insekten wurden in Photoshop
freigestellt und bearbeitet.
ImageReady
Das „Für Web Speichern“-Tool von ImageReady ermöglichte es die Vorlagen in einer guten Qualität und mit Transparenzen als PNG zu speichern. Da ein PNG nach dem Import in
Flash grundsätzlich einer Gamma-Verschiebung unterliegt,
musste darauf geachtet werden die Bilder etwas dunkler
abzuspeichern um im Web das richtige Farbergebnis zu
erzielen.
TECHNIK INSEKTEN WG
TECHNIK
Illustrator
Bildelemente wie das Logo, die selbst erarbeiteten Schriften, die Preloader und Icons wurden in Illustrator erstellt. Da
Illustrator Vektoren erzeugt, kann Flash, das ebenfalls ein
vektorbasiertes Programm ist, diese Dateien direkt verarbeiten. Dabei bleiben sie in Flash bearbeitbar.
25
HTML/JavaScript
Flash
26
Welt SWF dynamisch
Nachdem die maximal 5 Ebenen eingepflegt und angepasst wurden konnte mit den Animationen begonnen werden, die sich ebenfalls auch auf den verschiedenen Ebenen
befanden. Problematisch war hier, dass die Insekten ihre
Ebene nur wechseln konnten, wenn sie sich einmal aus dem
Format bewegten (Beispiel Stubenfliege im Badezimmer).
War eine Welt fertiggestellt, wurde sie als SWF abgespeichert. Um zu vermeiden das der User alle Daten auf einmal
vorausladen muss, wird jede Welt dann geladen, wenn sie
erforderlich ist. Dies wird durch ein Containersystem verwaltet. Der Container ist ein SWF, bestehend aus dem Rahmen
mit den Icons. Darin liegt ein leerer Movieclip.
In diesen werden die SWFs ge- und entladen. Will ein
Anwender von der Küche in das Bad, wird das SWF der Küche
entladen und das SWF des Badezimmers geladen. Um beim
Laden keine unerwartete Unterbrechung zu sehen wird
ein Preloader angezeigt, der die erforderliche Datenmenge
vorlädt. Diese Baumstruktur ermöglicht ein einfaches Handling der Dateien und eine simple Erweiterbarkeit. Darüber
hinaus sind generelle raumübergreifende Einstellungen
durch die Containerstruktur möglich. Ist ein Insekt entdeckt,
wird es im Container-Movie freigeschaltet und bedarf keiner
weiteren Abfrage durch weitere, neu geladene SWFs. Ebenso
geschieht die Raumfreischaltung in dem Container. Bei der
Problematik, dass das Intro nicht zu groß werden sollte, war
an der Stelle sogar erforderlich zwei Movies übereinander zu
laden um keine Verzögerung bei dem Schnitt von der Totalen
in die Nahe des Hauses zu haben.
Hauptfilm SWF konstant
Aufbau der Website www.insektenwg.de
GoLive & FTP
In GoLive wird das SWF in eine HTML-Seite eingebunden. Für einen nahtlosen Übergang wurde die gleiche
Farbe für die Hintergrundfarbe des HTML-Dokuments
verwendet, in der der Rahmen in Flash gefärbt ist.
Da alles in Flash programmiert wurde, waren die Ausmaße
der HTML- und JavaScript-Programmierung im Verhältnis
zum ActionScript gering.
Einige Meta-Tags für die Suchmaschinenoptimierung
und eine JavaScript Abfrage für die geeignete Flash-Version
waren erforderlich. Ein Favicon schmückt die Adresszeile des
Browsers mit einer kleinen Fliege.
Die FTP-Freeware Cyberduck ermöglicht das hochladen
der Website auf den Server. Erst nach diesem Schritt ist die
Internetpräsenz unter der Domain www.insektenwg.de zu
begutachten. Onlinetests in einem Testverzeichnis sind bei
der Entwickelung einer Website unablässlich.
SOUND
Der Ton sollte von Anfang an in diesem Projekt nur dezent
und akzentuiert eingesetzt werden. Auf eine Hintergrundmusik wurde bewusst verzichtet. Dies verleiht den Soundelementen, die vor allem bestimmte Bewegungen und Spielereien unterstützen sollen, ein größeres Gewicht.
Für die Besucher der Website, die trotz zurückhaltender
Soundeffekte nichts hören wollen gibt es einen Ton aus/anButton.
TECHNIK INSEKTEN WG
DOKUMENTATION INSEKTEN WG
Flash
In Flash wurde alles vereinigt und vernetzt, hier wurde die
Insekten WG programmiert und animiert. Nachdem die PNGs
importiert und in der Bibliothek sortiert wurden, begann
die Anpassung der Ebenen auf der Bühne. Diese werden mit
dem Parallax-Scrolling-Verfahren animiert,wobei sich der
Vordergrund, im Vergleich zum Hintergrund, schneller bewegt.Unter der sogenannten Bewegungsparallaxe versteht
man in der Wahrnehmungspsychologie den Effekt, der sich
optisch ergibt, wenn verschiedene Ebenen unterschiedlich
von einander entfernt in einer Umgebung verteilt sind und
diese sich in unterschiedlicher Geschwindigkeit zum sich bewegenden Beobachter verschieben. Dieser Effekt ist zum Beispiel bei einer Autofahrt zu beobachten, bei der die Objekte
in unmittelbarer Nähe an dem Betrachter vorbei schnellen
und Objekte in der Ferne augenscheinlich stehenbleiben.
Diese Scheinräumlichkeit lässt sich in Flash erzeugen,
wenn sich die Ebenen in unterschiedlicher Schnelligkeit
zueinander bewegen. Bewegt sich der Benutzer mit der Maus
in eine Richtung, ensteht zum einen der Eindruck einer Veränderung der Perspektive (ähnlich einer Kamerafahrt), zum
anderen ensteht der Eindruck der Räumlichkeit, indem sich
der Vordergrund schneller bewegt als der Hintergrund.
Maßgebend war hier die Hauptebene, die in allen Fällen
den Raum als solches zeigt. Ebenen hinter dieser Ebene waren zum Beispiel der Himmel oder der Garten, der durch das
Fenster zu sehen war. Vordergrund-Ebenen bildeten Tische,
Pflanzen, Lampen, etc. Um den Effekt nicht „auffliegen“ zu
lassen musste darauf geachtet werden im Vordergrund nie
Elemente mit der Verbindung zum Fußboden zu zeigen, da
sich dann der Untergrund zum Vordergrundobjekt verschieben und der Fußboden zum Fließband würde.
27
NAVIGATION
Die Navigation auf der Internetseite ist Teil des Spiels. Es
gibt eine Art Start und Ziel. Hat der User nicht den Ehrgeiz
sich durch diese Räume zu arbeiten, wird er auch nicht mit
den Animationshäppchen und Specials belohnt.
PROGRAMMIERUNG
28
Turm
Dachboden
Unten: Navigationshilfe für den User
Gästebuch
Schlafzimmer
Wallpaper
Kontakt
Bad
Küche
Wohnzimmer
TECHNIK INSEKTEN WG
DOKUMENTATION INSEKTEN WG
Eine klare Strukturierung der Dateien war bei dem hohen
Datenvolumen essentiell. Es wurde so viel ActionScript wie
möglich auf einer seperaten Ebene der Hauptzeitleiste angeordnet. Außerdem wurde die Kommentarfunktion von Flash
dazu benutzt, möglich viele Erklärungen und Struktur in das
Script zu bringen. Hierbei wurde größtenteils auf ActionScript 2.0 umgestellt.
Mit Punktnotationen konnte man verschachtelte Movieclips von der Hauptzeitleiste ansteuern.
Sogenannte Flaggen halfen dabei, bestimmte Zustände abzufragen. Ob der Kühlschrank auf (auf=true) oder
(zu=false) ist , wird anhand einer Flagge geprüft, damit
anschließend die passende Animation ausgeführt werden
kann. Wenn die Prüfung der Flagge ergibt, dass der Kühlschrank zu ist, wird beim Klick der Kühlschrank geöffnet und
andersherum. Sitzt nun ein animiertes Insekt im Kühlschrank,
benötigt es ein Start- und ein Endsignal für die Animation
und einen Moment in dem es angeklickt werden kann. Dies
wird ebenfalls durch eine Flaggenvariable signalisiert.
Häufig benutzte Befehlsfolgen wurden in Funktionen umformuliert und an der benötigten Stelle aufgerufen. Ein Ziel
war es, beispielsweise mit möglichst wenig Programmieraufwand und Ebenenunabhängig die Insekten-Icons zu aktivieren. Zunächst wurden alle Tiernamen in einem Array gespeichert. Anschließend wurden Movieclips per ActionScript aus
der Bibliothek geholt und über die eigentlichen Tierbuttons
gelegt. Diese zeigten den Zustand der Inaktivität an und verhinderten, dass der Button angeklickt werden konnte. Diese
Platzierung geschah über einen Schleifenaufruf der Tier-IconPlatzierungsfunktion mit Zählervariable für alle Elemente des
Tierarrays. Die Instanznamen der Movieclips wurden dabei so
gewählt, dass sie mit dem Tiernamen begannen und danach
immer gleich endeten, z.B. spinneinaktiv_mc, grilleinaktiv_mc. So war es möglich durch eine Addition des Strings
die Operationen mit nur einer Funktion auszuführen. Ähnlich
einfach war dann die Entfernung der Elemente, wenn ein
Insekten-Icon aktiviert werden sollte. Der Movieclip wurde
durch den Aufruf einer Löschfunktion entfernt, die im jeweiligen Film beim Klick auf das Insekt mit seinem Namen als
Parameter aufgerufen wurde. So ergab sich der genaue Pfad
des zu entfernenden Movieclips dynamisch. Auf ähnliche
Weise wurden die Profile der Insekten als externe SWFs geladen und wieder entladen. Mit globalen Variablen konnten
filmübergreifende Werte und Flaggen übergeben werden.
Insekten
Haus Außen
29
Die Grille springt auf die Haustreppe.
Hierbei müssen vor allem die Beine eine starke Bewegungsveränderung zeigen.
In dem letzten Schritt findet kein Positionswechsel statt.
Nachdem die Grille gelandet ist, ziehen sich die Beine zurück
an den Körper in die Normalstellung.
Rechts unten: Die Animation der Grille in der Totalen benötigt nicht so viele Detailveränderungen. Hier reichen drei
Zustände um einen Sprung darzustellen.
ANIMATIONEN
30
ANFORDERUNGEN
Die Anforderungen gelten sowohl für den Anwender, als
auch für die Internetverbindung und den Computer. Der Anwender sollte ein erfahrener Surfer sein, dem der Gebrauch
von modernen Webpräsenzen und deren Vielschichtigkeit
nicht schwerfällt. Damit würden Kinder und Senioren im
Normalfall nicht zu der Zielgruppe gehören. Der User sollte
einen DSL-Anschluss besitzen um nicht mit allzu langen Ladezeiten konfrontiert zu werden. Ein für heutige Verhältnisse
leistungsstarker Prozessor ist eine weitere Vorausetzung, da
das Scrolling vom Prozessor in Echtzeit berechnet wird. Des
weiteren wird der FlashPlayer 8 vorausgesetzt. Dieser ist notwendig um beispielsweise die Überlagerungsmodi anzeigen
zu können und wird somit schon im Intro benötigt. Ist der
Player nicht vorhanden, stellt eine JavaScript-Abfrage sicher,
dass der Besucher ein Alternativ-Bild zu sehen bekommt.
Dies enthält den Hinweis, sich auf der verlinkten Seite den
passenden FlashPlayer für sein Betriebssystem herunterzuladen.
TECHNIK INSEKTEN WG
DOKUMENTATION INSEKTEN WG
Die aufwendigsten Animationen waren die der Insekten. Nach dem Entwurf der Insekten auf dem Skizzenblock,
wurden ihre Körperteile noch einmal einzeln auf ein weißes
Blatt Papier gebracht. Dabei wurden sogar die Segmente der
Insektenbeine einzeln gezeichnet. Alle Körperteile wurden
in Photoshop freigestellt und farbkorrigiert. Anschließend
wurden sie als PNG gespeichert und in Flash importiert.
In einem Movieclip wurde dann das Insekt zusammengesetzt. Hierbei war es wichtig alle Elemente auf unterschiedlichen Ebenen zu platzieren. Dieser Movieclip
wurde in einem neuen Movieclip platziert (zum Beispiel
ebene_mc.grillesprung_mc.grille.mc). Auf der Zeitleiste der
ebene_mc befindet sich ein Keyframe mit dem Movieclip
grillesprung_mc. In diesem Movieclip ist die Bewegung des
Körpers entlang eines Pfades bewegt worden. Angepasst mit
Beschleunigung sah diese Animation noch sehr statisch aus,
da sich die Grille an sich nicht bewegte. Der schwierigere Teil
lag im Movieclip grille_mc. Hier wurden die einzelnen Körperteile passend zu den Framezahlen des Sprungs animiert.
Dabei fanden zwei Arten von Animationsarten Verwendung.
Zum Einen die Einzelbildanimation, in der Position oder Objekt Keyframeweise verändert werden. Zum Anderen wurde
so oft wie möglich das Tweening von Flash verwendet, um
die Bilder zwischen zwei Keyframes zu animieren.
31
Produktbeispiel Herren-T-Shirt
VERMARKTUNG
AUSBLICK
Die Insekten WG kann beliebig erweitert werden. Neben
der Möglichkeit, die Räume mit mehr Animationen und Insekten zu versehen ist die Erweiterbarkeit der Welten nahezu
grenzenlos. Es könnten noch Räume hinter der Küche angebaut werden, ohne das Haus in der Frontalansicht verändern
zu müssen. Außerdem könnten Miniaturwelten hinzugefügt
werden, demnach könnte es die Welt Im Kühlschrank oder
Hinter dem Sofa geben, wo sich noch kleine Krabbler verstecken. Abgesehen von der Erweiterbarkeit der Räume könnten noch andere Elemente eingebaut werden.
Zum Beispiel könnte ein Gameboy, der auf dem Küchentisch liegt den Weg zu einem Insekten WG-Spiel darstellen.
Dem Spieldrang nach versteckten Erweiterungen sind keine
Grenzen gesetzt.
AUSBLICK INSEKTEN WG
ERWEITERUNGEN
Je nach Besucherzahl und Feedback von den Usern soll
die Marke Insekten WG auf anderen Kanälen etabliert werden.
Es wäre möglich einen Shop in die Website zu integrieren,
in dem unterschiedlichste Produkte der Insekten WG zum
Verkauf angeboten werden. Textilien, Postkarten, InsektenStofftiere, Schlüsselanhänger, Tassen und Aufkleber können
nur ein Teil davon sein. Zu den möglichen Vorbildern zählt
die Vermarktung der Diddl-Maus, die zwar auf eine jüngere
Zielgruppe ausgerichtet ist, allerdings sehr erfolgreich mit einer gewaltigen Anzahl von unterschiedlichen Artikeln ist. Ein
Beispiel in Sachen Zielgruppe wären die Konsumenten der
UglyDolls. Die Macher der UglyDolls haben es geschafft, 15-30
Jährige dazu zu bringen, sich wieder Stofftiere zu kaufen.
Anfangs würde man die Artikel exklusiv im Shop kaufen
können. Je nach Beliebtheit würde man das Sortiment erweitern und den Einzelhandel in das Visier nehmen. Alles in
allem ist das Webprojekt eine günstige Wahl, die Beliebtheit
einer neuen Marke zu testen, um das Konzept der Vermarktung anschließend nach Bedarf anzupassen und zu erweitern.
33
QUELLEN
Texturen
http://mayang.com/textures
http://www.textureking.com
Sounds
http://www.hoerspielbox.de
http://www.flashkit.com
The German Sound Library
Impressum
Das Impressum wurde von Dr. iur. Thomas Platena,
Dozent an der FH Lippe und Höxter, zur Verfügung gestellt.
ERKLÄRUNG
RECHTLICHES INSEKTEN WG
Hiermit versichere ich, dass ich die vorliegende Bachelorarbeit selbstständig und ohne fremde Hilfe verfasst und keine anderen als die in der Arbeit angegebenen Quellen und
Hilfsmittel verwendet habe. Die Stellen, die anderen Werken
dem Wortlaut oder dem Sinn nach entnommen wurden,
habe ich durch die Angabe der Quelle als Entlehnung kenntlich gemacht.
RECHTLICHES
Mareike Ottrand
35
DATEN-CD INSEKTEN WG
INSEKTEN WG DATEN
DATEN-CD
37