A small summary of my Twitter messages from October - December 2010:
Now I am almost studying Interactive Art for one year. Me, as a Flash and Flex Developer, like coding with audio-visual and interaction-based content. But if I am honest, in the last time I did not use Flash in my projects at all. I had to deal with some other powerful creative coding tools. Some of these tools provide me, as an artist, much more freedom than the Flash plattform can ever provide. For example, creating a visual output for multi-displays applications, programming on hardware (arduino), some real-time video tracking (face detection) experiments, using special Open-GL Renderer for 3D graphics and so on. But I also ran into problems, which I would never have with using Flash. Especially, when I worked together with unexperienced programmer. For this reason, I will describe some of these creative coding tools with their inherent advantages and disadvantages. After this article you should have a good overview about the available tools in creative coding.
Creative Coding Tools Overview
In the last months I worked with people from abroad or with big physical distances. The first time I thought, yeah that is not a problem. Everybody has got an internet connection and that is all what we need. In my old company the Liip AG - who I worked for - their whole project management and file management systems were almost accessible over an internet connection. For this reason I could work from everywhere I want. I thought, that would not change in my future time, because the internet has solutions for everything. Yeah, I have to say that is true. But it was not easy to find the right tools and services for exchanging ideas, files, time schedules and other stuff for free. My projects are not so big that it makes sense to implement this infrastructures by my own. I found some free or at least some cheap services which you can use for working together with friends or other small projects.
Creating and developing ideas with people, who are not physical available, is not very easy. Maintaining and extending are also two not very minor problems. In the last time I found a very good workflow for me and my friends. We do a telephone conference via skype and in the same time we use the service Mindmeister (Online Mindmapping Tool) and the tool Balsamiq MockUp. At the moment our solution works good and it is totally free with some limitations. A more professional solution for idea development and exchange may be the Service ProtoShare. Unfortunately, there is no real free pricing model available, therefore I never tested this service. Read more...
Disclaimer Start:
Please be pleasant with my English. I am not a native English speaker and the English language is one of my personal weaknesses. To improve my English skills, I am planning to write some blog posts in English. So if I wrote any bullshit in these blog posts, please correct me!
Disclaimer End:
At my work at Liip I had to work quite a lot with the Flex Chart API. At some point I was very disappointed about the lack of deeper documentations or advanced flex charts examples. In my mind the whole dashboard flex chart examples are not really helpful, because the examples are not very good real-life examples. But after a few months ago I found some very nice examples for the Flex Chart Advanced stuff and now I would like to give you a short guidance, how you can handle the complex and powerful Flex Chart API.
First Step - Check your Skills
Make sure that you understand the Flex Component Life Cycle and the rendering procedure behind the Flex Framework. The whole Chart Topic is very complex in handling data and handling a good rendering procedure. So that is the reason why it is very important that you understand the basics of the Flex Framework. If you have got some problems to understand the concepts behind the Flex Framework, no problem, I highly recommend the Adobe Max presentation Diving Deep with the Flex Component Lifecycle from Deepa Subramaniam. Otherwise have a look on my SFUG Presentation “Moving from AS3 to Flex”
Second Step – Set up your documentation for the Flex Chart Basic Stuff:
Yeah, the Flex Chart API is very huge. So you have to work a lot with the documentation. Fortunately, the basic Flex Chart stuff is documented very well. If you want to do some minor changes on your chart, please have a look on the Flex Data Visualization documentation (Livedocs) and on the Language Reference. Sometimes you would not get a solution from this documentation, than have a look on the Flex Chart examples at flexexamples.com. Mostly I use the tags-Content overview and press the Buttons “CTRL+F” in Mozilla Firefox for the string search. After that I typed in “LineChart” for Line Chart examples or “Charting” for Flex charts in general. So I am quite fast and I always find the right code snippets. This procedure fits for the basic chart stuff very well.
Third Step – Things are becoming complicated
Oh no, our client wants to have some special item renderings and user interaction on the charts… At this point the Flex Chart could become a nightmare. Why?!
Bekanntlich Leben Totgesagte länger und so wie es aussieht geht es dem Medium interaktiver Film ähnlich. Die Idee des interaktiven Films gibt es schon seit einigen Jahren und dank des Rückkanals, welcher das Internet bietet, konnte dieses Medium Ende der neunziger Jahre einem breiterem Publikum zur Verfügung gestellt werden. Aber der wirkliche Durchbruch blieb bis heute aus, man könnte den interaktiven Film eigentlich auch als Totgeburt bezeichnen, obwohl das doch meiner Meinung zu hart klingt. Hauptsächlich lag es bestimmt an der Lean-Back Mentalität der Zuschauer, welche noch heute eine Hauptcharakteristik im Medium Film und Fernseh ist. Durch die immer stärker werdende Macht der interaktiven Medien (Internet und Games) wird sich dies Userverhalten auf die Dauer sicherlich mehr zu Gunsten der Interaktion verändern, und vielleicht gibt genau diese neue Entwicklung in der Mediennutzung dem interaktiven Film wieder ein Aufwind. Einen ersten Anfang hat YouTube mit der Einführung des Vermerk-Features (Video Annotation Feature) gemacht, welches von einigen Interactive Media Designer schon sehr schön für interaktive Filme eingesetzt wurde. Dennoch denke ich das diese Entwicklung noch nicht ausreicht, denn dem User muss selbst überlassen werden, wie sehr er sich interaktiv am Film beteiligt, so dass kein Überforderungs und auch kein Unterforderungsgefühl beim User auftritt. Aus diesem Grund haben wir (das erste Team am Klickfilm Projekt) versucht eine Story Engine zu entwickeln, die eine logische, sinnvolle und dramaturgische korrekte Erzählstruktur simuliert. Die ersten zwei Punkte konnten wir anhand von Tagging Techniken relativ gut umsetzen, nur die dramaturgischen Simulation ist um einiges komplexer und wurde am Ende von uns aussen vorgelassen. Dennoch war ich mit den Ergebnissen sehr zufrieden, weil mir dieses Projekt gezeigt hat, dass man einen interaktiven Film mit einem dynamischen Interaktionsgrad realisieren kann.
Mittlerweile ist seitdem einige Zeit (ca. 2-3 Jahre) vergangen. Aber nun gibt es einige wirklich hilfreiche Entwicklungen, die meiner Meinung nach den interaktiven Film zum neuen Auferstehen helfen können. Dazu gehören die positive Weiterentwicklung von StoryEngines, die zum Teil von der Game Industrie erstellt werden, die andere Entwicklung kommt aus der immer weiter voranschreitenen Disziplin der Bildverarbeitung (Image Processing).
Die Story Engine kümmert sich bei dem interaktiven Film fortgehend um eine logische und dramaturgische Narration (Erzählstruktur). Sie muss auf User Interaktionen reagieren können und eine passende Antwort bzw. eine passende Fortführung der Geschichte geben. Wenn keine Interaktion von Userseite geschieht oder wenn der User eine nicht passenden Befehl gibt, darf die Narration (bzw. der Geschichtsfluss) nicht unterbrochen werden. Die StoryEngine muss einen passenden weg dazu finden die Geschichte weiter fort zuführen. Einige interessante Informationen zu solchen Story Engines kann man hier finden:
Von Seiten der Bildverarbeitung werden immer besser werdende Objekterkennungs- und Trackingverfahren für Videobilder entwickelt. Diese Algorithmen könnte man sehr gut für die Verlinkung und Visualisierung von Interaktionsmöglickeiten im Videobild nutzen. Denn in unserem Projekt mussten wir einzelne klickbare Bereiche (Hotareas) im Videobild sehr mühevoll maskieren und im nach hinein Tracken. Diese Arbeit stand in keinen sinnvollen Aufwand/Nutzen Verhältnis, jedoch machen mir diese neuen Verfahren sehr gute Hoffnung einem Video leichter interaktive Elemente hinzu zufügen.
Ich hoffe doch sehr, dass sich diese zwei sehr unterschiedlichen Disziplinen zusammefinden und noch ein paar gute Filmleute ins Boot holen, und schon könnte aus dieser Mischung ein richtig guter interaktiver Film entstehen, der dazu nebenher den so sehr herbei gewünschten Traum von der perfekten Medienkonvergenz erreicht 
Zu Flex findet man im Web und in den Buchhandlungsregalen ziemlich viel, aber leider überwiegend Anfänger- bzw. Basisliteratur. Auch die deutsche Community ist in Sachen Flex nicht schlecht, aber die kritische Masse hat sie leider noch nicht erreicht, um auch regelmässig spezielle Fragen zum Thema Flex beantworten zu können. Codesnippets Homepages wie flexexamples.com helfen auch schon sehr bei den kleineren täglichen Problemchen. Aber um schnell die Konzepte und Hintergründe des Flex Frameworks kennenzulernen, werden die Quellen schon sehr rar. Aber Hin und wieder treffe ich dann doch noch über sehr gute Tutorials, Bücherkapitel, Slides und Videos von Flex Vorträgen, die mir einige AHA Effekte bescherrt haben 
Die Ressourcen möchte ich euch nicht vorenthalten, deswegen hier eine kleine Auflistung, die ich mit der Zeit immer weiter updaten werde. Wer Lust hat kann hier gerne zusätzlich Flex Links und Ressourcen posten. Ich freu mich drüber!
Allgemein
Konzeptwissen RIAs
Data Binding
Real Custom Components (GUI)
Item Renderer (GUI Programmierung)
Item Editors (GUI Programmierung)
(Programmatic) Skinning
Software-Design
Test Driven Development (Produktion)
Automated Building Process (Produktion)
Project Management (Produktion)
Flex Tool - Hilfsprogramme (Produktion)
weitere Flex Ressourcen
-- UPDATE 20.11.2008 --
interessante Flex Bücher
Im vorherigen Blogeintrag habe ich ein kleines Review zur Janus Flash Extension geschrieben. Nun erläutere ich kurz die GUI, wie das Zusammenspiel mit Flash Lite und Janus unter Windows Mobile 5 funktioniert. Nach dem Lesen dieses Tutorials, sollte man in der Lage sein Mobile Application mit Janus zu entwickeln und mit Hilfe einer CAB Installationsdatei zu vertreiben.
Um überhaupt loslegen zu können, müssen auf eurem Rechner die Janus Extension (Trialversion), Janus Flash PlugIns installiert sein, sowie das .net Compact Framework auf dem Windows Mobile Device. Ist die benötigte Software installiert legen wir sofort los. Dafür habe ich eine kleine ganz einfach gehaltene Flash Lite Anwendung geschrieben, die das Applikationsverzeichnis und die Meta Daten der Applikation ausliest. Durch diese einfachen Codebeispiele wird sehr schnell klar, wie sich die Janus API mit ihren Event Listener verwenden lässt. Weitere Funktionen der Janus API könnt ihr in der Dokumentation oder im Codeschnippsel Thread im Janus Forum nachschlagen.
Mobile Application Development mit Janus nach der Installation:
1.Schritt: die Janus Komponente
Um überhaupt auf die Janus ActionScript Klassen zugreifen zu können, müsst ihr die Janus PPC Komponente (Vorsicht, das ihr nicht ausversehen eine andere Janus Komponente erwischt) von dem Komponenten Fenster auf die Flash Bühne ziehen. Durch diesen Vorgang wird die Komponente der Bibliothek hinzugefügt und ihr k/ouml;nnt auf die Janus API zugreifen. Meine Beispielanwendung ist mit einer einfach GUI ausgestattet, die nach dem erfolgreichen Einlesen des Applikationsverzeichnises aufgebaut wird und anschliessend die Textfelder mit den Metadaten der Applikation füllt. Ich möchte hier nicht weiter auf den Code eingehen, da ich diesen ausführlich in der FLA Datei dokumentiert habe.
2. Schritt: SWF Kompilierung
Die Flash Lite Anwendung einmal mit <STRG> und <ENTER> kompilieren, so dass eine SWF Datei generiert wird. Wenn jetzt keine Compiler Fehlermeldung bei euch erscheint und das Display im Device Central weiss bleibt ist der Kompilierungsvorgang erfolgreich verlaufen. Leider kann der Emulator im Device Central nicht die Funktionalität von Janus emulieren, so dass ihr auf euren PC leider nicht das richtige Ergebnis begutachten könnt. Das funktioniert nur am Ende auf dem Device. Ist leider nicht so schön fürs Debugging...
3. Schritt: die Projekteinstellungen
Ist die SWF erfolgreich erzeugt, geht es nun weiter zur Janus GUI. Doppelklicken auf das Janus Icon und ein Fenster öffnet sich. Ganz oben könnt ihr eine Menüleiste mit den Punkten Plattform, Project File, Tools usw. sehen. Für uns sind in diesem Tutorial nur die ersten zwei Menüpunkte am wichtigsten. Um eine Windows Mobile Anwendung ersellen zu können, müsst ihr auf den ->Plattform<- Menüpunkt klicken und die Plattform ->Pocket PC<- auswählen. Danach sollten sich die Tabs in der Janus GUI, der jeweiligen ausgewählten Plattform anpassen. Danach speichern wir erstmal unser Projekt ab, indem wir auf dem Menüpunkt ->Project File<- klicken und den Befehl ->Save as<- auswählen. Jetzt kann es mit den wirklich interessanten Part weitergehen...
4. Schritt: Der Application Tab
Im Application Tab könnt ihr eure Anwendung mit Metadaten versehen (die in unserer Beispielanwendung ausgegeben werden) und grundlegende Einstellung an eurem Projekt vornehmen. So muss zum Beispiel der Port für den XML-Socket ausgewählt werden, welcher in der Regel ->Port 1400<- ist. Wenn ihr euer eigenes Programmicon auf dem Device haben möchtet (was ich euch empfehle), könnt ihr hier eine Icon (Dateiformat .ico) einbinden. Ich habe in meinen Beispiel ein Icon mit der Auflösungen 48x48 Px verwendet, aber es geht auch mit einer kleineren Auflösung. Zum Schluss muss im Application Tab noch die URL des erzeugten SWFs gesetzt werden. Dafür einfach auf das Ordner Icon rechts neben dem Textfeld klicken und die von der Flash IDE erzeugte SWF Datei auswählen.
5. Schritt: Libraries Tab
Wir überspringen direkt den Main Form Tab, weil die dortigen Einstellungen nur für den Pocket PC und den Flash Player 7 interessant sind . Angekommem im Libraries Tab, könnt ihr dort zusätzlich benötigte Bibliotheken einbinden. Das ist nur der Fall, wenn ihr auf Funktionalitäten wie z.B. GPS, SQL Datenbank usw. zugreift. Bei uns bleibt das Feld leer, da wir in unseren Beispiel auf solche Funktionen nicht zurück greifen werden.
6. Schritt: Compile Tab
Nun kommen wir zu einen sehr interessanten Tab, dem Compile Tab. Hier könnt ihr den Ort angeben, wo die ausführbare exe Datei für den Device gespeichert werden soll. Hier rate ich euch dringends einen seperaten Exportordner zu erstellen in dem dann die exe Datei und die neu generierte(!) SWF Datei abgelegt werden kann. Ist der Ordner angelegt, könnt ihr ohne weiteres auf den Button ->Compile<- drücken und voila Janus erzeugt euch eine Exe + SWF und eine DLL Datei in dem Export Ordner.
7. Schritt: Cab File - Installationsdatei Tab
Im letzten Schritt erstellen wir eine CAB Installationsdatei, die schlussendlich an den Endnutzer verteilt werden kann. Im CAB File Tab angekommen, könnt ihr in den Textfelder ->Installation Path<- und ->Shortcut Directory<- den Installationsort der Applikation bestimmen. Für welche Ordner die kryptischen Kürzel stehen, schlagt ihr am besten in der Janus Doku nach, allerdings solltet ihr auf jeden Fall im Textfeld ->Installations Path<- den JanusProject Text in euren gewünschten Ordnernamen umbenennen (bei uns: JanusBeispiel).
Ist der Installationsort definiert, fügen wir unserer Beispielanwendung noch die zusätzlich benötigten externen Dateien hinzu, indem wir auf das Ordner Icon klicken. Diese Dateien werden dann mit in die CAB Datei eingebunden und bei der Installations wieder entpackt und im Applikationsverzeichnis abgelegt. Diese Funktionalität ist besonders praktisch wenn man z.B. ein XML ConfigFile für seine Applikation verwendet oder/und einen austauschbaren Skin.Sind auch die letzten Dateien hinzugefügt, kann das CAB File mit dem Drücken des ->Create Cab<- Buttons erzeugt werden. Ob die Erstellung erfolgreich war, kann man in der CabError.txt Datei im Export Ordner nachlesen. Ist die Datei leer, hat alles geklappt.
8. Schritt: Anwendung testen
So jetzt ist endlich alles fertig und man kann die fertige CAB Datei auf das Handy kopieren. Ist die Datei auf dem Handy angekommmen führt man diese aus. Der standardmässige Windows Mobile Installationsvorgang wird ausgeführt. Nach dem installieren ist direkt unser Shortcut Icon auf dem Start Menü Screen des Devices zu sehen. Über diese Verknüpfung können wir unsere Anwendung immer wieder ausführen und testen. Unsere Anwendung sollte nach dem Starten die Meta Daten, sowie ein Hintergrundbild anzeigen. Wenn der linke Softkey gedrückt wird, wird der dynamische Text aus dem XML-File im Display angezeigt und mit dem rechten Softkey könnt ihr die Applikation wieder schliessen.
Damit ih bei jeder neuen Version nicht immer wieder das Programm löschen und neu installieren müsst, reicht es aus die exe und die swf Datei neu in der Janus GUI zu kompilieren und dann im Applikationsverzeichnis eures Devices die alten Dateien zu überschreiben. Das funktionierte bei mir bisher problemlos...
Ich hoffe das kleine Tutorial erleichtert euch den Einstieg in die Entwicklung einer Mobile Application mit Flash Lite und Janus. Die Beispielanwendung könnt ihr euch selbstverständlich runterladen und erweitern.
Im Zusammenhang einer kleinen (Wecker) Testanwendung auf einem Windows Mobile 5 Device testete ich das Zusammenspiel von Flash Lite 2.1 und der Janus Flash Extension. Bei der Janus Flash handelt es sich um ein zusätzliches Kompilierungstool, welches eine ausführbare exe-Datei erzeugt. Diese exe-Datei ist das Bindeglied zwischen dem SWF-File und der DLL-Dateien. Die DLL-Dateien stellen für die Flash Anwendung weitere Funktionalitäten zu Verfägung, wie z.B. eine SQL Datenbank, XML schreiben, GPS Funktionalität usw.. Desweiteren kann man mit Hilfe von Janus eine CAB-Datei erstellen, die sich wie eine Installationsdatei verhält. Diese Installationsdatei kann wiederum mit einem Programmicon gestylt und mit zusätzlichen Dateien, wie z.B. XML Files versehen werden.
Also einige wichtige Hilfsmittel fär die Flash Developer's Mobile Application Entwicklung. Doch hört sich das Alles nur bis zu diesem Punkt so rosig an. Es gibt wie bei Allem auch hier ein paar unangenehme Fallstricke, die wären:
Hat man diese Hindernisse erfolgreich gemeistert, kann man mit seiner Anwendung loslegen. Die Janus API ist gut dokumentiert und schön objektorientiert aufgebaut. Dadurch lässt sich die Janus Extension sehr gut für den Flash Developer verwenden. Sollte es dennoch Probleme bei der Entwicklung geben, kann ich euch nur das Janus Support Forum ans Herz legen. Dort wurde mir bisher sehr schnell geholfen und überhaupt machen mir die dortigen Mitglieder einen sehr netten und kompetenten Eindruck.
Mein Fazit zur Janus Extension:
Janus hat hier und da seine kleinen Problemchen, welche aber durch die hilfsbereite Community fast wieder weg gemacht werden. Für die Windows Mobile Nutzer gibt es leider keine andere Alternative zur Janus, da es das einzigste(!) verfügbare Produkt für diese Plattform ist. Aber genau darin liegt meiner Meinung nach auch die absolute Stärke der Janus Flash Extension. Denn das Janus Team hat es als einzigste Firma geschafft fast alle Mobile Plattformen mit ihrer Flash Extension abzudecken (Mir ist zumindest keine andere Alternative bekannt?!). So lässt sich mit der gleichen Janus API auch die gängige Symbian Plattform S60 bedienen. Dieser Sachverhalt erspart dem Flash Entwickler sehr viel Einarbeitungszeit (und auch Wartungsarbeit etc.) in andere Flash Extension Tools, wie z.B. KuneriLite und SWF2Go.
Wer jetzt Lust auf Janus Lust bekommen hat, kann sich eine voll funktionstüchtige Trialversion auf der Janus Homepage runterladen... Viel Spass!!
Nach 3monatiger Arbeit mit Flash Lite habe ich mir nun eine kleine Sammlung von wichtigen Informationsquellen und Tools für die Entwicklung mobiler Anwendungen mit Flash Lite zusammenstellen können. Diese kleine Linkansammlung versorgt mich momentan sehr gut mit den wichtigsten Neuerungen im Bereich mobiles Flash. Zu den Informationsquellen gehören hauptsächlich englisch- und deutschsprachige Weblogs, Foren und User Groups.
Zusätzlich zur dieser Auflistung werde ich noch auf ein paar Flash Extensions verweisen (ähnlich wie bei der Flash Desktop Extension Zinc), die den Funktionsumfang von Flash Lite hinsichtlich Fileverwaltung usw. erweitert. Hier die Auflistung:
Flash Lite Blogs:
Voträge und PDFs:
Flash Lite Communities:
Flash (Lite) Extension:
2 praktische Design Patterns:
Über Ergänzungen dieser kleinen Sammlung würde ich mich freuen!
--- UPDATE --- 14.5.2008
Für grosse Veränderungen im mobilen Flash Bereich wird sicherlich auch das kürzlich veröffentlichte OpenScreen Project sorgen. Leider erst in der nächsten Flash Mobile Generation verfügbar, aber dennoch sollte man diese damit verbundenen Entwicklungen sehr sorgfälftig beobachten als Mobile Flasher
