Diplomarbeit: MobileMotionBox. Dynamische webbasierte MM- Anwendung für den mobilen Telekommunikationsbereich. Studiengang Wirtschaftsinformatik

Transkript

1 Diplomarbeit 2004 MobileMotionBox Dynamische webbasierte MM- Anwendung für den mobilen Telekommunikationsbereich an der Fachhochschule St.Gallen, Fachbereich Technik, Studiengang Wirtschaftsinformatik für die Spherix AG, Multimedia-Agentur, St.Gallen Diplomand: Jörg Brunschwiler Golfstrasse Niederbüren Betreuer: Ronald Mucha Lindauerstrasse Lochau AUSTRIA Experte: Marcel Egloff Gaiserwaldstrasse St.Gallen Präsentation: 26. Oktober 2004

2 Vorwort I Vorwort Diese Diplomarbeit entstand an der Fachhochschule für Wirtschaft, Technik und soziale Arbeit in St.Gallen. Antrieb dafür war, dass ich mich erstmals im 3. Lehrjahr als Informatiker (1999) mit Macromedia Flash beschäftigte und seitdem nicht mehr davon losgekommen bin. Seit damals hat sich in diesem Gebiet einiges getan, wobei ich durch meine kleine Unternehmung Brunschwiler Web.design die Möglichkeit hatte, trotz des Vollzeit-Studiums am Ball der Technik zu bleiben. Die Fächer Multimedia, E-Business, Datenbanken, Java-Programmierung und Marketing gaben mir während des Studiums wertvolle Impulse, weshalb ich mich entschied, Inhalte aller dieser Fächer in die Diplomarbeit einfliessen zu lassen. Dies ergibt die wohl etwas ungewohnte Aufteilung der Aufgabenstellung in einen technischen und einen wirtschaftlichen Teil. Ich bin jedoch überzeugt davon, dass genau diese Mischung dem Wirtschaftsinformatiker in der Praxis sehr nahe kommen könnte. Meine Vorstellung deckt sich ziemlich genau mit derjenigen der FHSG, welche den Wirtschaftsinformatiker mit folgender Grafik beschreibt. Abbildung 1: WI Bindeglied zwischen Betriebswirtschaft und Informatik [FHSG2004] Ich denke, es ist für uns sehr wichtig, dass wir diese Grafik nicht aus den Augen bzw. dem Sinn verlieren. Wir sind nicht die unantastbaren Meister in der Betriebswirtschaft und auch nicht die Cracks auf dem Gebiet der Informatik. Als Schnittstelle zwischen den beiden Teilen sind wir jedoch ebenso wichtig, sodass wir diese Funktion als unsere Kernkompetenz auffassen sollten Dieser Gedanke lässt sich auch auf meine Diplomarbeit übertragen. Es ist nicht möglich eine perfekten technischen Teil und wirtschaftlichen Teil in 7 Wochen aus dem Hut zu zaubern. Die Verbindung der beiden wissenschaftlich hoch stehenden und kompetenten Teile macht jedoch den Charakter dieser Arbeit aus. Die im technischen Teil umgesetzten Module sind Bestandteil einer umfangreichen Anwendung mit dem Namen MobileMotionBox, welche zusätzlich MMS-Funktionen, Bildergalerien und Community-Aspekte umfasst. Danksagung An dieser Stelle möchte ich folgenden Personen für die Unterstützung bei der Erstellung der Diplomarbeit und/oder deren Korrektur danken: Ronald Mucha, Dozent Multimedia ZbW & FHSG, Geschäftsführer DIE MEDIEN AGENTUR Vasilis Kotarelas, Dozent Mutimedia ZbW, Crack in Sachen Flash Pasquale de Sapio, Ansprechperson des Auftraggebers, Geschäftsführer Spherix AG Marcel Egloff, Verantwortlicher Höhere Fachschule für Technik ZbW

3 Inhaltsverzeichnis II Inhaltsverzeichnis Vorwort... I Inhaltsverzeichnis... II Management Summary...VI Aufgabenstellung...VII Eingereichte Aufgabenstellung...VII Aktuelle Aufgabenstellung...VII Ziel der Arbeit...VIII 1 Verschmelzung von Multimedia und dynamischen Inhalten Beteiligte Komponenten PHP Flash MySQL Interaktionen Interaktionsschema Beispiel Flash PHP PHP MySQL MySQL PHP PHP Flash MobileMotionBox Produktdefinition MobileMotionBox Modul Mono Logo Editor Modul Mono Picture Editor Thematisch/inhaltliches Konzept (Gliederung) Didaktisch/methodisches Konzept Zielgruppe / Motivation Funktionalität Gestalterisches Konzept (Styleguide) Screenshot Beschreibung Screen Elemente Hilfe Intro Design Farben Schriftarten Umsetzung in Flash Bildqualität und pixelgenaue Positionierungen Flexibilität Pixel-Matrix Maus-Handling Speicher- und Darstellungskonzept Level-Konzept Intro-Schleife History Texteditor Drag&Drop-Symbole... 21

4 Inhaltsverzeichnis 3.9 Funktionen Matrix-Funktionen Texteditor- / Drag&Drop-Funktionen History-Funktionen Hilfs-Funktionen Output-Funktionen Umsetzung in PHP Aufsplittung des Übergabestrings Generierung des Bildes Erzeugen des Headers Erzeugen des Bildes Hintergrund- und Malfarbe setzen Bild zeichnen / Setzen der Pixel Senden des Bildes im GIF-Format an den Browser Speicher-Freigabe Mobile Business Aufbau der Arbeit Einleitung Internet Mobilkommunikation Zusammenwachsen von Mobilkommunikation und Internet: Mobile Internet Basistechnologien für das Mobile Internet GSM GPRS WAP UMTS imode Wireless LAN (W-LAN) Einstige Hoffnungen und Realität Differenzierungsmerkmale des Mobile Business Mobilität / ständige Erreichbarkeit Lokalisierbarkeit Identifizierbarkeit / Personalisierung Sicherheit (Identifizierbarkeit) Bedienbarkeit Direkte Verbindung Sozialer Status Kosten / Nutzen Ergonomie / Bedienkomfort Nutzungsdauer M-Commerce-Anwendungen Business-to-Consumer Location Based Services (LBS) Mobile Financial Services MMS Mobile Security Systems Mobile Payment Mobile Infotainment Mobile Advertisement Mobile Entertainment Business-to-Business Mobile Sales Mobile Workforce / Mobile Telematics Mobile Logistics / Supply Chain Management III

5 Inhaltsverzeichnis Mobile Customer Relationship Management Mobile Entertainment Eine Einführung in das Mobile Entertainment Der momentane Stand der Mobile Entertainment Industrie Die Wertschöpfungskette des Mobile Entertainment Einführungsbeispiel Beteiligte Mitspieler und deren Rollen Technologie und Strategie des Mobile Entertainment Treibende Kräfte im Bereich Technologie des Mobile Entertainment Treibende Kräfte im Bereich Strategie des Mobile Entertainment Vier Szenarien für die Mobile Entertainment Industrie Content-Markt Display-Trends Anwendungen für Monochrom-Displays Business Case MobileMotionBox Die Wertschöpfungskette Vertragspartner Geschäftsmodell Wer verdient wie viel? Variante Variante Wirtschaftlichkeit Abbildungsverzeichnis Literaturverzeichnis Textzitate Anwendungen Bücher Studien / Präsentationen Anhang: Umsetzung Entwicklungsschritte Design und Funktionalität Screenshot Start Funktionalität Eigene Ideen Anordnung Buttons Gestaltung Hilfe Drag&Drop-Leiste Intro Zeichen des Zeichen-Editors Suffixe für Codehinweise Komplette Listings Flash-Umsetzung Funktionen Variablen Anhang: Eingesetzte Mittelsysteme Gestaltung Programmierung Projektmanagement / Dokumentation Anhang: Projektmanagement Projektplan Phasenbeschreibungen Tagesdokumentation IV

6 Inhaltsverzeichnis 12 Anhang: Projektdateien auf CD Struktur CD Anhang: Lebenslauf in Stichworten Personalien Schulbildung Berufliche Ausbildung und Tätigkeit Berufliche Ausbildung und Tätigkeit Anhang: Ehrenwörtliche Versicherung V

7 Management Summary VI Management Summary Die Firma Spherix AG in St.Gallen ist eine Generalagentur für die Entwicklung von audiovisuell orientierten Multimedia-Anwendungen. In einem sich rapide verändernden Marktumfeld has sie sich als die führende Multimedia-Agentur der Ostschweiz positioniert. Nun möchte die Spherix AG mit ihrem grossen Know-how in den lukrativen Mobile- Commerce-Markt eintreten. Als ersten Schritt soll eine Internet-Applikation mit Namen MobileMotionBox lanciert werden, welche es ermöglicht, Bilder in einem Editor zu erstellen und auf ein Handy zu laden. Mein Beitrag zur Applikation besteht aus der Programmierung zweier Module in Macromedia Flash und PHP. Dabei handelt es sich um einen Editor für Schwarz-Weiss-Logos (Mono Logo Editor) und einen für Schwarz-Weiss-Bildmitteilungen (Mono Picture Editor) für Nokia-Mobiltelefone. Selbstverständlich sollen die Editoren in funktioneller Hinsicht glänzen und ein benutzerfreundliches Handling bieten. Das Zusammenspiel von Flash und PHP/MySQL, sprich das Zusammentreffen von Multimedia und dynamischen Technologien, ist ebenfalls ein sehr interessantes Gebiet, welches zurzeit eine grosse Evolution durchmacht. Deshalb gehört zur Arbeit auch das Aufzeigen der Interaktions-Funktionsweise dieser Komponenten. Das Mobile Business ist ein neuer, noch immer sehr intransparenter Markt. Die Spherix AG vermisst eine Dokumentation, welche ihr einen Marktüberblick verschafft und einen Ausblick bietet, welcher zudem speziell auf das für sie besonders interessante Teilgebiet Mobile Entertainment ausgerichtet ist. Des Weiteren soll der Business Case der MobileMotionBox nochmals durchleuchtet werden, da es sich dabei um ein nicht ganz alltägliches Geschäftsmodell handelt. Und das soll alles in einer Arbeit unter einen Hut gebracht werden? Urteilen Sie selbst! Abbildung 2: Umfang der Arbeit in der grafischen Übersicht (eigene Darstellung)

8 Aufgabenstellung VII Aufgabenstellung Die frühzeitig eingereichte Aufgabenstellung hat sich vor Beginn der Arbeit nochmals leicht geändert. Nach intensiver Diskussion mit dem Auftraggeber wurde mir leider kein zweiter Einblick in den Business Case der MobileMotionBox gewährt: Die Spherix AG fürchtet, dass mit der Offenlegung des Funktionsprinzips, Teilen von Verträgen, genaueren Zahlen und Wirtschaftlichkeitsrechnungen ihre Idee MobileMotionBox gefährdet ist. Da der stark wachsende Markt hart umkämpft ist, möchte man der Konkurrenz, welche allenfalls irgendwie Einsicht in die Arbeit erhalten könnte, keine Vorteile verschaffen. Mit dieser Entscheidung musste zugleich eine Änderung des wirtschaftlichen Teils erfolgen, wobei wir uns folgende Überlegungen machten. Der mobile Telekommunikationsmarkt ist ziemlich intransparent und weitläufig. Da tummeln sich Begriffe wie M-Commerce, Mobilkommunikation, Mobile Entertainment sowie viele Abkürzungen von Technologie-Typen und -Generationen. Die Firma Spherix wollte deshalb, dass ich für sie einen Marktüberblick mit Ausrichtung auf ihre geplanten Einsatzgebiete erstelle. Dieser Überblick sollte in einem vernünftigen Rahmen die wichtigsten Punkte zusammenfassen, sodass auf ein Lesen von Büchern und Studien seitens der Spherix AG verzichtet werden kann. Trotzdem möchte ich den Business Case nicht ganz ausklammern und zumindest das Funktionsprinzip, angereichert mit realistischen Annahmen bezüglich der Preise, erläutern. Dies führt zu einer neuen, aktuellen Aufgabenstellung für die Diplomarbeit. Eingereichte Aufgabenstellung Technischer Teil: - Beschreibung der immer besseren Verschmelzung von Multimedia und dynamischen Client-Server-Technologien (Flash und PHP) - Aufzeigen der Funktionsweise aller beteiligten Komponenten - Umsetzung der beiden Module Mono Logo Editor und Mono Picture Editor in Flash und PHP/MySQL Wirtschaftlicher Teil: - Business Case (Carrier - Hoster - Spherix - Kunde) Aktuelle Aufgabenstellung Technischer Teil: - Beschreibung der immer besseren Verschmelzung von Multimedia und dynamischen Client-Server-Technologien (Flash und PHP) - Aufzeigen der Funktionsweise aller beteiligten Komponenten - Umsetzung der beiden Module Mono Logo Editor und Mono Picture Editor in Flash und PHP/MySQL Wirtschaftlicher Teil: - Marktübersicht Mobile Business - Business Case (Carrier - Hoster - Spherix - Kunde)

9 Ziel der Arbeit VIII Ziel der Arbeit Im Vorwort habe ich bereits geschrieben, was meine Motivation zu dieser Arbeit ist. Mein persönliches Ziel ist es also, die weitreichende Aufgabenstellung möglichst selbständig zu lösen und meine Fähigkeiten in allen genannten Bereichen zu verbessern. Die Aufgabe enthält: eine sehr komplexe Programmieraufgabe in Flash eine Programmieraufgabe in PHP Schnittstellenfragen in Flash und PHP / MySQL grafische Arbeit bei Bearbeitung, Import und Export der Bilddaten kreative Punkte bei der Ausgestaltung der Funktionalität und der Screens komplexe, wissenschaftliche Recherchen das Schreiben einer in sich geschlossenen, wissenschaftlichen Arbeit betriebswirtschaftliche Denkarbeit bei der Bearbeitung des Business Case Wie Sie sehen, erfordert diese Arbeit vielfältige Fähigkeiten in diversen Bereichen. Niemand kann über diese ganze Palette der Spezialist sein, doch darum geht es ja auch nicht. Mein Ziel ist es, mich mit allen Bereichen auseinanderzusetzen und eine hoch stehende Gesamtarbeit zu schreiben. Dabei darf ich natürlich auch die Ziele des Auftraggebers nicht ausser Acht lassen. Für ihn muss die Arbeit einen gewissen Nutzen erfüllen. In technischer Hinsicht ist er interessiert an einer sauber programmierten, funktionierenden Lösung, in diesem Falle an den beiden Module Mono Logo Editor und Mono Picture Editor. Die Lösung muss für einen Freelancer der Firma leicht editierbar und erweiterbar sein, was bedeutet, dass der Code übersichtlich und die Dokumentation verständlich und umfassend sein muss. Vom wirtschaftlichen Teil erhofft er sich einen Marktüberblick, der für seine Zwecke genügend weit gefasst ist und trotzdem in einer vernünftigen Länge gehalten ist. Ausserdem soll die Sprache für ihn verständlich sein. Der Nutzen ist in diesem Fall die Zeitersparnis für eigene Recherchen sowie ein Dokument, welches er auch für die Einführung von z.b. neuen Mitarbeitern in das Projekt verwenden kann. Ich hoffe, dass ich mit dieser Arbeit den hohen Ansprüchen, welche ich auch selbst an mich stelle, genügen kann und dass ich dem offensichtlichen Ziel einer ansprechenden Benotung für meinen Einsatz nahe komme.

10 Kapitel 1: Verschmelzung von Multimedia und dynamischen Inhalten 1 1 Verschmelzung von Multimedia und dynamischen Inhalten Bis vor kurzem war es sehr schwierig, dynamische Inhalte in einer multimedialen Web- Anwendung zu präsentieren. Obwohl es schon früher trickreiche Möglichkeiten gab, ist dies erst ab der Version MX von Macromedia Flash (2002) in einer akzeptablen, komfortablen Art und Weise möglich. Macromedia selbst pusht diesen Bereich gewaltig. Unter dem Begriff Rich Internet Applications (RIA, dt. Rich-Internet-Anwendungen) beschreibt sie, wie sich die Funktionalität von Desktop-Anwendungen mit dem breiten Einsatzspektrum der preisgünstigen Bereitstellbarkeit von Webanwendungen vereinen [MACR2004c]. Das Thema RIA allein gäbe genügend Stoff für eine ganze Diplomarbeit her, deshalb möchte ich mich hier nur auf das technische Funktionsprinzip konzentrieren. Die Anzahl verschiedener Möglichkeiten, auf welche Inhalte via dynamische Skriptsprachen wie PHP, CFML, ASP usw. in multimediale Präsentationen geladen werden können, sind schier unbegrenzt. In dieser Diplomarbeit werde ich mich deshalb darauf beschränken, einen in der Praxis oft angewandten und sehr modernen Weg aufzuzeigen. Um das Zusammenspiel der beteiligten Komponenten besser zu verstehen, sollen diese gleich zu Beginn kurz und knapp vorgestellt werden. Dabei wird auf eine grundsätzliche Erklärung des Client-Server-Prinzips verzichtet. Die Komponenten Webserver und Browser werden ebenfalls nicht näher erläutert, da sie schlicht Grundvoraussetzungen für die Internet-Kommunikation sind und an sie keine besonderen Ansprüche für den zu beschreibenden Kommunikationsweg gestellt werden. 1.1 Beteiligte Komponenten PHP PHP (PHP Hypertext Preprocessor ) ist eine serverseitige Scriptsprache, welche für alle gängigen Plattformen frei erhältlich ist. PHP bringt schon von Haus aus eine sehr gute Anbindung an die meisten gängigen Datenbanken mit, was den Umgang mit externen Daten extrem erleichtert. Weiterhin ist PHP sehr gut durch Module und Klassen erweiterbar, die im Internet oftmals frei erhältlich sind. Im Gegensatz zu anderen Scriptsprachen wie z.b. Perl ist vor allem die Handhabung von Variablen, die aus Formularen oder anderen externen Quellen (wie z.b. auch Flash) stammen, in PHP sehr komfortabel. Der Syntax von PHP erinnert etwas an den von C und ist relativ leicht erlernbar. PHP-Dateien können sowohl normalen HTML-Code als auch PHP-Anweisungen enthalten. Bei einem Abruf eines PHP-Scripts über den Browser wird zunächst der PHP-Code ausgeführt. Dem Browser wird anschliessend die vorverarbeitete Datei übermittelt (daher der Name Preprocessor), welche nur die HTML-Anteile und die Ergebnisse der PHP- Anweisungen enthält. Die Übersetzung findet vollständig auf der Seite des Servers statt, PHP-Anweisungen werden nicht übermittelt Flash Mit Flash können Designer und Entwickler Video-, Text-, Audio- und Grafikelemente zu überzeugenden Rich-Media-Erlebnissen verbinden, die bei interaktiven Marketingunterlagen und Präsentationen, E-Learning-Tools und Benutzeroberflächen für Anwendungen zu herausragenden Ergebnissen führen. Mit einer Installationsbasis von 98 % aller internetfähigen Desktopcomputer sowie zahlreichen anderen Geräten verkörpert Flash die am weitesten verbreitete Softwareplattform der Welt [MACR2004a]. Macromedia Flash ist mit seiner umfangreichen Funktionalität der konkurrenzlose De-facto- Standard für die Entwicklung von dynamischen, interaktiven Webseiten.

11 Kapitel 1: Verschmelzung von Multimedia und dynamischen Inhalten 2 Abbildung 3: Verbreitung des Flash-Players [MACR2004b] Um allfälligen Missverständnissen vorzubeugen, werden die Begriffe rund um Flash kurz erläutert. Macromedia Flash ist das Entwicklungs-Tool, mit welchem die multimedialen Anwendungen (oft auch Flash-Filme genannt) erstellt werden. Die Entwicklungsdateien haben die Endung.FLA. Beim Export des Flash-Films entsteht ein SWF-File, welches man auf dem Webserver ablegt. Das Plugin Macromedia Flash Player sorgt dafür, dass die SWF-Datei nun im Browser abgespielt werden kann. ActionScript (von nun an öfters mit AS abgekürzt) ist die in Flash verwendete Programmiersprache. Anders als bei PHP, wird AS auf der Clientseite ausgeführt, d.h. sämtliche AS-Anweisungen werden ebenso wie die anderen Steuerinformationen eines Flash-Filmes innerhalb der SWF- Datei codiert gespeichert und mit an das Flash-Plugin des Browsers übertragen. Das Flash-Plugin ist dann nicht nur für das Abspielen aller Animationen verantwortlich, sondern auch für die Interpretation und Ausführung der ActionScript-Anweisungen. Dadurch ist es in gewissem Masse möglich, dass ein Flash-Film sofort mit AS auf Benutzereingaben reagieren kann, ohne erneut Verbindung zum Server aufnehmen zu müssen. Bei PHP-basierten Anwendungen hingegen muss jedes Mal, wenn Benutzereingaben verarbeitet werden sollen, erneut eine Verbindung zum Server aufgebaut, d.h. eine PHP- Datei ausgeführt werden MySQL MySQL ist ein relationales Datenbanksystem. Abfragen bzw. manipulieren lässt sich die Datenbank mit der Sprache SQL (Structured Query Language). Da sowohl PHP als auch MySQL frei erhältlich sind, wird diese Kombination von vielen ISPs (Internet Service Provider) angeboten. PHP bietet ein komfortables Interface zur Kommunikation mit MySQL und ist deshalb eine beliebte Sprache zum Aufbau von kleineren dynamischen Applikationen wie z.b. Foren und Gästebücher. Zusammen mit Flash ergeben sich noch weitere Einsatzmöglichkeiten wie z.b. Online-Spiele oder virtuelle Chatrooms.

12 Kapitel 1: Verschmelzung von Multimedia und dynamischen Inhalten Interaktionen Interaktionsschema Nachdem auf die einzelnen Komponenten eingegangen wurde, soll hier das Funktionsprinzip der Interaktionen aufgezeigt werden. Das abgebildete Gesamtschema wird im Folgenden in mehrere Schritte unterteilt, welche dann näher erläutert werden. Abbildung 4: Interaktion zw. Flash und DB über ein serverseitiges Script [MUT2002] Beispiel Die technische Implementierung der Interaktionen ist nicht ganz simpel. Um das ganze leichter verständlich zu machen, möchte ich die einzelnen Schritte an einem, alle Aspekte beinhaltenden, funktionstüchtigen Beispiel veranschaulichen [MMB2004a]. Dabei gehe ich der Einfachheit und Nachvollziehbarkeit wegen, weder auf spezielle Merkpunkte noch auf weitere Möglichkeiten ein. Es soll damit möglich sein, ein Grundverständnis für die Interaktion der im Schema aufgezeigten Komponenten zu erlangen. Das Beispiel ist ein Adressbuch für die an meiner Diplomarbeit mitwirkenden Personen. Abbildung 5: Screenshot Adressbuch MobileMotionBox [MMB2004a] Die Funktionalitäten sind folgende: Durch Klicken auf ein Register (z.b. B ) werden in der Datenbank die Personen mit entsprechendem Anfangsbuchstaben herausgesucht und in einer Liste dargestellt. Man hat dabei die Möglichkeit, ein Bild der Person mit einem weiteren Klick anzuzeigen.

13 Kapitel 1: Verschmelzung von Multimedia und dynamischen Inhalten Flash PHP Abbildung 6: Interaktionsschritt Flash-to-PHP (eigene Änderung der Abb. 3) Wie bereits erwähnt, wähle ich als eine mögliche, moderne Variante der Datenübergabe zwischen Flash und PHP das LoadVars-Objekt. In dieses Objekt kann man Daten von einem externen Script laden oder Daten aus Flash an ein externes Script senden. Erzeugen eines neuen LoadVars-Objekts namens myloadvars für den Datentransfer. var myloadvars = new LoadVars(); Ein String (Variable) namens thisletter wird unserem LoadVars-Objekt hinzugefügt. myloadvars.thisletter = B ; Senden des LoadVars-Objekts an das angegebene PHP-Script. myloadvars.sendandload("mmb_adressbuch.php",myloadvars,"post"); PHP MySQL Abbildung 7: Interaktionsschritt PHP-to-MySQL (eigene Änderung der Abb. 3) Herstellen der Verbindung mit der SQL-Datenbank. Dabei müssen Server, Username und Passwort sowie der Datenbankname angegeben werden. mysql_connect("localhost","brunschw_mmb","mobile"); mysql_select_db("brunschw_mmb"); Die Variable thisletter, welche von Flash von Flash übergeben wurde, wird nun in die neue PHP-Variable tab gespeichert. $tab = $HTTP_POST_VARS['thisLetter']; Eine Anfrage für alle Personen, deren Namen mit B beginnen, wird gestartet. $qr = mysql_query("select * FROM kontakt WHERE LEFT(nachname,1) = '".$tab."' ORDER BY nachname");

14 Kapitel 1: Verschmelzung von Multimedia und dynamischen Inhalten MySQL PHP Abbildung 8: Interaktionsschritt MySQL-to-PHP (eigene Änderung der Abb. 3) MySQL nimmt die SQL-Anfrage entgegen und sucht in der Datenbank nach den entsprechenden Datensätzen, welche sogleich ans PHP-Script zurückgegeben werden und in der Variable gr abgespeichert werden (siehe PHP MySQL) PHP Flash Abbildung 9: Interaktionsschritt PHP-to-Flash (eigene Änderung der Abb. 3) In PHP wird ein Rückgabe-String erstellt, welcher nachher folgende Form aufweist: n=1&nachname0=brunschwiler&vorname0=joerg& 0=joerg@brunschwiler.ch&telefon0 = &bildDatei0=joerg.jpg&aufnahme0=Joerg, 2003 $rstring = "n=".$nrows; for ($i=0; $i < $nrows; $i++) { $row = mysql_fetch_array($qr); $rstring.= "&nachname".$i."=".$row['nachname']."&vorname".$i."=".$row['vorname']; $rstring.= "&telefon".$i."=".$row['telefon']."& ".$i."=".$row[' ']; $rstring.= "&bilddatei".$i."=".$row['bilddatei']."&aufnahme".$i."=".$row['aufnahme']; echo $rstring; Flash wartet seit dem Aufruf myloadvars.sendandload( ) auf die Antwort von PHP und wird bei der Ausgabe des rstrings wieder aktiv. Hier bietet das LoadVars-Objekt einen grossen Vorteil gegenüber den früher verwendeten Funktionen LoadVariables() und LoadVariablesNum(). Wie beschrieben wartet das Objekt auf einen Rückgabewert. Mit verschiedenen Objekt-Funktionen können dabei sogar Statusabfragen bezüglich bereits übertragener und totaler Rückgabe-Dateigrösse gemacht werden, was vor allem beim Übertragen von Bildern grossen Sinn ergibt. Auf der Bühne existiert das Textfeld inhalt, welches mit einer Option angewiesen wurde, den Inhalt als HTML zu interpretieren und auszugeben. In dieses Textfeld werden nun die einzelnen Variablen des Resultat-Strings formatiert hineingeschrieben. Falls ein Foto der Person existiert, wird neben dem Namen zusätzlich ein Bild-Link angezeigt. Die AS-Funktion zeigejpg bei einem Klick darauf ausgeführt. inhalt.htmltext = ""; for (i=0; i < this.n; i++) {

15 Kapitel 1: Verschmelzung von Multimedia und dynamischen Inhalten 6 if (this["bilddatei"+i]!= "") { inhalt.htmltext += "<b>" + this["vorname"+i] + " " + this["nachname"+i] + "</b>" + "<a href='asfunction:zeigejpg," + this["bilddatei"+i] + "#" + escape(this["aufnahme"+i]) + "'> (<font color='#0000cc'>bild</font>)</a><br>"; else { inhalt.htmltext += "<b>" + this["vorname"+i] + " " + this["nachname"+i] + "</b><br>"; inhalt.htmltext += " " + this["telefon"+i] + "<br>"; inhalt.htmltext += " <a href='mailto:" + this[" "+i] + "'>" + this[" "+i] + "</a><br><br>"; Die angesprochene AS-Funktion zeigejpg splittet nun den String mit Dateiname (dessen Form noch mit unescape in die richtige Form decodiert werden muss) und Aufnahmetext wieder in einzelne Parameter auf, lädt das Bild in den auf der Bühne angepassten Movieclip bildhalter und schreibt den Text ins Feld aufnahme. function zeigejpg(paramstring) { var params = paramstring.split("#"); bildhalter.loadmovie(params[0]); aufnahme.text = unescape(params[1]); Somit wäre das Beispiel MMB-Adressbuch abgeschlossen. Die Entwicklungsdateien können auf der beigelegten CD betrachtet werden.

16 Kapitel 2: MobileMotionBox 7 2 MobileMotionBox Mein Teil des Gesamtprojekts MobileMotionBox bestand darin, die beiden Module Mono Logo Editor [MMB2004b] und Mono Picture Editor [MMB2004c] zu programmieren. Die Firma Spherix lieferte mir das Grunddesign beider Module. In den Aufbau der Applikation und die Ausgestaltung der anderen Module wie MMS Composer und Galleries für Logos und Bilder hatte ich leider keine Einsicht. Die Loader sowie Datenbankanbindungen werden vom Programmierer der Applikation nach Vollendung und erfolgreichen Tests seiner Module eingefügt. Aus diesen Gründen umfasst das Multimedia-Konzept nicht alle möglichen Punkte, so beschränkt sich z.b. das inhaltliche Konzept (Gliederung) nur auf die Module, weshalb dieser Teil sehr kurz ausfällt. Um den Umfang des Projektes zu verdeutlichen, umschreibe ich zuerst kurz das Gesamtprojekt MobileMotionBox. Danach beziehe ich mich nur auf die beiden monochromen Editoren. Aufgrund der kleinen Unterschiede der beiden Module sind alle Aussagen nach der Produktdefinition sowohl für den Mono Logo Editor und den Mono Picture Editor gültig. 2.1 Produktdefinition MobileMotionBox Die MobileMotionBox ist eine skalierbare Software-Applikation, die als Schnittstelle zum Mobilfunkbereich interessante Einsatzmöglichkeiten bietet. Ob als Instrument für begleitende Marketingaktionen, zur Lancierung von neuen Werbeplattformen oder ganz einfach, um einen Mehrwert für Ihre Kunden zu schaffen MobileMotionBox bietet die ideale Basis. Die MobileMotionBox wurde als eigenständige Server-Applikation realisiert. Die Applikation agiert auf einer eigenen Server-Umgebung und kann ohne grosse Investitionen von diversen externen Servern oder Applikationen im Remote-Betrieb angesteuert werden. Die Anwendung ist so erstellt, dass Sie problemlos erweiterbar ist. Bereits die Basisversion bietet umfangreiche SMS/MMS Transfer-Funktionen und eine dynamische Anbindung an die eigenständige Content-Datenbank. Die Benutzeroberfläche kann individuell dem entsprechenden Corporate Identity angepasst werden. Durch die digitale Lancierung können die deutschsprachigen Märkte Schweiz, Deutschland und Österreich kosteneffizient angepeilt werden, wobei das Hauptaugenmerk so auch in dieser Arbeit zuerst auf die Schweiz gelegt wird Modul Mono Logo Editor Mit dem Mono Logo Editor kann man im Internet, ohne eigene Grafik-Software eigene Betreiberlogos gestalten. Das Format der Betreiberlogos ist 72 (Breite) x 14 Pixel (Höhe) und beschränkt sich auf die Farben schwarz und weiss für die monochrome Darstellung Modul Mono Picture Editor Mit dem Mono Picture Editor kann man im Internet, ohne eigene Grafik-Software eigene Bildmitteilungen kreieren. Das Format der Betreiberlogos ist 72 (Breite) x 28 Pixel (Höhe) und beschränkt sich auf die Farben schwarz und weiss für die monochrome Darstellung. 2.2 Thematisch/inhaltliches Konzept (Gliederung) Aus oben genannten Gründen gehe ich hier nur auf die Gliederung der Module ein, weshalb der Teil ziemlich kurz ausfällt. Beide Module sind in Bezug auf diese Punkte genau gleich

17 Kapitel 2: MobileMotionBox 8 aufgebaut. Die Struktur ist deshalb so ungewohnt, da die Geschichte mit den Drag&Drop- Symbolen nicht ganz einfach ist. Sie werden direkt und gleichzeitig nach deren Aufruf sowohl in die Drag&Drop-Leiste als auch in die Drag-Ebene geladen. 1.0 Intro Pixel-Start-Animation 2.0 Hauptfilm (Modul) Arbeitsfläche mit allen Funktionalitäten 3.0 Drag&Drop-Leiste Scrollbarer Bereich für die Drag&Drop- Symbole 3.1 Drag-Ebene Ebene zum Verschieben und Platzieren der vergrösserten, halbdurchsichtigen Symbole 3.2 Drag&Drop-Symbole Nach Themengebieten geordnete Design- Hilfen 4.0 Hilfe Symbolerklärungen 1.0 Intro 2.0 Hauptfilm (Modul) 4.0 Hilfe 3.2 Drag&Drop-Symbole 3.0 Drag&Drop-Leiste 3.1 Drag-Ebene 2.3 Didaktisch/methodisches Konzept Hier wird nur auf das Endprodukt eingegangen. Auf die Entwicklungsschritte der von der Firma Spherix erhaltenen Vorgaben bis zum Abschluss des Projekts wird im Anhang eingegangen. Dort sollten meine selbst eingebrachten und umgesetzten Ideen in visueller und funktioneller Hinsicht schlüssig nachzuvollziehen sein Zielgruppe / Motivation Das Zielpublikum wird in den Kapiteln Display-Trends und Anwendungen für monochrome Displays im wirtschaflichen Teil einführend umschrieben. Es ist jedoch nicht unbedingt nötig, diesen zuerst zu lesen. In der Zusammenfassung handelt es sich dabei um die immer noch grosse Anzahl von Besitzern von Monochrom-Display-Handys. Der Anwenderkreis der Mono Editoren wird jedoch noch weiter eingeengt. Die Kreationen beschränken sich auf schwarz/weiss-logos, welche vor allem für die Nutzer der Nokia- Handys mit Monochrom-Displays zugeschnitten sind. Dabei Handelt es sich um folgende Modelle (Liste nicht abschliessend, nur diejenigen mit der grössten Verbreitung): 2100, 3210, 3310, 3330, 3410, 3510, 5110, 5130, 6310i, 6510, 8210, Auch viele neueren Handys mit Farbdisplay von Hersteller Nokia unterstützen dieses Format. Nur ist der Anreiz für die Gestaltung eines monochromen Logos für diese Handytypen denkbar klein. Die Frage, wer denn genau hinter diesem Anwenderkreis steht, ist relativ schwierig zu beantworten. Es bestehen keine öffentlich zugänglichen Statistiken über den Download von monochromen Logos und Bildmitteilungen. Aus Studien über die Altersverteilung von Mobile

18 Kapitel 2: MobileMotionBox 9 Entertainment-Nutzern lässt sich folgern, dass auch für diesen Bereich die Jährigen das Gros an Downloads für sich beansprucht. Zudem hat sich dieser Branche ihr eigenes, manchem stilsicheren Menschen aus dem grafischen Gewerbe unpassend anmutendes Look&Feel gegeben. Wie man zurzeit auf allen Fernsehkanälen sehen kann, spricht man die Handygeneration offenbar leuchtend, bunt und schrill an. Die online verfügbaren Contents der Branchengiganten sind ebenfalls nicht von höchster Qualität, was das Design entspricht. Spherix möchte hier bewusst ihren eigenen Content einbringen, welcher sich in grafischer Hinsicht von der breiten Masse abhebt. Dafür können sie bereits auf eine grosse Anzahl von qualitativ hochwertigen Bildern aus langjähriger Tätigkeit im Bereich Multimedia zurückgreifen. Dieser Content findet in der MobileMotionBox Platz in den Gallery-Modulen (MMS, Logos, Bildmitteilungen). Er wird von der Spherix selbst oder von kreativen Usern (durch die Kunden über die Administrations-Oberfläche freigegeben) eingespeist und in verschiedene Themengebiete gegliedert. Die Idee, mit einer neuen Qualität von Bildern auf den noch jungen, von grafischen Fehlern nur so strotzenden Markt zu gehen, ist eine der Hauptmotivationen der Spherix für die Entwicklung des Tools. Zudem soll mit der Applikation ein Zwischenschritt in Richtung Fernziel Mobile Advertising getan werden. Diese Informationen, welche die gesamte Anwendung betreffen, sind hier jedoch nur am Rande zu betrachten. Die Zielgruppe der beiden Mono Editoren könnte folgendermassen umschrieben werden: Kreativer Handybenutzer, welcher ein Nokia-Handy mit Monochrom-Display besitzt und dessen Aussehen eine eigene Note geben will (Mono Logo Editor). Kreativer Mensch, welcher über den Handytyp eines anderen Bescheid weiss und ihm eine selbst gestaltete Nachricht oder ein Logo zukommen lassen möchte Funktionalität In einer Matrix, welche in vergrösserter Form das Display eines Handys darstellt, kann der Benutzer seiner kreativen Ader freien Lauf lassen kann. Dabei werden ihm folgende Funktionen geboten. Freihandzeichen mit der Maus Anders als in allen bekannten Editoren, sollen die Farben weiss und schwarz nicht angewählt werden müssen, jede Pinselstrich bzw. Klick ändert jeweils direkt die Farbe des Pixels (von weiss auf schwarz, von schwarz auf weiss). Folgende beide Varianten stehen dabei zur Verfügung: o Einzelne Pixel per Mausklick markieren. o Mehrere Pixel mit einer Mausbewegung (bei gedrückter linker Maustaste) markieren. Um den Bedienkomfort zu erhöhen und dem logischen Zeichnen näher zu kommen, darf ein Pixel beim selben selben Mausstrich nicht nochmals geändert werden. Um sich dies besser vorstellen zu können, hier eine kleines Beispiel zu diesem Feature: Wenn Sie eine Acht (8) zeichnen möchten, so würde dort, wo sich die Linien in der Mitte kreuzen der Pixel wieder geändert, was dazuführt, dass er schlussendlich genau die umgekehrte Farbe hat als der Rest des Zeichens. Dies wird somit vermieden. Schreiben von Text, welcher direkt auf der Pixel-Matrix ausgegeben wird. Ein automatischer Zeilenumbruch findet statt. Folgende Zeichen sollen gestattet werden: o Grossbuchstaben (A..Z) (26 Zeichen) o Zahlen (0..9) (10 Zeichen) o Sonderzeichen (!@#$...) (32 Zeichen) Drag & Drop von verschiedenen, nach Themengebieten sortierten Symbolen, welche den User bei der Gestaltung unterstützen. Dieser Punkt könnte von grosser Bedeutung für den Erfolg der Module sein, da sind die Spherix AG und ich uns einig. Ob und wie der Markt darauf ansprechen wird, wird interessant zu beobachten sein.

19 Kapitel 2: MobileMotionBox 10 Wir nehmen an, dass der junge Handybenutzer, sagen wir mal einwenig überspitzt nicht so kreativ ist. Das Feature bietet ihm z.b. die Möglichkeit ein Herz-Symbol auf die Matrix zu ziehen, sodass dieser Teil seiner Love-Botschaft bereits getan ist und er nur noch z.b. den Namen seiner Freundin daneben schreiben muss. Löschen der Matrix. Negieren der Matrix, d.h. alles was schwarz war wird weiss, und umgekehrt. Spiegeln der Matrix in horizontaler und in vertikaler Richtung. Verschieben der Matrix in die vier Richtungen oben, unten, rechts und links. Rückgängig machen von getätigten Schritten und das Wiederherstellen derjenigen. Speichern des Werks als GIF-Datei. Senden des Werks an ein Handy (dieser Teil wird vom Programmierer der MobileMotionBox im Nachhinein implementiert, sobald er mit den restlichen Modulen soweit ist). Nebenbei hat er jederzeit die Möglichkeit, sich einen Hilfetext anzeigen zu lassen und selbstverständlich auf in ein anderes Modul zu wechseln. Das gesamte Tool soll auf Flash wiedergegeben werden, womit eine grosse Verbreitung gewährleistet ist, ist das Plugin doch bei 98% aller Internet-Nutzer verbreitet, was Ihnen bereits im Unterkapitel Flash

20 Kapitel 2: MobileMotionBox Gestalterisches Konzept (Styleguide) Screenshot Beschreibung Screen Vorangestellt werden muss, dass die Anwendung in einem PopUp-Fenster aufgerufen wird und somit keinen weiteren Hintergrund mehr besitzt. Die Ausmasse der Anwendung sind 660 (Breite) x 500 Pixel (Höhe). Damit ist sie auch für User mit kleineren Bildschirm-Auflösungen (800 x 600) noch gut sichtbar. Der Screen ist durch die Rahmenstruktur klar in folgende drei Teilbereiche eingeteilt: Programm-Rahmen, welcher die gesamte Anwendung einfasst. Enthält die Navigationsleiste, einen Schliessen-Button und einen Link-Button zu Spherix. Modulbezeichnungs-Rahmen auf der rechten Seite Arbeitsfläche Die Arbeitsfläche selbst ist durch zwei weitere Quer-Rahmen und die vertikale Design-Trennung in weitere logische Teilbereiche aufgeteilt: o Oberes Drittel, Background-Design: - Links befindet sich eine leere Rasterfläche. - In der Mitte eine Handy-Abbildung. - Rechts ebenfalls eine leere Rasterfläche, in welcher jedoch bei Betätigung des Pics-Buttons eine scrollbare Auswahlliste für die Drag&Drop-Symbole erscheint.

21 Kapitel 2: MobileMotionBox 12 o o o o Elemente Spruch-Rahmen, enthält einen Slogan und den im oberen Drittel erwähnten Pics-Button. Mittleres Drittel: Der Zeichenbereich, enthält die Matrix zum Freihandzeichnen, welche ebenfalls die Auswirkungen der übrigen Funktionen anzeigt. Funktionen-Rahmen - Links befinden sich der Sende-Bereich mit den Funktionen Save, Send und Help - In der Mitte befindet sich der Texteditor und der Button Show. - Rechts befinden sich die Funktionen Del, Neg, Flip (vertikal), Flip (horizontal), Undo, Redo, sowie Move Up, Move Down, Move Left, Move Right Unteres Drittel, Background-Design: Die im oberen Drittel beschriebenen Inhalte werden hier weitergeführt, ausgenommen der scrollbaren Auswahlliste Programm-Rahmen Die Navigationsleiste befindet sich oben links, was dem Benutzer das aus anderen Anwendungen gewohnte Programmmenu-Feeling gibt, d.h. er findet die Navigation dort, wo er diese aus seinen Anwender-Gewohnheiten heraus zuerst vermutet und sucht. Sie enthält die Hauptmenupunkte, welche zum Teil so genannte ausklappbare Untermenupunkte beherbergen. Diese erscheinen beim MouseOver direkt unterhalb des Hauptmenus. Der Link auf die Spherix befindet sich ebenfalls wie die üblichen Copyright-Links bzw. Hersteller-Links ganz unten. Dass sich der Button zum Schliessen der Anwendung / des PopUp-Fensters ebenfalls unten befindet, dürfte leicht ungewohnt sein, denn dieser wird meist oben rechts erwartet. Die Gründe darin liegen, dass man der Navigation oben für weitere, sicher noch folgen werdende Erweiterungsmodule Platz lassen und unten die optische Balance, zusammen mit dem Spherix-Button halten möchte Modulbezeichnungs-Rahmen Dieser Teil rückt durch den Schattenwurf des Programm-Rahmens leicht in den Hintergrund. Mit der Farbwahl von zwei verschiedenen Graustufen für Hintergrund und Logo/Modulbezeichnung wird dieser Hintergrund-Charakter nochmals unterstützt. Für eine bessere Einordnung in das Corporate Identity des Kunden können diese Farben in einer leicht teureren Programm-Version nach Belieben angepasst werden. Das MobileMotionBox-Logo entstand aus einer konsequenten Zusammenführung der in der ganzen Applikation verwendeten Pixelschriften und gibt jedem Modul seine Zugehörigkeitsnote. Unter diesem Logo wird die Applikation vermarktet. Der Kunde hat keinen Einfluss auf die Namensgebung des Tools. Das Ziel ist es, mit diesem Logo einen Wiedererkennungswert für die Firma Spherix zu schaffen und den Markennamen MobileMotionBox zu festigen. Aus diesen Gründen wird das Logo bei jedem Modul rechts unten platziert. Die Schreibrichtung von unten nach oben entspricht einer Gewohnheit, welche jeder Benutzer von alltäglichen Dingen wie z.b. Ordner-Beschriftungen her kennt und hemmt in keiner Weise den Lesefluss oder gar die Erkennbarkeit.

22 Kapitel 2: MobileMotionBox 13 Die Modulbezeichnung, hier z.b. Mono Logo Editor ist oben rechtsbündig ausgerichtet. Auch hier wird aus oben genannten Gründen von unten nach oben geschrieben Background-Design Das Background-Design besteht aus einer andeutungsweisen Zeichnung eines Mobiltelefons, welches eingemittet und leicht eingesetzt auf einem orangefarbenen Raster steht. Die so erreichte Dreiteilung des Screens ist wichtig für die Logik der angeordneten Funktions-Buttons. Im modernen Webdesign, wird diese Art von Rasterung oft eingesetzt. Es ist ein zeitgenössisches Element, welches Flächen nicht einfach leer erscheinen lässt. Die beim Design von Drucksachen oft bewusst erzeugten leeren Flächen haben im Webdesign noch immer nicht richtig Einzug gehalten. Rasterungen sind eine Art Mittelding zwischen Spannung erzeugendem Leerraum und der Füllung des Platzes mit anderen Elementen wie z.b. Bildern. Sie müssen nicht sparsam eingesetzt werden, ihre Wirkung entfacht sich gar erst ab einer bestimmten Grösse. Durch die Zeichnung des Handys kann das Modul auf den ersten Blick als Anwendung für den mobilen Telekommunkationsmarkt erkannt werden. Die Flächen sind durchwegs Farbtöne und Farbverläufe von Grau bis Stahlblau, was dem ganzen den modernen Touch gibt, berücksichtigt man die jetzige Entwicklung der Gerätehersteller, welche nun geschlossen vom ehemaligen Kunststoff-Design abkommen und auf schlichten Metall-Look setzen. Die Farbwahl ist ein Grund dafür, dass sich diese Zeichnung so aus allen anderen Elementen hervorhebt. Ein anderer Grund ist jedoch auch klar: es ist das einzige Bild des Moduls, weshalb das Handy natürlich ganz klar einen Sonderstatus im Designs erhält. Die oben erwähnte moderne Handy-Darstellung mag vielleicht etwas absurd klingen, hat das Gerät doch ein sehr kleines Display und eine Antenne, was sehr an eine Antiquität erinnern lässt. Diese Elemente sind jedoch genau so notwendig, um den Verwendungszweck des Moduls zu unterstreichen. Es ist in diesem Zusammenhang offensichtlich, dass auf dieser kleinen Fläche oben, mit allen, ein solches Gerät identifizierbar werden lassenden Elementen gearbeitet werden wollte. Dies bedeutet einfacher gesagt: Antenne, Display und Tastatur mussten Platz finden, was der Ausgestaltung der Zeichnung einen klaren Rahmen setzte. Graviert in das Mobiltelefon ist natürlich wieder das MobileMotionBox-Logo, welches den bereits erwähnten Wiedererkennungswert der Anwendung nochmals fördert Spruch-Rahmen Der Slogan You ve got 1008 Pixels be creative sagt meiner Meinung nach sehr viel aus. Der erste Part ist eine sachliche Beschreibung der Ausgangslage. Die 72 x 14 Pixel ergeben genau die 1008 Pixel. Zu beachten ist auch die informal language. Englisch ist und wird immer mehr zur coolen Sprache der jungen Generation. Das mit Apostroph abgekürzte you have zeigt an, dass man mit dem Anwender sprichwörtlich per Du ist. Der zweite Teil ist eine interessante und klare Aufforderung. be creative zeigt dem User an, dass seine Arbeit Kreativität bedeutet, dass das Ergebnis schlussendlich ein einmaliges, anspruchsvolles Werk ist. Dazu ist auch noch zu sagen, dass bei der Wortwahl besonderen Wert auf eine einfache Sprache gelegt wurde. So ist wirklich kein einziges Wort darin zu finden, welches auch Englisch-Anfänger problemlos in die deutsche Sprache übersetzen können, was ihnen zusätzlich ein gutes Gefühl gibt Drag&Drop-Symbole Zuerst eine kleine Anmerkung zum kleinen Slogan hier. Drag&Drop hat sich zu einem allgemein bekannten Begriff in der Informatik-Umgangssprache gemausert. Die Bedeutung ist einfach nur: ziehen und wieder fallen lassen.

23 Kapitel 2: MobileMotionBox 14 Im Kapitel Funktionalität wurde es bereits angesprochen: Dieser Bereich ist für diejenigen User gedacht, welche vielleicht doch nicht so ganz die kreativen Designer sind. Die Unterstützung des Users mit den nach Themengebieten geordneten Symbolen ist eine sehr wichtige Sache. Nicht jedermann ist in der Lage, selbst ein vollständiges Logo oder eine ganze Bildmitteilung zu gestalten. Dies soll nun keine beleidigende Aussage sein, doch wann haben Sie zum Beispiel das letzte Mal etwas frei gezeichnet? So geht es bestimmt vielen Anwendern auch. Deshalb ist es für sie eine sehr willkommene Hilfe, wenn sie häufig verwendete Formen wie Herzen oder Smileys nicht selbst mühsam zeichnen müssen. Die Symbole befinden sich auf einer scrollbaren Liste. Auf die Verwendung von einer separaten Liste pro Themengebiet wurde bewusst verzichtet. Oftmals weiss der User gar nicht, welchem Themengebiet sein gesuchtes Symbol zuordnen soll. So hat er die Möglichkeit, alle Symbole durch bequemes Scrollen der Liste direkt anzuschauen. Die gewünschte Form kann dann einfach, bei gedrückter linker Maustaste gezogen und auf dem Display platziert werden. Die Symbole befinden sich zur einfacheren Ausrichtung an den Rändern der Matrix in einem halb-durchsichtigen grauen Rechteck Matrix Das Design der Matrix ist in weiss gehalten, obwohl sich hier auch die von den Monochrom- Displays gewohnte hell-olivgrüne Farbe anbieten würde. Bei den Handy-Content-Anbietern hat sich der Begriff s/w-logos bzw. s/w-bildmitteilungen eingebürgert. Auch werden auf den Seiten der Content-Hersteller die Download-Vorschauen immer in schwarz/weiss gezeigt. Der Kontrast beim Zeichnen ist bei schwarz/weiss natürlich auch besser als bei schwarz/grün und die Werke wirken dadurch heller und schöner. Bitte beachten Sie hier wiederum die Anmerkungen zur Matrix im Kapitel Funktionalität unter Freihandzeichnen mit der Maus Texteditor Der Texteditor bzw. das Eingabefeld für den Text ist in einem, von den Monochrom-Display- Handys bekannten, hellen Olivgrün gehalten. Es gibt dem Benutzer das Gefühl vom SMS- Schreiben am Bildschirm. Die Länge des Textfeldes ist bewusst zu gross gewählt, um das Design sauber abzuschliessen. Eine genaue Begrenzung der Eingabezeichen kann leider nicht erfolgen, da im Eingabefeld eine andere Schriftart als für die endgültige Vorschau- Matrix-Schrift gewählt wurde. Der Benutzer merkt jedoch gleich beim ersten Klick auf Show TXT wie viel Text auf der möglichen Anzahl Zeilen Platz findet. Die Beschriftung Dein Text ist bewusst als einziger deutschsprachiger Part des Grunddesigns gewählt worden. Es ist eine kleine Ironie für helle Mitdenker. Bitte beachten Sie hier wiederum die Anmerkungen zum Texteditor im Kapitel Funktionalität Buttons Das in der Fachliteratur als Priming bezeichnete Gedächtnissystem ermöglicht es uns, sehr rasch Piktogramme zu erkennen und zu interpretieren. Diesen Effekt machen wir uns bei der Gestaltung der Schaltflächen zu Nutze. Jeder Button hat sein eigenes Zeichen, sowie zusätzlich eine kurze Beschreibung von maximal 4 Zeichen. In der Kombination geben diese eine eindeutige, leicht verständliche Auskunft über die Funktion des jeweiligen Buttons. Hier die vollständige Auflistung der Schaltflächen im Arbeitsbereich: Beschreibungswort Symbol Symbolbeschreibung Save Abbildung einer Diskette, einfachste Darstellung eines Speichermediums, ähnlich dem Speichern-Symbol von Office und Windows.

24 Kapitel 2: MobileMotionBox 15 Send Help Show Del Die beiden Pfeile versinnbildlichen das Vorwärtsschieben, das Weiterleiten, ähnlich Verkehrsschildern. Das Fragezeichen ist in den meisten Software- Anwendungen das Zeichen für die Hilfeseiten. Abkürzung für Text, hat sich z.b. durch SwissTXT (Teletext) in die Köpfe der Leute eingeprägt. Die Leere zeigt das Ergebnis des Klicks für die Matrix. Neg Flip Flip Undo Redo Pics Versinnbildlichung von alles was schwarz ist wird weiss und natürlich auch der Umkehrung dessen. Zeigt die horizontale Spiegelung an. Das L ist das einfachste Zeichen um diesen Sachverhalt darzustellen. Zeigt die vertikale Spiegelung an. Das L wurde auch hier als das einfachste Zeichen für den Zweck verwendet. Der geschwungene Rückwärtspfeil ist vor allem bekannt durch die Office-Programme. Auch der Vorwärtspfeil kennt jedermann v.a. aus den Office-Programmen. Das Herz ist schlichtweg DAS Symbol überhaupt und voraussichtlich auch eines der meistverwendeten hier. (Move) (Dreiecke) Für die vier Verschiebe-Funktionen (up, down, right, left) sind einfache Dreiecke gewählt worden, die Spitze zeigt jeweils in die entsprechende Richtung, die Anordnung der Pfeile ist bereits von Gamepads und Handy-Joypads hinreichend bekannt Hilfe Da der Hilfetext direkt ins Bearbeitungsfenster des Users eingeblendet wird und für ihn kein Seitenwechsel stattfindet, hat er weniger Angst vor Datenverlust. Sein Werk bleibt selbstverständlich im Hintergrund unangetastet. Das Design der Hilfe fügt sich perfekt in die Seite (gilt für beide Module) ein und beherbergt grafisch nochmals alle Funktionen. Im Text wird der Benutzer höflich geduzt, d.h. mit grossgeschriebenem Du. Diese Sprache ist direkter für Jugendliche und auch für Erwachsene nicht unhöflich. Der Schliessen-Button der Hilfe befindet sich exakt über dem Schliessen-Button der Applikation, sodass der Benutzer das Programm beim Wegklicken der Hilfe nicht versehentlich schliessen kann. Die Hilfe ist in einer externen Datei ausgelagert, was wiederum die Dateigrösse senkt und die Seite für beide Module zugänglich macht Intro Flash bedeutet für mich Bewegung, zumindest in einem gewissen Sinn. Das Intro beschränkt sich hier auf den pixelweisen Aufbau der Startmatrix. Der Clou daran ist, dass der Benutzer die entstandene Figur mit der Schrift direkt in seiner Zeichenmatrix wieder findet und diese sogleich auch ändern kann. Zudem wird seine Aufmerksamkeit durch die Animation auch gleich auf das zentrale Element des Moduls, die Arbeitsfläche gelenkt Design Viele Design-Aspekte sind bereits unter den entsprechenden Elementen beschrieben worden. Zu erwähnen sind hier einzig noch die Kanten der Rahmen und der Buttons, welche

25 Kapitel 2: MobileMotionBox 16 diesen Elementen ein dreidimensionales Aussehen verleihen und sie leicht abgerundet erscheinen lassen. Die Verwendung von zwei hellen Gelbtönen mit je einem Pixel Breite auf der Seite des virtuellen Lichteinfalls hier wird die am meisten gebrauchte Variante links oben gewählt gibt der Kante den leicht abgerundeten Charakter. Die Schattenseite ist durch eine, ein Pixel breite, braune Linie gekennzeichnet. Eine zusätzliche Tiefenwirkung wird mit einem halbdurchsichtigen, drei Pixel breiten Schattenwurf auf die Hintergrundfläche erzielt Farben Die verwendeten Farben entsprechen einer indizierten Farbpalette von 256 Farben, was die Grösse der Hintergrundbilder bei optimaler Qualität auf ein Minimum begrenzt. Durch die Verwendung des GIF-Formats werden die Bilder von Flash automatisch in Vektoren umgewandelt, was sich wiederum positiv auf die Qualität und das Gewicht auswirkt. Die Rahmen sind stets in Farbverläufe von Orange zu Rot gefasst. Diese Farben versprühen viel Energie und passen gut zum heutigen peppigen Image der Handy-Generation Schriftarten Bei der verwendeten Fonts wird konsequent auf Pixel-Schriftarten gesetzt. Diese bieten im Flash-Umfeld den grossen Vorteil, dass sie direkt in Vektoren umgewandelt werden und somit der flasheigene Verwisch-Effekt nicht einsetzt. Einzig bei dynamischen Textfeldern müssen flashseitig die Outlines der Fonts mitgegeben werden, was sich z.b. im Vergleich zur Verwendung der Standardschrift _sans leicht negativ auf die Applikations-Grösse auswirkt. Die in diversen Variationen vorhandenen Schriftarten hooge, kroeger und standard unterstützen die Idee des Pixeldesigns für Logos und Bildmitteilungen natürlich optimal.

26 Kapitel 3: Umsetzung in Flash 17 3 Umsetzung in Flash Da dies ein sehr zentraler Teil meiner Arbeit ist, möchte ich auf die wichtigsten Grundideen der Umsetzung in Flash eingehen. Die kompletten Listings soweit das in Flash mit seinem dezentralen Code überhaupt Sinn macht finden Sie im Anhang. Die Dokumentation des Quellcodes beschränkt sich auf ein für mein Befinden vernünftiges Ausmass. Ziel ist es, dass ein mit Flash und ActionScript vertrauter Entwickler sich relativ schnell im Code zurechtfindet. Dazu habe ich die Ordnung der Funktionen sowie speziellere Befehle auskommentiert. Da es sich um die Programmierung von Modulen handelt, habe ich den allgemeinen Navigationselementen keine Funktionen hinterlegt. Diese werden nachher durch den Programmierer der MobileMotionBox hinzugefügt. 3.1 Bildqualität und pixelgenaue Positionierungen Eine optimale Bildqualität bei akzeptabler Dateigrösse ist für die Module extrem wichtig. Dazu werden die Hintergrund- und Symbol-Bilder als GIF-Datei importiert. Flash behandelt einzig dieses Format intern als Vektor-Bild, d.h. die Kanten des Bildes werden bei der Skalierung, im Gegensatz zu JPG- und PNG-Bilder, nicht unscharf durch Interpolation. Dieser Effekt ermöglicht erst das pixelgenaue Positionieren von Elementen. Jedoch tritt diese Vektorbehandlung standardmässig erst beim Exportieren in Kraft. Damit das pixelgenaue Positionieren von Elementen im Arbeitsbereich von Flash möglich ist, muss bei jedem Bildelement in der Bibliothek die Option Allow smoothing ausgeschaltet werden. Zusätzlich muss darauf geachtet werden, dass bei der X- und Y-Positionierung keine Kommastellen entstehen, da sonst eine gleich bleibende Darstellung bei der Skalierung der Anwendung nicht gewährleistet wäre Flexibilität Bei der Umsetzung der beiden Module wurde sehr grossen Wert darauf gelegt, dass allenfalls nachfolgende Anpassungen möglichst einfach und schnell vorgenommen werden können. Alle Variablen wurden deshalb in einem eigenen Layer _variablen gespeichert. Alle Funktionen der beiden Module im Layer _module sind genau gleich. Änderungen und Erweiterungen der Funktionen können an einem Modul vorgenommen und getestet werden. Danach kann der gesamte ActionScript-Code dieses Layers direkt ins andere Modul kopiert werden. 3.2 Pixel-Matrix Der grafische Teil der Pixel-Matrix basiert auf der Duplizierung eines Pixel-Movieclips. Der Pixel-Movieclip hat die Bezeichnung p. Hier wurde bewusst auf die Suffixe für Codehinweise verzichtet, da dieser Pixel ja 1008 Mal bzw Mal dupliziert werden und deshalb der Name kurz gehalten werden muss. Allein dieser Schritt der kurzen Benennung von häufig gebrauchten Variablen bringt z.b. hier im Falle von p eine ca. 20-prozentige Performance-Steigerung gegenüber der Verwendung von pixel. Ausserdem hat der Pixel-Movieclip zwei Frames, wovon im 1. Frame ein weisses und im 2. Frame ein schwarzes Quadrat von 7x7 Pixel abgebildet ist. Des Weiteren sind die Variablen m für den X-Wert (Position des Pixels in horizontaler Ebene), n für den Y-Wert (Position des Pixels in vertikaler Ebene) und w für den Wert (false für weiss, true für schwarz). Die Abkürzungen entstammen übrigens dem Matrizenrechnen (m x n Matrix). Die Duplizierung des Pixels wird mit zwei ineinander verschachtelten For-Schleifen gelöst, wobei die Variablen breite und hoehe die Begrenzungen darstellen. Gleichzeitig muss den

27 Kapitel 3: Umsetzung in Flash 18 Duplikaten ein eindeutiger Name gegeben werden, wobei die Wahl auf p_i_j fiel (i stellt hier den Counter der äusseren For-Schleife und j denjenigen der inneren For-Schleife dar) Maus-Handling Die Programmierung des Pixel-Verhaltens bei Maus-Ereignissen war leider nicht so einfach, wie man auf den ersten Blick vermuten könnte. Schaltflächen unterstützen ein fürs Zeichnen unbedingt benötigtes Ereignis bei gedrückter Maustaste über den aktiven Bereich ziehen nicht. Dieses Ereignis kann nicht wie erhofft mit dem DragOver-Ereignis gelöst werden, denn dieses ist so definiert, das die linke Maustaste zuerst ausserhalb des Buttons gedrückt und danach darüber gezogen werden muss. Dies funktioniert aber nur für einen Pixel, der Mausklick von vorher verfällt sozusagen, sodass das DragOver-Ereignis für den nebenstehenden zweiten Pixel nicht stattfinden kann. Somit musste eine andere Lösung gefunden werden. MovieClips bieten in Sachen Ereignissen mehr Eigenschaften als die Schaltflächen. Im Handling der Events ist der einzige Unterschied, dass der aktive Bereich des MovieClips stets die gesamte Filmfläche ist. Deshalb muss beim Eintreten jedes Events zuerst überprüft werden, ob er auch über der Form des MovieClips befindet. Um der bereits erwähnten Funktionalität des Freihandzeichnens ein Pixel darf beim selben Mausstrich nicht nochmals geändert werden - Rechnung zu tragen, wird ein Pixel beim Überfahren (mit gedrückter linker Maustaste) als temporärer Pixel vorgemerkt, welcher im gleichen Zug nicht mehr geändert werden kann. Beim ClipEvent mousemove wird zusätzlich noch der dragstatus überprüft, welcher sicherstellt, dass momentan kein Drag&Drop-Symbol in die Matrix gezogen wird. So wird verhindert, dass beim Platzieren der Symbole Pixel geändert werden können. Folgende Aktionen können direkt auf dem MovieClip programmiert werden. onclipevent(load) { temp_pix = this._name; onclipevent(mouseup){ temp_pix = this._name; if(this.hittest(_root._xmouse, _root._ymouse)){ historyadd("paint"); onclipevent(mousedown){ temp_pix = ""; if (_root.dragstatus == false) { if(this.hittest(_root._xmouse, _root._ymouse)){ matrixchange(this.m,this.n); temp_pix = this._name; // History-Step schreiben historyaddstep([this.m,this.n]); updateafterevent(); onclipevent(mousemove){ if (this._name!= temp_pix && _root.dragstatus == false) { if(this.hittest(_root._xmouse, _root._ymouse)){ matrixchange(this.m,this.n); temp_pix = this._name; // History-Step schreiben historyaddstep([this.m,this.n]); updateafterevent();

28 Kapitel 3: Umsetzung in Flash Speicher- und Darstellungskonzept Die grafische Seite der Matrix wurde nun abgehandelt. Nun muss die Matrix auch noch bequem zugänglich gespeichert werden. Schliesslich muss bei vielen Funktionen wie z.b. Spiegelungen mit der Matrix gerechnet werden. Folgende Idee steht hinter dem Speicher- Konzept: In einem zweidimensionalen Array (1. Dimension = X-Wert, 2. Dimension = Y-Wert) sollen die Referenzen auf die Pixel-MovieClips gespeichert werden, welche mit ihren Variablen schliesslich die 3. Dimension darstellen. Die Frage, weshalb die Clips auch noch den X- und Y-Wert benötigen, obwohl sie ja im Array genau so gespeichert sind, stellt sich hier dem aufmerksamen Leser. Der Grund ist folgender: bei den MovieClip-Events beim Zeichnen in der Matrix müssen die Clips direkt wissen, welche Position sie haben, um dies an die matrixchange-funktion weiterzugeben. Um ein wenig mehr Licht ins Dunkel zu bringen, stellen Sie sich das Array so vor: Dimensionen: Die 3 Würfel der Tiefen-Richtung sind die Variablen Farbe, X-Wert, Y-Wert Variabeln Pixel-MovieClip X-Wert wobei die Farben-Variablen im Querschnitt genau das Aussehen der Matrix ergeben: Abbildung 10: Visualisierung des Speicher-Arrays (eigene Darstellung) 3.4 Level-Konzept Die Verwendung der Drag&Drop-Symbole in beiden Modulen erfordert mehrere SWF- Dateien, welche in verschiedenen Layern geladen werden. _level30 _level20 _level10 _level0 Hilfe Drag&Drop-Verschiebeebene Drag&Drop-Symbolleiste Hauptfilm mit Hintergrund, Buttons, Matrix-Pixel (welche sich aufsteigend ebenfalls in verschiedenen Tiefen der Ebene befinden, von 0 bis 1008 bzw. 2016) und Abtrenngitter (welches in der Tiefe von über den Matrix- Pixeln schwebt. 3.5 Intro-Schleife Flash ist, wenn es um durch ActionScript programmierte Animationen geht, noch immer nicht gerade einfach handhabbar. In diesem Fall soll eine bestehende Funktion wiederholt mit einer Verzögerung aufgerufen werden. Dazu erzeuge ich eine Art Schleife mit dem Befehl setinterval, welcher in definierten Zeitabständen die entsprechenden Pixel aus dem Start- Zeichen-Array setzt. Das Array wurde vorher noch sortiert, um die Reihenfolge zu verbessern. Für jeden Aufruf muss eine Counter-Variable hochgezählt werden, sodass beim Erreichen des Abbruchkriteriums (Array-Länge) der Befehl clearinterval ausgeführt werden kann, welcher das dauerhafte Aufrufen der Funktion abbricht.

29 Kapitel 3: Umsetzung in Flash History Das Vorhandensein von Rückgängig- und Wiederherstellungs-Funktionen ist für mich ein sehr wichtiger Punkt jeder Anwendung. Obwohl fast jede Änderung mit erneuter gleicher Änderung im Fall einer Monochrom-Matrix rückgängig gemacht werden kann, haben die Funktionen dennoch ihre Berechtigung. Viele Benutzer verfallen jeweils in eine Art Schockzustand, sobald sie etwas Falsches geklickt haben und sind dann nicht mehr fähig, an oben genannten Schritt zu denken. Undo und Redo sind meiner Meinung nach einfach psychologisch wichtig für den User. Die Umsetzung einer History wäre eigentlich gar nicht so kompliziert, das Problem ist jeweils der Speicherbedarf und die Performance. Im Fall der Matrix lassen es vor allem Performance-Gründe nicht zu, dass bei jeder Pixel-Änderung das gesamte Matrix-Array als Entwicklungsschritt abgelegt wird. Meine im Folgenden aufgezeigte Lösung für dieses Problem ist vielleicht etwas unorthodox, doch urteilen Sie selbst. Beim Freihandzeichen werden die geänderten Pixel zu einem Pinselstrich zusammengefasst und in einen Schritt gespeichert. Somit ist auch sichergestellt, dass der ganze Strich auf einmal rückgängig gemacht werden kann. Bei den Benutzerfunktionen wie z.b. der horizontalen Spiegelung wird nur die Art der Funktion abgelegt. Beim Undo wird der bereits erwähnte Trick mit dem nochmaligen Ausführen der Funktion verwendet. Einzige Ausnahme bildet hier die Löschen-Funktion, bei welcher wirklich die ganze Matrix gespeichert werden muss. Ebenso muss bei den Verschiebe-Funktionen die verloren gegangene Pixel-Linie auf einer Seite gesichert werden. Da das nochmalige Ausführen von Funktionen in Undo- und Redo-Funktion keinen erneuten Eintrag in die History mit sich ziehen soll, geschieht der Funktionsaufruf mit einem Typen undo. Die Redo-Funktion ist leicht anders aufgebaut als gewohnt. So kann man mehrere Schritte rückgängig machen, etwas ändern und die zuvor nach dem Fehler gemachten Änderungen wiederherstellen. Nun fehlt nur noch der History-Pointer welcher sich die aktuelle Position beim Rückgängigmachen merkt. Er muss bei jeder Änderung hochgezählt, bei Undos zurückgezählt werden. Steht er an einem der beiden Enden der History, werden die entsprechenden Buttons Undo und Redo zu Gunsten der Benutzerfreundlichkeit nicht klickbar gemacht. Mit all diesen Massnahmen und Überlegungen ist mir, so glaube ich zumindest, eine hoffentlich leicht nachvollziehbare, schnelle und speicherschonende Lösung geglückt. 3.7 Texteditor Für die Umsetzung des Texteditors musste ich mir einige Gedanken zur Schrift machen. Was gibt es dabei alles zu beachten? Zeichen-Aussehen, Platzbedarf, Abstände, Cursorpositionen, Zeilenumbrüche usw. machen den Texteditor vielleicht nicht gerade zu einem hochtechnischen Gebilde, doch stecken einige Clous und durch das Gestatten von 68 Zeichen auch viel Fleissarbeit dahinter. Folgende Zeichen werden in diesem Texteditor behandelt, d.h. sogar im Eingabefeld ist die Eingabe anderer Zeichen nicht möglich: Grossbuchstaben (A..Z) (26 Zeichen) Zahlen (0..9) (10 Zeichen) Sonderzeichen (32 Zeichen) Alle Zeichen, deren Aussehen in der Schrift kroeger 05_57 (wird auch von Nokia-Handys verwendet) und die Umsetzung in Array-Form finden Sie im Anhang. Schlussendlich kommen noch Leerzeichen und Enterschläge dazu, welche abgefangen werden müssen, plus ein erzwungener, automatischer Zeilenumbruch.

30 Kapitel 3: Umsetzung in Flash 21 Für jedes Zeichen muss das Aussehen in Array-Form, der Platzbedarf in X-Richtung und die Verschiebung in Y-Richtung für höher und tiefer gestellte Zeichen (Ausnahmen der 3x5- Matrix, meist Sonderzeichen) gespeichert werden. Kommen wir nach all diesen Vorüberlegungen zum groben Ablauf einer Texteingabe. Folgende Schritte müssen der Reihe nach für jedes Zeichen des Text-Strings erfolgen: Herausgreifen eines Zeichens des Text-Strings. Erkennen des Zeichens und Laden der entsprechenden Zeichen-Matrix. Überprüfung unter Berücksichtigung von aktueller Cursorposition und Breite des Zeichens, ob es auf der aktuellen Zeile noch Platz findet. Gegebenenfalls wird hier ein automatischer Zeilenumbruch erwirkt. Berechnung der Zeichen-Position, welche sich aus aktueller Cursor-Position und Verschiebungswerten zusammensetzt. Setzen der entsprechenden Pixel in der Matrix. 3.8 Drag&Drop-Symbole Die mögliche Wichtigkeit dieser Symbole für den Erfolg von der Anwendung wurde bereits im Kapitel Funktionalität erörtert, deshalb sehen Sie hier nur noch etwas zur Entstehung und Umsetzung. Die Idee für diese hineinziehbaren Symbole habe ich aus Programmen wie z.b. Visio kopiert, der Effekt zum Platzieren habe ich vom Drag&Drop-Verhalten des Mac OS X v10.3 Panther abgekupfert. Das Modul sollte in der Dateigrösse sehr klein gehalten werden. Da diese Symbole nicht von jedem User verwendet werden, habe ich mich entschieden, für die die Drag&Drop- Symbolleiste eine eigene Datei zu erstellen, die erst bei Bedarf geladen wird. Die Symbolleiste soll flexibel und scrollbar sein, das Scrollen soll alle von Windows gewohnten Funktionalitäten haben, d.h. die Länge des Scrollbalkens soll automatisch variieren und der Balken bedienbar sein. Ab Flash MX gibt es bereits integrierten UI- Components haben eine sehr flexible Scroll-Komponente. Einziger Nachteil gegenüber einer selbst programmierten Lösung ist leider die Dateigrösse, was jedoch wegen des Ladens bei Bedarf nicht so sehr ins Gewicht fällt. Meine Entscheidung fiel deshalb eben auf diese Komponente ScrollPane, welche sogar mittels CSS (Cascading Style Sheets) in ihrem Aussehen angepasst werden kann. Als Inhalt der ScrollPane lade ich die Symbole von nochmals einer anderen Datei. Diese muss ebenfalls eigenständig sein, da sie im Hauptfilm für den Verschiebe-Effekt nochmals in eine separate Datei (und Ebene) geladen wird. Beim Klicken eines Symbols im scrollbaren Bereich wird diese überlagernde Ebene aktiv, sodass das erscheinende, halbdurchsichtige Symbol perfekt platziert werden kann. Die Auftrennung der Drag&Drop-Geschichte in die 3 Dateien (ScrollPane, Drag-Ebene, Signs) macht diesen Teil sehr flexibel. Im scrollbaren Bereich werden die Sign-Inhalte dynamisch maskiert und die Scroll-Länge angepasst. Für Mutationen der Zeichen muss nur die Signs-Datei bearbeitet werden. Die Dateien können somit sehr gut von beiden Modulen geladen werden. 3.9 Funktionen Alle Funktionen sind global gesetzt. Dies erleichtert deren Aufruf von verschiedenen Orten ungemein, sei es als Unterfunktion oder als MovieClip-Event. Der Übersichtlichkeit halber wurden die Funktionen in fünf logische Blöcke aufgeteilt: Matrix-Funktionen, Texteditor- /Drag&Drop-Funktionen, History-Funktionen, Hilfs-Funktionen und Output-Funktionen.

31 Kapitel 3: Umsetzung in Flash Matrix-Funktionen Jede Änderung eines Matrix-Pixels zieht eine Mutation der visuellen Komponente der Matrix (MovieClips) und der speichertechnischen Komponente (Arrays) mit sich. In diesem Abschnitt wird dies nicht jedes Mal gesondert erwähnt, es wird nur von der Änderung eines Pixels oder der Pixel-Matrix gesprochen matrixgenerate Parameter: keine Aufgabe: Erzeugung der Matrix, Ausführen eines Teils der Start-Animation matrixchange Parameter: X-Koordinate des Matrix-Pixels, Y-Koordinate des Matrix-Pixels Aufgabe: Ändern eines Matrix-Pixels Funktions-Aufrufe: matrixsetfalse, matrixsettrue matrixchangeloop Parameter: keine Aufgabe: Ändern eines Matrix-Pixels in der Start-Animation Funktions-Aufrufe: matrixsetfalse, matrixsettrue matrixclear Parameter: Aufruf-Typ (ob als Undo-/Redo- oder Benutzer-Befehl) Aufgabe: Löschen der gesamten Matrix Funktions-Aufrufe: matrixsetfalse matrixnegative Parameter: Aufruf-Typ (ob als Undo-/Redo- oder Benutzer-Befehl) Aufgabe: Umkehrung jedes Matrix-Pixels Funktions-Aufrufe: matrixsetfalse, matrixsettrue matrixfliphorizontal Parameter: Aufruf-Typ (ob als Undo-/Redo- oder Benutzer-Befehl) Aufgabe: Horizontale Spiegelung der Matrix Funktions-Aufrufe: matrixsetfalse, matrixsettrue matrixflipvertical Parameter: Aufruf-Typ (ob als Undo-/Redo- oder Benutzer-Befehl) Aufgabe: Vertikale Spiegelung der Matrix Funktions-Aufrufe: matrixsetfalse, matrixsettrue matrixmoveleft Parameter: Aufruf-Typ (ob als Undo-/Redo- oder Benutzer-Befehl) Aufgabe: Verschiebung der Matrix um einen Matrix-Pixel nach links Funktions-Aufrufe: matrixsetfalse, matrixsettrue

32 Kapitel 3: Umsetzung in Flash matrixmoveright Parameter: Aufruf-Typ (ob als Undo-/Redo- oder Benutzer-Befehl) Aufgabe: Verschiebung der Matrix um einen Matrix-Pixel nach rechts Funktions-Aufrufe: matrixsetfalse, matrixsettrue matrixmoveup Parameter: Aufruf-Typ (ob als Undo-/Redo- oder Benutzer-Befehl) Aufgabe: Verschiebung der Matrix um einen Matrix-Pixel nach oben Funktions-Aufrufe: matrixsetfalse, matrixsettrue matrixmovedown Parameter: Aufruf-Typ (ob als Undo-/Redo- oder Benutzer-Befehl) Aufgabe: Verschiebung der Matrix um einen Matrix-Pixel nach unten Funktions-Aufrufe: matrixsetfalse, matrixsettrue Texteditor- / Drag&Drop-Funktionen dragsign_press Parameter: Symbol Aufgabe: Vergrössern und verschieben des Symbols dragsign_release Parameter: Verschiebung des Symbols in X-Richtung (kommt von der Unterschiedlichen Eingabeart und der Breite der Symbole) Aufgabe: Änderung der Matrix-Pixel unter Betrachtung des Symbols und der Absetz- Position Funktions-Aufrufe: drawsign drawsign Parameter: Symbolname, Absetz-Position X-Richtung, Absetz-Position Y-Richtung, Aufruf- Typ Aufgabe: Umsetzen des Symbols in Matrix-Pixel, Änderung der Matrix-Pixel für das gewählte Symbol Funktions-Aufrufe: matrixchange writeletter Parameter: Text-String, X-Position des Cursors, Y-Position des Cursors, Aufruf-Typ Aufgabe: Umsetzen der einzelnen Buchstaben in Matrix-Pixelschrift unter Berücksichtigung der Cursorpositon, gegebenenfalls: erzwingen eines automatischen Zeilenumbruchs. Funktions-Aufrufe: matrixchange History-Funktionen matrixundo Parameter: keine

33 Kapitel 3: Umsetzung in Flash 24 Aufgabe: Rückgängig machen von Gestaltungsschritten Funktions-Aufrufe: alle vom Benutzer ausführbaren Matrix-Funktionen matrixredo Parameter: keine Aufgabe: Wiederherstellen von rückgängig gemachten Schritten Funktions-Aufrufe: alle vom Benutzer ausführbaren Matrix-Funktionen historyaddstep Parameter: Schritt-Array Aufgabe: Zusammenfügen von mehreren Pixel-Änderungen zu einem logischen Pinselstrich historyadd Parameter: Typ der ausgeführten Benutzer-Funktion Aufgabe: Hinzufügen eines Gestaltungsschrittes zur History Hilfs-Funktionen matrixsettrue Parameter: X-Koordinate des Matrix-Pixels, Y-Koordinate des Matrix-Pixels Aufgabe: Setzen eines Pixels auf schwarz matrixsetfalse Parameter: X-Koordinate des Matrix-Pixels, Y-Koordinate des Matrix-Pixels Aufgabe: Setzen eines Pixels auf weiss Output-Funktionen savelogo Parameter: keine Aufgabe: Speicherung des Werkes bzw. Übergabe des Matrix-Arrays ans PHP-Script generateoutput Parameter: keine Aufgabe: gibt Werk in Array-Form aus (nur in Entwicklungsumgebung, nicht in Player).

34 Kapitel 4: Umsetzung in PHP 25 4 Umsetzung in PHP Wie bereits erwähnt hat die Firma Spherix entschieden, dass der Versand des Logos und die Datenbank-Anbindung vom Programmierer der MobileMotionBox erst nach Abschluss der Diplomarbeit bzw. auch seiner Applikation in die Module implementiert werden. Deshalb konnte ich im PHP-Teil nur die Ausgabe der Matrix als GIF-Datei umsetzen. Dazu verwendete ich die GD-Library der Firma Boutell, da diese Bibliothek nahezu von jedem Hosting-Anbieter standardmässig in PHP eingebunden wird. Sie bietet verschiedene leistungsfähige Grafikfunktionen und erlaubt es, zur Laufzeit des Skripts auch Grafiken zu erzeugen. Ein weiterer Grund zur Verwendung der Bibliothek ist, dass diese seit der neuesten Version das für eine Matrix-Ausgabe am besten geeignete GIF-Format wieder unterstützt. Aus rechtlichen Gründen wurde das Format nämlich aus den Vorgängerversionen ausgeschlossen. Den zusammenhängenden Quellcode finden Sie im Anhang. 4.1 Aufsplittung des Übergabestrings Das Matrix-Array wurde bei der Übergabe in einen String umgewandelt. Die Struktur des Mehrdimensionalen Arrays ging dabei verloren. Nun muss der String wieder in einzelne Variablen aufgesplittet werden. Am besten füllt man diese direkt wieder in ein Array ab, um sie nachher leichter ansprechen zu können. $php_array = split(",", $logo_array); 4.2 Generierung des Bildes In folgender Abfolge wird mittels Befehlen der GD-Library das gewünschte GIF-Bild erzeugt Erzeugen des Headers Header( "Content-type: image/gif"); Erzeugen des Bildes $im = ImageCreate($breite, $hoehe); Hintergrund- und Malfarbe setzen // Hintergrundfarbe auswählen $white = ImageColorAllocate($im, 255, 255, 255); // Malfarbe aussuchen $black = ImageColorAllocate($im, 0, 0, 0); Bild zeichnen / Setzen der Pixel Mittels den ebenfalls im Übergabestring enthaltenen Variablen breite und hoehe wird das ursprüngliche Array wiederhergestellt und die entsprechenden Pixel im Bild gesetzt. $mmb_array = array($breite); for($i=0;$i<$breite;$i++) { $mmb_array[$i] = array($hoehe); for($j=0;$j<$hoehe;$j++) { $mmb_array[$i][$j] = $php_array[$i*$hoehe+$j]; if($mmb_array[$i][$j]=="true") { ImageSetPixel($im,$i,$j,$black); else { ImageSetPixel($im,$i,$j,$white); Senden des Bildes im GIF-Format an den Browser ImageGif($im);

35 Kapitel 4: Umsetzung in PHP Speicher-Freigabe Freigabe des Speichers, welcher durch das Bild belegt wurde ImageDestroy($im);

36 Kapitel 5: Mobile Business 27 5 Mobile Business 5.1 Aufbau der Arbeit Als wirtschaftlichen Teil meiner Diplomarbeit möchte ich einen Überblick über das Mobile Business geben. Dabei soll auch dargestellt werden, welche Überlegungen für in den Markt eintreten wollende Firmen wie die Spherix relevant sind. Um einen Einstieg in das Thema zu finden, werde ich zunächst kurz über die Entwicklung des Internets und der Mobilkommunikation informieren und diese dann unter dem Thema Mobile Internet zusammenführen. Nach Ausführungen über die Basistechnologien, die Branchenrealität und den Unterschieden von M-Commerce und Mobilkommunikation gehe ich zu den M-Commerce-Anwendungen über, bei welchen ich zum Teil kurze Ausblicke gebe. Von diesen Anwendungen möchte ich gesondert auf Mobile Entertainment eingehen, da diese für die Firma Spherix momentan am interessantesten sind. Das Produkt MobileMotionBox, welches klar unter Mobile Entertainment einzuordnen ist, dient dem Markteinstieg. Das mittelfristige Ziel liegt jedoch ganz klar im Bereich Mobile Advertising. Mit möglichen Gründen für den ausgebliebenen Erfolg im Markt und einem Ausblick schliesse ich den wirtschaftlichen Teil ab. 5.2 Einleitung Das Internet bietet bereits jetzt grosse technischen Möglichkeiten und eine Vielfalt an Diensten und Anwendungen, sowohl für die Privat- als auch Geschäftskommunikation. Seit etwa drei Jahren wird an parallelen Lösungen und Geschäftsmodellen gearbeitet, damit der offensichtliche Erfolg des Internet auch auf das Mobile Business übertragen werden kann. Auch wenn die anfängliche Euphorie spürbar nachgelassen hat und Marktforschungsunternehmen ihre einstigen, vielsprechenden Prognosen immer wieder nach unten korrigieren mussten, ist die Verbindung der Erfolgs-Stories Mobilkommunikation und Internet von immenser markwirtschaftlicher Bedeutung. Selbstverständlich fragen sich in diesem Zusammenhang Mobilfunknetz-Betreiber, Content-Anbieter sowie Anbieter von Hardund Software-Lösungen, warum Technologien wie WAP (Wireless Application Protocol) für das Mobile Internet gescheitert sind und der prognostizierte Markterfolg ausgeblieben ist. Lag es an falschem Marketing, an den nicht sehr attraktiven Preismodellen oder waren die Anwender nicht ausreichend sensibilisiert worden? Oder sollte man das Verhalten des Anwenders genauer untersuchen und die Inhalte und Anwendungen auf ihren wirklichen Nutzen für den User prüfen? Vor diesem Hintergrund sollen im Folgenden die Erfolgsfaktoren des Mobile Business unter Berücksichtigung von Technologien und eigentlichem Marktbedarf aufgezeigt werden. 5.3 Internet Das Internet hat sich in seiner mittlerweile 35-jährigen Geschichte einen festen Platz in unseren Haushalten und Unternehmen gesichert. Es ist ein wichtiges Teilstück der bereits 1998 vom Bundesrat definierten Strategie für eine Informationsgesellschaft in der Schweiz [BFS2002]. Anwendungen wie Edutainment, Extranets, VPNs, E-Learning u.v.a. werden unverzichtbare Elemente unserer Gesellschaft, die Vielfalt an multimedialen Diensten steigt mit der raschen Entwicklung der Zugangstechnologien. und das WWW (World Wide Web) bilden die Umgangssprache des modernen Lebens. Im privaten Consumer-Bereich wird das Internet als Kommunikationsmedium für Chat und , zu Informationsrecherchen und für den Einkauf genutzt. Die steigende Anzahl von Internet-Usern liegt ohne Zweifel in der unkomplizierten, intuitiven Benutzeroberfläche der Hauptanwendung, dem Browser (oder Webbrowser) begründet. Darüber hinaus sind die Internet-Technologien übertragbar in Intranet- und Extranet- Umgebungen, was ein wichtiger Faktor zur globalen Kompatibilität von Informations- und

37 Kapitel 5: Mobile Business 28 Kommunikationstechnologien (IKT, englisch ICT) darstellt. Als De-facto-Standard für den gesamten Datenverkehr im Internet hat sich TCP/IP (Transmission Control Protocol / Internet Protocol) etabliert. Für die Sicherstellung bzw. den Ausbau des Erfolgs werden die unumstrittenen Vorteile bei den Kosten, die Flexibilität sowie die Plattformunabhängigkeit (um nur einige wenige zu nennen) mit Bestimmtheit besorgt sein. 5.4 Mobilkommunikation In den letzten Jahren vollzog sich parallel zum Internet der Mobilkommunikation- Enwicklungsprozess mit einer ebenso grossen Geschwindigkeit. Das Handy wurde zunehmend zum Bestandteil unserer alltäglichen Ausstattung. In nahezu allen Anwendungsgebieten haben die mobilen Endgeräte eine starke Verbreitung im Privat- als auch im Geschäftskundenbereich gefunden. Im August 2003 betrug die Marktdurchdringung mit Mobilfunkabonnenten rund 81% (knapp 6 Mio. Kunden) der Schweizer Bevölkerung, was genau dem Durchschnitt der EU-Länder entspricht [BAKOM2004] Eine gewaltige Entwicklung, wenn man bedenkt, dass 1998 nicht einmal jeder fünfte Privathaushalt in der Schweiz über ein Mobiltelefon verfügte. Abbildung 11: Entwicklung der Markdurchdringung mit Mobilfunkabos [BAKOM2004] In den letzten Jahren stieg der Funktionsumfang von Handys, von einem einfachen System mit Kalenderfunktion zu dem eines handlichen Notebooks. Sinnbild der heutigen Mobilfunktechnologien sind die mobilen Endgeräte wie Mobiltelefone, PDAs (Personal Digital Assistant), Pocket-PCs, Organizer und Notebooks. Auch wenn das Handy primär für die Sprachkommunikation eingesetzt wird, ist die gewünschte ständige Erreichbarkeit nicht auf die verbale Kommunikation begrenzt, was durch die Zahl versandten SMS-Nachrichten (Short Message Service) und die derzeitig steigende Nachfrage an MMS (Multimedia Message Service) bestätigt wird. Vor allem jugendliche User entdeckten SMS als kostengünstiges Kommunikationsmedium. Auch wenn die meisten Mobiltelefone mit ihren Zusatz-Funktionen dem Anwender Features wie z.b. Organizer und Kamera bieten, ist der Nutzungsgrad nicht gerade technologiegerecht. Dieses Phänomen ist jedoch nichts Neues, so lässt es sich z.b. auch im PC-Bereich beobachten. Vergleicht man Potential und Funktionsvielfalt eines PCs mit dem Nutzungsgrad, sind Parallelen zum oben geschilderten Sachverhalt augenscheinlich.