Die FOTB fand im Brighton Dome und näherer Umgebung statt. Es gab bis zu vier parallele Sessions. Für alle die, die keinen Workshop am Sonntag gebucht hatten fing es Montag morgen mit dem Check-In an. Wäre schön gewesen hätte man sein Mobiltelefon auf UK-Zeit umgestellt. Dann hätte man noch ausschlafen können und wäre nicht eine Stunde zu früh.

Nicht nur der Brighton Dome ( ein altes Theater mit entsprechend größer Bühne und klasse Sitzen ) machte gleich zu Beginn Eindruck. Auch das Opening-Video lässt das kreative Herz höher schlagen:

Die Keynote machen Andrew Shorten, Thibault Imbert, Richard Galvan und Doug Winnie. Alle samt Produktmanager bei Adobe. Es gab wenig Neues. Aber es gab noch eine kleine Preview vom nächsten Flash Player zusehen. Gerade die Mac-User dürften sich freuen, wurde doch endlich deutlich an der Video-Performance Schraube gedreht. Mehr GPU lässt den Flash Player nicht mehr bei 80% sondern 5% CPU-Auslastung bei der Videowiedergabe sein Werk verrichten.

Weiter ging es mit Grant Skinner. Weg vo Code, hin zur Inspiration und was man mit Flash sonst noch so machen kann und ganz. Nimm dir die Zeit – und plane das am besten auch fest ein – etwas Neues auszuprobieren. Was gibt die Technologie sonst noch so her. Daraus ergeben sich dann neue Projekte ( und Kunden ) schneller als man das gedacht hätte. Dazu zeigte er seinen eigenen Experimente. Z.B. das Steuern der Carrera Bahn mit einem Android-Phone-Pedal, dem Android-Phone-Multiplayer-Game-Controler oder dem Steuern der Carrera Bahn mit Hilfe von Sound ( welches Kind freut das nicht – besonders die Großen ).

Next: Andre Michelle: Audio – was den sonst. Nichts wirklich Neues an dieser Front, aber in dem Saal ist der Sound einfach großartig. Da kann man auch einfach mal genießen was andere mit dem Audiotool so zaubern !

Next: Mario Klingemann. Mario hatte angekündigt, dass er nach diesem Vortrag erst einmal eine kreative Auszeit nehmen wolle. Also vorerst die letzte Chance Mario Klingemann auf der Bühne zu sehen. Das muss man sich dann natürlich auch ansehen. Wie immer wird man nicht enttäuscht. Höhepunkt: Wie baue ich in ein paar Tagen ein Tool aus einer Kamera und Flash, dass mir automatisch eine Puzzle löst …

Hoss Gifford: “Things i have learned”. Im Grunde schon eine “Get Inspired Session”. Der Vortrag ist nur schwer zu beschreiben. Aber er hat recht. “Frühstück ist die wichtigste Mahlzeit des Tages. Nimm dir die Zeit.”. Es ging nicht nur um die simplen, alltäglichen Dinge, die dann doch irgendwie nicht mehr selbstverständlich sind, aber dann eigentlich doch. “Warum gehe ich nicht jeden Tag meine Aufgaben so an, wie an dem Tag bevor ich in den Urlaub fahre.”

Next: Robert Hodgin: So gut, dass John scheinbar bewusst keinen andere Session zur gleichen Zeit angesetzt hat. Eine audiovisuelles Erlebnis der besonderen Art. Als Einleitung von John: “Wer benutzt iTunes ? Wer kenn in iTunes die Visualisierung zu den Songs ? Das ist der Mann der das gemacht hat!”. Hier mal ein sehr schönes Beispiel ( auch das im Theater mit riesiger Leinwand und super Sound natürlich “etwas” besser ):

Nach drei Stunden Pause und dem einem Freigetränk an der Bar ging es abends um 20h nochmal zur “Inspired Session”. Redner am ersten Tag: Stefan Sagmeister mit “Design and Happiness”. Wer irgendwann mal die Chance hat diesen Menschen live zu erleben, sollte dies unbedingt tun. Eine wirklich interessante Persönlichkeit. Der gute Mann ist erfolgreicher Designer. Eines seiner Geheimrezepte: Auszeit nehmen. Und in der Tat macht er alle paar Jahre ( 5-6 ) ein Jahr Pause von der normalen Arbeit um für sich kreativ zu sein. Letztendlich mit dem Erfolg, dass es sich nicht nur persönlich, sondern auch monetär für ihn auszahlt. Eine echte “Inspired Session”. [Update: Ted Talk von Ihm, quasi das gleiche: http://www.ted.com/ ]

Der Abend klingt aus bei eine paar Cola und gemütlichem Beisammensein ! Grüße an die Flash Usergroup Ruhrgebiet.

Tag 2

09.00 Uhr – “The Elevator Pitch”: 20 hochmotivierte Künstler / Coder / Speaker haben 3 Minuten Zeit um zu zeigen was sie können. Der Gewinner wird im Nachgang ermittelt und bekommt im nächsten Jahr eine eigene Session. Es war in der Tat ein bunt gemischter Haufen mit Vorträgen bei denen man sich schon gefragt hat – warum ?! – und sehr eindrucksvollen Präsentationen bei denen man gerne mehr als 3min gesehen hätte.

Branden Hall: Bisher hatte ich noch nicht die Gelegenheit mir das Hype Framework mal anzusehen und mal schauen wie lange es dauert, bis ich wirklich dazu komme ( -> Auszeit für die Kreativität nehmen ), aber man sollte es auf jeden Fall mal tun. Mit diesem Visualisierungsframework lassen sich wunderbare Sache erschaffen. Besonders erfreut hat mich die Ankündigung, dass auch erste Sachen nach JavaScript portiert wurden ( mehr als Versuch und weniger als dauerhafte Lösung wegen Zeichenperformance – Flash bleibt Nummer 1 ).

Joa Ebert: Eigentlich dürfte man schon gar nicht mehr zu den Vorträge gehen. Man geht immer mit dem Gefühl raus: “Was mache ich eigentlich den ganzen Tag.” Heute: Wir bauen uns einen eigenen Flash Player. Aus Joas stetiger Bemühung der Flash Plattform mehr Performance zu entlocken und dar kompilierte Gut zu optimieren, was derzeit in seinem Apparat Framework mündet, ist JITB der jüngste Spross. Letztendlich geht es darum bestehenden ActionScript Code in Java zu wandeln um diesen dann in der wesentlich performanteren JVM laufen zu lassen – also der Flash API innerhalb von Java. Einfaches und eindrucksvolles Beispiel: Ein winziges Skript, dass einfach nur ein paar tausend Instanzen eines Objektes erzeugt: Laufzeit Flash Player 560ms. Laufzeit in Java nach JITB: 16ms. Liebes Flash Player Team: Da geht noch was bei euch :)

Next: Florian Schmitt – “Business in the front – arty in the back.” Anfänglich eine wenig schwer aber letztend ganz gut anzusehen.

Julien Vallée, ist ein Designer aus Montreal, den John auf der Offf, für die er auch den Opener kreierte, rekrutiert hat. Er zeigte tolle Entstehungsprozesse und Make Ofs von seine Produktionen für die New York Times oder MTV.

OFFF Paris 2010 Sponsors titles from Julien Vallée on Vimeo.

Nando Costa – ein Designer aus den USA, der z.B. den bereits beworbenen Introfilm zur FOTB2010 begesteuert hat, zeigte Einblicke in seine Arbeit, und u.a. das Making Of zu dem Introfilm. Projekte die gelungen sind und Pitches die letztendlich an andere Studios gingen.

Pause, Freigetränk und Ready for Inpsired Session

Brendan Dawes – “Makers of Things”: Talk – Action = Shit. Eine Reise durch ein paar Jahr(zehnt)e in der digitalen Produktion und Projekten die Brendan gemacht hat. Den ganzen Vortrag gibt es bereits auf seiner Webseite zu sehen: http://www.brendandawes.com/project/makers-of-things/

Mehr Bar, mehr den Abend genießen.

Tag 3

Es geht los mit “6 of the Best – 10 Mins Each”. Irgendwie rissen die Sachen leider nicht so vom Hocker, wie man sich das bei dem Titel gewünscht hatte. Trotzdem wert so früh aufzustehen. Auch wenn es nicht live gecodet war, es gab noch mehr von Robert Hodgin zu sehen. Traumhaft.

Robert Reinhardt: Hab ich irgendwie verpasst. Wir haben uns mehr mit dem Gewinnspiel beschäftigt. Den auch in diesem Jahr gab es einen Fotowettbewerb. Die besten Bilder die mit der offiziellen Flash on the Beach Mütze eingereicht werden bekommen Freikarten für das nächste Jahr. Wir haben ein wenig außer der Reihe dann mehr ein Video eingereicht. Hier der Beitrag der Flex Usergroup Hamburg und der Flash Usergroup Ruhrgebiet:

Letztendlich gab es dann doch noch ein Ticket dafür, John: “I give it to the nacked guy.”

Ralph Hauwert – Auch immer wieder sehenswert. Mehr Code, mehr Mathe, viel 3D – am besten selber sehen !

Cyriak Harris – “Animated Mental Malfunctions”. Der Titel trifft es eigentlich. Wenn auch nicht in Flash umgesetzt sondern in After Effects is es ein großartiges visuellens und Hirnschmelzendes Erlebnis. Also mal “Cyriak Harris” Videos bei YouTube schauen !!! Weniger “Mental Malfunctions” aber zusammen mit der Musik sehr gelungen:

Joshua Hirsch ist technischer Leiter bei der Agentur “The Big Spaceship”. In seinem “Summer Fridays” berichtet er über die Erfahrung mit der kreativen Freizeit. So wird in der Agentur der Freitag Nachmittag in der Regel für interen Projekte genutzt und nicht für Kundenarbeit ( bei dringenden Deadlines mal ausgenommen ). Auch wenn Google in diesem Bereich immer noch den größten Freiraum gewährt ( offiziell 20% für eigene Projekte ) so gibt es auch bei Freitag Nachmittagen entsprechend interessantes das sich letztentlich auch für die Agentur lohnt.

Der letzte Vortrag gehörte Jared Tarbell. Der Designer und Entwickler ist u.a. Co-Founder von etsy.com. und derzeit begeistert von algorithmisch generierter Kunst. Beispiele hier: http://www.complexification.net/.

Fazit: Flash on the Beach 2011 – Ich komme !

Flex UG HH is everywhere

The Wiimote uses several sensors to detect different motion values. It allows you to read the acceleration value for X-,Y-, Z-axis and Roll, Pitch and Yaw, which is the rotation around the x-,y- and z-axis. So you have a lot more degrees of freedom than with a simple mouse or keyboard. A funny thing you could implement with this for example is WiiSpray, which also uses the WiiFlash Lib.

The WiiFlash package consists of two parts. The first one is the WiiFlash Server. It’s written in C++ / .NET and handles the communication with the Wiimote. The second part is the WiiFlash ActionScript API, which gives you methods and events to get and handle the Wiimote data.

The Wiimote communicates via Bluetooth with its endpoint. So the WiiFlash Server connects to your PCs or Mac Bluetooth stack and reads the data from the Bluetooth connection. This data are send via Socketconnection to the Flash Player. The WiiFlash AS3 API now converts the Wiimote binary protocoll into useable data. Which means you could directly read the values and also get update and/or change events if anything happens.

Connect the Wiimote
The WiiServer is available for PC or Mac. At first you have to connect your Wiimote with your PC or Mac. That means you have to create a Bluetooth connection between them – pair them via Bluetooth. After this step the WiiFlash Server should be able to find the Bluetooth connection and create the connection to the Flash Player. Find a detailed description how to connect your Wiimote with your PC here.

After you could pair your PC/Mac with the Wiimote, disconnect the Wiimote and start the WiiFlash Server. When the server started connect your Wiimote again ( this is done by pressing the Buttons “1″ + “2″ of your Wiimote at the same time ). After a short time you should see the connected Wiimote at the WiiFlash Server. It shows you the Batterylevel and the Wiimote-ID. Both Server versions could connect up to four Wiimotes at the same time.

I did not test the WiiFlash under Windows Vista. But wit OSX 10.5.x you’ll get an Java error when you start the server:

Cannot launch Java application.  Uncaught exception in main method:
java.lang.IllegalStateException: Bluetooth failed to initialize.
There is probably a problem with your local Bluetooth stack or API.

You just have to declare the WiiFlash Server as 32bit application. Just open the file properties ( Apple + i ) and check the 32bit-mode checkbox. This will fix the problem. ( Otherwise the application is launched as 64bit application ).

Unfortunately both server versions aren’t that stabel. From time to time the server crashes or the connection between server and Flash Player doesn’t seem to work any more. You just have to close the server, disconnect the Wiimote from your PC or Mac and restart the connection. This also helps if the rumble function or the LED setter method seem to quit their work.

Connect the Wiimote with your Flex App
The WiiFlash AS3 API gives you a very clear set of methods, which gives you fully access to the Wiimote data. At first you have to create an instance of the Wiimote class. Now you could create the connection to the Wiimote and access the data.

import org.wiiflash.Wiimote;
 
private var wiimote:Wiimote;
 
public function init():void{
	wiimote = new Wiimote();
 
	/* use Event.Connect NOT WiimoteEvent.CONTROLLER_CONNECT */
	wiimote.addEventListener( Event.CONNECT, connectHandler );
 
	wiimote.connect();
}
 
private function connectHandler( evt:Event ):void{
	trace( "Wiimote is connected" );
}

Read Wiimote data
The accelerator values could be accessed on to different ways. First you could read the data directly from the Wiimote-instance. This is helpful if you have an timed update interval, which handles the data. For example if you use an the enterFrame event to call a method which handles the Wiimote data:

public function init():void{
	wiimote = new Wiimote();
 
	/* get Wiimote data onEnterFrame */
	this.addEventListener( Event.ENTER_FRAME, enterFrameHandler );
 
	wiimote.connect();
}
 
private function enterFrameHandler( evt:Event ):void{
	trace( wiimote.sensorX );
        trace( wiimote.roll );
}

The common way is to use the Wiimote Update event. This event is fired on each update update call from the Bluetooth stack. ATTENTION: The communication works with about 100Hz. This means you will get about 100 datasets per second. This is important for how you will later work with your data, and have to be aware of performance issues if you might bad datastructures or uneffective datahandling methods.

Write Wiimote data
You could not only read values from the Wiimote. You could also write two values of the Wiimote. This are the led and the rumble attribute. With the led attribute you should be able to specify which led-light on the Wiimote shines. This is not really working well, but works sometimes …
You could also use the Force-Feedback of the Wiimote. Just set the rumble value to true and the Wiimote start vibrating. If its used this way, its vibrating all time. You could also set the rumbleTimeout value. The parameter is the time in milliseconds the Wiimote starts to rumble.

/* set LEDs */
wiimote.leds = Wiimote.LED4;
 
/* set Force Feedback - for positiv direction */
// wiimote.rumble = ( wiimote.sensorX>3 || wiimote.sensorY>3 || wiimote.sensorZ>3 );
if( wiimote.sensorX>3 || wiimote.sensorY>3 || wiimote.sensorZ>3 ){
	wiimote.rumbleTimeout = 1000;
}

Interprete the Wiimote data
The Wiimote controller returns the acceleration concerning to the gravity value g. 1g means a gravity acceleration of 9.82m/s². The controller itself is able to detect values between -3.6g and +3.6g.

If the Wiimote will not be moved and rests still on the table, you will always have on value (sensorX,sensorY,sensorZ) which is -1 or +1. This is the gravity affecting on the Wiimote. This is the criteria to detect if you Wiimote is in motion or not. Therefore you could use the Euclid Normal Form. If you take the root of the sum of all squares, this will be near +1. Normally you will define a constant values which is a bit higher than exact +1 to ignore very little movements of the Wiimote.

/* const to detect motion */
private const THRESHOLD:Number = 1.01;
 
private function wiimoteUpdateHandler( evt:WiimoteEvent ):void{
 
	_x = evt.target.sensorX;
	_y = evt.target.sensorY;
	_z = evt.target.sensorZ;
 
	var euLength:Number;
 
	/* check for "NO MOTION" */
	euLength = Math.sqrt( _x*_x + _y*_y + _z*_z );
 
	/** set Force Feedback - for positiv direction **/
	wiimote.rumble = ( _x>3 || _y>3 || _z>3 );
 
	if(euLength>THRESHOLD){
		/* do something */
	}
}

Optimize Wiimote date
Normally you won’t directly use the rough data from the Wiimote. Because the detection is relative precise you will get a lot of little peaks and a very unsmooth curve of data. If you want to detect a specific gesture or just want to transform the Wiimote motion into a motion of objects in the Flash you should parse the data. For smoothing the input data you should use a lowpass filter. It will smooth the curve by multiply the actual value with older values. In the following example a new value will only enter 10%. 90% of the value is taken from the old value.

/* const for filtering values */
private const FILTER_FACTOR:Number = 0.1;
 
/* high pass filter */
private function highPassFilter( oldValue:Number, value:Number ):Number{
	return value - lowPassFilter( oldValue, value );
}
 
/* low pass filter */
private function lowPassFilter( oldValue:Number, value:Number ):Number{
	return  value * FILTER_FACTOR + oldValue * (1.0 - FILTER_FACTOR );
}
 
private function wiimoteUpdateHandler( evt:WiimoteEvent ):void{
	_x = this.lowPassFilter( _x, evt.target.sensorX );
	_y = this.lowPassFilter( _y, evt.target.sensorY );
	_z = this.lowPassFilter( _z, evt.target.sensorZ );
 
	/* do something with the data */
}

Gesture detection
If you know have smooth data, which you only will process if the Wiimote is really in motion, you could start to detect gestures. One of the very simple gestures is a shift. If you just shake the Wiimote a little step right it should detect a rightshift and maybe open the next Powerpoint slide. If you shift to left left the application should go on step back.

For this examples you have to watch the x sensor values of the Wiimote. Because you got the accelation of the controller you will not just get on positive peak in x-direction, but you will get a positive peak in x-direction followed by a negative peak in the x-direction. This is because you start a motion in positive x-direction but than stop to motion, which is a negative accelaration. An right shift is a positive x peak followed by a negative x peak. Vice versa a left shift is a negative x peak followed by a positive x peak.

So the first thing to implement is a peak detection class. I do this by writing several values to a history array ( for example of the last 40 values ). I now compare the avarage of the last 2 or 3 values to the avarage of all history values. If the difference between the two avarage values exceed a specific value ( depending on how exact my motion detection should work ) a peak is detected.

/**
 * @classdescription: peak detection. detects a peak in an array of values
 * @author: Sebastian Martens - http://blog.sebastian-martens.de/
 * @SVN: $Id$
 *
 */
public class PeakDetect{
	private var _history:Vector.<number>;
	private var _historyLength:int;
	private var _kernelLength:int;
	private var _peakFactor:Number;
	private var _lastPeak:Boolean;
 
	/**
	 * @constructor
	 * @param kernelLength Number of values which represent the actual motion
	 * @param historyLength Number of values which are taken as history of motion
	 * @param peakFactor If distance between history and actual motion greater than this value motion is detected
	 *
	 */
	public function PeakDetect( kernelLength:int=2, historyLength:int=32, peakFactor:Number=0.2 ){
		var i:int;
 
		_history = new Vector.<number>();
		_kernelLength = kernelLength;
		_historyLength = historyLength;
		_peakFactor = peakFactor;
 
		_lastPeak = false;
 
		// init with 0
		for(i=0;i<_historyLength;i++){
			_history[i] = 0;
		}
	}
 
	/**
	 * calculates the intersection value of items in the array
	 * @param startIndex to get avarage value from the history list
	 * @param length number of values which should calculate to avarage value
	 * @return avarage value
	 */
	private function _getIntersection( startIndex:int, length:int ):Number{
		var i:int;
		var mValue:Number=0;
 
		for(i=startIndex;(i<(startIndex+length)&&i<_historyLength);i++){
			mValue += _history[i];
		}
 
		return (mValue/length);
	}
 
	/**
	 * tries to detect a peak in the list of value
	 * @return true if a peak was detected
	 *
	 */
	private function _checkForPeak():Number{
		var pValue:Number;
		var aValue:Number;
		var peakVal:Number;
		var multiPl:int;
 
		pValue = _getIntersection(0,_historyLength);
		aValue = _getIntersection( _historyLength-_kernelLength, _kernelLength );
 
		if( aValue>0 ){
			peakVal = (aValue-pValue);
			multiPl = 1;
		}else{
			peakVal = (pValue-aValue);
			multiPl = -1;
		}
 
		return ( peakVal>_peakFactor )?(peakVal*multiPl):0;
	}
 
	/**
	 * Adds a new value to item history. Return true if peak is detected.
	 * @param value Number-
	 * @return Boolean -
	 */
	public function addValue( value:Number ):Number{
		_history.shift();
		_history[ (_historyLength-1) ] =  value;
 
		return this._checkForPeak();
	}
}

Finally you could now decide on the order of the different peaks which type of gesture it should be. Therefore i use a timer. If one peak is detected the timer starts. If another peak is detected within the runtime of the timer a gesture is detected if the peak order fits to a gusture.

Please find attached a example FlashBuilder Project which consists serveral steps with examples. Including the WiiFlash framework and my GestureDetection library.

WiiFlashTest – FlashBuilder Project
com.nonstatics.GestureDetection – Gesture Detection Library for WiiFlash v0.1

cheers,
Sebastian

With data structures i don’t mean an normal or byte array which might be the data structures an the flash  world, because you use it without waisting any thought of it ( me included ). in the very most situations were you used the Flash plattform right now this might be ok, because often you don’t have the mass of data. So the performance of the Flash Player is well enough.

But the possiblities of the Flash Plattform are growing ( very fast in the last time :) ) and more and more applications ( also real applications ) are written for the web ( or for both worlds if you use AIR ).

So you might now run in the situation to build an realy big application which has to handle a lot of data and you have to think about performance. One big thing in performance is the datastructure itself. Each application is different. Is it important for your app to write data fast or read it fast; which happens mor often; do you process all data always complete or do you just need a small part of it ?! For each use case there is for sure a very well data structure.

Data Structure

Example A: Joa Ebert had a talk on Flash Forum Conference 09 (which also inspired me for the second part – see below – and made me happy to see that datstructures are already present in the flash world ) where he presented his data structure for the audio tool. When they output the audio stream they always have to process a (large) list of single audio-items ( one for each bit of the stereo 44.100kHz Audiostream ). -> Fast access of elements (always complete and in the same order ) one by one. Best datastructure: Linked List.

What is a linked list ? A linked list is an list of very light weight elements where each element holds a reference to it next neightbour. In your app you only have one reference to the first node of this list and that loop over the list by setting the reference further (example for calculating the length of the list):

/**
 * Returns the cardinality of the map - the number of elements
 * @return A value of <code>Int</code>, the number of elemets
 */
public function card():int{
	var ref:SimplyLinkedListElement = this._root;
	var card:int = 0;
 
	while( ref ){
		ref = ref.next;
		++card;
	}
 
	return card;
}

You also could insert a new element very fast ( if it is ok to put it on the first position ). You just have to change the reference to the root element to the new element and link the next reference of the new element to the old root element.

Example B: You have an application which often reads from its datastructure, but always only searches on random element. If you would use a linked list, in the worst case you have to look at each element if it is the searched one. Looking at each element is to expensive. One solution are Tree-Datastructures. The simplest is the Binary Tree. Again you have an root reference. But each element now have to references to the next elements. One to the right ( bigger element ) and one to the left ( smaller element ). If you insert an element in the tree you’ll look at the existing node. Is your new node larger, you will look at the right reference, is it smaller at the left reference of the node. Is the reference empty you could place it there.

If not you will look at the data again. In the worst case you now don’t need to look at each element because you have a structure and will find the fastest way by compare the keys. The search is logarithmic not linear.

Garbadge Collector / Pooling

The next big thing with datastructure and performance in the Flash Player is the Garbadge Collector ( which it don’t were that aware before Joas talk ). So the Garbadge Collector is realy slow. So we have to avoid that he is coming to action. How ? By reusing your elements or pool them.

The Garbadge Collector will free space in the memory if there are no more references to an allocted section. So you have to control the references. In your mass of objects you should not drop unused items, because the are not used for now, but pool them. You remove the reference from the main datastructure to the unused element and reference it within a list of unsed elements. When you now need a new element you don’t have to create a new one ( which is also realy expensive ) but you could take one element from you pool.

Find attached some of my older datastructures (LinkedList, DoubleLinkedList, BinarySearchTree) which i just updated so they will now use pooling for unused elements ( and of course there are also some simple FlexUnit Testcases included ! :) – Florian Salihovic).

Download AS3DataStructure.zip

Binary Search Tree

Here is one longer example of an Binary Search Tree implementation. It’s not fully done yet, but most common methods are implemented and ready to use. I’m sure the is some optimaziation potential (please let me know if you find anything, then i will correct it).
Because there are no real Generics in ActionScript this is an Example for a Map which uses an String value as Key and an Number value as data. This has of course to be adopted for your case:

package com.nonstatics.as3collection.map.MapAsBinarySearchTree
{
 
	/**
	 * Implements a map as binary search tree
	 *
	 * @author Sebastian Martens http://www.sebastian-martens.de || http://blog.sebastian-martens.de
	 * @copyright Creative Commons, free to use "as is"
	 * @date $Id: MapAsBinarySearchTree.as 21 2009-05-18 20:06:59Z dinnerout $
	 */
	public class MapAsBinarySearchTree
	{
		/**
		 * root reference
		 */
		private var _root:MapAsBinarySearchTreeElement;
 
		/**
		 * root reference of pooled elements
		 */
		private var _poolRoot:MapAsBinarySearchTreeElement;
 
		/**
		 * cardinality of map
		 */
		private var _cardV:int = 0;
 
		/**
		 * is vadinality valid
		 */
		private var _validCard:Boolean = false;
 
 
		/**
		 * construction method
		 */
		public function MapAsBinarySearchTree( n:int = 0 ){
			// build pool elements to avoid construction on runtime
			while( n>0 ){
				this.poolPush( new MapAsBinarySearchTreeElement() );
				--n;
			}
 
			this._cardV = 0;
			this._validCard = false;
		}
 
		/**
		 * Test if Map is an empty map
		 * @return A value of code>Boolean</code>, if map is empty
		 */
		public function isEmpty():Boolean{
			return this._root == null;
		}
 
		/**
		 * Returns the cardinality of the map - the number of elements
		 * @return A value of <code>Int</code>, the number of elemets
		 */
		public function card():int{
			if( this.isEmpty() ) return 0;
			if( this._validCard ) return this._cardV;
			this._cardV = this._card( this._root );
			this._validCard = true;
			return this._cardV;
		}
 
		/**
		 * recursiv card() helper method
		 * @private
		 * @param node value of <code>MapAsBinarySearchTreeElement</int> processed node
		 */
		private function _card( node:MapAsBinarySearchTreeElement ):int{
			if( !node ) return 0;
			return 1 + this._card( node.l ) + this._card( node.r );
		}
 
		/**
		 * returns an element by its key
		 * @param key value of <code>String</code>, search key
		 * @return value of <code>MapAsBinarySearchTreeElement</code>
		 */
		public function getElement( key:String ):MapAsBinarySearchTreeElement{
			return this._getElement( this._root, key );
		}
 
		/**
		 * recursive helper method for getElement
		 * @private
		 * @param node value of <code>MapAsBinarySearchTreeElement</code>, processing node
		 * @param key value of <code>String</code>, search key
		 */
		private function _getElement( node:MapAsBinarySearchTreeElement, key:String ):MapAsBinarySearchTreeElement{
			var l:MapAsBinarySearchTreeElement;
			var r:MapAsBinarySearchTreeElement;
 
			if( !node ) return null;
			if( node.key == key ) return node;
			return ( key > node.key )?this._getElement( node.r, key ):this._getElement( node.l, key );
		}
 
		/**
		 * checkes if an value v is in the map
		 * @param v a value of <code>Number</code>,element value to search for
		 * @return true if value is containing in one element
		 */
		public function containsValue( v:Number ):Boolean{
			return this._containsValue( this._root, v );
		}
 
		/**
		 * recursive helper method for containsValue
		 * @private
		 * @param node value of <code>MapAsBinarySearchTreeElement</int> processed node
		 * @param v value of <code>Number</code>, search value
		 * @return value of <code>Boolean</code>, value found in tree
		 */
		private function _containsValue( node:MapAsBinarySearchTreeElement, v:Number ):Boolean{
			if( !node ) return false;
			if( node.value == v ) return true;
			return ( v > node.value )?this._containsValue( node.r, v ):this._containsValue( node.l, v );
		}
 
		/**
		 * Test if this map equals to another map ( equals means same elements not same structure )
		 * @param map value of <code>MapAsBinarySearchTree</code> to test this map with
		 * @return a value of <code>Boolean</code>
		 */
		public function isEqualTo( map:MapAsBinarySearchTree ):Boolean{
			if( this == map ) return true;
			if( this.isEmpty() && map.isEmpty() ) return true;
			if( (this.isEmpty() && !map.isEmpty()) || (!this.isEmpty() && map.isEmpty()) ) return false;
			if( this.card() != map.card() ) return false;
 
			return this._isEqualTo( map, this._root );
		}
 
		/**
		 * recursive helper method for isEqualTo
		 * @param map value of <code>MapAsBinarySearchTree</code>, map to compare with
		 * @param node value of <code>MapAsBinarySearchTreeElement</node>, processing node of this map
		 * @return false if element not in reference tree
		 */
		private function _isEqualTo( map:MapAsBinarySearchTree, node:MapAsBinarySearchTreeElement ):Boolean{
			if( !node ) return true;
			var item:MapAsBinarySearchTreeElement = map.getElement( node.key );
			if( !item || item.value!=node.value ) return false;
			return this._isEqualTo( map, node.l ) && this._isEqualTo( map, node.r );
		}
 
		/**
		 * inserts a new value into the map
		 * @param k value of <code>String</code>, key
		 * @param v value of <code>Number</code>, value
		 * @return this
		 */
		public function insert( k:String, v:Number ):MapAsBinarySearchTree{
			// invalidate cardinality
			this._validCard = false;
 
			// empty map
			if( !this._root ){
				var item:MapAsBinarySearchTreeElement = this.poolPop();
				item.value = v;
				item.key = k;
				item.l = null;
				item.r = null;
 
				this._root = item;
				return this;
			}
 
			// non empty map
			this._insert( this._root, k, v );
			return this;
		}
 
		/**
		 * recursive helper method for insert method
		 * @param node value of <code>MapAsBinarySearchTreeElement</code>, processed node
		 * @param k value of <code>String</code>, key
		 * @param v value of <code>Number</code>, value
		 */
		private function _insert( node:MapAsBinarySearchTreeElement, k:String, v:Number ):void{
			// existing keys will be updated
			if( node.key == k ){
				node.value = v;
				return;
			}
			var item:MapAsBinarySearchTreeElement;
 
			// insert left or right
			if( k > node.key ){
				// right node exist
				if( node.r ){
					this._insert( node.r, k, v );
 
				// new node at right leave
				}else{
					item = this.poolPop();
					item.key = k;
					item.value = v;
					item.l = null;
					item.r = null;
 
					node.r = item;
				}
			}else{
				// left node exists
				if( node.l ){
					this._insert( node.l, k, v );
 
				// new node at left leave
				}else{
					item = this.poolPop();
					item.key = k;
					item.value = v;
					item.l = null;
					item.r = null;
 
					node.l = item;
				}
			}
		}
 
		/**
		 * returns if the map contains an element with k
		 * @param k value of <code>String</code>, key to search for
		 * @return true if mao contains key
		 */
		public function contains( k:String ):Boolean{
			return this._contains( k, this._root );
		}
 
		/**
		 * recursive helper method for contains
		 * @param k value of <code>String</code>, key to search for
		 * @param node value of <code>MapAsBinarySearchTreeElement</code>, start node
		 * @return
		 */
		private function _contains( k:String, node:MapAsBinarySearchTreeElement ):Boolean{
			if( !node ) return false;
			if( node.key==k ) return true;
			if( k > node.key ) return this._contains( k, node.r );
			if( k < node.key ) return this._contains( k, node.l );
			return false;
		}
 
		// Traverse the tree complete
		private function _containsF( k:String, node:MapAsBinarySearchTreeElement ):Boolean{
			if( !node ) return false;
			return (node.key==k) || this._containsF(k,node.l) || this._containsF(k,node.r);
		}
 
		/**
		 * returns the rightes leave of an part tree
		 * @private
		 * @param node value of <code>MapAsBinarySearchTreeElement</code>, start node
		 * @return latest right leave from node
		 */
		private function _getRight( node:MapAsBinarySearchTreeElement ):MapAsBinarySearchTreeElement{
			// already latest right node
			if( !node.r ) return node;
 
			// find right
			while( node.r ){
				node = node.r;
			}
 
			return node;
		}
 
		/**
		 * returns the most left leave of an part tree
		 * @private
		 * @param node value of <code>MapAsBinarySearchTreeElement</code>, start node
		 * @return latest left leave from node
		 */
		private function _getLeft( node:MapAsBinarySearchTreeElement ):MapAsBinarySearchTreeElement{
			// already latest right node
			if( !node.l ) return node;
 
			// find right
			while( node.l ){
				node = node.l;
			}
 
			return node;
		}
 
		/**
		 * finds the parent node of the element with key k
		 * @private
		 * @param k value of <code>String</code>
		 * @param nod value of <code>MapAsBinarySearchTreeElement</code>, processed element
		 * @return parent node of node with key k, null if not found
		 */
		private function _findKeyParent( k:String, node:MapAsBinarySearchTreeElement ):MapAsBinarySearchTreeElement{
			//  root node to remove
			if( node.key == k ) return node;
 
			if( !node ) return null;
			if( (node.l && node.l.key == k) || (node.r && node.r.key == k) ) return node;
 
			return (k > node.key)?this._findKeyParent( k, node.r ):this._findKeyParent( k, node.l );
		}
 
		/**
		 * removes an element by its key
		 * @param k value of <code>String</code>, key of element to remove
		 */
		public function remove( k:String ):MapAsBinarySearchTree{
			// empty list
			if( this.isEmpty() ) return this;
 
			// search for parent node of key element
			var searchN:MapAsBinarySearchTreeElement = this._findKeyParent( k, this._root );
			var ref:MapAsBinarySearchTreeElement;
			var ref2:MapAsBinarySearchTreeElement;
 
			// parent of key found, remove element
			if( searchN ){
				// invalidate cardinality
				this._validCard = false;
 
				// remove root node
				if( searchN == this._root && this._root.key == k ){
					ref = this._root;
 
					if( !this._root.l && !this._root.r ){
						this._root = null; // only root element
						this.poolPush( ref );
						return this;
					}
 
					if( this._root.r && !this._root.l ){
						this._root = this._root.r; // empty left tree
						this.poolPush( ref );
						return this;
					}
 
					if( !this._root.r && this._root.l ){
						this._root = this._root.l; // empty right tree
						this.poolPush( ref );
						return this;
					}
 
					// both trees are filled
					ref2 = this._root.r;
					this._root = this._root.l;
 
					this._getRight( this._root ).r = ref2;
 
					this.poolPush( ref );
					return this;
 
				// remove node from tree middle
				}else{
					// found in left tree
					if( searchN.l && searchN.l.key == k ){
						ref = searchN.l;
 
						searchN.l = searchN.l.l;
						if( searchN.l ){
							this._getRight( searchN.l ).r = ref.r;
						}else searchN.l = ref.r;
 
						this.poolPush( ref );
						return this;
 
					// found in right tree
					}else{
						ref = searchN.r;
 
						searchN.r = searchN.r.l;
						if( searchN.r ){
							this._getRight( searchN.r ).r = ref.r;
						}else searchN.r = ref.r;
 
						this.poolPush( ref );
						return this;
 
					}
				}
			}else return this;
 
			return this;
		}
 
		/**
		 * @return the ratio of left to right tree card
		 * large number means heavy weight on left side, negavtive numbers means weight on right side
		 */
		public function getTreeBalance():Number{
			if( this.isEmpty() ) return 0;
 
			var l:Number = this._card( this._root.l );
			var r:Number = this._card( this._root.r );
 
			if( l > r ) return l / Math.max( r, 0.01 );
			if( r > l ) return -1* ( r / Math.max( l, 0.01 ) );
 
			return 0;
		}
 
		/**
		 * creates an string representation of the map
		 * @return String value of map
		 */
		public function toString():String{
			return this._toString( this._root );
		}
 
		/**
		 * recursice helper method for toString
		 * @param node value of <code>MapAsBinarySearchTreeElement</code>, processed node
		 * @return string reprsentation
		 */
		private function _toString( node:MapAsBinarySearchTreeElement ):String{
			if( !node ) return "";
			return this._toString( node.l ) + ' {k:' + node.key + ' v:'+ node.value +'} ' + this._toString( node.r );
		}
 
		/**
		 * Returns the cardinality of the pool - the number of elements
		 * @return A value of <code>Int</code>, the number of elemets
		 */
		public function getPoolSize():int{
			var ref:MapAsBinarySearchTreeElement = this._poolRoot;
			var card:int = 0;
 
			while( ref ){
				ref = ref.r;
				++card;
			}
			return card;
		}
 
		/**
		 * removes all unused elements from pool
		 */
		public function emptyPool():void{
			this._poolRoot = null;
		}
 
		/**
		 * pushed an element to the local pool
		 * @private
		 * @param n a value of <code>MapAsBinarySearchTreeElement</code> Item to push into pool
		 */
		private function poolPush( n:MapAsBinarySearchTreeElement ):void{
			// empty pool
			if( this._poolRoot == null ){
				this._poolRoot = n;
				this._poolRoot.r = null;
				this._poolRoot.l = null;
 
			// non empty pool, keep reference
			}else{
				n.r = this._poolRoot;
				this._poolRoot = n;
				this._poolRoot.l = null;
			}
		}
 
		/**
		 * gets an objects from pool. if pool is empty element will be created
		 * @private
		 * @return a value of <code>MapAsBinarySearchTreeElement</code> - single list item
		 */
		private function poolPop():MapAsBinarySearchTreeElement{
			// non empty pool, take first from pool
			if( this._poolRoot ){
				var res:MapAsBinarySearchTreeElement = this._poolRoot;
 
				this._poolRoot = this._poolRoot.r;
				res.r = null; // empty reference to pool nodes
				res.l = null;
 
				return res;
			}
 
			// empty pool, create new element
			return new MapAsBinarySearchTreeElement();
		}
 
	}
}

Download AS3DataStructure.zip

… to be continued.

cheers,
Sebastian

Tag 2. Nach einem doch längeren Abend als geplant im Studio 672 – der offiziellen Aftershowparty zur FFK – ging es heute morgen weiter im Text.

“Interface Design – Best Practices” – Die FFK09 ist ja nun ausdrücklich keine reine Entwicklerkonferenz. Es geht um die Verschmelzung von Code und Design. Der für mich beste Vortrag der in die Kategorie “Design” fällt war definitiv dieser. Stefan Nitzsche die großen Probleme und die wichtigsten goldenen Regeln des Interfacedesigns ( nicht das ich mir anmaßen würde alle zu kennen und das wirklich beurteilen könnte, dass es die wichtigsten Regeln sind – aber ich alle schon mal gehört und erfolgreich wieder verdrängt ) in einem optisch inhaltlich und presentatorisch wertvollen Vortrag zusammengefasst. Prädikat besonders wertvoll.

Unter dem Titel “Einblicke in den Werkzeugkasten eines ActionScript Profis” hat Malte Beyer von den Powerflashern ( hat sich da eigentlich jemals jemand Gedanken gemacht das das im englischen schon ziemlich suboptimal ist ?! Flasher = Flitzer [ i.d.R. unbekleidet ] ) einen exemplarischen Workflow – wie er auch bei den Powerflashers vollzogen wird – für das Zusammenspiel von Designer und Entwicklern under Verwendung von FDT und Ivy-Ant-Task gegeben. Immer sehr interessant zu sehen wie man es noch machen kann, und dabei noch Zeit spart …

Während im einen Saal unter dem Titel “Silverlight 3 Sneak Peak” die Vertreter der anderen Plattform mit Sicherheit viel Platz zum Tennisspielen hatten, drängte sich das Publikum zusammen um an den “10 Hot Minutes” teilzuhaben. Denn wenn das Flashforum ruft dann folgen dem alle Großen. Und nun durften die Mal zeigen was man alles mit der Flash Plattform machen kann wenn man dem Status des Normalsterblichen entwachsen ist. Frank Reitberger, Joa Ebert, Nicolas Cannasse, André Michelle und Mario Klingemann hatten jeweils 10 Minuten Zeit das Publikum zu beeindrucken.

Frank Reitberger hat auf seine PixelBender Blobs noch eins draufgesetzt. Den Sound kann auch ein Interface sein ( was von Stefan Nitzsche allerdings ausgeklammert wurde ). Mit dem Geräusch eines Föns hat er PixelBender Effekte gesteuert die den Eindruck von Wind auf ein Bild anwendeten. In der höheren Stufe des Föns wurde die Pixel dann sogar im wahrsten Sinne des Wortes dahingefegt.

Joa Ebert hat in 14 Minuten ein Partikelsystem erstellt, dass mit mehreren Tausend Partikeln performanter lief als ein C-Code der mittels Alchemy eingebunden und eigentlich auch schon performant lief ( und das war mal wirklich SpeedCoding ) – ohne Worte.

Nicolas Cannesse hat mittels HaXe und Physics Engine den Traum eines jeden kleinen und großen Kindes erfüllt. Mit Bauklötzen auf Bauklotztürme schießen und genüßlich zusehen wie alles in sich zusammenfällt. Und der Versuch mit einer Festkörperphysik Flüssigkeiten zu simulieren…

André Michelle schafft es mit 30 Zeilen Code und einer Klasse eine Guitarre aus dem Nichts zu erzeugen. Er demonstriert wie man eine zufälliges Nichts ( White Noise ) in Bytecode so mit kleinen Filter bearbeitet, dass es wirklich wie eine echte Guitarrenseite klingt. Noch ein paar Zeilen und Regler dazu in Jimmy Hendrix konnte einpacken! ( Audio-Design! )

So wie André Michelle seinen Narren an Tönen gefressen hat kommt Mario Klingemann nicht von seiner Bildbearbeitung los. In seinen hot 10 minutes ging er unter die Fälscher und erstellte einen Van-Gough-Filter für Bilder.

Nach der Mittagspause ging es weiter mit “What is SWF?”. Nicolas Cannesse nahm einmal den SWF Bytecode auseinander, bzw. wie dieser überhaupt erstellt wird. Ein wenig Werbung für HaXe war an dieser Stelle durchaus erlaubt, das an der ein oder anderen Stelle besseren OptCode erzeugt als Adobes AS-Compiler.

In dem vorletzten Vortrag ging es bei Andrè Michelle natürlich um Töne. Hier durfte mal in den Source vom Audiotool geguckt werden. Wie erzeugt man ein Delay im AS Code und wo kommen die Töne eigentlich her. Und natürlich gabs auch eine C64 Sounddemo. Amazing :)

Im letzten Vortrag hat Mario Klingemann nochmal den Werdegang eines digitalen Kunstwerks vollzogen. Welche kleinen Gedankenspiele und Codeschnipsel sind nötig, bzw. fügen sich später zu einem Großen und Ganzen zusammen – es gab also jede Menge bunte Bilder zu sehen – sehr passend und ein eindrucksvoller Abschluss für die FFK09 im Mediapark in Köln.

Vielen, vielen Dank an Marc Thiele und Sasche Wolter. Great Job. Well done. See you next year.

cheers,
Sebastian

für alle die die es in diesem Jahr nicht zur großartigen Flashforum Konferenz nach Köln geschafft haben sei versichert – ihr habt etwas verpasst! Wieder einmal haben sich Marc Thiele und Sascha Wolters alle Mühe gegeben ein bunten Strauss an Vorträgen Rund um Kreativität in der Flash-Welt zu organisieren – es ist erst Tag 1, aber es ist bereits gelungen.

Die Keynote hielt Adobe Evangelist Serge Jespers. Er gab eine breite Übersicht über die Flash Plattform. Wie weit ist Flash verbreitet und welche tollen Beispiele gibt es für jeden Bereich. Besonderen anklang fanden natürlich die Augmented Reality Beispiele (war mir auch neu: http://www.livingsasquatch.com/, und natürlich GE http://ge.ecomagination.com/smartgrid/). Dann gabs natürlich noch den Klassiker der aktuellen Adobe Präsentationen: der tolle Workflow von Photoshop über Catalyst zu Flex Builder …

Unter dem Titel “The Return of the Blob” zeigte Frank Reitberger was man nicht alles mit den klassischen Flash Filtern machen kann und eine ganze Reihe von Filtern für die man scheinbar nie echte Anwendung gefunden hat. Es müssen eben nicht immer nur animierte Quadrate sein, es geht auch mit Runden Ecken. Also ganz im Sinne von Web 2.0 tauschte man für eine Stunde in die Demo-Szene ab ( spitze Zungen behaupteten, die Blobs ( runde Gebilde ) erinneren mehr an aktuelle Schweinegrippe-Viren ).

Hinter “Audiotool Private Parts” versteckte sich der Vortrag von Joa Ebert der zeigte, was er eigentlich alles nicht am Audiotool von Hobnox macht. Wirklich eindrucksvoll demonstrierte er was man alles schon mal im Informatikstudium gemacht hat und es auch durchaus einsieht und für sinnvoll hält, aber in den eigenen Projekten zu wenig einsetzt: vernünftige Datenstrukturen! Das Audiotool lebt in den wenigsten Fällen tatsächlich durch hochoptimierten Code sondern durch die Wahl der geeignten Datenstruktur, wie sie auch in Joas ActionScript- Wiki einzug halten sollen oder brereits haben. Aber nicht nur hier hat das Audiotool Team guten Code produziert. Auch an anderen Stellen werden ungünstige Frameworkbestandteile durch eigene Entwicklungen ersetzt ( z.B. das Eventmodell ). Getreu dem Motto “Open minds. Open source.” wurden und werden Teile der Projekte als Open Source unter http://opensource.hobnox.com/. bereitgestellt. Danke Hobnox ( die auch die Party gleich sponsoren ).

“Die Flash Video Plattform” – Sven Brencher at its best. Das Adobe Tools universal Genie fasste den Workflow von Video innerhalb der Adobe Welt zusammen – das Ganze aber unter dem Aspekt der Semantik. Adobe Premiere liest ein Video ein und ermittelt via Speech to Text den textuellen Inhalt. Dies wird auf die Timeline gemappt – ich passe evtl. noch Keywords an. Ab durch den Media Encoder damit rein in meinen Streamingserver und in meiner Flex Endanwendung tippe ich ein Suchwort ein, dass mich dann direkt an die Stelle springen lässt, an der der Sprecher das Wort benutzt hat – wenn doch alles soooo einfach wäre … :)
( Die Slides gibt es hier )

Ein hab ich noch: “Creating Realtime Flash Apps” …. war im Grunde der Anschlussvortrag zu Sven. Tom Krcha ging hier allerdings nochmal ein wenig tiefer auf die verschieden (Streaming) Server von Adobe ein. Was geht mit Blaze DS / LiveCycle oder FMS und welche Protokolle erlauben mir was und warum. Immer wieder toll ist aber natürlich die Kommunikation der einzelnen Flashplayer 10 untereinander. Einmal durch Adobe Stratus aufeinander aufmerksam gemacht kann das P2P-Netzwerk losgehen …

Auf einen spannenden zweiten Tag !

cheers,
Sebastian