Archive

Posts Tagged ‘tools’

Mastering the Flex Charts

July 3rd, 2009 4 comments

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?!

  • Because of the Flex Charts API Architecture is very complex. A lot of classes are related to each other and so on
  • The Adobe Livedocs documentation doesn’t really deliver any advanced flex charts examples and doesn’t explain the ideas behind the Flex Charts API Architecture
  • You don’t have access to the source code of the Flex Charts API, so it is always a black box for you
  • There are very less information (and blog post) about Advanced Flex Charts API stuff on the internet or you have to pay for this information (lectures in Flex Charts)

Read more...

Medien: Ist der interaktive Film schon tot?

December 8th, 2008 9 comments

storytronstart mixed reality storyengine videotracetrack

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 😉

Getting Advanced in Flex

November 10th, 2008 3 comments

flexguislides insideria umlas

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

Using Flex Ant tasks to build Flex projects – Part 2: Adding build tasks


Tutorial: Getting Started mit Janus Flash

June 4th, 2008 1 comment

janusbsp januskomp janusapp

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

00_januskomponente

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

Main Screen Janus Tool

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
Main Screen Janus Tool
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
Janus Library Screen
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

Janus Compiler Screen

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

CAB Export Screen

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&uumlr 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

shortcut


mobile_app

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.

Download Flash Lite Janus Beispielanwendung

Mobile Flash mit Janus unter WinCE

May 28th, 2008 No comments

janus janus_gui janus_forum

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:

  • Auf dem Windows Mobile Device muss das .net CF installiert sein
  • die komplette Kommunikation zwischen dem .net Framework und Flash basiert auf einer XML-Socket Verbindung und ist daher nicht gerade die schnellste und belastbarste Verarbeitung. Jedoch gibt es seitens Flash (Lite) keine andere brauchbare Alternative.
  • (evtl. muss auf dem Mobile Device für die XML-Socket Verbindung noch der Port freigegeben werden. Was für den Otto Normal Verbraucher eigentlich zu viel verlangt ist)

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!!


Flash Lite: Links und Ressourcen

April 1st, 2008 No comments

flashdevices jefrfl janus

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 😉

Flash – ActionScript Bibliotheken und APIs

April 10th, 2007 3 comments

fuse animationpackage flashinterface

Eine kleine Sammlung von sehr guten Helferlein Klassen und umfangreicheren Klassenbibs für das Lösen grösserer Flashproblemen

Allgemein:

  • as2lib.org :AS 2 -verbessertes Event- und Error-Handling uvm.
  • Pixlib :AS 2 - Logging, Data Preloading uvm.
  • senocular.com :AS 1-3 - Utility-, Drawing und GUI Klassen uvm.
  • Data Structures :AS 3 - Datenstruktur Bibliothek
  • PaperVision 3D :AS2 und 3 - Flash 3d Bibliothek
  • flashsandy.org :AS 2-3 - Flash 3d API
  • motor2 :AS3 - Flash Physik Engine für Games und sonstiges
  • APE :AS3 - Flash 2D Physik Engine für Games

Filter und Animation:

  • Image Processing Bibliothek :AS 3 - Bildbearbeitungsklassen
  • popforge :AS 3 - Audiofilter und -bearbeitungs Framework und noch andere sehr brauchbare Dinge
  • flash-fmp.de :AS 1 und 2- Filter Managing Prototyp Klassen
  • Twease :AS2- datenschlanke Tweening Engine für Werbebanner und Komponenten
  • Fuse AS Animations- und Filter Bibliothek
  • robertpenner.com :AS1 und 2 - Easing Animations Klassen für Abbremsen und Beschleunigung
  • Animation Package :AS 2 und 3 - Animations Bibliothek
  • tweener :AS2 und 3 - Bibliothek für Tweenings

Interaktionsklassen:

  • aswing.org :AS 2 und 3 - Bibliothek für RIA GUIs
  • Yahoo! ASTRA :AS3 - Bibliothek für RIA GUIs
  • betriebsraum.de :AS 2 -Klassen für Menüleisten, Statusboxen, Browser- Usability usw.
  • flare :AS3 - API für interaktive Informationsvisualisierung

Datenkommunikation:

  • wiiflash.org :AS3- API für Wiimote und FLash
  • swxformat.org :AS2- Datenformat API für eine Art Flashremoting mit PHP (besonders gut geeignet für Mobile Endgeräte - Flash Lite)
  • amfphp.org :AS2- Flash Remoting API mit PHP
  • AMF.NET :AS2- Flash Remoting API mit .NET
  • Flashinterface :AS 2 und 3 - Kommunikation zwischen der AS Virtual Machine 1 und 2
  • Xpath4as2 :AS2 - Bibliothek für X-Path Funktionalität
  • Fzip :AS3- Klasse für Zip Daten Bearbeitung
  • SMTP Mailing :AS3- Klasse für Email-Funktionalität
  • JPEGencoder :AS3 - Speichern von .jpgs nur mittels Flash
  • PNGencoder :AS3 - Speichern von .pngs nur mittels Flash

Generell findet man immer wieder sehr interessante Projekte auf der osflash.org Seite, sowie auf der Seite actionscriptclasses.com gibt es desöfteren einen kleineren Helferlein ;-).

-- UPDATE 27.09.2007 --
Auf Google Code Project kann man eine ausführliche Auflistung vieler ActionScripts APIs und Bibs bekommen, ähnlich wie bei OSFlash. Dank an dieser Stelle an Simon Schweizer, der mich darauf aufmerskam gemacht hat!

Täglich Brot des Web-Developers

February 20th, 2007 No comments

weblibs webhandbook colorblender

Mittlerweile werden die Anforderungen an einem Web-Developer immer höher. Denn bei dem einen Auftrag soll etwas für den Endkunde erstellt werden und das andere Mal eine aufwendige Web-Anwendung. Öfters muss man dann schon mal gelöste Probleme bearbeiten, die man aber vorher nicht ganz so gut auf Wiederverwendbarkeit optimiert hat. Und genau an diesem Punkt ist bei mir persönlich der Frust am grössten. Warum soll man sich nochmal mit schon gelösten Problem rumschlagen, fast totale Zeitverschwendung. Aber zum Glück gibt es ehrgeizige und nette Leute da draussen im Web, die sich an die Befriedigung der unterschiedlichsten Bedürfnisse der Web-Developer heran gewagt haben. Herausgekommen sind einige Web-Libraries zu den verschiedensten Web-Technlogien (wie z.B. JavaScript, PHP usw.). Auf cameronolthuis.com gibt es eine sehr gute Aufzählung der TOP 10 Web-Libraries (dazu gehören z.B. die PHP PEAR Library, Moo.fx, Dynamic Drive CSS Library usw.), der ich nichts mehr hinzufügen kann, ausser der Ajax Framework Übersicht von ajax-info.de. Persönlich denke ich, wird sich eine Einarbeitung in die diversen Web-Frameworks auf lange Sicht auf jeden Fall lohnen, da diese den technischen Produktionsablauf erheblich unterstützen können. Auch wenn es Anfangs durch den Mehraufwand (Einarbeitung in das Framework) nicht sofort erkennbar wird.
Allerdings sollte man noch die Nutzungsbedingungen der Frameworks sehr gut kennen um nicht im Nachhinein teure Strafen für Nutzungsverstösse zahlen zu müssen. (Und es wäre auch noch sehr schade um die investierte Zeit für die Einarbeitung).

Für kleinere Probleme benötige man jedoch keine großen Web-Frameworks, sondern nur eine Plattform, die einem schnell die gesuchte Information anbietet oder einem einfach nur an die gewünschte Information im Web weiterleitet. Eine mögliche Hilfestellung dafür bietet die gotapi.com Seite. Das Team von gotapi.com hat sich zum Ziel gesetzt, soviele Dokumentation von Web-Frameworks auf ihr Seite zu vereinen wie möglich. Herausgekommen ist ein Monsternachschlagewerk für Web-Frameworks. Wird man in den Dokumentationen nicht fündig und die Suche nach den kleinen Kniffen geht weiter, dann kann ich euch das webbasierte Webdeveloper Handbook 2.0 von alvit.de empfehlen. Eine super Linkliste mit den besten Blogs und Portalen zum Thema Web-Development. Ich denke mit diesen 2 Links kommt auf jeden Fall bei der Lösungssuche weiter.

Das Design spielt auch bei uns Web-Developer eine nicht unwichtige Rolle und da ich mir persönlich nach dem Programmieren damit manchmal ein bissl schwer tue, haben sich bei mir 3 Web-Tools als Hilfestellung bewährt. Zum Einen verwende ich für das Abstimmen der Website Farben den ColorBlender als Inspirationshilfe. Denn der ColorBlender kann aus vorgebenen Farben eine 6farbige Farbpalette generieren, die sich dann auch noch in Photoshop oder als HTML Code exportieren lassen. Ein super Tool für die harmonische Farbgestaltung einer Website.
Das Typografie Problem im Web umgehe ich meistens mit den Typetester Tool von Marco Dugonjic. Bei diesem Tool kann man die meist genutzten Fonts im Web mit Hilfe von DropDown-Menüs formatieren. Diese Formatierungseinstellungen werden dann in verschiedenen Kombinationen angezeigt. Ist das gewünschte Ergebnis erreicht, können diese Font-Einstellungen als CSS-Code abgespeichert werden und für die eigene Website verwendet werden.
Zum Überprüfen von Website-Layouts verwende ich unter anderem das Tool Feng Gui (danke an Kjell für den Tipp!). Dieses Tool analysiert das Website-Layout nach Hotpoints unserer visuellen Aufmerksamkeit. Als Orientierungshilfe in Sachen Layout ist das Ergebnis sehr hilfreich.

Ich denke das reicht fasst aus als tägliches Brot eines Web Developers, die Leckereien gibt es ein anderes Mal 😉

-- UPDATE 7.06.2007 --
Ein nettes CSS Framework mit dem Kürzel YAMLsoll den Web-Designer beim Erstellen von mehrspaltigen Layouts unterstützen. Desweiteren gibt es auch schon Erweiterungen für die CMS-Systeme TYPO 3, Joomla, Papoo CMS usw., auch die Blogengine WordPress sowie die OnlineShopEngine xt-Commerce unterstützen YAML

-- UPDATE 24.05.2008 --
Eine nette Auflistung von 30 Websiten, die man als Web Developer kennen sollte.

Flash sprengt seine (Interaktions-) Grenzen

February 12th, 2007 No comments

makingthings motion capturing wiiflash

Lange Zeit konnte man bei Flash nur auf die Interaktionsmöglichkeiten mit der Maus und der Tastatur zugreifen. Jetzt wo Flash bzw. ActionScript immer erwachsener wird, kommen ganz neue Interaktionsmöglichkeiten dazu, die dem Flashentwickler in Hinsicht auf das Interaction Design ganz neue Möglichkeiten bieten.

So kann man z.B. über ActionScript einige Sensoren (für Bewegung, Wärme usw.) ansprechen und auf deren gelieferten Werte reagieren. Makingthings.com und arduino.cc bieten diese Sensoren Baukästen mit dazugehörigen Treibern/APIs an. Beide Anwender benutzen das gleiche Hardwareprinzip. Es gibt eine Hauptplatine - ähnlich einem Motherboard - auf der dann die diversen Sensoren drauf gesteckt werden können. Die Daten werden dann von der Hauptplatine per USB an den Rechner geliefert. Durch die mitgelieferten APIs und Treiber können die Daten relativ einfach abgefangen und verarbeitet werden. Damit der Einstieg dann weiterhin so einfach wie möglich ist, bietet makingthings.com einen sehr guten Tutorialbereich an, in dem sicher fast all eure anfänglichen Fragen beantwortet werden können.

Desweitern hat es Thibault Timbert von bytearray.org geschafft Motion Capture Daten in Flash einzulesen und diese im 3D Raum sinnvoll zu visualisieren. Von dem Ergebnis war ich super überrascht, da ich bisher dachte, das wäre nur mit teuren 3D-Animationsprogrammen (wie z.B. Maya, Softimage usw.) möglich. Ich bin mal gespannt welche neuen Anwendungsgebiete sich daraus ergeben.

Für die bisher vorgestellten Möglichkeiten muss man jedoch ein bissl tiefer in die Tasche greifen und da man das nicht von jedem verlangen kann, kommen wir jetzt zu etwas einfachern und schon bekannten Interaktionstechniken der Spielekonsolen. Flash Spiele können seit jüngster Zeit mit den bekannten Kontroller der Playstation und der Wii-Konsole gesteuert werden. Joa Ebert entwickelte erfolgreich eine Kommunikation zwischen Flash und dem Wii-Controller mit Hilfe eines Socket Servers. In seinem Blog könnt ihr mehr über sein Vorgehen lesen. Auch Thibault Timbert war in dieser Richtung aktiv und entwickelte in ActionScript 3 eine Kommunikation zwischen einem analogen Gamecontroller und der Flash Technologie. Mit welchen Mitteln er diese Kommunikation erfolgreich entwickelte, könnt ihr auch in diese Fall wieder in seinem Blog nachlesen.

Zum Ende dieses Blogeintrages möchte ich euch noch auf die bildbasierte Interaktion per Webcam aufmerksam machen. In meinem Blog habe ich über dieses Thema schon einige Einträge verfasst. Deshalb hier nur 2 Verweise auf die wichtigsten Blogeinträgen:
Grundsätzliches zu Webcam Games und die kleine Linksammlung zur Webcam Interaktion.

-- UPDATE 21.03.2007 --
Die Seite wiiflash.org widmet sich ganz dem Thema des Wii Controllers in Kombination mit der Flash Technologie

-- UPDATE 16.02.2008 --
Für die Entwicklung von hardware- bzw. sensorenbasierten Interaktion hat der O Reilly Verlag ein interessantes Buch mit dem Titel Making Things Talk: Practical Methods for Connecting Physical Objects herausgebracht. Ich denke das könnte für angehende Interface und Interaction Designer ein sehr interessantes Buch sein...

-- UPDATE 31.03.2008 --
Bin letztens auf die Homepage von Phidgets gestossen. Phidgets bietet Lösungen für USB Sensing und Controlling an, die kompatibel mit ActionScript 3 sind. So kann man jetzt dank Phidget mit RFID-Sensoren arbeiten. ein Blick auf deren Homepage lohnt sich daher auf jeden Fall.

Links: Die Zukunft der Medieninformatik?!

December 3rd, 2006 No comments

timoreilly rotoscoping flashstreaming

Allgemein:
Ein äusserst interessantes Interview mit Tim O Reilly über Web 2.0 und die Integration von Informatik in unserer täglichen Umwelt (Stichwort: Ambient Intelligence)
Spiegel Tim O Reilly Interview Teil 1
Spiegel Tim O Reilly Interview Teil 1

Spiegel Interview mit Jaron Lanier über verschobene Realitätswahrnehmumg durch digitale (soziale) Netze. Die Heise News- meldung dazu.

Und zu guter Letzt die Videogallery des Adobe Showdown Events Adobe Max 2006

Videoproduktion:
Das richtige Auswählen von Videoclips ist in der Regel ein sehr zeitaufwändiger Prozess in der Filmproduktion. Diesen Videobrowsing Prozess zu opitmieren versuchen Anat Axelrod, Yaron Caspi, Alon Gamliel und Yasuyuki Matsushita in ihrem Paper zu erklären.

Bisher musste in der Post Produktion für Rotoscoping Aufgaben sehr oft manuell selbst hand angelegt werden. Jue Wang, Pravin Bhat, R. Alex Colburn, Maneesh Agrawala und Michael F. Cohen haben ein automatisiertes Rotoscoping Verfahren entwickelt, welches sehr gute Ergebnisse liefert. Vielleicht gehört das manuelle Rotoscoping bald der Vergangenheit an.
Demovideo (Quicktime Stream)
ACM Artikel
Eine Auflistung aktueller Special FX Entwicklungen von der Washingtoner Uni

Streaming:
Eine dreiteilige Artikelserie beschäftigt sich mit dem Erfolg von Flash Video im Netz, der neue Standard (?!) für Internetvideo.
Teil 1, Teil 2 und Teil 3

Ein weitereren interessanten Artikel gibt es zum Thema Digital Rights Management (DRM) und warum es auch in Zukunft scheitern wird.
The big DRM mistake

--- UPDATE --- 18.12.2006
Wirtschafts Woche Artikel: Total vernetzt: Internet von übermorgen

--- UPDATE --- 22.3.2006
Der Timelabs Blog liefert desöfteren ganz interessante Einträge zum Thema die Zukunft der Medien (unter ökonomischer Sicht)