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

wie immer: wer nicht gerade in Köln bei der Flash Forum Konferenz (FFK10 – http://ffk10.flashforum.de) ist der verpasst etwas. Dieses Jahr geht das Treffen der größten deutschen Community zum Thema Flash und Flash Plattform in die bereits 10 Runde. Wieder einmal konnte die Konferenz mehr Teilnehmer als im Vorjahr anlocken. In diesem Jahr sind es Runde 500.

Keynote

Wie schon im letzten Jahr kam die Keynot von Serge Jespers, seines Zeichens Evangelist bei Adobe. Es gab wieder eine kleine Übersicht über die Flash Plattform und eine paar Demos zu den Neuerungen im Flash Player, die sich besonders im Mobile-Bereich zeigen. Serge zeigte auch ein Nexus One mit Flash Player. Den Vergleich zwischen HTML5 und Flash gewann natürlich der Flash Player ;) Nicht Teil der Demo ist natürlich das iPhone – aus aktuellem Anlass eine entsprechend häufiger belächeltes Thema allerortens.

Nach der Übersicht gab es noch eine kleine Demo zur neuen Creative Suite 5 von Alex Ciorapciu.
In CS5 wird die Integration der Adobe und vormals Macromedia Produkten maßgebliche vorangetrieben. Der Datenaustausch zwischen der Software wird immer besser und beeindruckender, was z.B. das öffnen von InDesign in Flash angeht.
Besonders beeindruckend war natürlich die Bildretusche in Photoshop. For zwei Versionen musste man noch aufwendig von Hand mehrere Bilder zusammenpinseln. In CS4 gab es schon ein “Content aware scaling” und man konnte mehrere Bilder zusammenführen um die Schnittmenge zu bekommen ( was z.B. Autos oder Fahrradfahrer, die nur in einem Bild auftauchen eleminiert ). Mit CS5 ist dafür nur noch ein langweiliger Pinsel notwendig der irgendwie aus nur einem Bild alles wegretuschiert was nicht gewünscht wird. Keine Ahnung wo der das Haus hinter dem Fahrradfahrer her holt ?!

Flash Augmented Reality Workflow

Jesse Freemann zeigt uns seinen Workflow um Augmented Reality im Flash Player wahr werden zu lassen. Dazu muss natürlich erst nochmal gezeigt werden, was Augemented Reality überhaupt ist und was man damit machen kann. So richtig technisch wurde es nicht, aber für einen Überblick hat es gereicht und Spaß gemacht hat es auch noch. Also Objekte in Papervision erstellen und dann das Flar Toolkit benutzen. Fertig!

iPhone-Entwicklung mit Flash CS5

Der Vortrag von Saban Ünlü hatte natürlich eine unerwartete Brisanz bekommen durch die neueren Ereignisse, rund um das “Flash Verbot” auf dem iPhone und den Export einer Flash App als iPhone App. Dieser Vortrag schafft Klarheit über den langen Weg einer Anwendung auf das iPhone. Der Teil der dann noch in Flash CS5 eingetragen werden braucht ist erschreckend klein.

Presentation Patterns

… musste leider ausfallen, weil Florian Salihovic sich mit chinesischem Essen angelegt und verloren hatte. Gute Besserung! Es soll zu spontanen Vorträgen gekommen sein …

Intelligente online Videos auf Basis der Flash Plattform

Sven Brencher zeigt, dass es auch im Videobereich ordentlich vorangeht, was die Adobe Palette angeht. Natürlich sieht das immer ganz leicht aus wenn die das da vorne machen, aber es ist auch sehr beeindruckend zu sehen wie mit einem Storyboard der gesprochende Text erkannt wird letztendlich recht unkompliziert eine Videoanwendung entsteht, die weiß, welcher Text gerade gesprochen von welchem Sprecher gesprochen wird.

Tanzen mit Krüken

“Es gibt definitv dankbarere Plattformen als Flash, wenn es um dynamische Sound Generierung geht. Die spartanische Sound API von Flash ist bei der Klangerzeugung so nützlich wie einem Tänzer zwei Krüken beim Tango.” – so viel zur Erklärung des Titels. Das es trotzdem geht beweist André Michelle natürlich spätestens seit dem Audiotool ( das jetzt endlich seine eigene Plattform hat, also fleißig ausprobieren und Tracks erstellen ). Natürliche wurde die Tonematrix rausgeholt und natürlich musste man ein Blick in das Audiotool werfen, aber es gab auch neues an der Audio-Kunst-Front. So hatte das wie immer begeisterte Publikum viel Spaß an der froh animierten Kombination aus Tönen und Physikengine – hüpfende Kugeln – toll.

DIY Methodology, or, When Being Agile Can Break Your Back

Chris Pelsorerzählt wie er Projekte angeht und welche Methoden für Ihn funktionieren und welche nicht. War auf jeden Fall sehr zu empfehlen. Sonst bitte unbedingt nochmal “Getting Real” lesen. Man findet viel wieder.

UnitZeroOne: Skunkworks

Spaß! Ralph Hauwert zeigt, dass sich 3D Objekte auch in Echtzeit wirklich flüssig animieren lassen, was wirklich wörtlich gemeint ist. Demo gibts hier. Oder wie man einen Raytracer in Flash baut. Impressiv – as usual !

cheers,
Sebastian

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

in den letzten Tag gabs es mal wieder eine geballte Ladung von Flash und Flex für mich.

10.06.2009 – Flex User Group Meeting Hannover:
Auch wenn die Runde bei unseren Hannoveraner ( FXUG Hannover Adobe Groups ) Kollegen derzeit noch überschaubar ist, schließlich ist es noch eine ganz junge User Group, wird Engagement und Niveau groß geschrieben. An diesem Mittwoch hat sich die Gruppe bei den Projektionisten in Hannover getroffen. Dort wird gerade für Kunden an 3D-Visualisierung gearbeitet. Der erste Vortrag ging daher über die ersten Schritte in 3D im Rahmen des Flex Frameworks. Derzeit sind derzeit nur ein paar Translationen und Rotationen und wird den 3D Frameworks wie Papervision3D oder Away3D derzeit noch nicht das Wasser abgraben können, aber künftig sicher druch einer nativeren Unterstützung durch den Flash Player 10 in Sachen Performance helfen können.
Im Vortrag 2 ging es um Performance Tipps. Was sollte ich in ActionScript 3 beachten um eine saubere und schnelle Applikation zu entwickelt. Eigentlich ein Dauerbrenner in der Entwicklung. Der Vortrag entwickelte sich zu einer spannenden Diskussion, zu der jeder etwas beizutragen hatte. Wer also im Großraum Hannover an Flex interressiert ist, sei die Flex User Group Hannover ans Herz gelegt.

14.06.2009 Flash Camp Berlin
Die Flex User Group Berlin hat sich alle Mühe gegeben und ein super Community Event auf die Beine gestellt. Mit einem ausgewogenen Programm, dass sich ganz ausdrücklich nicht nur an Entwickler sondern auch an Designer und eigentlich alle anderen wendet könnte sich das Flash Summer Camp Berlin sehen lassen. Das Event ging von 11.00 Uhr bis ca. 21.30 Uhr war kostenlos und das bei freiem Essen und Getränken.
Die Palette der Vorträge ging von der Vorstellung von Flex Startups über Entwicklungsmethoden /-organisation, 3D Frameworks oder Andre Michelles immer wieder begeisternde Audio-Meisterstücke bis hin zum neuen Flash Builder und Flash Catalyst, die Duane Nickull und Sven Claar vorgestellt haben.
Noch einmal ein herzliches Dankeschön an Bettina und Mathias von der Flex UG Berlin für diesen klasse Community Tag in Berlin.

16.06.2009 Flex User Group Meeting Hamburg
Wenn Duane Nickull schon mal in Deutschland ist, dann muss man das natürlich auch ausnutzen. Da er bereits in Berlin zu Gast war hatte er sich auch bereiterklärt einen kleinen Vortrag in Hamburg zu halten. Die Mitglieder der User Group konnten auf der Webseite zwischen drei Themen abstimmen die Sie interesierten. Letztendlich siegte das Thema “Webservices”. Duane ließ sich aber nicht davon abhalten zu einem großen Rundumschlag auszuholen, der dann noch eine kleine Einfühung zu Flex 4 / Flash Builder enthielt, sowie einen kleinen Einblick in den Workflow in Flash Catalyst. An dieser Stelle noch einmal herzlichen Dank an Duane Nickull für den Vortrag und IBM / Boris Fruendt für die Location.
Das nächste Flex UG HH Meeting findet bereits am 30.06. statt. Hier wird Sven Claar dann ausgiebig über Flex 4, Flash Builder und Flash Catalyst berichten. Alle Infos wie immer auf dem Flex UG HH Blog.

Die Präsentationsunterlagen von Duane:
Flash Builder – Building Service Clients – Teachers Guide
Präsentation: Flex 4 – What’s new

cheers,
Sebastian

  <param name="wmode" value="transparent" />
  <embed wmode="transparent" ...

With the transparent mode you can influence the relation between the Flash movie an the surrounding HTML. If the set the wmode to window the Flash movie will always lay on top of the rest of the page. This is absolutly helpfull if your application is “standalone”, means the only center of user interaction or if you have an full window application ( at least with full screen ).
But often you have other HTML elements around the Flash movie which are at the same level of user interaction and might be as important as the Flash movie ( Best example might by fly-out menus which has to overlay all other content. Or maybe confirm messages which are not realized by the JavaScript confirm-dialog ). If you use wmode window html elements will always behind the Flash movie (setting the html z-index has no effect ), so there is no real interaction between HTML/JavaScript an the Flash movie. For this you need wmode equals transparent.

wmode transparent allows an equal mixture between Flash and HTML/ JavaScript. Just as the parameters sounds, the Flash movie will also have an transparent background and let the behind HTML shine through. Attention: The transaparent background is expensive in performance. Use it carefully.
The third mode after window and transparent is opaque. The opaque also allows the mix of Flash and HTML/ JavaScript, but has now transparent background.

Since the introduction of these two modes (transparent, opaque) there is a bug with Mozilla based Browsers and textfields on Window plattforms. If you try to enter special character – famoused example is the @ – in text fields it wont work. This is very uncomfortable if you want to have a user login where you use e-mail adresses as username ( @see Adobe Bug Base ).

swfInput

My solution to solve this issue is called swfInputs. It uses the ExternalInterface class of the Flash player. swfInputs is a an AS3 which extends the Flex TextInput class. It communicates with an JavaScript class. This will create normal HTML Inputfields and places it exactly above the original Flash Inputfield.
On entering text in the overlay-HTML-Inputfield the text will be transfered via ExternalInterface into the Flash movie and the corresponding Flash Inputfield. For the Flash application this mechanism is transparent because the access to the field and change events on the input field will still work.

The JavaScript class will only generate the overlay input field if its necessary, means on the Mozilla-Windows-Combination. Other browsers will use the normal Flash movie inputs.

The styles (height, width, border, colors ) which you set on the Flash Input will be transfered to the HTML-Input and set via CSS styles. For further styling like background images you could of course also use standard CSS.

swfInputs also support multiple Flash movies within on HTML page and have an “point-to-point” connection between the overlaying HTML-Input and the Flash-Input. So there is no general keylogger on the complete HTML page, which might cause problems with your JavaScript functions. This also means that you could have different Flash movies on one page ( which might also communicate to each other via LocalConnection ) where each movie could have its own TextInputs.

What to do in your code?

swfInputs consists of two parts:

• The SWFTextInput AS3 Class (which create the connection to the JavaScript class)
• and the swfInputs JavaScript Class (which handles the creation and HTML communication)

To activate the JavaScript part you just need to insert two script-tags into the HTML code and call the constructor method. At the moment swfInputs uses the dojoToolkit JavaScript library for position calculation and basic connection handling. I looking forward to remove this need of dojo to reduce the filesize.

<script src="../javascript/dojo.js" language="javascript"></script>
<script src="../javascript/swfInputs.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
			swfInputs.init('swfInputTestcase');
</script>

The String-value int the constructor call is the channel-name. This is optional if you just use on single instance within the HTML-page.

Within you Flash/ Flex application you have to use the SWFTextInput class for textfields instead of TextInput. The SWFTextInput class uses the JSCallStack to optimize the JavaScript communiaction ( which could be a lot on fast typing, so its recommanded to use it ).

A basic Flash/ Flex app could look like this. You see there is nothing very special instead of the swfInputs:SWFTextInput class.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute" height="400" width="600" backgroundAlpha="0.5" backgroundColor="#674523"
	initialize="init()" xmlns:swfInputs="com.nonstatics.swfInputs.*">
 
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
 
			//
			private function clickHandler():void{
				Alert.show("swfInput01: "+swfInput01.text+"\n"+
						   "swfInput02: "+swfInput02.text+"\n"+
						   "swfInput03: "+swfInput03.text)
			}
		]]>
	</mx:Script>
 
	<mx:VBox x="10" y="10">
 
		<mx:TextInput width="160" borderColor="#674523" text="{ swfInput01.text + swfInput02.text }" />
 
		<swfInputs:SWFTextInput id="swfInput01" borderColor="#ff0000" fontFamily="Verdana" />
		<swfInputs:SWFTextInput id="swfInput02" borderColor="#00ffff" fontFamily="Arial" />
		<swfInputs:SWFTextInput id="swfInput03" borderColor="#0000ff" fontFamily="Times" />
 
		<mx:Button label="Senden" click="clickHandler()" />
 
	</mx:VBox>
</mx:Application>

Download Files (swfInputs 1.0)

SWFTextInput.as
swfInputs.js
SWFInputs Eclipse Testproject (ZIP)

Please feal free to leave some comments and let me know if its helpful or what should be done for future releases.

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

But sometimes the resize event is called up to 100 times within a second. In this cases some browsers ( sorry, but the IE seems to be ok ) didn’t get all JavaScript calls we made via ExternalInterface and some of our calls weren’t handled ( the container was not resized and our Flex list was cutted off ).

In our first version of the app we made an default call, which calls the last JavaScript-resize after a specific period again. Easy but not very elegant.

What if done now is to implement an JavaScript-Call-Stack. You put in your ExternalInterface calls and the stack will process each after an other after a given pause between the calls. If you often have the same call, maybe only with updated parameters, just like our resize-Event which has different height and width values, the stack is able to clean older calls ( which aren’t processed up to than ) and only calles the latest (in our example the JavaScript method runs ~3 times and not 100 times). The disadvantage of ExternalInterface calls via such a stack is that this is no an asynchronous process and you have to define a callback-handler if you expect an return value of the JavaScript method.

How it’s done:
Create an instance of the JsCallStack class. You should set the timer for the JavaScript calls in ms (will be 500ms by default). Maybe this value could differ from browser to browser (and maybe client hardware), i didn’t test best values for that.

// init JS function call stack
this._jsCalls = new JsCallStack();
this._jsCalls.timerInterval = 30;

It is also possible to give the stack a different mode. By default the stack will be handled as FIFO-Stack (First-In-First-Out). This means that every new call will set at the last position of the queue. It’s also possible to use it as LIFO-Stack (Last-In-First-Out), means that the last call will be handled next.

// init JS function call stack as LIFO-Stack
this._jsCalls = new JsCallStack( JsCallStack.STACK_MODE_LIFO );

Second easy step: Make your JavaScript call:

this._jsCalls.addJSCall("swfInputs.swfInputInit", {}, jsInitCompleteHandler);

This will add a JavaScript method-call to your stack. First param is the method-name (here: method “swfInputInit” of the swfInputs-Object). The second parameter is an object which will be passed to the JavaScript method. This parameter is optional. The third parameter is the result-handler reference. If you expect any results from the JS-method, they will be handed over to this AS-method.
The return value of the addJSCall-method is an integer value of the stack position your call have ( 1 = will be processed next ). If the result is -1 the ExternalInterface isn’t available.

There are also two more parameters: The fourth is the skipOldCalls-parameter. If this is set to true (default is false) older calls of the same JS-method name will be ignored and removed from the stack. The fifth-parameter is convertToJSON. This will convert your given object, which should pass to the JS-method, to JSON.

Happy AS + JS coding.

Download (2009/12/19) JsCallStack.as (Vector)
Download (2009/03/29) JsCallStack.as (ArrayCollection)

cheers,
Sebastian

Doing nice code-comments allows you faster blog-posts:

/**
 * constructor method
 * @param stackMode:int - stack mode of handling stack entries
 */
public function JsCallStack( stackMode:int=JsCallStack.STACK_MODE_FIFO )
 
/**
 * adds an javascript function call to call stack
 * @param funcName:String - function name of js function to call
 * @param paramter:Object - object of paramters to path to the javascript function
 * 							Object will be converted to JSON and hand over an JSON-Object
 * @param resultHandler:Function - method to handler javascript results
 * @param skipOldCalls:Boolean - if true older calls in stack of the same functionname won't be
 * 								 called any more, only latest call
 * @param convert2JSON:Boolean - if true the parameter object will be converted to JSON for the javascript call
 * @return Int value of stack position, returns -1 if External Interface is not available
 */
public function addJSCall( funcName:String, parameter:Object=null, resultHandler:Function=null, skipOldCalls:Boolean=false, convert2JSON:Boolean=false ):int
 
/**
 * removes an javascript call from stack
 * @param id:int - identifier position of call which was returned from addJSCall Method
 * @return Boolean - function found an removed, false if already called
 */
public function removeJSCall( id:int ):Boolean
 
/**
 * returns if the timer is running
 * @return Boolean - is the execution timer running
 */
public function isExecutionRunning():Boolean
 
/**
 * returns the n number of registered functions at this momment
 * @return INT - numer of registered functions, which are not executed yet
 */
public function getRegisteredFunctionsCount():int
 
/**
 * setter method for timer interval value
 * @param value:Int - timer interval in milliseconds
 */
public function set timerInterval( value:int ):void
 
/**
 * getter method for timer interval
 * @return Int - set timer interval
 */
public function get timeInterval():int
 
/**
 * pauses the execution of javascript calls
 */
public function pauseExecution():void
 
/**
 * restarts the execution of javascript calls
 */
public function startExecution():void

Letzter Tag der Adobe MAX in Mailand. Nur noch ein paar Sessions bevor es wieder nach Hause geht mit dem Adobe MAX Bus ( auf der Rücktour haben wir nur 23 Stunden bis nach Hamburg gebraucht, und keine 28 wie auf der Hintour, glücklicherweise gabs weniger Schnee ).

Erste Session. Nach der vorabendlichen Party doch irgendwie dünner besucht …
“Flash Player Internals” – Endlich mal ws für Entwickler wenn man sich nicht schon mal zwangsläufig näher damit beschäftigt hat. Hier ging es darum wie der Flash Player arbeitet. Wann werden Objekte gezeichnet und wann und wie schlägt eigentlich der Garbadge-Collector zu.

Zweite Session: “Flash Lite 3: Learn How to Package and Distribute Mobile Content”.
Um es vorweg zu nehmen, wann endlich AS3 für den Lite Player kommt und ws noch wurde nicht zufriedenstellend beantwortet. Aber eigentlich ging es auch mehr um den Workflow wie meine Flash App auf das Endgerät kommt.

Dritte Session: “Finding Away3D”.
Away3D ist ein Ableger des wohlbekannten Papervision. Allerdings mit ein paar schönen Bugfixes und Neuerungen. Gerade im Bereich Texture Mapping scheint Away3D seine stärken zu sehen. Der Vortrag stellte eine ganze Reihe von Umsetzungen von Projekten vor, die mit Away3D produziert wurden. Alle sehr eindrucksvoll anzusehen. U.a. auch einen animierten Ork der am Ende der Präsentation auch mit Hilfe C-Bibliotheken ( Alchemy sei dank ) als Augmented Reality auf eine Blatt Papier projeziert wurde, das in die Webcam gehalten wird.

Unter “Flex and Adobe AIR Freestyle Hacking” versteht man es wenn Dirk Eismann Sven Claar einlädt eine Runde Code zu schreiben um Probleme zu lösen, die das Publikum live reinruft. Vorher im Blog angekündigt konnte man zu Beginn wenigesten zwei Probleme vorstellen und lösen um dem Publikum die Angst zu nehmen, den erfahrungsgemäß ist so ein Publikum ja ganz gerne mal schüchtern. Dies traf auch leider diesmal zu, und das Publikum wartete erst gegen Ende des Vortrags mit spannenden Fragen auf – Alles in Allem aber dennnoch lustig anzusehen.

Auch unter der letzten Session Flex und PHP hab ich mir eigentlich mehr drunter vorgestellt als die Erklärung wie man in Eclipse eine Flex und ein PHP Projekt erstellt und diese dann per AMF ( ws jetzt wohl neu auch im Zend-Framework enthalten ist ) miteinander reden zu lassen.

Das wars von der MAX, wir sehen uns dann ja alle Montag beim UG-Meeting.

cheers,
Sebastian