Kritzelt ihr auch noch Klassendiagramme auf schnödes Papier? Was UML Design in Sachen AS3 angeht, war die letzte, mir bekannte Revolution die Wiederentdeckung des schwarzen Stabilo Fineliners – und die fand gerade mal an meinem Schreibtisch statt. Was habe ich in den weiten des Netz nach einer anständigen Alternative gesucht. Nur um immer wieder vor den selben, resignierenden Stimmen im Web zu landen, die, die fehlende Portierung des gModelers auf AS3 bedauern.

Doch heute bin ich fündig geworden. Crocus Modeller heißt diese Applikation, die nicht nur die wichtigsten Features eines UML Tools unterstützt und dabei gut aussieht, sondern sich auch effizient bedienen lässt. Ich habe es heute erstmals getestet und bin begeistert, so dass ich es auch euch wärmstens ans Herz legen möchte. Seht euch Crocus am Besten gleich selbst an – die beiden Entwickler Filip Zawada und Maciej Pienkowski müssen sich dafür richtig ins Zeug gelegt haben. Crocus basiert übrigens selbst auf Flash und die Beta ist direkt im Browser nutzbar. Projekte können dabei lokal gespeichert werden – es darf also anständig getestet werden.

Und falls für euch, wie für mich, die Frage aller Fragen lautet: unterstützt Crocus Modeller den Import komplexer Projekte? So lautet die Antwort: Ja! Wie weit diese Funktionalität geht, dh. ob beispielsweise Methoden samt ihrer Implementierungen zwischen Klassen verschoben und wieder exportiert werden können, etc., habe ich noch nicht getestet. Früher oder später werde ich das. Bis dahin bleibt noch zu sagen, dass  Crocus vorerst in der Beta-Phase ist und später gekauft werden kann oder muss – zu einem akzeptablen Preis, so die Entwickler.

Falls hiermit das eine oder andere Informationsbedürfniss geweckt worden ist, verweise ich noch auf diesen Artikel des Flash Magazine, der auch mich darauf aufmerksam gemacht hat. Oh happy day

Viele, viele Wochen sind verstrichen, seit meiner letzten Posts. Das legt nahe, dass ich in letzter Zeit viel zu tun hatte und einfach nicht zum Bloggen kam. Genau so wars. Doch nun müssen zumindest ein paar Sätze her und zwar zu der mächtigsten Neuerung, die der Flashplayer erlebt hat, seit er uns den Videocontent ins Netz brachte: Stage 3D.

Die Zeiten der FP9 3D Engines und ihrer kleinen Wunder neigen sich also offiziell dem Ende zu. Gerade von dem lahmen Softwarerendering, das manch kreative Idee bereits im Keim erstickte, können wir uns wohl verabschieden. Denn Stage 3D bietet hier wesentlich mehr Freiraum, um die Dritte Dimension ansprechend auf millionen Bildschirme zu zaubern – auf kleine und große, versteht sich, dank Adobe AIR. Eine gängige Prognose ist von daher, dass die Szene, mit Unterstützung der drei magischen Buchstaben: “GPU” sich das Interesse des Core-Gamers für Flash Inhalte einverleiben könnte. Und somit das anständige Wachstum, das der Flash-Gaming Markt bislang verzeichnen konnte, in Schwindel erregende Höhen treibt.

Traumhafte Vorstellung und nicht unberechtigt, in Zeiten wachsender Beliebtheit für 3D-Produktpräsentationen, Indie-Games und all den 3D-Configuratoren für … soziemlich alles. Doch fürs erste heißt es: cool bleiben – was uns die Zukunft bringt und wie gut die Unterstützung für aktuelle Grafikkarten des FP11 in der Offiziellen Release Version letztlich ausfällt, wird sich zeigen. Sicher ist, dass in den letzten Monaten ein reges Interesse an Stage 3D bestand und bei Flashern rund um den Globus ein dominantes Thema war. Wer weis also, was sich seit der Veröffentlichung des FP Incubator bereits in der Entwicklung befindet?

Neue Versionen der Away- und Alternativa3D Engines gibt es jedenfalls schon und die bauen auf den Stage 3D Möglichkeiten auf. Ein guter Grund sich Alternativa mal genauer anzusehen – ansonsten freue ich mich einfach auf all die Inovationen und das heiße Zeug, das aus der Flash Community seinen Weg ins Web finden wird. Bis dahin, viel Spaß beim flashen!

Frage: Welches Gefühl könnte obiges Bild symbolhaft beschreiben?

A: Heiterkeit
B: Genügsamkeit
C: Selbstmordgedanken eines verzweifelten Kryptologen?

Insgesamt drei mails habe ich zu dem nachfolgenden Thema bekommen,  zwei davon in verständlicher Sprache formuliert – für die dritte musste ich mehrere Wissenschaftler engagieren und fünf Wochen lang versorgen, ehe ich das folgende Ergebniss in den Händen hielt: Warum ist Leda so wavin’?

Großartig. Einen Haufen Geld für teure Wissenschaftler rausgehauen. Vielen Dank an Wolfgang. H aus H. Nie wieder wird man Da Vinci skizzen auf meinem Blog finden!

Um weiteren Kopfnüssen vorzubeugen und die Frage “Warum ist Leda so wavin’?” weitestgehend zu beantworten: Wer sich auf meinem kleinen Blog schon mal umgeschaut hat, hat sicher mal das Tutorial zu fortlaufenden Perlinschen Störungen bemerkt oder zumindest einen Hinweis darauf wahrgenommen. Mit perlinschen Bildern kann man ganz wundervolle Sachen anstellen. Das Bild, das aus diesen (in jedem Frame leicht modifizierten) Störungen hervorgeht, enthält Farbwerte, die (da bin ich mir sicher, auch wenn ich nicht explizit im AS3DMod Code nachgeschaut habe) bei Wavin’ Leda als Grundlage für die Z-Position der Polygoneckpunkte dienen, auf denen das Bitmap (also Leda) abgebildet ist.

Wer ein wenig mit Bitmapdata.perlin() gearbeitet hat, der kann sich das gut vorstellen: z.B, je heller ein Bereich (punkt) im Perlin Bild mit der Zeit wird, desto weiter wird der “zugehörige” Polygoneckpunkt in die Tiefe geschoben. Wenn also das Plane 100×100 px hätte und aus 10 segmenten besteht, befindet sich jeweils ein Eckpunkt an den Positionen (0,0), (0,10),(10,0),(10,10) und so weiter bis (100,100). Jetzt macht man sich so ein hübsches vortlaufendes perlinsches Störungsbild, das ebenfalls 100×100 hat, ehe die Magie ins Spiel kommt: Jetzt werden in Jedem Frame Farbinfos aus dem Bild entnommen und zwar an genau den Punkten/Pixeln, an denen sich auch die beschriebenen Sgement-Eckpunkte des Planes befinden. Wavin’ Leda: Voila.

Schematisch könnte man sich das z.B so vorstellen:

// on ENTER FRAME
plane.punkt3D.z = perlin_pixel_integer_color_value;

Schaut euch doch einfach nochmal dieses kurze Tutorial an, klickt das Bild und fokusiert euer Augenmerk auf einen Punkt in der Animation – hier könnte so ein Segment-Eckpunkt liegen, dessen Tiefe immer vom akutellen Farbwert abhängt. Wer hierzu mehr Infos wünscht, dem gebe ich noch einen Wertvollen Hinweis, wie man die Farbinfos effizient und auch möglichst performant rauskriegt – ihr erinnert euch? Bei der dynamischen Nebel Erzeugung haben wir genau das schon mal getan. Und schaut auch mal selbst auf www.everydayflash.com vorbei und sehet, was der gute Bartek Drozdz dort treibt.

Dieser Text wurde verfasst mit freundlicher Genehmigung von Wolfi H. aus H. Danke Wolf und weiterhin viel Spaß beim Flashen.

“Das ist doch Flash?! Das kommt mir nicht auf mein IPhone!” Ob der gute Mann das gerade denkt? Wär auch verständlich, denn in Zeiten da Prozessoren laufend schwächer werden und HTML5 all die Schluchten zwischen den Browsern überwunden hat und auch kein Mensch mehr Videos in HD aus dem Netz flüssig anschauen will, ist Flash … moment mal?  Diese Gedanken wären völlig realitätsfremt, vieleicht klingt es ja eher so: Gehört mir nicht, also will ich es nicht! Und was spricht für Flash? Fangen wir ganz vorn an.

Und zwar bei der Entwicklung des Internets, zu der die oben abegebildete Person übrigens nichts beigetragen hat, ausser uns im Nachhinein zu erklähren, wie man es hätte richtig machen sollen. Wenn man sich also diese Entwicklung selbst durchdenkt, erkennt man doch vor allem, dass das WWW immer stärker zum Unterhaltungsmedium mutierte. Ich persönlich begrüße das, denn mit ein wenig Glück wird es dazu führen, dass unser vor Dummheit strotzendes TV-Programm bald der Vergangenheit angehört: Internt – Unterhaltung – Flash. Passt doch eigentlich ganz gut? Und weiter: Die mächtigsten Konzerne des Planeten entwickeln laufend neue Produkte und wenn es dann darum geht diese ansprechend (im Internet und darüber hinaus) zu präsentieren, ist Flash die Waffe Ihrer Wahl. Warum? Weil es um Unterhaltung geht – es geht um Emotion und Innovation. Und irgendwie muss man die Leute ja… ihr wisst schon …flashen.

Wortspiele beiseite, geht man noch einen Schritt weiter und sieht sich die Menschen damals und heute an, erkennt man dann nicht, dass die Menschen immer nach neuen, spannenden “Inhalten” zur Unterhaltung geschriehen und dann laut gejubelt haben, wenn Sie sie bekamen? Zumindest im Übertragenen Sinne, denn von Gladiatorenkämpfen sind wir weitestgehend abgerückt. Die neue Arena ist das Netz und Flash ist derzeit sein mächtigster Gladiator UND der wird die Waffen nicht niederlegen, nur weil irgend ein verkalkter und von seinem Ego besessener… ja, schon gut, ich halt mich zurück.

Gut, vergessen wir das – schauen wir lieber in die Zukunft und fragen uns, was könnte diesen mächtigen Unterhaltungsektor revolutionieren? Mir fällt da tatsächlich was ein und das ist GoogleTV. Kaum Werbung, keine zeitliche Bindung und freie Auswahl – wer wird da noch Kabelfernsehen wollen? Mal ehrlich, man kann vieles von Google denken, aber eines steht fest: Wenn Google etwas macht, dann richtig. Folglich wählt man bei Google die besten zur Verfügung stehenden Möglichkeiten, richtig? Für das Interface Ihres GoogleTV wählten Sie jedenfalls Flash. Google wird schon wissen warum und wir Flasher können es uns zumindest denken.

Ich fürchte es gibt fürs erste keine selbsterfüllenden Prophezeiungen im Bezug auf Flash. Zumindest funktioniert auf dem IPhone der Rest problemlos (bis aufs Telefonieren bei den brandneuen Modellen, aber wer braucht schon Empfang wenn er Javascript hat?) Jetzt darf sich manch ein Leser meines Blogs fragen, warum ich mich überhaupt so aufrege? Ganz einfach, ich kann es nicht leiden, wenn Menschen ihren Einfluss dazu nutzen andere Menschen, ihre Ideen oder Umstände zu denunzieren, solange Sie Nichts davon verstehen – also dachte ich mir, mach ich das doch mal selbst und schau was daran so geil ist. Damit bin ich um eine Erfahrung reicher und du hast ein bisschen Konterpropaganda geschluckt. Das werdet ihr mir hoffentlich verzeiehen – denn dann können wir einfach weiterflashen

In diesem Displacementmapfilter Tutorial geht es um die Erzeugung von dynamischen Nebeleffekten. Hierzu erzeuge ich erst eine Nebelwand mittels einer Perlinschen Störung, in der ich zunächst die Dunklen bereiche transparent mache (je dunkler desto durchsichtiger) und anschließend deren Farbwerte durch Weiß ersetze. Das Ergebniss ist ein durchgehend weißes Bild, mit durchsichtigen Verläufen, wo sich zuvor dunkle Bereiche befanden.

Hier das Script:

 var fogData : BitmapData;
 var fog : Bitmap;
 var _w : int = 550;
 var _h : int = 400;
 
 var _perlinData : BitmapData ;
 var _dispFilter : DisplacementMapFilter ;
 
 var _perlinOff : Array = new Array;
 var _numOctaves : int = 3 ;
 
 var _baseX : int = 100 ;
 var _baseY : int = 100 ;
 var _strength : int = 50 ;
 
 
 createFogData() ;
 createFog() ;
 createDisplacement() ;
 addChild(fog);
 
 
 function createFogData() : void {
 
	fogData = new BitmapData( _w, _h ) ;
 	fogData.perlinNoise( _baseX, _baseY, _numOctaves, 10, true, true, 7, true, [new Point(0, 0) ] ) ;	
 }
 
 function createFog() : void {
 
	var rect : Rectangle = new Rectangle( 0, 0, _w, _h ) ;
	var old_bytes : ByteArray = fogData.getPixels( rect ) ;
	var new_bytes : ByteArray = new ByteArray();
 
	old_bytes.position = 0 ;
 
	for (var i:int = 0; i < old_bytes.length; i+=4) 
	{				
		new_bytes[i + 0] = 255 - old_bytes[i + 1] ; // alpha is negated R (R == G == B)
 
		new_bytes[i + 1] = 255 ; 
		new_bytes[i + 2] = 255 ;
		new_bytes[i + 3] = 255 ; // RGB = 0xffffff
	}
 
	fogData.setPixels( rect, new_bytes ) ;
	fog = new Bitmap( fogData ) ;
	fog.alpha = .5;
}
 
 function createDisplacement() : void {
 
		_perlinOff = new Array ;
		_perlinOff.push( new Point ) ;
		_perlinData = new BitmapData( _w , _h, false ) ;
		_dispFilter = new DisplacementMapFilter( _perlinData, new Point( ), BitmapDataChannel.RED, BitmapDataChannel.GREEN, _strength, _strength, "color" ) ;
 
		this.addEventListener( Event.ENTER_FRAME, perlinize );
}
 
 function perlinize( e:Event ) : void {
			_perlinOff[0].x++;
			_perlinOff[0].y++;
			_perlinData.perlinNoise( _baseX, _baseY, 1, 50, true, true, 7, false, _perlinOff ) ;
			fog.filters = [ _dispFilter ] ;
		}

Das Ganze funktioniert folgdender Maßen: Man lädt die Pixelwerte des Perlin-Bildes in ein Bytearray. Hier stehen immer vier bytes (8 Bits, also werte zwischen 0 und 255) für einen Kanal, ALPHA – RED – GREEN – BLUE, in dieser Reihenfolge. Da in der perlin() funktion der parameter Grayscale aktiviert ist, entsprechen die bytes 2-4 einander (R = G = B), somit ist jeder Pixel grau, weil kein Farbkanal den anderen überwiegt.
Ersetzt man nun das erste Byte ALPHA mit 255 (nicht transparent) durch 255 – R (je dunkler desto durchsichtiger), muss man nur noch die Übrigen bytes R G und B auf 255 (ergibt weiß) setzen und schon hat man die besagte Nebelwand.

Anschließend wird eine weitere, diesmal in einer ENTER_FRAME Schleife fortlaufend gemachte Perlinsche Störung in Kombination mit einem Displacementmapfilter dazu benutzt, der Nebelwand eine realistische, dynamische Bewegung zu geben.

Das Ergebniss ist schaurig schön, nicht wahr?