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

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

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

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.

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

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.

The only problem with Ribbit is that they currently only in the USA operate. As soon as they will have other branches in Europe it could be a very interesting alternative to other VOIP systems because it can be build in Flash and integrated in many devices and websites. Ribbit offers many possibilities like Google Voice. A message to Text function is currently one of the coolest feature they have and I look forward to see whats the new version is going to bring.

If you think Ribbit might be a solution for you, contact me. I would like to build a Ribbit application.

Object Pool Example

Sound analyzer.
Press on the Speaker to turn on the sound.

Music by Ratatat

More information about the HYPE Framework on

http://hype.joshuadavis.com

Download the XMLwithoutCaching.as File

Font Embedding

Because most time you visualize data you need to write some text to it. If you have done any pure ActionScript projects in Flex or FDT you know this stuff sucks. The resulting code looks like this and it takes hours of googling to get to the right embed parameters/tags.

But now the way of font handling in Actionscript changed. My colleague Philipp Laeubli created a plugin for eclipse which makes font embedding a piece of cake. If your interested in this, just apply for a private beta account on mojofont.badmojo.ch.
Here a little example how to embed a font with the mojofont plugin.

Instead of writing a whole bunch of metacode and doing some strange font registration, you import your font, and then you can use ist like this: Helvetica.createTextField(). Thats it. All the nasty embedding code and other things are completely handled by the plugin which generates a simple to use and embed swc file.

Tweening
For the hole tweening I used the tweenlite library from http://blog.greensock.com/tweenliteas3/. In my opinion it is one of the best tweening libarys and very easy to use.

XML Loading
I wrote a XMLLoader class. The XMLLoader class loads the hole data of the XML into a String. As soon as its finishes with loading, it dispatches an event. With the getter methods its easy to recive the data and use it afterwards in your programm.

PHP File to generate XML
Many of you will ask why I id use XML. In my opinion its the easiest way of recieving data and its easy to generate it from a database. To generate the XML file I developed a PHP file. This file connects to a MySQL database and loads the whole content of the defined table.  At the moment you will have to define the used fields by hand. First of all, be sure you have all the needed fields in your database. Afterwards change the values in the begin of the mysqlToXML.php file. You have two options. 1: Make the PHP file look like an XML after loading it or 2: let it generate an external file. The first one is the better way if you change often data but dont have to many visitors. The option with the external file is a good option if you want to save database connections because you only ned to generate the XML file once you have changed some data. If you use the external XML file option, be sure that you have the write permission set on your webspace. After you generated your XML just make sure your XML loader class in your Actionscript project knows the path to the file. If you use the other option just add the path of the mysqlToXML.php in your Actionscript project.
Download mysqlToXML.php

Das Spielfeld inkl. Tore:

Wir haben uns von einem klassischen Spielfeld abgelöst und suchten eine neue Idee. Wir haben uns an runde Grundformen gehalten und so unser Spiel konzipiert und umgesetzt. Das Fussballspielfeld ist Rund und auch die beiden Tore sind in dieser runden Form gehalten. Speziell an unseren Toren ist, dass man von beiden Seiten her punkten kann. Die Problematik an unseren Toren ist die Kommunikation mit der Anzeigetafel. Wenn ein Spieler (Avatar) ins Tor Läuft, giebt es auch ein Punkt. Dies konnten wir leider nicht anders lösen.

Die Spielstandanzeige:
Die Anzeige ist das Steuerungsinterface des ganzen Superball-Spiels. Man kann mit den Buttons der Anzeige ein neues Spiel starten und sich einen neuen Ball generieren lassen. Die Anzeigetafel wird von den beiden Toren benachrichtigt, wenn ein Ball ins Tor geschossen wurde. Darauf wird der Spielstand aktualisiert und angezeigt. So sieht man stets, wie das aktuelle Spiel steht.

Der Ball:
Der Ball ist ein physikalisches Objekt. Er reagiert auf die Distanz zu den Spielern. Wenn diese in den Umkreis von einem Meter kommen aktiviert er sich. Drückt man nun $ + Enter oder $$ + Enter oder $$$ + Enter fliegt der Ball davon. Die Flugbahn wird aus der Aktivierungspostion des Avatars und der Position des Balles berechnet. Dies kann zu lustigen Szenen führen wenn dann plötzlich der rollende Ball in eine völlig unerwartete Position fliegt. Das Ziel des Balls ist nicht eine völlig realistische Funktion sondern viel mehr ein möglichst grosser Spassfaktor mit der Unberechenbarkeit.

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/

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)

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