Sonstige Sites - "Ernst Gemeintes" & Verspieltes *

Diese kleine Seite - nur 1 Seite, keine Navigation, Inhalt 600 px breit - war eigentlich für Demonstrationszwecke für die Beschreibungen eines Spiels beiPrior Art Männchen von 2012 gedacht. Wieso ist sie jetzt herausgelöst und an dieser Stelle als eigenes Projekt vorgestellt? Weil ich im Jahre 2015 eine völlig andere Darstellung / andere "Programmier"-Logik gewählt habe, was Fehlermeldungen und Lösungen betrifft. So sieht sie aus - zum Spielen hier klicken (oder in's Bild).

Die erste Aufgabe

Platziert ist das Originalbild in Klein und ein etwas reingezoomter Ausschnitt. Hier im Ausschnitt ist die Illustration an einigen Stellen verändert. Die erste Aufgabe ist es, die Fehler (Unterschiede) zu ermitteln und die Fehleranzahl ins Kästchen unter dem Bild einzugeben. Die Eingabe des Spielers wird anhand eines Scriptes auf dreierlei Weise geprüft.

Dementsprechend gibt's 3 verschiedene Reaktionen des Scripts, d. h. der Spieler kann 3 Meldungen erhalten: 1., dass er eine Zahl eingeben soll - falls er einen Buchstaben oder ein Wort eingegeben hat. 2., dass er sich verzählt hat - wenn er die falsche Zahl eingegeben hat. 3., dass er richtig gezählt hat - bei Eingabe der korrekten Fehleranzahl.

Die Meldungen können jeweils vom Spieler durch Klick darauf wieder geschlossen werden. Das Script leert gleichzeitig das Eingabefeld für den nächsten Versuch. - Bei Klick in's Eingabefeld wird es hellgrün; der Platzhaltertext "Zahl" steht darin (Javascript onFocus).

Die zweite Aufgabe

Das fehlerhafte Bild ist als verweissensitive Grafik hinterlegt. Um die Fehler im Bild herum sind klickbare Rechtecke definiert. Wird mit der Maus über das Bild gefahren - die "Fehlersuche" - wird der Cursor zum Zeigehändchen und sagt "Hier?". Bei Klick auf diese Bereiche erscheint unten je das falsche Detail (mit einem roten "F"), daneben das richtige Detail (mit einem grünen "R"), und ein kurzer Satz erläutert das Ganze.

Wird ein neuer fehlerhafter Bildbereich angeklickt, wird der Inhalt unten - falsches Detail, richtiges, etc. - mit der neuen Fehlererläuterung ausgetauscht. Das Script ist so geschrieben, dass jegliche Fehlererläuterung auch dann wieder verschwindet, wenn der Spieler von dieser zweiten Aufgabe noch einmal hoch zur ersten springt und etwas in's Textfeld eingibt. Die Erläuterung mit den Bildern unten wird dann nicht unschön überdeckt, sondern wieder unsichtbar.

Dieses Mini-Spiel unterscheidet sich von der Vorlage von 2012 vor Allem in der Anzeige der Warnmeldungen. Damals nutzte ich Popup-Fenster, um die Meldungen "Richtig gezählt, gut gemacht!", etc., mitzuteilen. Heutzutage werden Popup-Fenster meist eher als nervig empfunden; dank Css in Verbindung mit ein wenig Javascript sind sie auch unnötig geworden: Javascript onClick ändert die Css-Klasse zu "display:none;".

Wenn eine Warnmeldung wie hier in diesem Fall ein Texteingabefeld verdeckt und zudem in auffälliger Farbe gehalten ist, kann der Spieler gar nicht anders, als die Meldung zu lesen. Der ganze pinke Kasten bzw. der ganze "Lob-Block" (siehe rechts) sind durch Klick darauf schließbar - nicht nur durch Klick auf das . Insgesamt ist die Spiel-Gestaltung dieser Extension also benutzerfreundlicher als die von 2012.

Wenn Familienmitglieder oder der beste Freund Geburtstag haben und ich weiß, ich werde das Geburtstagskind an diesem Tag nicht sehen, sende ich gern einen online gestellten Geburtstagsgruß in Form einer Mini Site mit Animation. Das Ganze muss zeitig geplant werden, da einige Morgende und Abende bei der Erstellung der Animation vergehen.

Von links nach rechts: Juni 14: tanzende Kerze | Juli 15: Sonnenblume | August 15: Hase | Juli 15: Konfetti

Wie fange ich an?

Zuerst überlege ich mir entweder ein grobes Storyboard oder starte mit der Zeichnung irgendeiner Figur, um auf Ideen zu kommen. Bei Ini hatte ich die Idee einer tanzenden Kerze, bei Anki die einer sich aufbauenden Blume, bei Jörg zeichnete ich mehrere Figuren und entschied mich dann für den Hasen; bei Mama ließ ich von einem Taschentuchpäckchen inspirieren: mir gefielen die Punkte darauf in kräftigen Farben...

... so kam mir die Idee, dass sich das Bild zuerst mit farbigen Konfetti-Punkten aufbaut, bis es komplett bunt bedeckt ist, dann kommen die Worte. Anrede, Wortgruppen und/oder Sätze gibt es bei jeder Animation. Ein "Happy Birthday" bzw. "Herzlichen Glückwunsch" ist immer mit dabei sowie erläuternde oder beschreibende Sätze vor und nach dem Gruß.

Das Storyboard

Das sah für Jörgs Animation wie folgt aus: Die Tierfigur baut sich auf, indem zunächst jedes "Tierteil" (Ohr, Arm, Leib) zusammen mit einem Wort erscheint, bis Figur komplett ist und der Satz "Das ist der Geburtstagsbär" da steht. Das "Bär" leuchtet... Das Tier verliert sein Lächeln, wird sauer, fragt "Was für'n Tier?", da es ein Hase ist. "Bär" wird durchgestrichen, "Hase" erscheint. "Mit Farbwechsel" wird angekündigt; Hase wechselt eine Weile wild die Farbe...

... "der Dir gratuliert" erscheint, Blumenbukett füllt Bild aus, tritt zurück, bis in Hases Arm liegend. Dann hintereinander "Happy", "Birthday", "lieber", "Jörg". Dann verblassen Hase und Satz und in der Farbe des Hasen steht Abschlusssatz da. - In der Praxis fange ich meist die Animation an, ohne das Storyboard komplett im Kopf zu haben. Während der Gestaltung komme ich auf weiterführende Ideen oder erkenne, dass eine Idee nicht so funktioniert, wie ich mir das vorgestellt habe.

Oder dass es anders viel besser wäre: zum Beispiel sollte bei obiger Story der Hase einen Blumenstrauß hinter dem Rücken hervorholen, nachdem der Farbwechsel des Hasen stattgefunden hat. Doch dann wollte ich genau an jener Stelle eher einen Knalleffekt, da der Hase schon so "lange" in dieser Stellung dasteht. Und der Knalleffekt besteht nun darin, dass der Blumenstrauß ganz plötzlich fast das ganze Bild ausfüllt und mit seinen Farben nahezu blendet... dann "zieht" er sich in kurzen Schritten "zurück", bis er im Arm des Hasen liegt. Es wirkt also, als würde der Strauß ruckartig vor die Kamera gehalten - ein guter Kontrast zum "ruhigen", lächelnden Hasen.

Vorgehen beim Bau der Animation - Beispiel Konfetti

Die Filmchen erstelle ich als GIF-Dateien in Photoshop. Für die Konfetti-Animation zeichne ich zuerst einen einzelnen farbigen Punkt auf weißem Hintergrund. Dieser Punkt ist der erste Frame (= Phasenbild), so etwas wie eine Standszene. Der nächste Punkt, der dazukommt, bildet den zweiten Frame = 2te Standszene. Ich lege fest, wie viel Zeit zwischen erster und zweiter Szene vergehen soll. In diesem Fall, je von Punkt zu Punkt, sind es entweder 0,15 oder 0,2 Sekunden.

Mit 104 Frames baue ich den Konfettihintergrund auf, das heißt ich zeichne 104 Punkte mit immer anderer Farbe und immer anderer Position und lege die Zeit fest, die vergehen soll, bis ein neuer Punkt (= Frame) dazukommt. In der 105ten Szene schreibe ich links oben das Wort "Happy". In der 106ten Szene dupliziere ich das Wort, mache es größer; mache das kleinere "Happy" unsichtbar. In der 107 Szene setze ich das große "Happy" auf unsichtbar, das kleinere auf sichtbar. Zwischen diesem Größenwechsel liegen je 0,5 Sekunden. Die Wirkung: "Happy" ploppt nach vorn und wieder zurück. In Szene 108 kommt das Wort "Birthday" dazu, dann ploppt es auf und zurück, "liebste" kommt...

Bei Hintergründen lohnt es sich, weiche Übergänge anzulegen

So geht es mit Worten und Sätzen weiter bis Szene 154 - und wie gesagt, jede Szene bedeutet eine Veränderung im Bild. Von Szene 155 bis 164 wird das Konfettibild samt Schrift mit einer blauen Farbfläche überblendet. Dann erscheint ein großes weißes Herz, das sich mit einem Satz füllt. Das Herz wird wiederum sanft mit Blau überblendet. Szene 179 zeigt die blaue Fläche mit "Deine Bettina", geschrieben in Weiß, 1,6 Sekunden lang. Dann kommt noch ein weißes Herz hinter den Gruß. Die letzte Szene 181 zeigt dies kleine Herz, nun in Blau, auf weißer Fläche. Die 181 Szenen ergeben einen Film von 1 Minute, 4 Sekunden & 7 Millisekunden.

Körperstellungen der tanzenden Kerze wurden mit Hand gezeichnet & zur Weiterverarbeitung eingescannt

Wie kommt es von der Animation zum online Geburtstagsgruß?

In Photoshop speichere ich den Film als GIF und lege die Schleifenwiederholung fest, d. h., entweder unbegrenzt oder 1 mal. Wenn man nämlich eine gif-Datei im Browser öffnet, spielt die Animation ab, ganz automatisch. Das ist schon mal gut. Was ich aber will: das Geburtstagskind erhält einen Link, den es klickt. Daraufhin gelangt es zur Mini-B-Day-Site. Die hat eine Überschrift, zeigt ein Startbild der Animation und einen Button zum Abspielen oder 2 Buttons (Abspielen und Stoppen).

Zur Einbettung der Animation erstelle ich eine schlichte HTML-Datei. Es gibt den Head (meist "Geburtstagsgruß"), die die Animation wrappende "Box", ein oder zwei Buttons. In der wrappenden Box platziere ich ein startbild.jpg, das ein statisches Bild vom Anfang der Animation ist. Nun bedarf es noch einer winzig kleinen Javascript-Funktion, damit das statische Startbild mit der gif-Datei ausgetauscht wird. Wenn das passiert, wird der "Film abgespielt".

Man betrachte bitte die Zeilen 2 bis 5 des oben abgebildeten Quelltextes. Die Funktion anistart() besteht aus einer einzigen Zeile, die übersetzt Folgendes aussagt: wenn Funktion aktiviert, greife aufs aktuelle Dokument zu und gehe zu dem Element mit der ID "film". Setze deren Source (Quelle) auf "ani.gif". Man kann auch sagen: die Quelle des Elementes mit der ID "film" soll ani.gif sein.

In Zeile 11 ist das HTML-Element mit der id="film" zu finden. Solange die Funktion nicht aktiviert ist, ist deren Standard-Quelle die Datei "startbild.jpg", das statische Bild. In Zeile 13 nun ist der Container mit dem Button zu finden, der die Funktion aktiviert. Der Button trägt die Aufschrift PLAY - es ist aber egal, was hier drauf steht...

... wichtig ist der Javascript Event Handler onclick. Der Button ist, wie man sagt, mit einem Onclick-Event belegt. Bei Klick auf den Button - also die mit div id="start-ani" definierte Fläche auf der Site, gestaltet wie ein Button - wird die Javascript Funktion aktiviert. Das heißt nun nicht mehr und nicht weniger als wie oben beschrieben: sofort wird der Inhalt (die Quelle) des Image-Tags (Bild-Container, siehe Zeile 11) ausgetauscht. Statt statischem JPG liegt hier jetzt das GIF. Und ein GIF spielt sich von allein ab, sobald in einem Browser offen, wie bereits oben zu lesen war. Das heißt, bei Austausch von JPG zu GIF geht die Animation los.

Die online Geburtstagsgrüße komplett ansehen:

Tanzende Kerze
Juni 2014

Sonnenblume
Juli 2015

Konfetti
Juli 2015

Hase statt Bär
August 2015

Diese Seite PAM SEASON III ist die Neuauflage meiner allerersten Website "Willkommen bei den Prior Art Männchen - SEASON II" (beschriebenhier). Die SEASON III erstellte ich 4 Jahre später. Inhalte, Spielereien und Ideen wurden übernommen. Neu geplant und geschrieben wurden HTML-Struktur und Stylesheet; Bilder und Grafiken größtenteils erneuert.

Auf der Startseite stellen sich die Männchen mit ein paar Worten vor. Das heißt sie sagen, warum es diese ihre Männchen-Seite gibt und was den Besucher und Spielwilligen erwartet.

Die Startseite mit Ausschnitt der Navigation

Zum Beispiel die Animation der Prior Art Männchen @work (die im Jahre 2012 der Aufhänger der SEASON II war, wobei die Animation an sich die SEASON I darstellt). Desweiteren wird dem Besucher angekündigt: die Skizzengalerie, ein Suchbild mit 2 Aufgaben, die "Erklär-Bär-Seiten" What's about, bei denen man mehr über die Arbeit von Männchen und Technik erfahren kann, sowie die Kontaktseiten mit Registrierungs- und Kontaktformular. - DiePrior Art Männchen SEASON III können auch gut und gerne online und komplett durchforstet werden.

Wieso eine alte Seite erneuern - wieso die SEASON III?

Weil die Inhalte der ersten Männchen-Site (die Animation, die Skizzen zur Animation, das Suchbild und die Idee, wie dessen Lösungen präsentiert werden, die Erklärbärseiten What's about, das Registrierungsformular mit den Spielereien...) weil die Inhalte an sich schön und witzig waren und ich das "bewahren" wollte. Doch HTML Struktur und Stylesheet waren (natürlich!) unerfahren konzipiert und so auch (relativ!) chaotisch und unpraktisch geschrieben...

Inhalte übernommen & erweitert - "Verpackung", Struktur und Logik verbessert

... zum Beispiel ist die Navigation sowie andere Inhaltsbereiche mit Tabellen gelayoutet - besonders die Navigation ist unschön verrutscht. Die ganze Site ist nicht symmetrisch, es gibt kaum gliedernde Linien. Bei vielen Specials und Meldungen ploppen die heute so unpopulären und als störend empfundenen modalen Dialoge in Extra-Fenstern auf, die der Nutzer extra schließen muss. Wo es bei SEASON II noch 19 einzelne HTML-Dateien gab, gibt es jetzt nur noch 10. Aufploppende Meldungen werden hier in die entsprechende Datei integriert und deren Sichtbar- bzw. Unsichtbarkeit per CSS gesteuert:

Vergleich: Browser-Popups (alt) vs. Eigene Meldungsboxen (neu)

Beispiel aufploppende Meldung als modale Dialogbox (alt) und als zuerst unsichtbare Box ins HTML integriert (neu)

Beim obigen Beispiel zeigt sich gut der Vorteil dieser Arbeitsweise: wo die modale Dialogbox, das Extra-Fenster, vom Browser immer oben links und womöglich weit weg von der Stelle geöffnet wird, die das Fenster ausgelöst hatte, können die in's HTML geschriebenen Boxen nun schön passend platziert werden - über Browser-Dialogboxen hat der Gestalter weit weniger Kontrolle. Bei "meinen" Boxen bin ich absolut frei in der Gestaltung, ob ich nun an zwei Ecken Rundungen will oder rote oder grüne Rahmen... Ich platziere meine Box an exakt der Stelle, die ich bevorzuge: in diesem Falle mittig auf der Seite neben der Stelle, deren Klicken die Box öffnet.