During the conference I attended Joshua Davis‘ session which really inspired me. I’ve never seen Joshua Davis present, nor did I know his work. Let me be as crystal clear about this as I can be: The man is a freakin’ genius!
During his session he showed a few demo’s of bezier animated stuff. I felt like trying that myself, and this is what I came up with.

The basic concept is to create a bezier in Actionscript and animating movieclips using the bezier as its motion path.

• Basic principle (this is actually just a basic pentool (without the option of adding new points ))

The following versions use the same concept as this one, except instead of fixed anchor points, they all use random points defined in 2 planes. This makes a bit of variety possible allthough the main animation stays the same and that’s absolutely cool!

• Animation fun
• Animation fun V2

I added a few keyboard controls to give you some control of what is happening

• spacebar = show the handles
• r = clear the bitmap
• p = pause the animation
• n = randomize handles
• b = blur more

A few weeks ago I had to create an innovative way to scroll in a page. I have seen tons of scrollbars in Flash and I found it hard to create something completely new. At one point I wondered if I could wire the scrollbar to a webcam using Actionscript… So I started experimenting around…

When I first started I quickly ran into a problem: How the hell do I know if anything is moving? So I actually got stuck right in the beginning.
I went on a Google trip which led me to Koen‘s post about motion detection. Koen was checking all the pixels (using nested loops) to calculate color values. I figured this generated way too much overhead. There had to be a better/simpeler way.

In his post Koen mentioned an article, written by Guy Watson, concerning an other way to get motion detection going. To make things simple: Guy just takes 2 pictures – one of the previous frame, one of the current – puts them on top of eachother, and applies the difference blend mode to the upper one: Tadaaa! There we go! The ‘unchanged’ pixels are blacked out. The remaining pixels are the difference in the picture… which reflects movement.

So I went back to Flash and put something similar together. All I had to do now was clean up the image, turn the difference remainings white, and detect what in the picture remains white.

That last part turned out to be quite tricky too. When I first got to that milestone I quickly checked the BitmapData class for intresting methods, but I didn’t find anything intresting. Later on, I talked to Peter Elst and Koen at Flex Camp, and they told me to look again because there actually was a function: getColorBoundsRect()

There we go: that’s a solution right there! And it worked out just fine!
You can test it for yourself in this little test application – requires a webcam (duh!)

Download

Flex Project source: source.zip
Webcam motion detector class (Actionscript 3): MotionDetector.zip

I was planning on adding a ‘sensitivity’ property for motion detection but that turned out to be a bit harder. So I decided to postpone that for now (procrastination is a bitch )
Feel free to suggest better ways of doing this. I’m still pretty sure I’m creating a bit too much overhead to make this work

I did some pretty naughty things in there, but it worked out the way I wanted it… So be nice :p
Make sure you have got the MP3 tracks in place You’ll need at least one. Make sure you change the tracknames too.

Normally I’m completely against all those posts listing a bunch of items that somehow relate to each other in some way, but I’ve seen a few pretty amazing things lately that I just had to share with you.

Fun with Fur

Andre Michelle posted an experiment of his a couple of weeks ago about generating fur in Flash. The results look pretty amazing. Looks like the pictures came right out of Photoshop. However he didn’t post his SWF, nor his code. So there’s no way I could use the effect on my own images. Mark Knol however did post his SWF. In fact he built a fur generator that will enable you to link to your own picture, choose the correct settings for the engine to customize the furriness to your liking and then let it render your furry picture (which you can download afterwards). Isn’t that cool? Make sure to check both of them out.

Andre Michelle’s blogpost: Click
Andre Michelle’s Flickr Fur Collection: Click
Mark Knol’s fur engine: Click
Mark Knol’s blogpost: Click
Mark Knol’s Flick Fur pictures: Click

Generated Landscape

Kris Temmerman. Don’t know that name yet? Well you should. Let me show you why.
Allright, take a look at the following picture.

Looks like an ordinary 3D landscape, doesn’t it? Well it isn’t! In fact it’s the result of some smart math and a perlin noise bitmap. There is no 3D involved. No Papervision3D. No collada model. Just plain old 2D generated perlin noise. Ok, this might look pretty cool already. Kris took it one step further though… What if you generate this kind of landcape on the fly, and move it?

View the Flash version of the image: Click
Read all about it on Kris’ blog: Click

Flash game in 23 lines

Ok, this is kinda insane. Keith Peters brought back life to the 25 lines contest, as I posted earlier(Dutch). Only a few days ago the winners of November-December were announced. The winner – Marius Heil – made a platform game in ASCII using a custom copy-paste engine. That sounds like impossible to do in 25 lines. Marius however managed to to it in 23 lines. Come on, that’s insane. Congrats, Marius
The code he used was a real kick in the teeth for probably every best practice rule out there, but the result is pretty amazing. I urge you to check this out.
Note: I love how you can cheat the game. Awesome!

Play SmileyBounce 25: Click
View the code: Click

Augmented reality

That’s sounds familiar… Makes me think of artificial intelligence or something… Right? No.
This is pretty freaking cool amazing. The people over at Boffswana have been playing with the same things that Mario Klingemann showed at <head>. In his presentation, Mario held up a paper with a square on it. Flash would show the webcame stream, look for that square on that paper and add a logo right onto it in the right perspective using a bit of Papervision3D.
That sounds cool to you? Check this out: The people over at Boffswanna added another dimension to this (literally), and made an actual (animated) 3D model appear on the screen. I could explain all this, but what the heck: Just check it out for yourself.
This definitely made it to a 9.5/10 on my ‘blow-my-mind-o-meter’.

View the demo: Click
Read everything on their site, and play with it yourself: Click

So that’s it. If none of this made your jaw drop to the floor, I’d love to see your portfolio and experiments right away.

Feel free to link to other cool projects in the comments

Today I found some time to mess around with bitmapdata and computeSpectrum again. I’ve been playing with this earlier, but didn’t quite get where I wanted to be. A few weeks ago I came up with a better way of rendering the soundTunnel. That resulted in some crazy cool shit, which I finished off today.

I won’t go into technical details here (yet). I just wanted you guys to see the result.

Demo

Click here
And just to make sure it is actually reacting to the sound, try the following links too

• Song 1: Click
• Song 2: Click
• Song 3: Click (default)
  
• Song 4: Click
• Song 5: Click

Controls

• F: Go full screen
• S: Freeze visualization
• Click: Change color (happens automatically too)

Screenshots

In the past week, I’ve been pretty busy adding the finishing  touches to the features and fixing the last few bugs that popped up. Most of the last-minute changes are a result of using the class in one of my own projects.

It’s then when I realized I’m missing some key features like adding the music directory, and some properties of the PlayrEvents. I also added some ear candy like fadeIn() and fadeOut() methods.

On a more functional note: I’ve abstracted the playlist to an independent class. So now you’re provided with lots and lots of ways to customize and manage your playlists.

The shuffle mode is now smart. In English that means the playlist remembers what songs have played and which ones haven’t.

Finally I’m happy to tell you guys won’t ever have to write an XML playlist file yourself. I’ve got a PHP4 and PHP5 version of PlayrDiscovr which reads a directory and returns the corresponding XML listing the tracks and their properties.
On top of that, I’ve got some help from other people (I still need to contact you guys) who are willing to help me out with building PlayrDiscover in ASP, Ruby and Python.

Even though I’m listing all of the new features, the Playr class is still the easiest way of implementing any kind of sound-feature in any Flash/Flex/AIR application. But the simplicity shouldn’t be a limitation, which it isn’t: you’re still able to build full-feature media-playing applications.

One of the little challenges I still have to tackle is the Tween problem. I’ve implemented fadeIn() and fadeOut() methods. Those methods actually tween the volume property of the Playr instance. The problem with that is when using the Playr class in a Flex project, you get a cool error message telling you it can’t import fl.transitions (which is the class package for the Tween class and the easing package).
I still haven’t figured out how to work around this problem. If any of you have any suggestion on this problem, feel free to tell me about it.

I plan on releasing Playr 2.0 in the coming week (or 2) depending on PlayrDiscovr impementations, final changes, demo’s and site development (yes, I’m building a dedicated site for Playr ) Feel free to suggest other implementations you’d like

Some of you guys already knew, but only 2 weeks ago I finished my latest project: WALTER EGO.
Walter Ego is a Dutch rapper who happens to live in Nieuwpoort.

A few months back, Walter contacted me, and we started brainstorming about the new website. At some point he told me that I should make this website my masterpiece…

If you’d die now, this is what people should remember you for...

Well… At least expectations weren’t high, right?

A year ago I built the first edition of this website, which was pretty basic. Back then I used ColdFusion to build the administration panel. This time I built it using PHP.
I have to say that this project clearly improved my PHP skills. While I was building the backend, I was focusing on modular development, so I could reuse a lot of the written code. A lot of people suggested using the ZendFramework but since I’ve been looking into this a few times without making any progress, I just skipped that chapter (after all: we’re all bound by deadlines ) and went on developing my own framework (‘framework’ might be slightly exaggerating though).

I am pretty proud of the result, since everything I wanted to do, actually came through, and made it to the final result. While building this site, I really enjoyed seeing progress, and experimenting with the visual effects. I learned quite a lot during this project, which is really really cool! I even got to work with the Playr 2.0a class, only to realize it still needs a lot of work.

I even got to hack my way through the Youtube API and the Youtube AS2 SWF, to get a clean FLV file, which I then could easily stream to the video section of the site. That was pretty uncool. I never expected Youtube to return an AS2 SWF file. I expected an FLV file. Man, have I been wrong!
The main reason for Youtube to return a SWF is to embed all kind of extra features (such as captioning for example). And finally, Youtube not having an AS3 version of this made me want to start screaming.

All in all, this project was a fun project: I had many challenges to tackle, and in the end I delivered a quite unique product (at least, that’s what I like to think :p ).
Just 2 days ago, at midnight, Walter Ego released his first CD, which you can download freely from the site. If you understand Dutch, you might be interested in what this talented rapper has to say.
Download the CD here.

Some screenshots:

The video page streaming from Youtube

Administration Panel :: Guestbook section

Administration Panel :: Home section

Alternate HTML content for Google

Administration panel :: Pictures section

About page

URL: WalterEgo.be

Op MultiMania 2008 heb ik Group 94 gezien, en hebben ze enkele van hun projecten en trukjes blootgelegd. Een behind the scenes van het waarschijnlijk meest gerenomeerde webdesign- en multimedia bedrijf van België (volgens mijn bescheiden mening). Ze lieten onder andere de Nokia – Non Stop Living site zien; een site waar ik al langer van wist. Ik was altijd compleet onder de indruk van de effecten en transitions die deze site te bieden heeft.

Lange tijd heb ik me afgevraagd hoe alles in zijn werk gaat. Op een dag wou ik het weten en begon ik m’n hoofd te breken in Flash en Actionscript 3. Op MultiMania wist Julian (Group 94 member) te vertellen dat de ‘intro animatie’ on-the-fly opgebouwd werd (aan de hand van ActionScript). Ik vond dat best wel een gewaagde zaak, aangezien het toch veiliger was geweest als men die intro had gerenderd, en dan als video had gebruikt in het project.
Maar voor mij maakte dat opeens allemaal niet meer uit: Ik wou het ook voor elkaar krijgen.

Ik heb hiervoor verschillende keren moeten herbeginnen. Maar stap voor stap kwam ik dichterbij wat ik wou bereiken. Ik dacht eerst dat het grootste probleem het ‘in stukken knippen’ ging zijn. Maar dat bleek niet waar te zijn. Integendeel: Dat was zelfs erg makkelijk. Het werd pas moeilijk als ik de individuele onderdelen wou gaan animeren. 360 bitmaps bijna simultaan tweenen is niet bepaald processor vriendelijk, zo bleek.

Eens ik daar geraakt was, was ik al vrij tevreden: het uiteindelijke effect was er al. Nu alleen nog wat machinevriendelijker maken. Maar daar was het probleem. Ik bedacht mij of er geen mogelijkheid was om on-the-fly een sequentie aan beelden te maken. Al vlug gaf ik het idee op, en ben ik nooit aan de code begonnen. In mijn hoofd zag ik namelijk het RAM geheugen door het dak gaan.

Enkele weken later las ik op Keith Peters’ blog dat Julian van Group 94 het effectief op die manier had aangepakt. Ik moest het dus ook proberen op die manier… En wat bleek: Het werkte! (DUHH!)
Ik kreeg het voor elkaar om de animatie te pre-renderen en daarna te laten weergeven. Het resultaat was één smooth-as-fuck animatie. Enige probleem: het RAM geheugen leidde er (zoals ik had voorspeld) echt onder. 900-950MB voor de 380 frames van de animatie.

Ik heb er lang op gezocht, maar de sleutel tot succes bleek gewoon een wat kleinere bitmap te zijn. Door de afmetingen van de bitmaps deels aan te passen slaagde ik erin om 600MB af te knippen. Het resultaat gebruikte 250-300MB, een veel redelijker getal.

Ik ben al erg fier op het gehaalde resultaat. Hieronder kun je de verschillende fases van mijn vooruitgang zien. Ik was van plan om de bron hiervan vrij te geven, maar ik wil het nog even voor mezelf houden om zelf nog wat meer zaken uit te pluizen.

Basic versie: Twee.
Real time animation versie: Zeven.
Full blown prerendering (kan je browser crashen indien tekort aan geheugen): Acht.
Optimized prerendering: Negen.

De volgende stap is nu om te zien hoe Julian en zijn collega’s deze ronde wereld laten ‘openplooien’ tot rechte wereld…  Lijkt me allemaal nog net iets gecompliceerder te worden nu…

PS: als iemand een leukere panorama afbeelding te bieden heeft: aarzel niet om suggesties te posten. Ik ben de huidige zowat beu gezien

Maak aan de hand van 25 lijnen code, iets supercool. Wat is de beloning? Naast eeuwige roem en awesomeness geeft Adobe elke maand een Adobe CS4 Master Collection weg aan de winnaar! Dus het is echt de moeite om elke maand opnieuw te proberen!

Tijdens het ontwikkelen van de site voor mijn eindwerk in december liep de emmer over: Alweer een project waarin het ActionScript tweenen niet wilde lukken. Gerrit kwam me helpen, en na even zoeken kon hij me vertellen dat de fout inderdaad niet bij mij lag, maar bij de garbage collector in de Flash Player.
Mijn probleem was vanaf dan opgelost, en in elk project waar ik nu ActionScript-matige tweens aanmaak kan ik dat probleem meteen uit de weg gaan, maar ik zie nog enorm veel vragen opduiken waarin dit exact zelfde probleem besproken wordt.

Hoe ontstaat dit probleem?
Het probleem zelf ontstaat (voor zover ik het heb gezien) als je in een functie/handler een lokale tween aanmaakt, zonder externe referenties te behouden.

Voorbeeld:

function someHandler(e:Event):void{
var tween:Tween = new Tween(someMC,'scaleX',Regular.easeOut,0,1,5,true);
}

In bovenstaand voorbeeld wordt de functie someHandler opgeroepen eens er een event gedispatched wordt. Op dat moment wordt een tween aangemaakt in de scope van die functie. Eens deze functie doorlopen is, wordt deze verlaten, en zomee is deze scope niet meer in gebruik. Er is op dat moment geen referentie meer naar je tween object, dat je zonet hebt aangemaakt.

De garbage collector verwijdert variablen/objecten aan de hand van die referenties: Als er objecten zijn in scopes waar niets meer naar verwijst, is dat ‘garbage’ en kan zomee verwijderd worden.
Het tween object is hier ook onderhevig aan: Eens je de scope van die someHandler functie verlaat, is er geen referentie meer aanwezig naar je tween object, ookal is die visueel actief op de stage van je Flash movie. Als de garbage collector van de Flash Player dan voorbij komt om op te ruimen wordt je tween object verwijderd: op het scherm stopt je tween voordat hij klaar is.

De oplossing?
Er zijn verschillende manieren om de garbage collector te vertellen dat we ons tween object nog nodig hebben.

• We declareren de tween globaal. Hiermee zal hij altijd in main scope aanwezig zijn, en zomee niet verwijderd worden tenzij wij dat zelf aangeven.
• We kunnen diezelfde globale tween ‘hergebruiken’ in diepere scopes. (Handig als je maar 1 tween hebt, waarvan je zeker weet dat hij zichzelf nooit zal overschrijven/vervangen.)
• We maken een globale array aan, waar we elke tween aan toevoegen. Op die manier is er ten alle tijde een referentie naar ons tween object, en zal de garbage collector het niet kunnen verwijderen, tenzij we de tween uit de array verwijderen.

De laatste oplossing heeft mij al veel gediend, en is weinig moeite.

var garbage:Array = new Array();
function someHandler(e:Event):void{
var tween:Tween = new Tween(someMC,'scaleX',Regular.easeOut,0,1,5,true);
garbage.push(tween);
}

Dit is een nogal onprofessionele manier Ik vind dit nogal een vuile manier om het probleem uit de wereld te helpen, maar het is wel de essentie van de oplossing.
Bij extreem veel tweens in een applicatie die lang in gebruik is, is het misschien geen slecht idee om die array af en toe wat uit te kuisen: Tweens die niet meer gebruikt worden uit deze array verwijderen.

Er zijn mensen die me zeggen dat het gebruik van Tweener of TweenLite dit probleem ook meteen oplost. Ikzelf heb nog niet genoeg met Tweener gewerkt om daar zelf een oordeel over te kunnen vellen.

Ik hoop dat ik hier een aantal mensen kan mee helpen, gezien dit toch een populair probleem schijnt te blijven.