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.

FITC

Uiteraard was Rhinofly ook weer vertegenwoordigd om in dit selecte gezelschap inspiratie op te snuiven en kennis uit te breiden. Nu kan ik een topselectie maken en daar over wat vertellen, maar de sessies die ik allemaal bezocht waren zo verschillend en ieder op zich zo inspiratievol dat ik maar besloot een compleet verslag te doen waar ik aantekeningen van had gemaakt. ;-) Het is een flink stuk geworden dus ik heb ‘m opgehakt in 5 delen.

Vanwege werk, research en onleesbare eigen handschrift heeft het dus langer geduurd dan gehoopt, maar here goes:

Om 9.15 was ik al gearriveerd bij de Felix. Het was al druk met soortgenoten toen ik de toegangspas en het programma in mijn hand kreeg. Ik zag al gelijk een aantal bekende gezichten. Wachtend op mijn kopje thee even het programma doornemen. Er zijn veel gave sessies en ik voorzie tussen 14.45 en 15.45 al problemen als ik moet kiezen tussen twee sessies. Dan komt de thee en de rekening. Rododendron! Nog nooit zoveel betaald voor een kopje warm water met een smaakje. De toon was al gezet.

Keynote
Om kwart voor 10 was het al dringen voor de keynote. Ik doe het wat rustiger aan. De organisatie denkt er kennelijk ook zo over acht over 10 begint dan de keynote. Na een aardige intro werd er voornamelijk gesproken de breedte van het Flash platform en dat Flash in een of andere vorm al op allerlei apparaten staat zoals de PS3 en Wii .

Uiteraard werd het Open Screen project aangestipt en dat er nu veel aandacht gaat naar Flash-ontwikkeling voor mobile, waar men gelooft de toekomst en grootste groei inzit. (Beetje laat achtergekomen als je het mij vraagt…)Aangekondigd is dat FlashPlayer 10 tegen het eind van dit jaar op tal van mobile devices zal zitten. Hier is dieper op ingegaan tijdens  Mobile Madness waar Johan Voets een artikel aan heeft gewijd.

Feedback met Tips en tricks
Verder werden er nog wat feedback uit de community behandeld, die zo belangrijk is, met enkele tips en tricks over de Snippets panel van Flash. Een veel voorkomende klacht was dat de help van Flash connectie maakte met de Abode-site. Dit was eenvoudig te omzeilen door onder ‘Help’ in Flash bij ‘connectivity’ “disconnect” aan te vinken. Ook kon de Decotool beter gebruikt worden. Als laatste werd nog even gemeld dat de File reference class door velen onderschat werd. Dat het een goede tool is om bijvoorbeeld een boodschap in een bitmap te verbergen of uit te lezen.

Cijfertjes
Natuurlijk werd de Flash-penetratie nog even aangekaart, waarbij ik me altijd weer afvraag waarom wij vaak nog voor Player 8 moeten ontwikkelen, zelfs als Player 9 al zo hoog is? Wereldwijd word 80% van de aangeboden video op internet via een Flash-player getoond. Hierop volgend meldde Adobe de overeenkomsten tussen de gelijktijdige opkomst van Adobe Air en Twitter. Twhirl is een van de eerste Air apps dat men gebruikt. Hiermee hielp Twitter Air groot te worden.. Air is nu een jaartje oud en heeft al drie updates gehad, waarbij een grote update binnenkort uitkomt.

Blackbox
Daarna kwam de Nederlandse designstudio De Monsters aan het woord. Ze presenteerde Blackbox (voormalig PEF), een applicatie die designers de mogelijkheden biedt hun werk, met minimale onderbrekingen in hun workflow, te documenteren. Dit is een applicatie waar ik zeker toegevoegde waarde in zie.

Integrating Live Action Content with 3D
En dan was het kwart over 11; de sessies beginnen. Er was onder andere The Future’s so bright, I gotta wear glasses. Ik kies voor Integrating Live Action Content with 3D.

Dan Lacivita van Firstborn spreekt. Hun aanpak voor een eerste meeting met een nieuwe opdrachtgever bevalt me zeer. Ze starten altijd met een video over zichzelf. De video toont geen projecten, maar de mensen en medewerkers van het bedrijf. Een leuke vlot geknipte film waarin de medewerkers niet alleen hard werken achter hun bureaus maar ook plezier hebben tijdens het werk. Veel beelden zijn gericht op samenwerking en overleg. Ook foto’s van feestjes zie je hier en daar langskomen. Een feelgood movie dat de sfeer bij het bedrijf samenvat.

Hun filosofie is ‘Hou het simpel’: verberg elementen, maar houd ze toegankelijk en breng de belangrijkste elementen naar voren. Dit resulteert in eenvoudige maar toch verfijnde gebruikerservaring. Doe je huiswerk: bestudeer eigentijds design en typografie. Lees boeken over meetkunde, fysica, en trigonomie. Pas deze kennis toe op interactief ontwerp. Share: Wissel ideeën uit om je kunde verder uit te breiden. Handhaaf contact met ’s werelds meest vooraanstaande designers en technologen.

Dit wordt vervolgd.  Dan behandelt Dan Lacivita enkele projecten van Firstborn, zoals o.a. M&M’s Join the hunt, en Sport Chalet, the mountain en krijgen we een inside peek in hun werkproces.