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.
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 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:
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
ZIEL
An der ZHdK mit einer Webapplikation eine Dienstleistung zu vereinfachen.
KONZEPT
Sinn und Ziel eines web-basierten Auftrages für eine verlängerte Raumbelegung ist es, das alte, (Gelbe-) Papierzettel-System an der ZHdK abzulösen. Der momentan vorhandene Zettel soll durch ein ähnlich aufgebautes Web-Formular ersetzt werden. Dies vor allem aus dem Grund, dass es oft zeitlich nicht möglich ist eine Raumverlängerung einzugeben. Auch der Weg um Raumverlängerungen zu beantragen kann gespart werden da die Räume ortsunabhängig eingegeben werden können.
Momentane Situation
Um eine Raumbelegungsanzeige ausfüllen zu können, muss sich ein Student im Hauptgebäude momentan ins Erdgeschoss begeben, um bis 17.00 Uhr ein solches Papierformular auszufüllen, was oft aus Zeitmangel ein Problem darstellt.
Da viele andere Dienste wie z. B. Bücherbestellungen auch bereits in eine digitale Form überführt wurden, erscheint es nur logisch, diese Dienstleistung ebenfalls zu digitalisieren. Die Vorteile für Nutzer währen vielfältig: es kann ein Raum bei Bedarf (auch ohne den Unterricht vor 17.00 Uhr zu verlassen) verlängert werden, und dies auch, wenn sich der Student nicht in demselben Gebäude befindet, in welchem er ein Zimmer verlängern möchte. Durch die eindeutige Identifikation mittels ITZ-Login kann exakt ermittelt werden, wer genau den Raum reserviert hat. Die für Raumreservationen zuständige Person muss sich nicht mit diversen “Zetteln“ herumschlagen, sondern erhält auf digitalem Weg eine geordnete Liste aller zur reservierenden Zimmer, welche ohne grossen Aufwand an weitere Personen wie z. B. Securitas weitergeleitet werden kann. Zudem wären Listen aller in ZHdK-Gebäuden reservierten Räume in digitaler (per Email versendbarer Form) bereits von Beginn des Prozesses an verfügbar.
Webseite für die Verlängerung der Räume mit geöffneter Hilfe.
FAZIT
Abschliessend könnte man sagen, dass wir mit unserem Projekt sehr zufrieden sind. Anfängliche Schwierigkeiten mit Wordpress wurden relativ schnell behoben. Wir haben alle viel gelernt, wie man beispielsweise seine eigenen Ideen im Team besprechen und argumentieren kann. Technisch haben wir uns weiter entwickelt und Wordpress als etwas grösseres als nur ein Blogsystem kennen gelernt.
Falls das Projekt weiter entwickelt werden darf, müssten wir noch ein paar Dinge anpassen. Zum einen würden wir das Raumerfassungsscript selber programmieren und nicht auf das TDO Mini Form zurück greifen. Dies hätte den Vorteil, dass wir die Daten in einer eigenen Tabelle in der Datenbank speichern können, welche besser auf unsere Bedürfnisse angepasst ist. Weiter würden wir eine Möglichkeit einbauen, um Raumreservationen nach Datum anzuzeigen. Eine Druckansicht für den Hausdienst wäre auch noch in Planung.
Webseite zum selber ausprobieren: rum.Pirat
rum.Pirat Dokumentation (PDF 2.3MB)
Screencast:
Web Interfaces / Information Architecture
Dozent: Dipl. Des. Stefano Vannotti
Studenten: Michael Fretz | Raphael Habbegger | Tobias Koller | Philippe Meier
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.
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.
Download Source Code 2008-01-07-dynstern.zip
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
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.
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
Alle Files sind kommentiert und können von mir aus weiter verwendet werden.