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

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.

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.

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

LAFlashapaloozastock IV is a FREE event for interactive designers, developers, artists, companies and the people that enjoying hanging with. This year is scheduled to be the biggest event so far, as a pre-MAX 09 “free festival”:

* Top Studios set up booths to interview, meet and greet the community.
* Amazing presentations by top industry talent
* Job Stock helps the regional industry and community by matching prospective employers with the talent they need.
* Budding Talent – encourages college students and recent grads to demonstrate their skills and portfolios, to help them find entry level positions in the industry.
* Raffle – still unconfirmed, past years prizes included the new Adobe Creative Suite, Nintendo Wii, and books from Friends of Ed.
* Street Party a celebration of art music and creativity featuring one of a kind entertainment, art showcases, delicious food, and live music & dancing.

A quick rundown

* Event: LAFLPS IV
* Date: Saturday Oct 3rd, 2009
* Time: 10:30am – midnight
* Location: Almer/Blank – LA Flash Factory
* Address: 525 Venezia Avenue, Venice CA 90291
* Description: A free event for interactive designers, developers, artists, companies and the people that enjoying hanging with– top studios hiring, amazing workshops, raffles, and street party/mixer.
* Parking: Venice Blvd/ Abbot Kinney South

Why the name? And whats the History?
Los Angeles + Flash + LaLaPalooza + Wood Stock + Venice Beach + Free Cool Stuff = LAFlashapaloozastock

So…. it’s a yearly conference, festival, job placement , showcase, mixer and party. Back in 2005, after going through a full keg, the event ended with an infamous Frisbee war (on the day before the Anaheim MAX)! In 2007, we chilled in the patio eating freshly made tacos and watching exotic fire dances. In 2008, attendees saw GMUNK, Ralph Hauwert, Lee Brimelow and Brandon Hall present and made many networks during our mixers in between talks.

In other words, LAFlashapaloozastock IV will ROCK to the top of Mt. Fuji! We’ve got Flash gods, jobs, food, music, liquor, art, and free stuff (and not to mention all the hot peeps from Venice).
Who goes to this event?

Flash Designer, Flash Developers, Motion Graphic Artists, Digital Artists and anyone in or having an interest in Flash and digital media. From our technical presentations for the beginner, the intermediate, and the super advanced, to the inspirational creative sessions, there is always something to choose from.

Source: flashapalooza.com

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

Flash at the Lake.

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

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

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

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

Film über die Funktionsweise

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

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.

Hier als Zip File downloaden

Die ganze Doku findet man hier-> (10MB)