So I started moving some code around and after a few minutes, I found myself rewriting the whole thing… That’s not a bad thing since now we’ve got one handy class that can do about just everything a Bezier Animator should be able to do.
Demo time!

There’s still a little bug somewhere which allows the target to ‘run away’ from the bezier, and I haven’t gotten quite to the root of the problem, but I really felt I had to share this. Also there are some imperfections when you disable the orientToPath and scaleByPath properties. I will look into fixing those asap.

I really love the idea of animation movieclips using bezier curves. It looks so natural and yet zo intriguing… I will do some experiments and upload them later on, showing the coolness behind this simple animation engine.

Sources
Download the above demo source (Flash Builder 4 project): Click
Download the BezierAnimatioin class: Click

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’m very happy to finally release this. A lot of people helped me test it and gave me feedback.
That helped me a lot, and changed a lot of features. Special thanks to all of you!

I’ve put up a dedicated site for Playr where all of the information, code examples, downloads are gathered.
Head over there to read more about it!

More info:
Playr site: Click
Download Playr 2.0: Click
Playr 2.0 documentation: Click

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

Op het moment van schrijven ben ik zo goed als klaar met de nieuwste versie van Playr, de Actionscript musicplayer class. Ik moet nog even kijken of ik geen domme fouten heb, en nog wat schoonheidsfouten opruimen. Eens ik daarmee klaar ben, zal ik deze versie releasen.

Relatief veel mensen hebben deze klasse gebruikt, velen zonder problemen, sommigen met.
Nu is mijn vraag:

Wat heb ik vergeten in de vorige versie? Wat willen jullie er nog meer bij?

Als er voorstellen zijn die bij Playr aansluiten zou ik deze met plezier verwezenlijken.
Alvast bedankt voor jullie tijd

Dom van me dat ik dat blindelings geloofde, want toen mij die vraag gisteren gesteld werd, wou ik het toch wel zeker weten. Ik opende Flash, knalde een wallpaper van theFWA in frame 2 (zodat ik zeker weet dat er wat is om te preloaden), ging naar frame 1, en drukte op F1.
Na even zoeken werd het duidelijk.

De _root.bytesLoaded en _root.bytesTotal uit Actionscript 2 zijn wel degelijk weg, maar daarvoor niet ‘weggelaten’: Ze zijn verhuisd naar hun nieuwe (en meer logische thuis): this.loaderInfo.bytesTotal en this.loaderInfo.bytesLoaded.

Verder blijft de logica die je hanteert redelijk dezelfde.
Ik heb mijn .fla hier geplaatst voor de mensen die het eens volledig willen bekijken.
Ik vind de Actionscript 3 benadering van preloaden wel veel leuker, en makkelijker.

Ik heb gisteren de laatste wijzigingen aangebracht aan de vroegere MusicPlayer class. Zoals het er nu uitziet lijkt deze klasse af, voor een eerste ronde echt gebruik, keiharde feedback en vele suggesties.

Belangrijke wijzigingen zijn:

• Classnames, en package names zijn aangepast.
  • De klasse zelf heet nu Playr in plaats van MusicPlayer.
  • Package name is aangepast. com.noCreativity.MusicPlayer is nu com.nocreativity.playr (met dank aan Peter Elst voor de best practice tip )
• Shuffle mode toegevoegd
• Trackprogress kan nu ook opgevraagd worden
• Singletrack werkt nu volledig
• Bug ivm repeat weggewerkt

Wat doet Playr?

Playr is een Flash Actionscript 3 klasse die het maken van een volwaardige music player in Flash/Flex/AIR reduceert tot enkele regels code. Of je nu maar 1 loop wilt laten spelen, of een volledige playlist wilt afspelen in Flash/Flex/AIR: Playr kan het sneller dan jij!

Playr kan je gebruiken om een enkele loop af te spelen, of voor volledige XML afspeellijsten te laten afspelen. Zowel shuffle als repeat zijn mogelijk. Ook de interactiviteit met de gebruiker kan snel worden toegevoegd.
De Playr class is ontworpen met snelheid en gemak voor ogen

Hoe gebruik ik Playr?

3 Korte voorbeelden hoe je de Playr class kunt inzetten.

Minimaal
Je wilt gewoon één track laten afspelen.

import com.nocreativity.playr.*;
var myPlayer:Playr = new Playr();
myPlayer.singleTrack = true;
myPlayer.loadTrack("music/myTrack.mp3");
myPlayer.play();

Minimaal
Je wilt een volledige playlist afspelen zonder interactie of weer te geven informatie.

import com.nocreativity.playr.*;
var myPlayer:Playr = new Playr();
myPlayer.autoPlay=true;
myPlayer.loadPlaylist("playlist.xml");

Maximaal

Je wilt een volwaardige music player maken, met alles erop en eraan.

import com.nocreativity.playr.*;
var myPlayer:Playr = new Playr();
myPlayer.autoPlay=true;
myPlayer.repeat = false;
myPlayer.volume = 100;
myPlayer.shuffle = true;
myPlayer.loadPlaylist("playlist.xml");
myPlayer.registerPlayButton(btnPlay);
myPlayer.registerStopButton(btnStop);
myPlayer.registerPauseButton(btnPause);
myPlayer.registerNextButton(btnNext);
myPlayer.registerPreviousButton(btnPrevious);
myPlayer.registerMuteButton(btnMute);
myPlayer.ID3SourceEnabled =true;
 
myPlayer.addEventListener(PlayrEvent.SONGINFO,infoHandler);
myPlayer.addEventListener(PlayrEvent.SONG_PROGRESS,songprogressHandler);
myPlayer.addEventListener(PlayrEvent.LOAD_PROGRESS,loadprogressHandler);
 
function songprogressHandler(e:PlayrEvent):void{
txtSongProgress.text = "Time elapsed: " +  myPlayer.trackProgress;
}
function loadprogressHandler(e:PlayrEvent):void{
txtLoadProgress.text = "Load progress: "; + e.loadprogress;
}
 
function infoHandler(e:PlayrEvent):void{
txtTrackInfo.text = myPlayer.artist + " - " + myPlayer.trackName;
if(myPlayer.album != ""){
txtTrackInfo.appendText(" ("+myPlayer.album+")");
}
txtTrackInfo.appendText(" | " + myPlayer.trackDuration);
}

Playlist.xml?

Hoe deze noemt maakt in feite niet echt veel uit, zolang de inhoud volgens deze structuur is.
Betekenis van de verschillende nodes:

• Artist: Naam van de artiest
• Title: Naam van het liedje
• TotalTime: Totale duur van het liedje in seconden
• Filename: bestandspad naar de af te spelen MP3 file. (absoluut of relatief).

Documentatie over Playr?

Deze is er en kun je hier vinden.

Download

Download de Playr class hier.

Feedback & Suggesties

Heb je vragen, of zijn er onduidelijkheden? Schiet maar raak, ik bijt niet!
Zijn er onvolmaaktheden, of heb je dat geniale extra dat deze klasse nog tekort heeft? Laat mij het weten, en ik zal er zeker naar kijken.
Gebruik je deze class en ben je er tevreden mee? Ik hoor het graag. Laat ook zien in welk(e) project(en) je de class inzet!

Veel plezier!

Ik release de Playr class en de PlayrEvent class onder de Creative Commons license. Dat wil zeggen dat je alles in deze classes mag aanpassen zolang je er een verwijzing naar de originele auteur ( ik dus ) in laat staan, en je deze classes met dezelfde rechten verder verdeeld.

Dat is goed nieuws voor de RIA developers onder ons. Want vanaf nu kunnen we dus echte applicaties maken met de kennis die we hebben vanuit onze webdevelopment ervaringen. En het kost niets! Cooler nog: het is crossplatform!

Wat is Adobe AIR?

Adobe Integrated Runtime is een runtime omgeving die het mogelijk maakt voor RIA developers om met hun gekende technologieën zoals Flash, Flex of HTML/Javascript interactieve applicaties te maken die rechtstreeks op je computer draaien, en toch meteen in contact staan met online applicaties zoals Twitter, eBay, Pownce, of MTV.

AIR biedt een rijke API voor bestaande developers die toegang geeft tot de verschillende mogelijkheden van de computer zoals bijvoorbeeld het bestandssysteem zodat je met een kleine AIR app makkelijk een bestand kunt openen, bewerken, opslaan, of zelfs uploaden. Zo zijn er talrijke mogelijkheden.

Waarom Adobe AIR?
Menig software developer zal hier natuurlijk scheef naar kijken, en zich afvragen: “Waarom zou ik Adobe AIR gebruiken als ik VB.net of C# heb?”

Het antwoord is simpel:

• AIR is flexibel!
  Wil je een applicatie schrijven die gebaseerd is op Flash, of op HTML en Javascript? Het maakt niet uit. AIR apps kunnen met beiden gebouwd worden.
• AIR laat jou kiezen!
  Ben jij altijd al fan geweest van de Flash IDE? Of gaat het ontwikkelen sneller in Flex Builder? Of ligt Flash jou niet zo, en ben je meer een HTML/Javascript developer in Dreamweaver? AIR beperkt jou workflow niet: Je kunt AIR apps ontwikkelen en releasen vanuit zowel Flash, Flex Builder, en Dreamweaver.
• AIR is vooruitstrevend!
  Tegenwoordig is het onmogelijk om ‘Windows-only’ of ‘Linux-only’ te denken. Met de hedendaagse ontwikkeling moet je gewoon met alle platformen rekening houden. Adobe AIR doet dat voor jou! Jij maakt gewoon jouw applicatie in de omgeving naar keuze, en compiled een ‘AIR’ file, die in de runtime van zowel Mac OSX als Windows alsook Linux*.
• AIR is free! (Klink best grappig, he? )
  Applicaties ontwerpen in AIR kost jou niets! Als je over Flash, Flex of Dreamweaver beschikt kun je gewoon aan de slag! Waar je voor Visual Studio veel geld moet betalen om applicaties te kunnen maken, moet je voor AIR gewoon een gratis update (voor Flash, Flex Builder, of Dreamweaver ) downloaden van de Adobe site. Je betaalt niets, en je kunt zooooveel meer en je moet er niets voor bijleren! Je huidige kennis en je huidige tools zijn alles wat je nodig hebt!

Ik herinner me Adobe Live van vorig jaar nog, waar Greg Rewis regelmatig op het podium stond te roepen: ‘Is that cool?!’.
Ik heb hier maar 1 antwoord voor: This is cool!

Update: Ward heeft me attent gemaakt op het feit dat er Express versies zijn van Visual Studio die gratis te verkrijgen zijn en het mogelijk maken om gratis software te ontwikkelen binnen het Microsoft .NET framework.

* De Adobe Integrated Runtime is op het moment van dit schrijven nog niet gereleased, maar Adobe belooft om hier zo snel mogelijk verandering in te brengen. In Adobe we trust

Na een half uurtje te prutsen had ik door hoe het werkte en ik kon ik ik er wat verder in gaan, en gebruik maken van de Filters die je in AS3 kunt gebruiken. Echt coole shit zit daarin!!

Ik heb wat speelse dingen gemaakt, en ik moet zeggen dat ik best wel onder de indruk ben van de kracht van AS3: telkens opnieuw vind ik AS3 een stuk cooler!

Hieronder staan de links naar de SWF’s

• Versie 1
• Versie 2
• Versie 3
• Versie 3 (gewijzigd)
• Versie 4
• Versie 5
• Versie 6 (livestream) (werk alleen offline)

Enkele opmerkingen hierover:

Versie 5 is op zich wat zwaar. Ik wou een Windows Media Player-achtig effect namaken.
Versie 6 werkt in mijn lokale Flash Player zonder veel problemen, online lijkt dat een ander resultaat te zijn… Ik heb het gevoel dat dat met de security sandbox van de FlashPlayer te maken heeft. Als iemand weet wat het probleem is: Shout! Ook performantie tips zijn meer dan welkom, want ik heb al andere visualisaties gezien die maar tot 20% van de CPU gaan, terwijl deze hier met gemak de 50% halen.

De sources van deze items staan hier zodat je ernaar kunt kijken, en er zelf ook wat mee kan gaan spelen!
Gewoon ergens een MP3 plukken uit je collectie deze in bij je fla gaan plaatsen en de code zo aanpassen zodat je deze dan ook inlaadt. Ik geef mijn gebruikte liedjes in de voorbeelden niet mee door auteursrechten e.d.

Aarzel niet om te posten wat er beter kan, wat jullie in elkaar gestoken hebben, of welke tips jullie voor me hebben! Ik hoor het graag.

Alvast veel plezier met de sources!

Ik heb zonet de nieuwe documentatie van de MusicPlayer class geüpload.

Deze kun je hier vinden.

Veel plezier/succes ermee. Aarzel niet om een vraag of een opmerking te posten. Ik sta open voor ideeën, toevoegingen, aanpassingen, liefdesbrieven, donaties, en contracten