Projektbegleitend sollte als sogenannter Eyecatcher für die jeweiligen Lernapplikationen ein Plakat in DIN-A3-Größe entworfen werden. Da wir bereits in unserer Applikation das Wettrennen zum Mond und die Mondlandungen behandelt hatten, entschieden wir uns auf das Bildmaterial der NASA zurück zu greifen. Explizit die Bilder der Apollo-Mission Ende der 1960er und Anfang der 1970er Jahre boten sich regelrecht dafür an. So suchten wir nach diversen Bildern die als Eyecatcher dienen konnten. Nach einer ersten Ideensammlungen entschieden wir dazu einige Bilder miteinander zu kombinieren. So wählten wir als Hauptbild ein Bild der Apollo 11 Mission. Es wurde am 20. Juli 1969, dem Tag der ersten Mondlandung, von Neil Armstrong geschossen und stellt den zweiten Menschen aller Zeiten auf dem Mond dar: Edwin Eugene jr. "Buzz" Aldrin. Als zweites Bild griffen wir auf ein weitere bekanntes Bild des Programms zurück, in diesem Fall auf ein Bild von Apollo 8. Das Foto zeigt wie die Erde über der Mondoberfläche aufgeht und wird daher auch Erdaufgang genannt. Es wurde im Dezember 1968 von William Alison Anders geschossen.

Auf Grundlage des Bildes von Buzz Aldrin erstellten wir nun unser Plakat. Bei diesem entfernten wir nun zuerst den Hintergrund und färbten diesen mit einem neuen dunkleren Schwarz-Ton ein. Des Weiteren schnitten wir die Erde aus dem Bild Anders' aus und fügten diese zusätzlich als kleinen Eyecatcher in das Plakat in eine eigene Ebene ein. Einerseits wollten wir nun erreichen, dass das Bild Aldrins von der Qualität etwas älter aussieht, andererseits wollten wir noch erreichen, dass unser blauer Planet ein wenig mehr hervor sticht. So entschieden wir uns eine leicht eingefärbte Ebene über das Bild Aldrins zu legen. Die Erde wurde jedoch darüber platziert, sodass diese von die Farbebene nicht betroffen wurde. Nach mehreren farblichen Versuchen, mit grau, brau und blau, entschieden wir uns letztendlich für den Blau-Ton. Dieser passte nicht nur farblich zur Erde, sondern auch zur allgemeinen Stimmung die innerhalb der Lernapplikation herüber kommt. Im unteren Bereich fügten wir einen gewschungenen Balken mit den Projektinformationen und QR-Codes ein. QR-Codes sind speziell generierte Codes für Handys mit QR-Code-Reader. Diese werden, sobald sie mit ihrer Handycamera über das Icon gehen, auf die entsprechende Webseite weitergeleitet. In unserem Fall auf die entsprechende Lernapplikation in Englisch oder Deutsch.

Nach einem ersten Gespräch mit der Projektleitung wurde noch der fehlende Zusammenhang unseres Plakates mit der mobilen Lernapplikation bemängelt. Vom Rest des Posters waren sie aber bereits begeistert. Aus diesem Grund entschieden wir uns eine weitere Bildebene über der blauen Ebene einzufügen. In diese banden wir ein selbst geschossenes Foto von einer Hand mit Handy ein. Auf dem Display des Handys ist dabei das Quiz der Lernapplikation zu sehen. Da dies aufgrund der Fotografie nicht gut erkennbar war, halfen wir dabei ein wenig nach und fügten das entsprechende Bild des Quiz nochmals ein. Um den Zusammenhang noch deutlicher zu machen, wählten wir dabei die passende Frage über Buzz Aldrin im Quiz aus. Nach erneuter Rücksprache mit unseren Betreuern dunkelten wir die Hand noch etwas ab, da sie sonst zu sehr aus dem Plakat heraus stach. Des Weiteren wurde auf unsere eigene initiative in das Handydisplay eine Spiegelung integriert. Diese zeigt das Lunarmodul von Apollo 11. Diese wurde keinem weiteren Bild entnommen, sondern der Spiegelung in Buzz Aldrins Helm. Ziel war es hiermit den selben Spiegelungswinkel zu erzielen. Mithilfe der Vergrößerung der Spiegelung und die Anbringung auf dem Display sollen den Eindruck erwecken, dass das Handy ebenso auf dem Mond war, direkt neben dem Raumschiff. Des Weiteren war es unser Ziel durch diese Spiegelung dem Betrachter den Eindruck zu vermitteln selbst auf dem Mond zu stehen und diesen wunderschönen und zugleich spannenden Anblick genießen zu können. Abschließend tauschten wir den geschwungenen Balken am unteren Ende des Plakats durch einen wesentlich schlichteren, leicht durchsichtigen, schwarzen Balken. Einerseits wollten wir dadurch verhindern, dass der Balken vom Gesamtbild ablenkt. Andererseits erhielt das Plakat durch diese Änderung und Neuordnung des Fußes einen gewissen Kino-Plakat-Effekt. Da uns diese Gestaltung wesentlich mehr entgegenkam als zuvor, entschieden wir uns dies beizubehalten. Das Endergebnis könnt ihr oben betrachten.

Euer moCo-Mond-Team

Da das Thema Mondkrater als eigenständiger Punkt im Hauptmenü unseres moCo-Mond-Projekts zu finden ist, darf natürlich auch eine Animation nicht fehlen. Die von uns erstellte Animation soll den Kindern näher bringen, wie die Mondkrater auf dem Mond entstehen.

Bei dieser Animation hat man die Möglichkeit, einen Meteoriten zu starten, der auf den Mond zufliegt und dort explodiert. Dadurch entsteht ein Mondkrater. Hier steht wieder der spielerische Ansatz im Vordergrund. Kinder sollen Spaß daran haben, den Meteoriten starten zu können und mitzuerleben wie er auf der Oberfläche des Mondes einschlägt. Dadurch merken sie sich das erlernte Wissen leichter, welches sie dann spätestens bei unserem Quiz benötigen, um möglichst viele Punkte zu bekommen.

Hier hat man Einsicht in die Entwurfsansicht der erstellten Krateranimation. Wie man sieht, benötigt man für solch eine Animation mehrere Ebenen welche oben zu sehen sind. Links ist dabei die Bezeichnung der jeweiligen Ebene, rechts davon die Zeitleiste der Ebene in der Animation. Ist die Zeitleiste einer Ebene weiß, befinden sich darin keine Bilder, ist sie hingegen grau und mit einem schwarzen Punkt, handelt es sich um ein Schlüsselbild mit Bilddateien. Nur graue Bereiche sind "leere" Bilder, welche zwischen Schlüsselbildern eingefügt werden können. Darin werden allerdings die Bilddateien des vorherigen Schlüsselbildes angezeigt. Mithilfe dieser leeren Bilder kann man nun eine Bewegung bzw. die Anzeigedauer je nach Anzahl der leeren Bilder variieren. Ist die Zeitleiste jedoch blau oder grün gefärbt, stellt dies einen sogenannten Tween dar, welcher auf Schlüsselbilder und die angehängten "leeren" Bilder angehängt wurde. Mit diesen Funktionen können nun Bewegungen, Verformungen, etc. animiert werden. Der rote Strich auf der Zeitleiste gibt die aktuelle Position an, an der man sich in der Animation befindet.

Bis zum nächsten Mal.

Euer moCo-Mond-Team

Was bei einer mobilen Lernapplikation über den Mond natürlich nicht fehlen darf sind die verschiedenen Mondphasen. Da die Anwendung für Kinder in der Altersgruppe zwischen 12 bis 14 Jahre zugeschnitten wurde, haben wir uns gedacht, dass eine spielerisch angehauchte Animation zum Thema Mondphasen sehr gut passen würde. Wir setzten uns aber nicht gleich vor den Computer um mit der Animation zu beginnen, sondern wir griffen wie bei allen Planungsphasen zu Bleistift und Papier um erst einmal Ideen zu sammeln. Weiters folgten ein paar konzeptionelle Zeichnungen, wie die Animation aussehen könnte. Als nächsten Schritt überlegten wir uns, wie wir unsere Ideen in der Flash-Entwicklungsumgebung umsetzen könnten. Da wir hier aber viele Möglichkeiten hatten, entstand bald eine anschauliche Animation.

Im Zentrum steht dabei die sichtbare Mondscheibe. Per Klick auf die darunterliegenden Steuerungsbuttons hat man die Möglichkeit, zwischen den acht einzelnen Phasen hin und her zu schalten. Dies soll Kindern einen spielerischen Ansatz bieten, sich die verschiedenen Phasen leichter merken zu können. Im oberen Bereich ist ersichtlich, in welcher Mondphase man sich gerade befindet. Zusätzlich verändert sich die Helligkeit des Mondes, je nach dem ob man einen Schritt vorwärts oder einen Schritt rückwärts macht. Zusätzlich verschwinden die unteren Buttons, wenn man entweder an das eine Ende gekommen ist, oder an das andere. Dies soll einen noch übersichtlicheren Eindruck verschaffen.

Für die Umsetzung dieser Animation wurde eine Maske benötigt. Diese Maske ermöglicht es, einen gewissen Bereich auszuwählen, welcher dann für die weitere bearbeitung der Animation nicht mehr veränderbar ist. In diesem Fall betrifft dies die schwarze Umrandung des Mondes. Verändern soll sich nur der innere Mond. Wir benötigten dafür einige Zeit, damit wir zum jetzigen Endergebnis kamen.

Euer moCo-Mond-Team

Neben der Implementation des Templates des Gesamtprojekts, war die Animation Finsternis eine der schwersten und umfangreichsten Aufgaben die es galt umzusetzen. Darin inbegriffen wollten wir neben der bekannten Sonnenfinsternis, auch die weniger bekannte Mondfinsternis einbinden. Zugleich sollte dies möglichst anschaulich und in Bewegung dargestellt werden. Somit wurde entschieden, dass der Anwender der Applikation auswählen kann, welche Sternenkonstellation er betrachten möchte.

Das Grundkonzept dieser Animation basiert dabei auf dem der Animation zur Mondumrundung, jedoch wesentlich komplexer und verschachtelter. So wurden dabei nicht wie meist zwischen vier bis sechs Bild-Ebenen benötigt, sondern 15. Diese Zahl hätte noch weit gesteigert werden können, jedoch wurden die Ebenen für Sonnen- und Mondfinsternis gemeinsam verwendet um eine weitere Aufstockung zu vermeiden. Die Reihung dieser Ebene spielt dabei eine große Rolle, liegt eine Ebene über der anderen, so überdeckt diese Teile der darunterliegenden. Je höher also eine Ebene ist, desto mehr sieht man dabei.

Neben den üblichen Ebenen für ActionScript, Buttons und Text, wurden nun jedoch zahlreiche Ebenen für Bilder benötigt. Für die Bewegungen wurden wiederum Pfadebenen samt Bewegungspfaden, als auch sogenannte Schlüsselbilder mit angepassten Bildobjekten benötigt. Diese wurden wie bereits in unserem Blog erwähnt an den Anfang und das Ende des Bewegungspfades angeheftet. Anschließend wurden die Schlüsselbilder mit einem Bewegungs-Tween verbunden, sodass eine Bewegung der Objekte erscheint. Auf die Aktivierung der Option am Bewegungspfad ausrichten wurde hingegen bewusst verzichtet. Grund hierfür war, dass alle Objekte ihre Neigung beibehalten mussten. Hierdurch war es möglich an den Mond und der Erde einen sich verändernden Schatten anzubringen.

Um den Eindruck des Schattens zu verbessern, mussten erneut einige Schlüsselbilder eingefügt werden. In diesen wurde neben einem Bewegungs-Tween noch der sogenannte Alpha-Wert der Objekte geändert. Dieser stellt die Sichtbarkeit ein, d.h. auch die Deckungskraft gegenüber der Ebenen darunter. Beträgt dieser z.B. 100, wird alles darunter verdeckt, bei einem Wert von 0 ist das Objekt hingegen nicht mehr sichtbar.
In der ActionScript-Ebene wurden aufgrund der Vereinigung der Sonnen- und Mondfinsternis mehrere Stellen zum stoppen der Animation als Haltepunkte angelegt. Die Steuerung zwischen diesen Haltepunkten erfolgt außerhalb der Animation, jedoch noch nicht in der Lernappliaktion! Über die Animation wurde noch ein weiteres Flashobjekt daraufgesetzt. Diese enthält einerseits die Steuerbuttons, anderseits erfüllt dies noch einen weiteren Effekt. Die Animation wäre aufgrund ihrer Größe aus dem zentralen Inhaltsbereich der Lernapplikation darüber hinaus geragt. Dafür gab es zwei Lösungsmöglichkeiten. Die erste wäre eine Transformierung und Verkleinerung der Animation, wodurch jedoch die Details auf dem bereits sehr kleinen Handydisplay sehr gelitten hätten, bzw. nur noch wenig erkennbar gewesen wäre. Die andere Möglichkeit, für die wir uns letztendlich entschieden haben, war eine sogenannte Maske. Diese legt sich in dem vorbestimmten Bereich darüber. Sobald diese aktiv ist, erscheint alles innerhalb des Maskenbereichs als Sichtbar, alles was darüber jedoch hinaus geht, wird verdeckt. Dies scheint vielleicht zwar so, als ob man die Objekte abgeschnitten hätte, andererseits bleibt dadurch die gute Sichtbarkeit gewahrt. Des Weiteren ermöglichte dies eine gute Positionierung der Steuerung.

Das daraus entstandene ineinander verschachtelte Objekt wurde abschließend in die Lernapplikation eingepasst und eingebunden. Dem Anwender bleiben die aufwendigen Konstrukte der Animation bei der Ausführung verborgen
Die grünen Linien bleiben noch anzumerken, welche auf zahlreichen Bildern zu sehen sind. Diese sind natürlich nicht in der Applikation enthalten, sondern dienen lediglich als Hilfslinie für die Positionierung von Texten, Animationen, etc. Bei der Generierung der ausführbaren Flash-Datei werden sie nicht berücksichtigt. Soviel zu nun aber unserer größten Animation.

Euer moCo-Mond-Team

Die erste interaktive Animation ist über die Saturn V Rakete. Sie war bekanntlich die Trägerrakete des Mondprogrammes. Benötigt wurde diese Animation, aufgrund des Verbotes von Untermenüs, das einzig erlaubte Menü war das Hauptmenü. Als Lösung für dieses Problem wurden die gesammelten Informationen über die amerikanische Rakete in eine kleine interaktive Animation mit "?"-Auswahl integriert. Zuerst wurde jedoch ein Bild der Saturn V wiederum in der Größe angepasst und schließlich vektorisiert eingebunden, sodass Speicherplatz und Prozessorleistung gespart wird und das Look-and-Feel der Comic-Grafiken erhalten bleibt.

Wie bei der Mondumrundung wurden einzelne Ebenen eingerichtet um die benötigten Eigenschaften zu gewährleisten. Diese orientierten sich über das gesamte Projekt hinweg und waren stets eine ActionScript-Ebene, eine Bildebene, eine Button-Ebene und eine Ebene für den Text.
Die Navigationspfeile der Animation sich alle darin integriert selbst eingebaut, nicht wie man annehmen könnte in der Lernapplikation. Dadurch wurde eine komplexe Steuerung über ActionScript-Code erspart. Der Einbau der Steuerung verlief analog zur normalen Navigation im Gesamtprojekt über das ActionScript, jedoch in einer speziellen Ebene in der Animation. In der Applikation hingegen ist dies nicht zu bemerken.
Nun wurden die Inhalte integriert und auf die diversen Unterseiten eingearbeitet.

Der Benutzer kann nun durch Ansteuerung der einzelnen "?" Inhalte zu den einzelnen Stufen der Rakete abrufen. Um wieder zurück zur Rakete zu gelangen, muss der Zurückpfeil der Animation verwendet werden. Um das wechseln der Inhalte zu realisieren wurde in der Animation Haltepunkte eingebaut, zwischen denen man mithilfe der Buttons, welche ActionsScript-Code hinterlegt haben, hin und her navigieren kann.
Da dies eine der wenigen Animationen mit Text im Inhalt war, musste diese für die englischsprachige Version moCo - Moon noch übersetzt werden, ehe sie dort ebenso integriert werden konnte. Die Saturn V-Animation stellt einen Wechsel in der Navigation gegenüber allen anderen dar, aus diesem Grund wurde ein kleiner Hilfetext integriert um es dem Anwender möglichst zu vereinfachen.

Nun, nachdem wir auf diese einfache interaktive Animation eingegangen sind, erläutern wir im nächsten Blog eine der schwereren Animationen.

Euer moCo-Mond-Team