Migros Terra Suisse – Who Is Muh

The last couple of weeks I had the possibility to work for Jung von Matt, one of the leading advertisement agencies in Europe. I worked on different small projects but mainly on the Migros Terra Suisse Microsite “Who is Muh”.

What is “Who is Muh”?
“Who is Muh” is an interactive platform for the Migros brand Terra Suisse. This interactive site shows different animals from the Terra Suisse program and explains what each animal does and how the animals are being treated and raised by their farmers.

Read more »

Spot the Dogference

Last week, Spot the Dogference  came online as a public beta. Time to write a blog post about this project I worked on during my internship at Almer/Blank.

What is this game?

Spot the Dogference is an online game of spot the difference featuring pictures of dogs. It has 3 levels and one bonus level. You can share your score on twitter and it will be displayed on the spot the dogference website. Read more »

Using Terminal For Tracing In Actionscript Projects

traceinterminal

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 »

My talk at L.A. Flex User Group Meeting in January

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.

Font Embedding in Actionscript Projects

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.

Read more »

Book review: Foundation ActionScript 3.0 Image Effects

This book is one of my favorite Actionscript books. The author writes in an understandable and clear way. The examples are on topic and clear in the understanding. The book covers a wide variety of different aspects in the use of image effects and image processing in Actionscript 3. The target audience are definitely not for beginners or coders new to Actionscript, but for coders with medium or more advanced level. This book is definitely worth your time to dive into and gives you a lot of new ideas. Read more »

Ribbit Workshop

Add Communication to your Applications with Ribbit

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.

Read more »

Hype Framework Workshop

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 »

How to avoid caching of XML-files in Actionscript projects

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:
avoid caching in xml
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

Download the XMLwithoutCaching.as File

XML Visualization with AS3.0, Tween Lite, MojoFont, PHP 5 and MySQL

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.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Read more »

Flash at the Lake

Zur Abwechslung mal kein Projekt von mir sondern ein Anlass welcher ich hiermit gerne unterstützen möchte.
Vom 26 Juni bis 27 Juni 2009 findet in Zürich eine Schweizer Flash User Konferenz statt.

Flash at the Lake.
Flash at the Lake

Neben diversen lokalen Speakers sind auch internationale Vertreter anwesend.
Während zwei Tagen zeigt uns die Elite ihres Gebietes was mit Flash möglich ist und geben gute Inputs für zukünftige Projekte. Auch Workshops und eine Party dürfen an einem solchen Anlass nicht fehlen.
Ich würde mich freuen wenn möglichst viele von euch kommen werden.
Tickets und weitere Informationen gibt es auf www.fatl.ch
PS: Wenn es nicht gerade aus Kübeln giesst sollten die Badehosen nicht vergessen werden, denn die Location befindet sich direkt am schönen Zürichsee

LichtON – Lichtsteuerungssoftware

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.

LichtOn Startscreen

Startscreen

LichtON Kartenübersicht

Kartenübersicht

LichtOn Dokumentation (PDF 2.3MB)

SourceCode auf Google Code http://code.google.com/p/hs08-nimbus/

Vorlesungsverzeichnis XML AS3

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 XML Visualisierung Übersicht Departemente

Vorlesungsverzeichnis nachdem das Departement XML geladen ist.

Vorlesungsverzeichnis XML Visualisierung Modulanzeige

Übersicht der Module welche in einer Vertiefung angeboten werden. Durch dir Pfeile kann durch die Module durchgeblättert werden.

Vorlesungsverzeichnis XML Visualisierung Modul Details

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.

XML Loader

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.

XML Manager

Auszug aus der XML Manager Klasse

URL zur Demo: http://vorlesungsverzeichnis.michaelfretz.com

Download Flex Projekt des Vorlesungsverzeichnis (104 KB)

Multilineare Stories 2.0 :-)

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

multilineare stories 2.0Ansichtmodus

Multilineare Stories 2.0 :-)
Ansicht Editiermodus

Sommerferien sind vorbei

Lange ist es her seit meinem letzten Eintrag. Doch es ist viel passiert in der Zwischenzeit. Das zweite Semester gehört nun zur Vergangenheit und das dritte hat auch schon angefangen.
Während meiner mehr als drei Monaten Sommerferien habe ich mich intensiv mit dem programmieren auseinander gesetzt. Zum einen habe ich ein kleines Game programmiert welches ich hier bald veröffentlichen werde, zum anderen habe ich ein Praktikum bei „dctrl Interactive Media and Motion Graphics“ absolviert. Doch was macht man in so einen Praktikum? Ich habe gleich zu Beginn mit PHP programmieren angefangen. Als Aufgabe sollte ich ein Bug Tracking System programmieren wo man Fehler über ein einfaches Formular mit Fileupload eintragen kann. Das ganze musste selbstverständlich in Objekt Orientiertem Programmierten PHP5 und auch gegen Angriffe sicher programmiert sein. Formularvalidierung musste serverseitig und clientseitig geschehen. Im Backend des BugTracking Systems musste eine Liste mit allen Bugs generiert werden, die Bugs mussten gelöscht, modifiziert und Personen zugewiesen werden können. Um ein solches System zu erstellen habe ich verschiedene PHP Klasse erstellt welche ich im Anschluss des Projektes auch noch für andere Programme verwenden konnte. Ich habe alles von Grund auf programmiert und keine bestehenden Elemente verwendet da es mir sehr wichtig war, dass alles was ich mache und brauche auch wirklich verstehe. Da ich mein Praktikum ja in einer auf Flash spezialisierten Firma gemacht habe galt es natürlich das ganze Bug Tracking noch in Flash bzw. Action Script 3 in OOP umzusetzen. Auch das wollte mir gelingen. So konnte ich stolz am letzen Tag auf ein kleines Programm zurück schauen welches in Action Script und PHP zusammen mit MySQL programmiert ist und im Zusammenspiel reibungslos funktionierte. Im Grossen und Ganzen kann man sagen das ich die Zeit bei dctrl sehr genossen habe und es mir Spass gemacht hat, viele neue Dinge zu lernen und mit einem guten Team zusammen zu arbeiten.
Wenn ich die Zeit finde bzw. ein Bedürfnis besteht ein Fileupload Script in Action Script3 hier als Tutorial zu erhalten werde ich ein solches schreiben. Im Internet findet man dazu leider nicht viel taugliches. Den SourceCode meiner Arbeit werde ich hier nicht veröffentlichen da dies mein Vertrag nicht erlaubt.
Mitte August war mein Praktikum dann aber leider auch schon wieder zu Ende den ich wollte noch ein wenig Reisen gehen. Da ich noch nie in Asien war beschloss ich nach Indonesien zu fliegen und dort Lombok und Bali ein wenig genauer anzuschauen.

Interface Dynamics

New HTC Interface von Michael Fretz

GUI des Adressbuchs
Das Adressbuch basiert auf einer Art Laufrad und einer Schnellwahl über Buchstaben auf der oberen Seite des Mobiltelefons. Das Laufrad kann mittels eines verschiebens der Schaltflächen mit dem Finger bewegt werden. Je nachdem wie schnell die Bewegung ist läuft das Laufrad schneller oder weniger schnell und rastet jeweils ein wenn das Laufrad kurz vor dem Stillstand und eine Schaltfläche im Vordergrund liegt.
Der Übergang zum SMS wird dann über ein Überblend Effekt gelöst.
Von Laufrad aus kann jeweils der Kontakt im Vordergrund angerufen beziehungsweise eine SMS gesendet werden.
Mit der „zurück“ Taste kommt man wieder eine Ebene zurück.

New HTC Interface von Michael Fretz

GUI der SMS Eingabe
Die SMS Eingabe erfolgt über eine QWERTZ Tastatur. Wird ein Buchstabe gedrückt wird der Button grösser und der Buchstabe wird auf dem Textbereich dargestellt.
Neben den Buchstaben werden noch alle Zahlen angezeigt.
Die Buttongrösse der einzelnen Tasten habe ich auf einem iPod Touch getestet. Die einzelnen Tasten sind zwar relativ klein, ich bin aber der Meinung das diese dennoch von der Grösse her funktionieren. Für das HTC Handy auf welchem der Prototyp läuft sind die Tasten relativ klein.

Die Space Taste ist die grösste Taste da diese relativ oft verwendet wird.
Farblich habe ich das ganze GUI dunkel gehalten. Dies mit dem Gedanken das viele Portable Geräte über einen Akku mit Strom versorgt werden und dieser dadurch weniger belastet wird.

New HTC Interface von Michael Fretz

Film über die Funktionsweise

PS: Falls noch jemand ein Smartphone gratis abzugeben hat auf dem ich zukünftige Systeme testen kann, würde ich mich sehr darüber freuen.. :-)

Anordnungsübung in ActionScript 3

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Weil es seit meinem letzten Actionscript File schon eine Weile her ist habe ich hier mal wieder was erstellt und hochgeladen. Es handelt sich dabei um eine Übung zur Anordnung von Kreisen. Es gibt eine zufällige Anordnung, eine in einem Kreis, eine als quadratische Fläche und eine als Rahmen eines Rechteckes. Die Anzahl der Kreise wie auch die Grösse des Radius sind zufällig gewählt.

Durch drücken der Leertaste oder überfahren der Kreise mit der Maus springt die Anordnung auf die nächste Form.

Source zum Downloaden

Dynamische Sterne

Mit Actionscript 3 einen Stern zu erzeugen machten wir ja schon das letzte Mal. Diesmal habe ich das Script so abgeändert das die Sterne beim Berühren des linken oder rechten Randes jeweils einen Zacken mehr erhalten. Um Zacken wieder los zu werden, muss man einfach irgendwo ins Bild klicken und der Stern fliegt hin und verliert einen Zacken. Eine Begrenzung habe ich jeweils bei mindestens 5 und maximal 20 Zacken gesetzt.

Klick ins Bild entfernt Zacken

Leertaste startet neu.
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Download Source Code 2008-01-07-dynstern.zip

Sternenscript AS3

Jetzt ist ja bald Weinachten
Deshalb hier ein kleines Action Script welches Sterne erstellt, selbstverständlich rein auf Code Basis :-)
Wer sich für die Technik interessiert soll sich doch mal den Quellcode anschauen.
Ich habe wieder mal versucht jede Zeile zu dokumentieren.

Dipl. Inf. Magnus Rembold hat hier eine kleine Skizze aufgezeichnet wie man einen Stern geometrisch berechnen kann.

Ich habe mir mal erlaubt diese hier zu zeigen

kreisideemagnus.gif

L = Länge
Alpha = Winkelgrösse

Spielregeln gibt’s diesmal ein paar weniger
Leertaste bringt neue Sterne
Mausklick lässt die Sterne zu diesem Punkt hin wandern.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Download Source Code (12kb)

Kreisspiel (Action Script 3)

Seit einigen Wochen beschäftigen wir uns mit Action Script 3 Programmierung.

Ich möchte euch deshalb hier einen kleines Projekt zeigen. Die Bedienung ist recht einfach. Einen Klick in den Flashbereich fügt jeweils 10 neue Kreise an der Stelle des klickens hinzu. Das Drücken der Leertaste löscht alle Kreise.

Klicken = Kreise erstellen

Drag and Drop = Kreise verschieben

Leertaste = Spielfeld leeren

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Alle Files sind kommentiert und können von mir aus weiter verwendet werden.

Hier als Zip File downloaden