der hess » tools http://blog.derhess.de am medialen werkeln Wed, 01 Feb 2012 12:00:38 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 My most important Twitter Messages #8 http://blog.derhess.de/2010/12/23/my-most-important-twitter-messages-8/ http://blog.derhess.de/2010/12/23/my-most-important-twitter-messages-8/#comments Thu, 23 Dec 2010 11:36:09 +0000 admin http://blog.derhess.de/?p=1474
  • My most important Twitter Messages #5
  • My most important Twitter Messages #4
  • My most important Twitter Messages #11
    • ]]>     Twitter von der hess
    A small summary of my Twitter messages from October - December 2010:

    Allgemein (General)

    Generative Art:

    Info Design and Visualization

    UX and Interaction Design:

    Projekte und Experimente (Projects and experiments)

    Neue Technologie (new Technologies)

    Programmierung und Software Design (Programming)

    Mobile Development

    Game Developing:

    Flash and Flex

    Related posts:

    1. My most important Twitter Messages #5
    2. My most important Twitter Messages #4
    3. My most important Twitter Messages #11

    flattr this!

    ]]>     http://blog.derhess.de/2010/12/23/my-most-important-twitter-messages-8/feed/ 0 "     Creative Coding Tools, which is the best? http://blog.derhess.de/2010/06/02/creative-coding-tools-which-is-the-best/ http://blog.derhess.de/2010/06/02/creative-coding-tools-which-is-the-best/#comments Wed, 02 Jun 2010 12:15:00 +0000 admin http://blog.derhess.de/?p=1308
  • My most important Twitter Messages #10
  • My most important Twitter Messages #4
  • My most important Twitter Messages #6
    • ]]>     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

    Creative Coding Tools Overview

    Adobe Flash (text-based coding)

    Adobe delivers a very good IDE for creative coding. Many people complain about the IDE, but it is the best tool to start coding for media designer, artist etc. You have the whole familiar layer infrastructure from Photoshop, and you can easily import your Photoshop, Illustrator graphics. After importing the graphics and the artist can start coding directly on the graphics. To see the graphics visually and arrange them on the stage, and then coding seamlessly with them (connected via symbolname = variable name) minimizes the obstactles for newbies so much. The same is valid for working with interactive video and audio. I know the Flash IDE is not cheap, but it is definitely the money worth for getting a perfect start. After reaching the intermediate level, you can switch to Flash Builder Coding Editor. This editor is quite advanced and it is free for students and teacher.

    In a summary Flash is perfect for starting creative coding. For heavy graphic and media (video + audio files) projects it is perfect and delivers a unique workflow. Flash is also a very good solution for web-based project and the community is very big and active. So you can be sure to find a whole set of additional libraries and help. Because of the simplicity the Flash Plattform has got two disadvantages. The lack of perfomance compared to other technologies (C++, Java, Python) can be a problem for complex visual renderings and algorithms. The second disadvantage is the less freedom for physical computing based projects. An Alternative for Flash is Microsoft Silverlight

    Processing (text-based coding)

    Processing is a specific Java based framework for creative coding. Ben Fry and Casey Reas simplified the programming language Java, so it is easier for media artist diving into creative coding. In my opinion, it is not a good solution for starting creative coding with this tool, even it is for free! In my class and at my old university I often saw the same misunderstanding in the beginners eyes when they started with processing... This whole text-based coding without any reference to the graphics is still too abstract for beginners. That lead for unhappy artist. Then maybe they  started hating programming... That is not cool... Maybe the new IDE project Kaleido can solve this.

    The syntax of Processing is quite similar to ActionScript. So it is not so difficult for Flash Coder to switch to Processing and vice versa. Processing is able to use Open-GL. In this case it makes much more sense to use this tool for 3D Project than Flash. Even you can connect Java Libraries with your Processing projects. That enables completely new application possibilities. Speech recognition, video tracking, working with Bluetooth Networks are only a few examples. Also collaborative coding via SVN is quite easy in Processing and the active community is the best evidence for this.

    Max/MSP/Jitter (node-based coding)

    This tool is a node-based  programming tool for media artist. Every node has an input and a output. The artist can connect this nodes with cables, like it was used to do in the earlier times with the audio synthesizer. The node-based approach may be a good starting point for beginners. For experienced programmer (also for me) it can be very weird to programm in this environment. But if I am honest, Max/MSP/Jitter delivers a big repertoire of audio effect nodes, video effect nodes and User Interface elements. Also working with hardware is quite well supported in this environment. Connecting MIDI devices, special sound-cards and several displays (or projectors) to Max/MSP/Jitter is not a big problem. For this reason Max/MSP/Jitter is perfect for live audio-visual performances and media installations. A further advantage is the extensibility of Max/MSP/Jitter. Advanced programmers can use the included JAVA  API or JavaScript API for creating and extending new nodes (e.g. OpenCV in Max) and user interface elements. Only for web-based projects this tool is almost useless, and even working together with other artist seems not so easy. Alternatives for the commercial based product MAX/MSP/Jitter can be PureData (mainly for audio processing), VVVV (video and visuals) and EyesWeb Framework (video and stage-based installations).

    openFrameworks (text-based coding)

    With openFrameworks we enter the big world of C and C++. C and C++ is quite old and for this reason the language has got some ugly inherent characteristics. For advanced programmer the concept of pointers is quite easy to understand. In contrast intermediate programmers will get surely fucked up with the header file concept. Beginners are going to get lost in this big world... That sounds terrible, but it  is not so worse. C and C++ provides the biggest freedom an artist can ever get. For getting this freedom the artist has to put some effort into it.

    Afterwards the artist can code directly on hardware (e.g. Arduino). Also high-end performance optimizing of your application is possible here. Especially for heavy 3D -based projects you are supposed to use this platform. The team around openFrameworks created successfully an easy to use C++ Library for audio-visual coding. Their tutorial page gives an easy start and their classes makes it quite easy working with audio,video and drawing operations in C++. The openFramework approach is very similar to the Processing project in Java World. It exist an active community, who extend the openFramework toolkit successively. A disadvantage of openFrameworks could be the slow development process. If no suitable add-on is available for your project (for instance: network-based multi-user interaction) it can get very fast complex and time-consuming to solve this technical issue. An alternative for openFramework could be Cinder.

    The End

    The table above reveals that there is no real winner available. All the tools do a great job in their special domain. So Flash and Processing are very good tools for web-based projects, openFrameworks and Max/MSP/Jitter are better for media installations and complex animations. Beginners should check which tool is really easy to learn. An easy start and enjoying coding is very important in the beginning! Advanced Programmer and artist should distinguish between perfomance-based/hardware-based or graphic-based/media-file-based/web-based projects. For perfomance-based/hardware-based projects openFrameworks, Max/MSP/Jitter and maybe Processing is the best solution. For web-based and media-file/graphic-based projects Flash delivers a very good solution. In some cases (e.g. big Information Design projects) Processing is more suitable... So Happy Coding and visit CreativeApplications.Net to see what is possible!



    Related posts:

    1. My most important Twitter Messages #10
    2. My most important Twitter Messages #4
    3. My most important Twitter Messages #6

    flattr this!

    ]]>     http://blog.derhess.de/2010/06/02/creative-coding-tools-which-is-the-best/feed/ 8 "     Collaboration Tools for your projects http://blog.derhess.de/2010/03/09/collaboration-tools-for-your-projects/ http://blog.derhess.de/2010/03/09/collaboration-tools-for-your-projects/#comments Tue, 09 Mar 2010 13:30:40 +0000 admin http://blog.derhess.de/?p=1259 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.

    Idea Development and Sharing

    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.

    Planning and Schedules Services

    Sometimes you and your project members have to make choices or just finding the best time for an appointment. The services Doodle and WhenIsGood solve this problem very easily. I like the service doodle very much, because you can use it without any registration and you can make different kind of choices (timebased or any other).

    Project Management Services

    To arrange meetings is not everything. In most and even in small projects you have a rough imagination of a time schedule. This time schedule should be accessible for every project member in technical and visual form. Additional to this time schedule every project has got some documentation papers and project member information. All this information should be managed by a project management tool. A couple of project managment services are available on the internet. I am using huddle at the moment and I am quite satisfied with it. It has one free pricing model and the features are good enough for small projects. The project management services Basecamp and activeCollab are looking more professional and delivers some useful extensions (e.g. a Mobile Client Software). Unfortunately, there is no free pricing model available, only a fix testing period.

    Coding and design file Hosting

    In my case, we did many visual coding projects. For this reason we are using Version Management for Coding and even a Version Managment for Adobe Photoshop files. Richard Davey wrote a small blog post about it. I think the very well known free services are Google Code, GitHub and SourceForge.net. Using the SVN service Beanstalk in relation with the PixelNovel (Adobe Photoshop Version Management service) is a very powerful and simple tool, I guess...

    (Short) temporal data storage

    Sometimes you have to exchange some data files. That could be a file transfer from your university computer to your home computer or sending huge files to other friends (or project members). For private purposes, the service Dropbox seems to be nice. For data, which should be only available for a short time and the data is not top secret for other people, I recommend to use the common upload file services (thx Hugo and Anca for the links):

    The End

    I hope you liked my short list of collaboration tools and services. If anything missing for you, check these two articles Work Together: 60+ Collaborative Tools for Groups and 10 Free SVN & Project Hosting Services, and a very good mindmap, or check my links for collaboration and project management. And of course, feel free to add a comment. :-)


    No related posts.

    flattr this!

    ]]>     http://blog.derhess.de/2010/03/09/collaboration-tools-for-your-projects/feed/ 4 "     My most important Twitter Messages #4 http://blog.derhess.de/2010/01/05/my-most-important-twitter-messages-4/ http://blog.derhess.de/2010/01/05/my-most-important-twitter-messages-4/#comments Tue, 05 Jan 2010 14:03:16 +0000 admin http://blog.derhess.de/?p=1188
  • My most important Twitter Messages #6
  • My most important Twitter Messages #5
  • My most important Twitter Messages #11
    • ]]>

    Twitter von der hess
    A small summary of my Twitter messages from November - December 2009:

    Allgemein (General)

    Generative Art:

    UX and Interaction Design:

    Projekte und Experimente (Projects and experiments)

    Neue Technologie (new Technologies)

    Programmierung und Software Design (Programming)

    Game Developing:

    Flash and Flex


    Related posts:

    1. My most important Twitter Messages #6
    2. My most important Twitter Messages #5
    3. My most important Twitter Messages #11

    flattr this!

    ]]>     http://blog.derhess.de/2010/01/05/my-most-important-twitter-messages-4/feed/ 1 "     Mastering the Flex Charts http://blog.derhess.de/2009/07/03/mastering-the-flex-charts/ http://blog.derhess.de/2009/07/03/mastering-the-flex-charts/#comments Fri, 03 Jul 2009 09:02:58 +0000 admin http://blog.derhess.de/?p=770
  • Getting Advanced in Flex
  • Book review: Adobe Flex – Training from the source
  • The new YouTube AS3 Chromeless API in Flex, Air, Flash
    • ]]>     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)

    These points sound very disappointed but I have some Flex Charts resources for you, which are able to solve these problems. To understand some complex Chart behaviors please download the Flex Chart Class diagram. It shows the relationship between the classes very well, so you should get the basic ideas behind the Flex Chart API. After that, you should go to quietlyscheming.com. It is a great resource for advanced chart examples and getting an orientation in the Advanced Flex Chart Stuff. Especially, these blog posts are very useful

    Unfortunately, all the examples are coded in Flex 2 and the source code doesn’t work very well with the Flex 3 SDK. So yeah, shit… For long time I thought there don’t exists another resource on the Flex Chart API… But last month I found this very helpful Adobe Max Presentation from Tom Gonzalez about Data Visualization with Flex 3(!). Yeah :-) And I have to say Tom is the new Flex Chart API man for the Flex 3.x SDK. His blog contains very helpful posts about Flex Charts and he posted the source code, too! So if you want to dive into Flex Chart API, you have to visit his blog (especially this post and try to understand the source code)

    Fourth Step – Flex Charts are nice but I want more….

    Flex Charts are nice but in some cases we need some extended functionality. Here are two nice extended Flex Chart Components and one recommendation:

    Otherwise in some cases Flex Charts are not the right data visualization tool. Fortunately, for Flex and Flash exist some more open source data visualization tools:

    The advanced data visualization ELIXIR from ILOG looks very cool, too, but it cost some money. The same money argument is valid for the FusionCharts. That is the reason why I don't know how interesting it is for you?! So that’s all what I could say about the basics and orientation of data visualization with the Flex (Chart API). I hope this blog post was helpful for you…


    Related posts:

    1. Getting Advanced in Flex
    2. Book review: Adobe Flex – Training from the source
    3. The new YouTube AS3 Chromeless API in Flex, Air, Flash

    flattr this!

    ]]>     http://blog.derhess.de/2009/07/03/mastering-the-flex-charts/feed/ 4 "     Medien: Ist der interaktive Film schon tot? http://blog.derhess.de/2008/12/08/medien-ist-der-interaktive-film-schon-tot/ http://blog.derhess.de/2008/12/08/medien-ist-der-interaktive-film-schon-tot/#comments Mon, 08 Dec 2008 18:43:59 +0000 admin http://blog.derhess.de/?p=419
  • Links: Die Zukunft der Medieninformatik?!
  • My most important Twitter Messages #5
  • Neues von und für Medieninformatiker
    • ]]>     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 ;-)

    Related posts:

    1. Links: Die Zukunft der Medieninformatik?!
    2. My most important Twitter Messages #5
    3. Neues von und für Medieninformatiker

    flattr this!

    ]]>     http://blog.derhess.de/2008/12/08/medien-ist-der-interaktive-film-schon-tot/feed/ 3 "     Getting Advanced in Flex http://blog.derhess.de/2008/11/10/getting-advanced-in-flex/ http://blog.derhess.de/2008/11/10/getting-advanced-in-flex/#comments Mon, 10 Nov 2008 18:38:47 +0000 admin http://blog.derhess.de/?p=413
  • Mastering the Flex Charts
  • Book review: Adobe Flex – Training from the source
  • Book review: Developing Flex 4 Components
    • ]]>     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


    Related posts:

    1. Mastering the Flex Charts
    2. Book review: Adobe Flex – Training from the source
    3. Book review: Developing Flex 4 Components

    flattr this!

    ]]>     http://blog.derhess.de/2008/11/10/getting-advanced-in-flex/feed/ 4 "     Tutorial: Getting Started mit Janus Flash http://blog.derhess.de/2008/06/04/tutorial-getting-started-mit-janus-flash/ http://blog.derhess.de/2008/06/04/tutorial-getting-started-mit-janus-flash/#comments Wed, 04 Jun 2008 16:38:16 +0000 admin http://blog.derhess.de/?p=347
  • Mobile Flash mit Janus unter WinCE
  • Flash Lite: Links und Ressourcen
  • Literatur: Mobile Application Development
    • ]]>     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

    Related posts:

    1. Mobile Flash mit Janus unter WinCE
    2. Flash Lite: Links und Ressourcen
    3. Literatur: Mobile Application Development

    flattr this!

    ]]>     http://blog.derhess.de/2008/06/04/tutorial-getting-started-mit-janus-flash/feed/ 1 "     Mobile Flash mit Janus unter WinCE http://blog.derhess.de/2008/05/28/mobile-flash-mit-janus-unter-windows-mobile/ http://blog.derhess.de/2008/05/28/mobile-flash-mit-janus-unter-windows-mobile/#comments Wed, 28 May 2008 15:48:36 +0000 admin http://blog.derhess.de/?p=341
  • Tutorial: Getting Started mit Janus Flash
  • Literatur: Mobile Application Development
  • Flash Lite: Links und Ressourcen
    • ]]>     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!!


    Related posts:

    1. Tutorial: Getting Started mit Janus Flash
    2. Literatur: Mobile Application Development
    3. Flash Lite: Links und Ressourcen

    flattr this!

    ]]>     http://blog.derhess.de/2008/05/28/mobile-flash-mit-janus-unter-windows-mobile/feed/ 0 "     Flash Lite: Links und Ressourcen http://blog.derhess.de/2008/04/01/flash-lite-links-und-ressourcen/ http://blog.derhess.de/2008/04/01/flash-lite-links-und-ressourcen/#comments Tue, 01 Apr 2008 15:44:03 +0000 admin http://blog.derhess.de/?p=335
  • Mein Fazit zu Flash Lite
  • Links: Die Zukunft der Medieninformatik?!
  • Tutorial: Getting Started mit Janus Flash
    • ]]>     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 ;-)

    Related posts:

    1. Mein Fazit zu Flash Lite
    2. Links: Die Zukunft der Medieninformatik?!
    3. Tutorial: Getting Started mit Janus Flash

    flattr this!

    ]]>     http://blog.derhess.de/2008/04/01/flash-lite-links-und-ressourcen/feed/ 0 "