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

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!