Last summer I had the change to be part of an international project at the university of the arts with Chinese students. In the project WUZU 2009 we worked in mixed groups of Chinese and Swiss students on Industrial Design projects. The topic was “Food and Drink”.
I think all of you know how to use trace in a flash project therefore I will target only on how to set up an easy tracing environment. I use terminal to display my traces on my Mac. I think this is an convenient way if you work on a dual screen environment. What do you need to do?
Read more »
Some of you probably read my article about Font Embedding in Actionscript 3 projects. In the January L.A. Flex User Group meeting, Tom Bray recorded my talk about MojoFont. MojoFont is an Eclipse Plugin for easy Font Embedding in Flex, FDT or Eclipse. It was a good experience to speak to the L.A. Flex group. Thank you Tom for letting me a part of it. If you want to see my talk watch this video.
My talk about MojoFont at L.A. Flex User Group
Unfortunately the picture quality is not really good but if you want to know more about Font Embedding with MojoFont read my post about Font Embedding in Actionscript 3.
After being here in Los Angeles for about 7 months I think its time to show you some things I did during my internship. The first project I want to show you is St Moritz TV. (Yes, a Swiss Guy flies to California to build a site for a Swiss Ski-resort) :)
What is this project?
The website www.StMoritzTV.ch is a prototype for a video platform with short movies about St. Moritz and the Engadine. The main goal of the website is to inform tourists and locals about events, art, dinning and shopping in St Moritz and its surroundings.
What was the goal?
The current version is a proof of concept and developed by me during my internship at Almer/Blank. Its focus is to see what the needs of the users are and how we can build the final version and what we have to improve. Because this is a Prototype we are asking for any feedback about the site and would highly appreciate if as many of you can try it and give us a feedback. We want to see if there is a need for such a website and if so, how can we make it most enjoyable for its user.
But hey, let’s get geeky :)
Read more »
While working on Actionscript projects you will have to use fonts quite often. There are many ways how you can embed a font into your project. In this post I will illustrate different ways of how to do that and I would like to demonstrate a very easy way with MojoFont.
I run into the problem that I had a div tag with a certain width. From a external site I loaded some content in this div tag. The problem was that I did not have the control over the pictures loaded from this external server. Some pictures where bigger then the size of the div tag. I didn’t had the possibility to take the picture and make them smaller with PHP as the source of the picture had to be on the external server. And furthermore, I needed a solution in CSS or Javascript and couldn’t use something like phpThumb.
My solution was to use this:
Read more »
Add Communication to your Applications with Ribbit
On Sunday, October 4th, I had the change to visit a workshop about the Ribbit mobile service at the Rich Media Institute in Venice. I could see some examples how to build a Text message application in Flex or Flash and saw different ways to build a phone application. The combination between Actionscript 3 and a telephone system is quite interesting and I see a great potential in it.
During the time of Adobe MAX i moved to Downtown Los Angeles. A quick search in the Internet and I found a place in walking distance to the Convention-Center. For only $40/night I got a room with shared bath and shared toilet in the Hotel Cecil. Without thinking I booked it and worried a bit when I saw the prices of the hotels in the neighbourhood. When I arrived at the hotel I was very surprised. The price for this hotel was really good. I liked my room, everything was clean, there was free wireless Internet and the staff was always helpful and really friendly. I totally recommend this hotel to everybody with a tight budget. Should I stay again in Downtown, I will definitely book this hotel again. The only disadvantage is that they do not provide parking, but parking in Downtown is not really a problem. For about $15/day you find plenty of indoor parking all over the city center.
Just before Adobe Max I had the opportunity to visit the Joshua Davis workshop about the HYPE Framework. The HYPE-framework is a easy framework for creating digital art. It makes it easy to build computer based art in Actionscript 3. Josh is a very outgoing and super friendly person. All of us had really good fun with him. We build a couple of examples with the HYPE framework which was build by Branden Hall and Joshua Davis.
Read more »
A wile ago I had a problem with external XML files loaded in to my Actionscript project. Some browser always used an older version of my XML and didn’t reload it every time I reloaded the page. An easy way to avoid this is the following solution:
As you can see I added to the string of the path a question mark and a random number. Every time the page is reloaded it generates a new path to the XML file. The only changes are behind the question mark and will not affect the XML file
One of the main reason I use Actionscript 3.0 is to create data visualization. Most times the data is saved in a XML or database. Therefore I would like to show you some parts of of a recently developed program.
Here is an example of the final result.
Im vierten Semester habe ich den Abendkurs Animation und plastisches Gestalten an der Zürcher Hochschule der Künste zum zweiten mal besucht. Zusammen mit meiner Freundin Daniela Spühler haben wir diverse Stop-Motion Kurzfilme erstellt. Ich möchte mich hier herzlich bei Tobi Hobi bedanken der uns immer unterstützt hat. Hoffen wir das dein Kurs noch viele Jahre stattfinden wird.
Im Animationskurs der Zürcher Hochschule der Künste bei Tobias Hobi haben wir den 10 Sekundenfilm: “Life is short, try to be pretty” erstellt. Die Aufgabe war es aus Plastilin innerhalb eines Abends eine kleine Geschichte zu erzählen zum Thema: Von Innen nach Aussen.
Im vierten Semester besuchten wir das Modul “Design Studio II Interaction in virtual environments” bei Max Moswitzer. Es galt ein Interaktives Objekt in Second Life zu erstellen. Zusammen mit Jonas Kaufmann und Gabriel Süss haben wir ein kleines Spiel in Second Life programmiert. Unsere Anwendung Superball, ist ein kleines Game in Second Life welches ähnlich wie ein Fussballspiel funktioniert. Im Gegensatz zu einem normalen Fussballspiel ist unser Spielfeld rund und hat leicht abgerundetete Wände. Auch der Ball fliegt nicht immer so wie man dies eigenltich erwartet.
Das Spielfeld inkl. Tore:
1.0 Einleitung
Im Rahmen unseres Interaction Design Studiums besuchen wir das Modul Interaction in Physical Environments. In diesem Modul geht es um non-visuelle Interaktion im öffentlichen Raum. Jede Gruppe erhielt einen vorgegebenen Ort und Vibrationsboxen, die das akkustische und taktile Feedback auslösen. Unser Team besteht aus den drei Studenten Christoph Brandin, Michael Fretz und Dondup Shelkar. Als Ort unseres Projektes wählten wir die Tramhaltestelle.
Massenmedien dominieren seit Jahren den Informationsmarkt. Doch Social Softwaresysteme beginnen immer mehr an Wichtigkeit zu gewinnen. In folgendem Text werde ich Massenmedien und Social Software genauer analysieren. Ich werde von beiden Bereichen die Vorteile wie auch die Gefahren genauer aufzeigen. Die beiden Bereiche werden miteinander verglichen und die Unterschiede mit Vor- und Nachteilen aufgezeigt. Wie unterscheiden sich Massenmedien von Social Softwaresystemen und wohin bewegen wir uns in unserer Zukunft? Wo können wir als Interaction-Designer mitgestalten und was für neue Türen öffnen sich da für uns?
Download Massenmedien vs Social Software (0.5 MB)
Die Theoriearbeit entstand im Modul Medien und Gesellschaft bei Prof. Dr. Gerhard M. Buurman im 4.Semester im Studiengang Interaction Design.
complex – die moderne Art, Informationen und Events vom Computer zu visualisieren. Tauchen auch Sie ein, in eine neue Welt voller Farben…
Fabian Kuhn und Michael Fretz entwickelten eine Art Ambilight mit Echtzeitfeedback von Ereignissen welche gerade auf dem Computer des Anwenders passieren. Ob Skypenachrichten, Musik oder Emails, wenn irgendwas passiert wird dies Farblich dargestellt.
Erster Laserprototyp
Nach den ersten Versuchen mit Karton und Papier haben wir eine Version in Plexiglas gelasert. Mit dem Epilog Laserschneider konnten wir ohne grossen Aufwand die gewünschte Form aus einer Illustrator Datei ausschneiden. Anschliessend haben wir den ausgeschnittenen Umriss noch in die gewünschte Form gebogen. Nun war es uns möglich, mit diesem ersten Modell des Laptophalters konkretere Versuche zu unternehmen. So konnten wir offene Fragen und Probleme klären, zum Beispiel, wie lange der Halter sein sollte, um die gewünschte Lichtmischung zu erzielen oder wie die Leuchten platziert sein müssen, damit diese einen möglichst schönen und farblich gut durchmischten Hintergrund erzeugen.
Unter Berücksichtigung dieser Erkenntnisse erstellten wir nochmals einen Kartonprototyp, welcher eine schönere und leichtere Form hatte.
Schwarzer Laserprototyp
Tags darauf kauften wir im PerPlex Shop schwarzes Plexiglas in der von uns bevorzugten Dicke. Der nun finale Grundriss wurde wiederum ausgelasert und anschliessend in die gewünschte Form gebogen. Mit dem neuen Objekt aus schwarzen Plexiglas sind wir sehr zufrieden. Die Form funktioniert sowohl als eigenständiges Objekt wie auch als Halter für ein Notebook.
Programmierung Teil 1
Nachdem der Laptopständer fertig war, mussten wir uns an die Programmierung machen. Zuerst entschieden wir uns, die Software Growl, welche für Apple verfügbar ist, zu verwenden. Diese fängt verschiedene Events des Computers ab und zeigt diese als Meldung auf dem Bildschirm an. Da Growl keine API zur Verfügung stellt, entschieden wir uns, alle Growl Meldungen an eine e-mail Adresse zu senden und diese anschliessend regelmässig zu überprüfen. Wir verwendeten dazu ein Java Programm, welches Philipp Läubli für uns programmierte. Das Programm prüfte alle 10 Sekunden, ob ein neues Email in der Mailbox vorhanden war. War dies der Fall, so sendeten wir den Inhalt des Mails an ein Processing Programm, mit welchem wir den Inhalt des jeweiligen Mails auslesen konnten und dem Inhalt entsprechend verschiedene Stadien an das Arduino sendeten. Wir stellten jedoch fest, dass dieses Vorgehen eine Verzögerung erzeugte und waren deshalb nicht zufrieden. Kurz vor Feierabend kam die Idee auf, nicht über Growl zu arbeiten, sondern die einzelnen Programme direkt anzusprechen.
Über das Skype Python API konnten wir schnell und einfach die Events von Skype abfangen. Vom Python Programm war es dann ein Leichtes, eine Verbindung zu Arduino herzustellen. Nun konnten wir die Skypenachrichten direkt nach dem absenden visuell darstellen.
Programmierung Teil 2
Nach der Entscheidung, die einzelnen Programme mit Python direkt anzusprechen, schauten wir verschiedene APIs diverser Programmhersteller genauer an. So kamen zu den Programmen, welche Events auslösen, noch Last.FM und E-mail dazu. Bei Last.FM entschieden wir uns, den Wechsel zwischen verschiedenen Musiktracks zu visualisieren. Ausserdem überprüften wir in der Mailbox, ob ein neues Mail eingetroffen war. War dies der Fall, so sendeten wir ein Signal an das Arduino.
Downloads
Der Hintergrund
Dieses Projekt hat in Zusammenarbeit mit der Nimbus-Group in Stuttgart stattgefunden. Dort befindet sich auch das Nimbus Mock-Up, ein Simulationsbereich, auf welchem auf über 1500m2 die Produkte von Nimbus präsentiert werden. In Zusammenarbeit mit GIRA wurde für das Mock-Up ein Gebäudesteuerungssystem installiert, über welches primär das Licht der gesamten Ausstellungsfläche geregelt werden kann. Diese Steuerung wird mittels eines Touchscreens bedient, welchem unser Interesse galt.
Das Ziel
Das Ziel des Projekts war die Entwicklung eines Navigationskonzepts und die Gestaltung eines entsprechenden GUI‘s für den Touchscreen. Damit sollte vor allem sämtliches Licht im ganzen Mock-Up gesteuert werden können. Das heisst, vom ganzen Stockwerk über einzelne Räume bis hin zu einzelnen Leuchten sollte die Lichtstimmung detailliert regelbar sein. Optional war auch die Steuerung weiterer Komponenten wie Audioquellen, Jalousien etc. denkbar. Das GUI sollte zudem an das CorporateDesign von Nimbus angepasst werden und sich gut ins Mock-Up einfügen. Und zu guter letzt gilt es auch noch zu erwähnen, dass die beste Arbeit prämiert wurde: für jeden Gewinner gab es eine Nimbus Leuchte “Line Z”.
Projekt
Das Projekt LichtOn baut auf eine simple Bedienung, auf die Einfachheit des An/Aus eines Lichtschalters. Der Fokus unserer Arbeit liegt in der Schlichtheit und Usability des Programms. So zeigt sich beispielsweise der Startscreen auch gern schlicht, mit nichts weiter als einigen wählbaren Voreinstellungen in Form von simplen Buttons, welche mit einem einzigen Klick das ganze Mock-Up auf die gewünschte Helligkeit einstellen.
Die Hauptnavigation befindet sich diskret am unteren Bildschirmrand. Das Konzept sieht ausserdem als wichtigen Punkt vor, dass bei jedem Schritt nur die Interaktionselemente sichtbar sind, welche gerade benutzt werden können oder sonst von Bedeutung sind, indem sie beispielsweise auf etwas hinweisen. So werden die Elemente im Bild auf ein Minimum reduziert und die Übersichtlichkeit und Bedienbarkeit auf ein Maximum angehoben.
Grafisch ist unser Design den von der Firma Nimbus vermittelten sinnlichen Erfahrungen angepasst. Die verschiedenen Elemente sind in ihrer milchglasig/metallischen Erscheinung der Konnotation der beiden meist genutzten Materialien von Nimbus angepasst.
Startscreen
Kartenübersicht
LichtOn Dokumentation (PDF 2.3MB)
SourceCode auf Google Code http://code.google.com/p/hs08-nimbus/
Im Modul: Digitaler Modulbau 3 lernten wir die Grundlagen des XML Handlings. Dazu haben wir das Vorlesungsverzeichnis der Zürcher Hochschule der Künste neu visualisiert. Die Unterschiedlichen XML Dateien werden dynamisch vom Server der ZHdK in das Projekt geladen.
Vorlesungsverzeichnis nachdem das Departement XML geladen ist.
Übersicht der Module welche in einer Vertiefung angeboten werden. Durch dir Pfeile kann durch die Module durchgeblättert werden.
Anzeige eines Moduls.
Zur Programmierung:
Die Dokumentklasse fungiert als Viewer und Controller. Alle Elemente werden hier plaziert. Je nach dem was geklickt wird, entscheidet die Dokumentklasse welches XML geladen werden soll.
Die XML Loaderklasse kann jedes beliebige XML laden. Sind die Daten geladen wird ein Dispatch Event ausgeschossen. Über get Methoden werden Name und Daten zurück geliefert.
Auszug aus der XML Loaderklasse
Die XML Manager Klasse bekommt die Daten aus der XML Loaderklasse. Die erhaltenen Daten werden in einen Array gespeichert und anschliessend wird ein Dispatch Event ausgeschossen.
Auszug aus der XML Manager Klasse
URL zur Demo: http://vorlesungsverzeichnis.michaelfretz.com
Download Flex Projekt des Vorlesungsverzeichnis (104 KB)
Im Modul User Centered Design haben wir uns mit einer Applikation befasst, welche auf einem Touchscreen installiert ist.
Konzept und Idee:
Ein Touchscreen für ex libris Filialen zur Vor-Ort-Bestellung von Produkten aus dem Internet: www.exlibris.ch
Fokus haben wir bei unserem Prototyp auf die Sparte Musik gelegt – natürlich wäre es auch denkbar das Touchscreen um andere Produktkategorien wie Bücher, Videospiele, usw. … zu erweitern.
Während des ganzen Entwicklungsprozesses haben wir regelmässig Testbenutzer in das Projekt einbezogen.
Zu Beginn haben wir einen Paper-Prototyp entwickelt.
Den Paperprototyp haben wir mit verschiedenen Testbenutzer getestet. Das Feedback haben wir ausgewertet und anschliessend einen Prototyp in PHP und XHTML entwickelt.
Prototyp Test
Prototyp Test
Printscreen der Touchscreen Applikation
Im Hintergrund unserer Applikation verwendeten wir das PHP Last.FM API von matto1990.com. Mit Hilfe dieser Applikation konnten wir die Daten von Last.FM abfragen und für unsere Anwendung aufbereiten. Mit Script Aculos
(http://script.aculo.us) verwendeten wir das Javascript Framework welches Hauptsächlich für das Anzeigen der Daten und die Animationen eingesetzt wurde. Auch mit Javascript haben wir eine Tastatur entwickelt, welche auf dem Touchpanel eingesetzt wurde. Da wir eine Art Template verwendet haben konnten in unserer Entwicklungsphase mehrere Designs gleichzeitig auf der Applikation verwenden und diese mit einem JumpMenu einfach
umschalten.
URL zur Demo: http://ucd.michaelfretz.com
Download Dokumentation :Dokumentation (PDF 2.7MB)
Download: Keynote Präsentation (ZIP 2MB)
Team: Christoph Brandin, Liliane Krauss, Michael Fretz
zweimal.ch ist eine Onlineplattform, auf welcher Mutilineare Stories gelesen und geschrieben werden können
Auf dieser Webseite können einerseits verschiedene Multilineare Stories gelesen werden. Dies Funktioniert so: Man wählt zuerst eine Geschichte aus und liest deren ersten Textblock. Sodann kann man zwischen mehreren verschiedenen Antworten wählen, welche zu unterschiedlichen weiteren Textblöcken führen. So kann man die Handlung der Geschichte, welche man gerade am lesen ist, selbst beeinflussen. Und auch wenn man dieselbe Geschichte nochmals von Anfang zu lesen beginnt, kann durch nur eine einzige anderst gewählte Antwort die Handlung völlig von der vorhergehenden abweichen.
Des weitere kann man eine bereits bestehende Geschichte beliebig erweitern.
Dies geht so: kommt man an einen Punkt, an welchem die Geschichte nicht mehr weitergeht oder möchte man bei einem Textblock eine weitere Antwort einfügen, wechselt man durch klick auf “Editiermodus” in den Editiermodus. Sodann kann man eine weitere Auswahlmöglichkeit hinzufügen, das heisst, man schreibt als erstes eine neue Frage. Danach kann man per DropDown entweder einen neuen Textblock erstellen oder einen bereits bestehenden verwenden.
Erstellt man einen neuen Textblock sollte man einen Titel und anschliessend den eigenen Text eingeben. Ist dies geschehen, können wiederum neue Auswahlmöglichkeiten hinzugefügt werden, und man beginnt von vorne.
Zudem kann zu jedem Textblock ein Bild raufgeladen werden.
Die Webseite ist im Rahmen des Moduls Storytelling an der ZHdK enstanden. Die Gruppenmitglieder waren: Mario von Rickenbach, Michael Fretz, Tobias Koller, Gabriel Süess, Dondup Shelkar und Phillipe Meier.
URL: www.zweimal.ch
Ansichtmodus
Ansicht Editiermodus