Ventana is designed to allow the presentation of any kind of information. It could be used to present fashion, jewelery or even a restaurants menu. Ventana can be installed in any shop window.
For our purposes Ventana is showing two products thematizing the US city New York. By the mere presence in front of the window a user can navigate and interactively experience the digital space.
Through the use of inexpensive technology it is affordable for a wide varaity of shops. It can be used for very small interaction with the shop windows content up to very complex games and e-commerce solutions.

Ventana is my bachelor project from my studies in the Interaction Design program at the university of the arts in Zurich. (iad.zhdk.ch)

Menthors
- Max Rheiner
- Karmen Franinovic

Processblog
http://ba.michaelfretz.com

Download
Download the bachelor thesis here

Punkt.Fizn is an Android and Arduino powered bike navigation system. Unlike most navigation systems we didn’t focus on a display. Instead directions will be given only through vibrations in the handlebars. Riding a bike with Punkt.Fizn is like knowing your way already.

How does it work?
1. Choose a route from openrouteservice
2. Download the route XML
3. Upload it here
4. Start the android app and enjoy your bike ride…

Every time you have to turn, gentle vibrations in the handlebars will show you the way.

Material research:
We tried different materials in order to compare its conductibility of vibration. At first we used “Thermoplast”, plastic-granulate which melts on 60Celsius.
Its mold able, when still warm and gets very strong and quite flexible when cooled.
Unfortunately you can’t sanding it very good and it has a poor grind ability.

So we decided to try a soft industrial-design-foam which was good to work with.
The conductibility of the vibration was very good. One draw back with this material was its indurabilty.

Finally we used a more durable foam. Its has a good vibra-conductabilty and its workability lead to a smooth surface.

Coding:
To create a relatively simple but working navigation we wrote an Android application. We used Bluetooth to communicate between Android and Arduino..
Our code is based on the Bluetooth Chat Example from Android.com.
There are two Android Examples available:
1. Navigation System
2. Demo Example (can be a good starting point if you want to build your own Android 2 Arduino Example)

PHP Script
To get the routing we used OpenRouteService. Since the OpenRouteService XML data could not directly addressed over an API, we had to build a small PHP script that allows to simplify the desired route of OpenRouteService.org and load it up in the right format to a webserver. To parse and rebuild the XML we used SimpleXML from PHP. The current state of the navigation system is a prototype. Therefore only one device can access it at the time.
Here is the sourcecode of this script:

		Routeuploader
 
<h1>Bike-Navigation</h1>
 
 
<a id="link" href="http://openrouteservice.org/">download openrouteservice-xml here</a>
	<!-- The data encoding type, enctype, MUST be specified as below -->
<form enctype="multipart/form-data" method="POST"><input type="hidden" name="phpMyAdmin" value="3qaPcWk7TqTEf77hyhNmbFFoa%2C1" />
    		<!-- MAX_FILE_SIZE must precede the file input field -->
 
   			 <!-- Name of input element determines name in $_FILES array -->
			 Send this file:
</form>

Arduino
The Arduino microcontroller recieves the sent values from the Android application and starts a vibrations pattern for the handlebars. For each direction we have two different patterns.
Here is the code:

// This Code Reads the Serial Data whoch comes from Android
 
char incomingByte = 0;	// for incoming serial data
 
// ------ DIRECTION PINS INIT ---------------------
 
int pinArrayLeft[] = {12, 13, 14};
int pinArrayLittleLeft[] = {12, 13};
int pinArrayRight[] = {2, 3, 4};
int pinArrayLittleRight[] = {2, 3};
// ------------------------------------------------
int timer = 100;
int timerLittle =400;
int count = 0;
 
void setup() {
  // Start serial communication
  Serial1.begin(115200);
  Serial.begin(57600);
 
  for (count=0;count<3;count++) {     //////////////// LINKS     pinMode(pinArrayLeft[count], OUTPUT);     pinMode(pinArrayLittleLeft[count], OUTPUT);     //////////////// RECHTS     pinMode(pinArrayRight[count], OUTPUT);     pinMode(pinArrayLittleRight[count], OUTPUT);   } } void loop() {   while (Serial1.available() > 0)
  {
 
    byte serialreadbytevalue = Serial1.read();
    Serial.println(serialreadbytevalue);
 
    switch(serialreadbytevalue)
    {
      case 49:
        goLeft();
        break;
      case 50:
        goLittleLeft();
        break;
      case 51:
        goRight();
        break;
      case 52:
        goLittleRight();
        break;
    }
  }
 
}
 
void goLeft() {
 
  for (count=0;count<3;count++) {
   digitalWrite(pinArrayLeft[count], HIGH);
   delay(timer);
   digitalWrite(pinArrayLeft[count], LOW);
   delay(timer);
  }
 
}
 
void goRight() {
  for (count=0;count<3;count++) {
   digitalWrite(pinArrayRight[count], HIGH);
   delay(timer);
   digitalWrite(pinArrayRight[count], LOW);
   delay(timer);
  }
}
void goLittleLeft() {
  for (count=0;count<2;count++) {
   digitalWrite(pinArrayLittleLeft[count], HIGH);
   delay(timerLittle);
   digitalWrite(pinArrayLittleLeft[count], LOW);
   delay(timerLittle);
 
  }
}
 
void goLittleRight() {
  for (count=0;count<2;count++) {
   digitalWrite(pinArrayLittleRight[count], HIGH);
   delay(timerLittle);
   digitalWrite(pinArrayLittleRight[count], LOW);
   delay(timerLittle);
 
  }
}

Next Steps
The next step would be integrate OSMAND for the navigation. This way the hole navigation process would be easier.

Team
Alain Groeneweg | Danny Arielli | Michael Fretz

Links to site or magazines that mention us
androidportal.hu
androidpolice.com
http://techup.ch/105/40th-swiss-flash-user-group-meeting
http://iad.zhdk.ch/de/stories/11/01/embodied-interaction-press
Weave, interactive design, konzeption & development 02.11 April/Mai Page 16

This project was part of Embodied Interacion Modul at the Interaction Design Programm from the university of the arts in Zurich. All infos about this course http://blogs.iad.zhdk.ch/embodied-interaction/bike-navigatio/
Teachers: Max Rheiner and Karmen Franinovic

Guideline
The user should be pleasantly guided to sleep to release him from his everyday stress.

Basic idea
Our pillows will relax the user with a rhythmical movement. We believe the rhythm of the breath can be influenced by the cushions move. The pillow adapts the breathing rate of the user and is then, after a while, replacing the movement of the pillow with a slowing, regular rhythm. This transition will happen smoothly. The user is not aware of a new respiratory rate to impose. The rate should be lowered to a normal breathing pattern during sleep. Once the system detects that the user is asleep the pillow stops breathing.

Target group
We target on stressed people, people with sleep disorder and people who take home work in their head and therefore can’t easily fall asleep.

Research
People and animals tend to sleep on the chest or abdominal area on other living things. Often this can be found with couples, children and animals. We wondered whether in addition to the social proximity, the movement has an influence on this behavior occurs.

Prototype development and user testing
We have tried several ways to give the pillow a breathing exercise.
In the first experiments was to raise the head up and down, but this was perceived by most respondents as unpleasant and annoying. With this experience, we have adjusted the movement so the head is no longer raised, but the movement was only noticeable.

We experiment with different mechanical systems to make the movement as quiet as possible and a most comfortable experience. Even with the materials we have made several attempts. We have tried various movement systems of wood, metal, rubber, PET and Plexiglas.

We have repeatedly called in various people and asked them questions on the different movements and sounds. Many users have not felt the movement in the beginning, but have felt the light changes of movement as very pleasant and soothing experience after a while. The sounds that were produced by the servos could not completely eliminate but most testers  perceived it as not too disturbing.

According to these findings and adjustments, we started experiments with the pillowcase. We used different materials such as fur and fabric. For some, the fur was to too rough or perceived as pungent. Some found the fur to be inappropriate or repulsive. The pillow was perceived as too hard.

Technology solution
Inside the cushion is a box with two servos which are controlled by an Arduino microcontroller. These control a train system with a lash which pulls together two PET sheets. Through the power to bend the PET plates, it generates the lift and lower a of the cushion. The control of the prototype will take place by a knob to control the speed and a battery for the power.

Photos

First electronic prototype.

Building the box with the electronics

System for the movement.

First user tests.

Inside the pillow.

The final pillow

Technical problems
The battery discharges quickly because it powers the mechanical movement of the servo motors. This makes the battery also very hot. Our servo motors are still too noisy to produce a noise-free pillows. Through the use of high quality servos we might reduce the sound further.

Further steps
In further tests with users with sleep disorder we could test the effect and usage of our pillow optimally. In electronics, we would rely on high quality components to reduce the noise.

Video

Downloads
Soruce Code (Arduino)
Presentation (PDF 55MB)

Team
Thomas Jakob, Manuel Hitz, Michael Fretz

Color Browse is an iPhone application that allows you to easily discover the huge archive of the poster collection of the University of the Arts Zürich. As the average user is rarely familiar with the exact artist names or other search criteria, I decided to pursue an approach that let’s the user sample a color to discover posters containing mainly that sampled color. This approach makes it possible to surf endlessly through the posters and discover new posters and artists at the same time. If a user is interested in a poster he then can retrieve more information about it. Using the iPhones touch screen the user can move his finger over the surface of a displayed poster and a display shows the color currently below the finger. When the user removes the finger the color is selected and a new poster is loaded that has an average color value of the selected color.

Design
The user interface design concept is very minimal. Intentionally I only used little color to not distract from the posters. Additionally it was very important to me to design a usability and interaction model that is self-explanatory. Hence the user interface is very reduced and very simplistic, kept in bright colors to put the posters in the foreground.

Coding
For the implementation of the iPhone application, I used the iPhone SDK using Objective-C and the Cocoa Touch Framework. Diving into a new programming language, being a beginner again, is always hard. But soon I was able to apply the already familiar object oriented concepts and was able to get around the language fairly quickly. I will definitely implement more projects in it in the future using Cocoa Touch.

Further steps
The goal is to release the app in the iTunes AppStore. For that a couple of hurdles have to be mastered. One would be to clarify intellectual ownership legalities with the department of the university. Another one would be to optimize the server side application for better performance to make sure the server won’t go down should there be high volume traffic. Also on the application I have to do an optimization pass to make sure the memory is managed properly and remove any further bugs. And of course a thorough testing needs to be conducted on all current iOS devices.

Conclusion
Developing iPhone app is a very interesting subject and has big potential for interaction designers. With the Color Browse app i managed to create a different way of navigating a vast library of posters of the museum for design and I hope that its exploratory nature was and will be a lot of fun for the users.

Screencast

Documentatiom
Read a more detailed documentation of the project. (German only)

Together with my company Cubera Solutions GmbH I published a new client website. It was our first project together with our new graphic designer and friend Michèle Gnos. Building this website with her was a good and successful experience.
The website is about Ayurveda therapy in Indonesia, a special therapy for many different problems.

Wile building the design we tried to bring in the different “Doshas”:

• Vata(Air, Wind) and Pitta (Water), this part should be demonstrated with the blue areas in the design. Furthermore we added a zodiac sign. The sign of Libra which stands for balance and stability.
• Kapha is demonstrated with the use of the different brown colors.

We used plants in the design because its an important part of the Ayurveda therapy.

Another aspect of building the design was the simplicity. We focused on a easy to use layout and tried to make it a clean and fast loading design.

Behind the website we used the Cubera CMS, a content management system build by our company. This way we can provide a easy cms for our client without making the maintain for the client to complicated. The website is build in French and English.

Thanks to Michèle Gnos for this great Design and Dominik Brumm for his support with the CMS.

Visit the website here: www.sridhanwantari.com

About WUZU10

WUZU is a long-term collaborative program between the Jiangnan University and the Industrial Design department of the Zurich University of the Arts (ZHDK). Alternating every year, one university hosts a joint international summer school. Since its inception in 2004, the WUZU program has stated an example of successful collaboration between Chinese and European universities.
This years WUZU 2010 program was organised by the School of Design at the Jiangnan University in China.

The Subject was “YOU•WU”. The program started in June 2010, when 11 students and 2 professors from the ZHDK had the opportunity to fly to China and meet their educational partners; 20 students and 4 professors from the Jiangnan University. Together they conceived and designed a product that will be exhibited in September in the pavilion “Basel Geneva Zurich” at the Expo in Shanghai.
What does YOU•WU stand for
The topic YOU•WU is from Tao, a concept found in Taoism (http://en.wikipedia.org/wiki/Tao). It has two modalities, YOU and WU which you can also call “origin” and “effect”. In the Chinese culture this means the non-existence and existence. The goal was to create a product that incorporates YOU•WU.

The Project
We started our project with different expeditions, prospects  and ideas. While I was more concerned about building something with educational values and that makes people think, my Chinese friends Candy and Claire chose an approach that would be based on a more literal implementation of the topic.

On one of our many trips to the beautiful small towns in China we observed students buy cheap jewelery. I immediately thought that this jewelery is probably being worn once, maybe twice before it disappears somewhere in a box or even a trash can. What a contribution to our daily waste production. So many resources carelessly wasted for a trend or a brief moment. This experience made us focus on an idea to build a product that is environmentally friendly and at the same time allows for a critical statement over our waste society.

Together we developed a product made of ice. It’s jewelery completely made from frozen water. When worn, it slowly dissolves on it’s own without causing any impact on the environment. Consider a hot day at the beach. Jewelry made from ice is fashionable body cooling that is fun to wear and completely guilt free. It can be produced everywhere and does not require sophisticated production methods.

The state transformation from frozen to liquid symbolizes the phenomena of disappearing fish populations that is caused by our destructive behaviour. Our fast living and careless disconnection from mother nature may lead to a irreversible ecological catastrophe. Just like a piece of art made from ice needs care to not melt away, we need to finally take care to possible avoid what currently seems inevitable.

Our ice jewelry comes in three flavors: °fish | °rubbish | °fun

°fish is to make people aware of the fact that many sea animals are dying out. This can be because of overfishing or pollution. Either way, we need to somehow find the balance with our environment again otherwise we will destroy all sea life. Hence, °fish comes in the shape of sea-animals to remind people that we need to take care of our oceans and its animals before it’s to late.

°rubbish should let people understand that they have to keep rubbish away from the sea and the beaches. Today there are already huge patches of trash floating in the ocean, some bigger than the US state Texas (http://en.wikipedia.org/wiki/Great_Pacific_Garbage_Patch). This should not have happened and filling trash into our oceans can no longer be tolerated. The °rubbish line shall remind people that it is our responsibility to keep the sea and our environment clean from trash.

°fun is to simply enjoy the beach life. It’s decorative and fun to wear. It is to remind us all that, being environmentally responsible is still a lot of fun.

How did we work?
From start to completion the project could last a maximum of 5 days. Naturally, we were working long ours and it made us work hard. In collaborative and individual short brainstorming sessions we developed a bunch of ideas. When we had all our ideas written down, we discussed each one of them in detail and we chose our favorites. The selected ideas we then presented to our teachers. Which does not always yield a clearer result ;-)
With the chosen product idea we started a few rounds of experiments to find out how the cold material would behave, how to form it, etc. We built many shapes used many different materials to create wearable jewelry. To demonstrate the final product and the topic of the pollution, we produced a short stop motion video:

Looking back to this project.
It was a great experience to work hand in hand with Chinese Students. My team member Candy and Claire were both very open minded and fun to work with. We had a good time and we learned a lot about our cultural differences. Personally I gained a lot of value out of the intercultural collaboration and thus the project was a great success.

Video of the final product

Thanks for Matt from Yatah for helping me finding the words ;-)

How to have fun at the expo without queuing?
Wile walking around the pavilions we saw many visitors taking pictures in front of each pavilion. Usually they showed the peace sign with their hands and smiled. This is was our reaction: :)

(Please open the article to see the flash file or player.)

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.

Terra Suisse Animals and there Language
In the section animals and their language each animal explains briefly how they are being treated and what they do all day long. Each animal explains some things about its live and the environment it grows up in.

Muh Mix
The Muh Mix is a game like part of the site. Per drag and drop users can place animals into a play-list and arrange the order of the animal voices. If a user is happy with his choice he can play the song he created, share it on Facebook or send it through an email to his friends. If a user thinks the song he just made is great he can download it as an mp3 or m4r (iPhone Ring-tone format).

iPhone App
In addition to this site there is an iPhone app, available on the iTunes Store. Install it and enjoy cute animals on your phone.

Coding Base
The hole application is build in Object Oriented AS3. I was able to apply some design patterns in this app, for example I applied the singelton pattern on the objects that store the data in the application. This enabled me easy access to all my data from anywhere in the application.. Everything language related is saved in XML and dynamicaly loaded by the migros website. The platform runs on a FreeBSD server managed by my own Company Cubera Solutions GmbH. For generating the mp3 and m4r we created a php script which concatted the different small animal sound fragments to one mp3 file and for the secondary download option as m4r we used ffmpeg to convert.

Looking back
After finishing this project I’m very happy with it. All requested functionality could be built even-though we didn’t know if it is possible in the first place. The site works quite good and its cute and fun to play with it.
Many thanks to Claude Ebersold from Jung von Matt for providing all the cute graphics and for pushing me to work all day and night. Also thanks to Nadja Holdener for helping us where-ever help was needed, for creating many of the animations, and especially for learning and handling SVN so quickly. A special thank goes to Matthias Adolf for leading the project and letting me be part of it. Thank you all!

Try it
You can try this application here (german)

I came across a good solution from the w3c school. The problem was that this only updated with a user input. Therefore I changed quite some part of their script and made it easy understandable. To keep the coding part as small and easy as possible, I will not access a database in my example. My PHP script only displays the PHP function date(“H:i:s”); which shows the current time. You could easy build what ever you want in the the PHP script but keep in mind that this code will be called often and could slow down  your server if you have many users and a short refresh time and therefore to many requests to your server.

Whats do you need in order to see this example.
I created this example in three files.
- The HTML File
- The Javascript File
- The PHP File

The HTML File:
This File loads the Javascript File in order to access all the Javascript functions. In the <body> tag we load the function startRefreshing() from the javascript File

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ajax Test</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body onload="startRefreshing()">
 
    <div id="idForAJAXReplace">
    	Placeholder which will be replaced by the PHP content
    </div>
</body>
</html>

The Javascript File (test.js)
In the scripts I defined which PHP fill should be executed every time the Loop starts. The repeat time is also defined in this script as well as the id of the DIV tag which should be replaced by the data sent by the PHP file. Quite some part of this script are based from the w3c school but I got rid of many unnecessary stuff for my example.

// Config for the javascript part
 
var urlForPHP 			= "test.php";
var milsecondsTillRepeat 	= 1000;
var idForReplace		= "idForAJAXReplace";
 
function startRefreshing()
{
	setTimeout("startRefreshing()",milsecondsTillRepeat);
	reloadPHP();
}
 
/// the following code is based on http://www.w3schools.com/php/php_ajax_database.asp  but I shorted it quite some bit
var xmlhttp;
 
function reloadPHP()
{
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null)
	{
		alert ("Your Browser does not support HTTP Request");
		return;
	}
	var url=urlForPHP;
	url=url+"?random="+Math.random();
	xmlhttp.onreadystatechange=stateChanged;
	xmlhttp.open("GET",url,true);
	xmlhttp.send(null);
}
 
function stateChanged()
{
	if (xmlhttp.readyState==4)
	{
	document.getElementById(idForReplace).innerHTML=xmlhttp.responseText;
	}
}
 
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

The PHP file (test.php)
This file gets called every 1000 ms (defined in the Javascript File). For the demo I only display the current server time. Of course you could display here data from the database or any other PHP script which you need to have repeat called by the website.

<?php
echo date("H:i:s");
?>

Download demo

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.

The game itself is built in Actionscript 3 with the pureMVC framework. It uses MocciAds and the Twitter API from Sandro (SWFJunkie)
I contributed in some parts to this game which was originally build by different developers from Almer/Blank.

Play it now

I designed and developed the CD. The project is a Flash 8 project and includes Video, pictures and text information. I was responsible for the Master CD and the graphic design as well as the coding (AS2) :-) part.

For more information about NOMA visit and donate to http://www.noma-hilfe.ch

The content of this CD-ROM can be found here.

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”.

For our project about food or drink we came up with many different ideas. We thought about four main subjects. Times & Food, Eating on our way, Games & Food and Shapes of our Food. For the subject: “Shapes of our Food” we came up the idea of making a redesign of TOBLERONE. We thought it would be interesting to redesign the triangle and make it more interesting while it still has its original shape. The main goal would be to replace the blank triangle through an icon of some place of interests. The triangle will be still made with chocolate but may play with black and white chocolate or its structure. This could make a new TOBLERONE for special events or places of interest. The main target group will be tourists and event organiser.

After finding our idea we decided to build a prototype. First we designed the structure in Illustrator, afterwards we went to the workshop and used the laser cutter to bring our digital file to a real prototype. Afterwards we only had to paint the small pieces and we had our first prototype. Fortunately we could not eat it otherwise we would not have any pictures :-)

Set of possible triangles (btw: do you  see the bear in the Toblerone Logo)

The World Exhibition Shanghai triangle…

Annie, Michael, Epon, Connie, the EMAC team :-)

Overall it was a great experience. We had a lot of fun and ate plenty of TOBLERONE. I really enjoyed to work in my great team. This summer I will visit my friends in Shanghai again. This time my class will be the guests at the Chinese university and we will do some Industrial Design projects there.

Download PDF documentation

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?
1) Install a Debug Flash Player on your Mac. (http://www.adobe.com/support/flashplayer/downloads.html)
2) Go to your home directory on your computer (in my case: /Users/itz/)
3) Check if a file called: “mm.cfg” exist
4) If not create one and open it
5) Write this code into the mm.cfg file and make sure the path to the TraceOutPutFileName actually goes to a file called flashlog.txt:

TraceOutPutFileName=/Users/itz/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt
ErrorReportingEnable=1
TraceOutputFileEnable=1
MaxWarnings=100

6) Save the file and close it.
7) Start Terminal
8) Type following and make sure the path to the files are the correct paths of your system and press ENTER: tail -f /Users/itz/Library/Preferences/Macromedia/Flash\ Player/Logs/flashlog.txt
8) Start your Flash Project and send out a trace
9) Enjoy working on Flash projects and see traces in your Terminal.
10) Share this post ;)

Tip: If you want to clear your traces press Command K wile your Terminal is active.

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.

My second project from the time of my internship which i want to show you is the Almer Blank Labs. This project is currently online and can be seen at labs.almerblank.com. I designed and developed the WordPress Theme. The design goal for me was to create a design which is clean but also gives the impression of a lab. It should show what we guys at Almer/Blank do or what we look at. The posts get syndicated from different employee blogs and I had to make sure that the pictures and other formatting stuff from other sites work on our site.

My main work on this project was to create the design, build it into HTML and CSS and write the necessary changes in PHP. During this process I tried to optimize the site for search engines and diffrent devices. If you visit the blog on a mobile device like an iPhone or any Android Phone you will see a different, for small screens optimized version of the blog.

labs.almerblank.com on my HTC Hero

Visit his website: www.studiorevo.com

After being here in Los Angeles for about 7 months I think its time to show you some of the projects I worked on. The first project I want to show you is St Moritz TV.

What is this project?
The website www.StMoritzTV.ch is a Web TV station with short videos 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 Beta site. 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 Beta site 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 find out how we can make it most enjoyable for its user.

But hey, let’s get geeky :)

What technology did I use?

Video player with Open Source Media Framework:

The player is built with the Adobes Open Source Media Framework. We had to add some functionality into the player as the version we used didn’t have all functions we needed by the time we developed it. For example we had to build in a video time calculator and a function to read the source for the videos from the XML. Furthermore I had to implement a function to allow jumping to a requested video. For this I used external interface in actionscript to send data into the player from the html page. In this way I do not have to reload the website again if a new video should be played. Of course the play-list is continuously loading the next video as soon as the current video finished playing.

Next Up
The “NextUp” area is build with flash and reads the same XML as the video player. Every time a new video starts to play the video player calls a Javascript function in the html site. This Javascript function send the current played video into the NextUp flash file where I update the view class. If one of the nodes will be pressed in the “Nextup”, it calls a Javascript function too and sends the requested video to the video player.

HTML, CSS and Javascript
I created, based on the delivered design by Almer/Blank, the HTML and CSS part of the website. Different Javascript functions are responsible for handling the requested videos and advertisement .

Web hosting
The current version of StMoritzTV is hosted byCubera Solutions GmbH. Hosting on a Swiss web hosting company helps us to keep ping time low and provides us with a reliable service.
Happy testing :)

Example 1: Font Embedding During Runtime With SWF
Embedding a font with SWF has the advantage that it can be loaded on run-time. This will make the file size of the start-up application smaller and improves loading times. The font will be only loaded if there is a need for it. You will need to have Adobe Flash CS4 or higher for this example.
1) Open a new Actionscript 3 file in the Flas IDE and save it as American.fla
2) Open the action panel and type following:

[Embed(systemFont="American Typewriter", fontName="American",
	   mimeType="application/x-font", unicodeRange="U+0061-U+007A")]
var american:Class;
 
Font.registerFont(american);

systemFont is the actual name of the font on your system.
fontName can be named what ever you want to name it.
unicodeRange is used to define the avaible characters.

I used for this example only lowercase characters. You can change the unicodeCharset to add more characters. A good website to generate the required unicode is http://rishida.net/scripts/uniview/conversion.php

3) Compile the SWF. You will be asked for the Flex SDK Path on your first compile. If you have the Flex SDK press OK and compile again otherwise download first the Flex SDK from opensource.adobe.com/wiki/display/flexsdk. Now you should have a blank SWF.

4) Start a new Actionscript 3 file and save it as Fonttest.fla in the same directory as the other file.
5) Open the action panel and type the following code:

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, fontloaded);
 
loader.load(new URLRequest('AmericanTypewriter.swf'));
 
function fontloaded(e:Event):void{
	var tf:TextField = new TextField();
	tf.width			= 400;
	tf.embedFonts = true;
	tf.defaultTextFormat = new TextFormat('American', 30, 0x000000);
	tf.text = 'hey you';
	addChild(tf);
}

6) Save the file and compile it. You will now load the font from the SWF.

This example is based on the video tutorial from Lee Brimelow. Make sure that you watch his video Tutorial at http://gotoandlearn.com/play?id=102 to dive deeper into loading fonts with external SWF.

Download Sourcecode including FLA

Example 2: Font Embedded In Flash.

Using the [Embed] tag: The font needs to be accessible in your Actionscript project during compile time.

package {
	import flash.display.Sprite;
	import flash.text.AntiAliasType;
	import flash.text.TextField;
	import flash.text.TextFormat;
 
	public class FontEmbeddingEmbedTag extends Sprite
	{
 
		[Embed(source="Arial.ttf", fontFamily="foo")]
		public var bar:Class;
 
		public function FontEmbeddingEmbedTag()
		{
			var format:TextFormat              = new TextFormat();
			format.font                      = "foo";
			format.color                = 0xFFFFFF;
			format.size                 = 30;
 
			var label:TextField         = new TextField();
			label.embedFonts            = true;
			label.width                    = 300
			label.defaultTextFormat     = format;
			label.text                  = "Hi michaelfretz.com!";
			addChild(label);
		}
	}
}

Download Sourcecode

Example 3: The MojoFont Way
My favorite way of embedding a font into an Actionscript project is using MojoFont.
You may ask, what is MojoFont? MojoFont is an Eclipse Plugin for embedding Fonts, developed by Philipp Laeubli. MojoFont is still in private beta but will be released soon as a public beta.

Example 3.1: Embedding A Single Font For Basic Textfields With MojoFont
1) Apply for a private beta account at http://mojofont.badmojo.ch and install it as soon as you get the url for the eclipse update-site.
2) Start Flex or FDT and open a new or existing Actionscript 3 project.

3) Go to File -> Import ->Other

4) Choose MojoFont -> Import and convert Font

5) For the First Tutorial we choose the import mode: “Import a font with a single style”. This option will allow us to use only one style of th font. A single style font can not be used for HTML textfield. You can make a font bold or italic but to do that you have to import the font with “import font with multiple font style”. I will show the import of fonts for HTML textfield in the next example further down.

6) Choose a font you want to use and press “Next >”.

7) Select a location in your project where the compiled SWC should be saved. The path to this SWC will be automatically added to your project properties and if you decide to delete a font you have to delete this path too. (Right-click on your project name->Properties->Actionscript Build path->Library path) For the Charset Range we use “Default / All”. If you only need some caracters and want to keep the filesize low you can change the settings to “Predefined” or “Custom”.

8) A quick example how to use it will be shown before you press Finish.

9) This is how your Sourcecode should look like if you want to embed a font with MojoFont.

package {
	import flash.display.Sprite;
	import flash.text.TextField;
 
	public class MojoFontBasic01 extends Sprite
	{
		public function MojoFontBasic01()
		{
			var txt:TextField 	= ComicSansMSRegular.createTextField();
			txt.text		= 'Hi michaelfretz.com';
			addChild(txt);
		}
	}
}

10) The compiled version will look like that

Download Sourcecode

Example 3.2: Same As Before But With TextFormat

package {
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;
 
	public class MojoFontBasic02 extends Sprite
	{
		public function MojoFontBasic02()
		{
			var txtFormat:TextFormat 	= ComicSansMSRegular.createTextFormat(20);
			txtFormat.color			= 0xff8c00;
			txtFormat.kerning		= 2;
			var txt:TextField		= ComicSansMSRegular.createTextField();
			txt.defaultTextFormat		= txtFormat;
			txt.text			= 'hi michaelfretz.com';
			txt.selectable			= false;
			txt.width			= 300;
			txt.rotation			= 20;
			addChild(txt);
		}
	}
}

Download Sourcecode

Example 3.3: Text As HTML Textfield

If you want to use HTML text with your MojoFont import, you need to use “Import multiple Font Style” instead of “Import a font with a single style”. This will bring you up this window.

You can choose for all styles a suitable font. You can even mix fonts in a HTML textfield. The rest will be more or less the same. Here the sourcecode.

package {
	import flash.display.Sprite;
	import flash.text.TextField;
 
	public class MojoFontAdv01 extends Sprite
	{
		public function MojoFontAdv01()
		{
			var txt:TextField = Helvetica.createTextField();
			txt.htmlText = '<strong>Hi</strong> <em>michael</em> fretz';
			addChild(txt);
		}
	}
}

Download Sourcecode

Example 3.4: HTML Text Same As Before But With TextFormat

package {
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.text.TextFormat;
 
	public class MojoFontAdv02 extends Sprite
	{
		public function MojoFontAdv02()
		{
			var txtFormat:TextFormat	= Helvetica.createTextFormat();
			txtFormat.size				= 20;
			txtFormat.color				= 0xff8c00;
			txtFormat.underline			=  true;
			var txt:TextField			= Helvetica.createTextField();
			txt.defaultTextFormat		= txtFormat;
 
			txt.multiline				= true;
			txt.width					= 300;
			txt.wordWrap				= true;
			txt.rotation				= 30;
			txt.htmlText				= '<strong>hi</strong>
<em>michaelfretz.com</em>'
			addChild(txt);
		}
	}
}

Download Sourcecode

Live Demo

If you want to see a live demo of MojoFont join me at the LA Flex User Group meeting in Santa Monica January 13, 2010 from 7:00pm – 10:00pm where I will held a short presentation about MojoFont. We meet at 12304 Santa Monica Blvd, Suite 215A. California, USA.

or

Join us for the Los Angeles Flash User Group meeting on January 20, 2010 at 525 Venezia Ave. Venice, CA 90291 www.laflash.org where I will talk about FontEmbedding in Actionscript projects.

Thanks

Many special thank to Philipp Laeubli who is the developer and founder of MojoFont. Please visit his project website.

buy it here.

If you want to support me visit my wishlist

My solution was to use this:

#parent{
width:50px;
}
#parent img{
max-width:100%;
height:auto;
}

<div id="parent">
	<img src="http://www.michaelfretz.com/wp-content/uploads/2009/10/IMG_1794.jpg" alt="Los Angeles" />
</div>

This way of handling this problem doesn’t make the file size smaller but it changes the appearance of the image to the width of the div tag. It might not be the best way to do it but it’s a quick and dirty way which might help you.

The final result of this script is a picture, which is only 50px wide instead of 580px.
The only disadvantage is that the file size of the image is still the same.

Download the Source Files