Frank-ly

De vorige keer begon ik met een uitbundig verslag van FITC van een aantal weken geleden. De eerste sessie was met Dan Lacivita van Firstborn. Nadat Dan de filosofie van Firstborn had verklaard, begon hij vervolgens enkele projecten te behandelen. Ik wil graag deze projecten behandelen omdat het gewoon leuk is bij iemand anders in de keuken te kijken. We gaan weer verder:

Lowe
Hierbij besprak hij in globale lijnen hoe het proces van de site in elkaar stak. Het eerste project wat hij behandelde was voor Lowe i.s.m. Tribal DDB Chigaco. Hun proces gaat erg stapsgewijs. Bij elke stap in het process is er een goedkeuringsronde. Dit om de opdrachtgever te onderwijzen in het proces en om jezelf als bureau te beschermen.

In geval van Lowe worden de allereerste schetsen al gekeurd. Vervolgens werden omgevingen in 3D ontworpen. Eerst  in  lowres en zonder textures. Er wordt dan een storyboard gemaakt. De opdrachtgever kan hiermee goedkeuring geven over de camerastandpunten, posities van de personages of props en omgevingen. Soms wordt hierna weleens een animatic gemaakt. Goed onderzoek in bijvoorbeeld de huizen voor de personages scheelt veel tijd in het bouwen van de digitale sets. Vervolgens wordt er een ‘gereedschappen’ lijst gemaakt waarin alle benodigdheden voor het filmen staan. Deze lijst is niet alleen voor goedkeuring, maar ook handig als checklist voor alle props.

Alles werd gefilmd voor een greenscreen met kruizen erop. De kruizen werden gebruikt voor motiontracking. De productie ziet er duur uit. En een videobudget voor TV is hoog. Voor internet ga je veel vindingrijker met video om. Het project koste 3,5 maand, maar dan werd er wel 7 dagen per week aan gewerkt tot middenacht. Er zat kennelijk een strakke deadline achter.

Wat vaak gebeurt bij deze intensieve projecten is dat de developers eastereggs achterlaten. De klant kwam achter een aantal eastereggs en had deze mee goedgekeurd. Zelfs nadat de site live was gegaan werkte sommige developers door met het toevoegen van eastereggs.

Bekijk ook de case study waar gedetailleerdere informatie staat op het proces van dit project.
De site zit vol met games. Vooral de Jard creater is erg lekker gedaan.

M&M / Join the Hunt
Een van hun nieuwste projecten, nog geen 3 weken vers, werd ook behandeld, M&M’s Join the Hunt

Dit project duurde 4 maanden. Van begin briefing tot eind live-gang. Hiervan ging de eerste maand op aan concept. Dat is dus inclusief schetsen, research etc. Vervolgens gingen de 3 maanden erna op aan 3d programmering en development. Binnen een dag hadden ze schetsen/schermen gemaakt om het idee te verkopen. Nadat het idee was verkocht werd er een design ontwikkeld voor de richting die was gekozen hoe de site er uit moet gaan zien.

Gedurende de beleving moesten de personages, Red en Yellow in de site interactief reageren op de acties van de bezoeker. Om dit te realiseren werden voorgedefinieerde ‘paden’ bedacht waar Red en Yellow vrij door heen liepen. De paden zijn makkelijk aanpasbaar en de personages kunnen eenvoudig geschaald worden. Zo konden de developers, opdrachtgever of een script gemakkelijk ook de paden aanpassen zodat Red en Yellow nooit over hetzelfde pad lopen. Probeer zelf hoe het werkt.

Voor aantal 3D-animaties en transities voor de games gebruikte de developers voornamelijk Five3D. Een belangrijke overweging was de balans tussen performance en renderkwaliteit voor complexe features zoals “face culling” en “flat shading” in actie. Hierbij een werkend voorbeeld van de bewegelijkheid van een potlood en customizable lighting op het potlood. En nog een voorbeeld van een bord dat aangepast kan worden als de performance te laag is door minder polygonen te gebruiken.

Bekijk ook de case study waar gedetailleerdere info staat op het proces van dit project.

Sport Chalet
Een leuk weetje is hoe Firstborn met conceptontwikkeling omgaat. Developers en designers zitten altijd al bij de eerste meetings. Iedereen geeft zijn inbreng en iedereen is erbij betrokken. Een voorbeeld is Sport Chalet. Developers maakten tools om keuzes te delen en te maken, zodat de designers ermee aan de slag konden.

Ze kwamen uiteindelijk op het concept met een berg als voornaamste navigatie. Ze hebben de interface in 3D ontworpen in Cinema 4D om vervolgens de perfectie polygon mesh te exporteren naar Flash.

Om het Cinema 4D model in Flash te importeren hebben ze hun eigen importer gebruikt. Ze exporteerde via een VRML-bestand, dat een collectie van alle 30 punten in een object bevat en beschrijft hoe de punten contact maken om polygons te vormen, evenals UV-coördinaten om textures te binden. Met deze gegevens konden ze gemakkelijk het model in Flash via papervision exact nabouwen. Bekijk hier hoe ze gradient textures op de berg bonden.

Om de interactieve beleving die ze bedacht hadden te creëren, had de developer een rudimentary prototype in Flash gemaakt. De designer kon zo de gewenste effecten en animaties voor de berg bepalen.

Om de producten van het merk te tonen, hadden ze de uitdagende taak op zich genomen om 70 videoclips te keyen, compositen en te integreren op de site. Met combinatie van After Effects en Flash gebruikte ze motion tracking voor elke clip om de hotspot met de bewegingen van de persoon te volgen.

Tips en Tricks
Dan had ook nog enkele tips voor processen van video-/3D-projecten:

• Video looping issues; Firstborn maakt vaak  gebruik van PNG sequences voor korte loops. Wel rekening mee houden dat je de framerate synch houdt (Zij gebruikte onEnterFrame script om de  playback snelheid af te stellen).
• Encoding en compression. Voor hun Lowe’s project besloten ze geen H.264 te gebruiken vanwege de color saturation issues en player-vereisten. Ze begonnen met On2 Flix Pro, maar waren ontevreden met de compressie voor de high-motion clips. Uiteindelijk gebruikte ze Sorenson Squeeze with On2 VP6. Tip: Gebruik altijd een CDN om de videocontent te leveren en laat je klant niet op de hosting beknibbelen!
• Truc voor het maken van een dynamisch masker: Je kan een PNG gebruiken als een overlay om de items op de Stage schaduw te geven. Lees de waarden in AS, en bestuur de Z-as in overeenkomst met de bitmap data/pixel waarden.

Dat was het voor Dan Lactiva. Volgende keer behandel ik de rest van de sessies van die dag van Ralph Hauwert en Florian Schmitt van Hi-Res.