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.

Den tidvis vrickade diskussionen kring Flash och HTML5

I mitt tidigare inlägg presenterade jag ytligt hur vi jobbar med att animera material för Buu-klubbens webbsida i Adobe Flash.

För oss på svenska.yle.fi är diskussionen kring Flash och HTML5 nu högaktuell, och konkreta linjedragningar är att vänta inom snar framtid. Diskussionen har ju på bred front pågått en längre tid, och ibland reagerar man på hur generaliserande och flummig den som värst kan vara.

“Flash är ett problem”

Fel! Flash är inte ett problem. Flash är ett verktyg, och ifall man missbrukar det uppstår problem. Försöker man tvätta fönster med en hammare är det troligt att resultated blir ganska dåligt, och i värsta fall går saker och ting sönder.

Det man ser och hör allt för mycket av är attityder och åsikter som helt och hållet saknar grund, och tydligt beror på blind övertygelse. Vissa tar hela diskussionen väldigt personligt, och jag påstår att folk som är redo att kasta den ena eller andra lösningen ut genom fönstret utan desto mer åtanke har definitivt andra (ofta personliga) målsättningar i baktankarna.

Flash har under årens gång sträckt sig till så gott som allting man hittar på webben, på gott och ont. Exempel som alla känner till är animerade banners, spel och även hela webbsidor byggda uteslutande i Flash. Det är uppenbart att Flash inte är det klokaste alternativet till precis allt man kan göra med det, och därför ser jag det som mer än välkommet att det nu existerar utmanare för de plattformer och för de lösningar där Flash helt enkelt inte är det bästa möjliga.

Det man inte kommer ifrån är att Flash är ett utmärkt verktyg för produktion av spel, och i nuläge är det totalt omöjligt att rakt av ersätta det med HTML5.

HTML5

Vad gäller renodlad webbdesign är HTML5 perfekt. Det erbjuder obegränsade verktyg för designers att producera snygga dynamiska lösningar som har alla förutsättningar att fungera på varje plattform så fort understöd existerar. Det här är också ett exempel på ett delområde där man “missbrukat” Flash allt för länge. Missbruk av Flash har lyckligt vis (med tanke på användbarhet) minskat redan innan diskussionen ordentligt hettade till.
Att man nu kan ersätta Flash med HTML5 då man producerar t.ex. banners, datavisualiseringar eller enbart utveckla snyggare webbsidor är en strålande sak. Jag har personligen höga förväntningar för vad HTML5 och CSS3 i framtiden kan medföra.

Buu

Att införa HTML5 i arbetsproceserna för webbdesign är alltså ingen dålig sak alls. Farhågorna väcks då man börjar höra kommentarer riktade emot spelproduktionen. Att producera spel i HTML5, även lika avancerade som i Flash är ingalunda omöjligt. Exempel finns det gott om. Däremot handlar det om arbetsprocesser och resurser. En grundlig kartläggning av vad som krävs för att åstadkomma det vi nu gör vore på sin plats, förutsatt att nuvarande nivå är nånting vi vill bevara. Faktum är att ingen vet vad det i praktiken skulle kräva att exempelvis producera en motsvarande julkalender som vi erbjöd i år, genomförd i HTML5. Jag kan här och nu berätta att det i nuläget aldrig skulle lyckas pga. bristfälliga resurser och otillräckliga verktyg.
Alternativet skulle då vara att gå i en helt ny riktning, där det säkert finns möjligheter, men det skulle i så fall att ske på en bekostnad av mycket av det som nu är Buu-klubbens webbsida.
Det är upp till dem som fattar besluten att avgöra vilka linjer som skall dras för innehållet. Ett mardrömsscenario är en situation där man slänger in nya arbetsmetoder och processer och förväntar sig samma resultat som tidigare, trots solklara brister i kapacitet.

Realism och is i hatten

Lyckligt vis är det knappast realism att förkasta det ena eller det andra alternativet helt och hållet, utan att utnyttja alla fördelar så gott det går. Strävan till att bemöta användarna på alla tänkbara plattformer utan kompromisser i innehållet torde vara en självklarhet, och med tanke på den legacy vi har kommer Flash att vara en del av vår vardag ännu i långa tider. Vår uppgift är att presentera innehållet så att möjligast många kan utnyttja det. Samtidigt skall vi se till att experimentera med nya möjligheter och se till att också HTML5 med alla sina fördelar blir en del av det vi gör.

2013 kommer att bli väldigt intressant, inte minst vad gäller spelen på Buu-klubbens webbsida!

///Johan

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