Effektivt arbete med grafik, Buu-klubbens webbjulkalender 2014

Buu-klubbens webbjulkalender är en årligen återkommande storsatsning hos svenska.yle.fi. Utmaningar uppstår på bred front, från manus till tekniska detaljer, från kodning till grafiskt finlir. Ett gott slutresultat kräver sakkunnighet på flere områden, och står och faller på gott samarbete inom teamet.

Från BUU-klubbens julkalender 2014

Det som tidigare ofta skapat huvudbry för mig som grafiker är den stora variationen i materialet som måste bearbetas. Spelen har ofta varit ensamstående helheter, och att få ihop 24st sådana till ett grafiskt fungerande paket är inte alltid det lättaste. Ofta har också en större grupp människor jobbat med enbart grafiken vilket ger ännu fler utmaningar vad gäller enhetlig stil och arbetsflöde. Miljöer, figurer och allehanda andra objekt har anpassats mer eller mindre framgångsrikt.

2014 jobbade vi lite annorlunda med grafiken än tidigare. Alla 24 spel var uppbyggda kring 5 olika miljöer: en källare, ett badrum, en trappa, ett vardagsrum och en vind. Grafiken levererades till mig som “paket”. Ett paket bestod av miljön och respektive objekt. Spelfigurerna, Rune och Holly, var också ritade av samma person.

En miljö fullproppad med diverse prylar såg till en början aningen avskräckande ut, men så fort arbetsflödet hittade sin form var det klart som korvspad. Då vi tidigare tampats med att få ihop visuellt kloka helheter ur material lite härifrån och därfrån, ritade av underskriven och ibland flere andra grafiker, hade jag nu tillgång till enhetliga helheter, genomgående i alla 24 spel. Då en och samma grafiker producerat varenda lilla detalj, är en av de största fördelarna den genomgående enhetliga känslan av att man är i samma “värld”.

Jag kunde nu koncentrera mig på att framställa all grafik till format som lämpar sig till spelproduktion. Det gick de facto väldigt fort att “plocka ut” alla bitar i sådan form som kodarna behövde för att sammanställa spelen jämfört med tidigare år. Dessutom kunde de grafiska elementen grupperas rätt tydligt för dem som jobbade med kodningen av spelen.

 

Analysering av webbjulkalendern 2014 som en komplett helhet får någon klokare människa sköta. Jag anser ändå att 2014 var året då vi gjorde framsteg åtminstone vad gäller arbetsflödet kring det grafiska. Att vi lyckades med detta anser jag bero på följande saker:
1) Grundlig planering av spelkoncept 2) Väl uttänkt arbetsflöde 3) Fungerande samarbete inom teamet.

Hur än tekniska lösningar o.dyl. ser ut i framtiden har vi åter igen många lärdomar att ta med oss till kommande projekt.

Morr, den lever!

I skrivande stund närmar vi oss situationen då Buu-klubbens julkalender börjar vara packad och klar för 2012 (jo, jobbet fortsätter även om kalendern är publicerad). Kalendern på webben utsätts för höga förväntningar varje år även om resurseringen kan variera. Det handlar ju trots allt om en av de mest populära tjänsterna hos svenska.yle.fi.

Projektet i sin helhet består av otaliga delar, och man kunde säket skriva tiotals blogginlägg (eller noveller) ur alla möjliga synvinklar. Jag tänkte dock i korthet presentera den arbetsprocess som ligger bakom de animationer och grafik som utgör webbkalendern med några enkla exempel.

Kalendern är, liksom Buu-sajten överlag väldigt starkt präglad av en viss grafisk stil. Den grafiska stilen i sin tur är en kombination av “buu-världen” och det man ser i papperskalendern.

Papperskalendern beställer vi (förutom konceptplaneringen som sköts av oss) av underleverantörer och den är ett stort projekt för sig, men också en väldigt viktig del av det som är kalendern på webben. Den lägger definitivt en av grunstenarna för webbkalenderns utseende gällande såväl figurer som omgivning.

Vi har även i år samarbetat med Johanna Sjöström som är den duktiga grafikern bakom en stor del av grafiken på buu.yle.fi.

Vektorgrafik

Eftersom webbkalendern är byggd i Flash är vektorgrafik ett måste. Då papperskalendern illustreras fullständigt som vektor ger detta oss många möjligheter att utnyttja den månsidigt också på webben, och eliminera massor av onödigt arbete.

Symbiosen mellan Adobe Illustrator och Flash är oslagbar i denna process. I all sin enkelhet kan det handla om snabba och smidiga överföringar av objekt från det ena programmet till det andra. Editerings- och exporteringsmöjligheterna i vardera program ger oss alla tänkbara verktyg att jobba med. Figurer, omgivning och element av alla tänkbara slag kan flyttas, editeras, modifieras och framför allt överföras till Flash för att animeras precis så som vi vill, och känslan av att det handlar om en och samma helhet kvarstår.

Som exempel kan vi nämna spefiguren Morr. Morr, som är en av huvudfilurerna i julkalendern 2012, ritas i Adobe Illustrator av grafikern utgående från samma figur i TV-produktionen. AI-filen godkänns och skickas sedan till oss. Det är därefter hur enkelt som helst för mig att plocka spelfiguren in i Flash och väcka den till liv.

Spelfigurer i Adobe Illustrator.
Spelfigurerna i Adobe Illustrator.

Flash

Buu-klubbens webbsida är byggd helt och hållet i Flash. Vad betyder det då? Det betyder vektorgrafik, ActionScript, timeline-animationer, tweens och hela faderullan. Ja, egentligen är Adobe Flash en produkt som man kan producera lite vad som helst med, vad gäller grafik och animering.

Flash ger i animeringsväg 2 möjligheter, som absolut inte utesluter varann. Man kan animera med hjälp av ActionScript, eller använda sig av timeline-animering. Julkalendern utnyttjar båda. Med ActionScript byggs också de egentliga spelmotorerna som ligger bakom allting. Personligen fattar jag inte ett dyft av kod, så det är timeline hela vägen för mig.

För att fortsätta med exemplet Morr, utnyttjar jag bland annat olika tweens och bone-tool för att rätt snabbt och enkelt åstadkomma en figur som springer, hoppar, blinkar med ögonen, vickar på tårna, viftar med handen och med svansen. Allt detta utan att behöva göra några märkbara ingrepp på den grafik som Johanna försett oss med.

Hoppande Morr animeras i Adobe Flash.
Morr animeras i Adobe Flash.

ActionScript sköter som sagt också en stor del av animationerna. Som exempel kan nämnas hinderbanorna i årets kalender. De byggdes så att jag ritade alla grafiska element som behövs i Flash, delade upp dem i olika scener och skickade sedan iväg .fla-filen till vår kodare som kodade ihop allting till fungerande spel. Med ActionScript definieras de olika grafiska elementens beteenden.

Från skiss till färdig hinderbana.
Från skiss till färdig hinderbana.

Detta var alltså ett ganska kort och koncist exempel på hur vi jobbar när vi skapar delar av Buu-klubbens julkalender. Hoppas ni gillar kalendern både i pappers- och webbformat!

Funderingar kring framtiden med eller utan Flash i ett senare inlägg.
God Jul!

///Johan, grafiker på svenska.yle.fi