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

Ett spel blir till

Skärmkapning av spelet i lucka 1 i BUU-klubbens webbjulkalender 2012“KAN BUKLUBEN FO MERA SPEL!!!!! snela (=? “ Responspost med motsvarande  innehåll droppar in i BUU-klubbens epostlåda titt som tätt.

Men hur går det till egentligen när en spelidé ska tas hela den långa vägen från koncept till ett färdigt spel på buu.yle.fi? Det är många olika människor och arbetsskeden som ska till innan Atte är ute på äventyr i en dammsugarslang eller Bärtil och hans vänner svarar i telefonen på ängen.

Under hösten  är det jätteprojektet BUU-klubbens webbjulkalender, med en hel massa  av de hett efterlängtade nya spelen, som  sysselsätter oss som jobbar med barnwebb på svenska.yle.fi. Fast egentligen har vi snudd på jul året om  – planeringen av webbjulkalendern brukar nämligen starta redan i februari. Det är mycket som ska hinnas med, från adventskalendern i papper i samarbete med Finlands Röda Kors, till alla spel och pyssel som ska dyka upp bakom kalenderluckorna på webben.

En stor del av spelen i både webbjulkalendern och på BUU-webben i allmänhet görs internt på svenska.yle.fi. Samtidigt har vi etablerat ett nätverk av duktiga samarbetspartners som vi kan vända oss till när vi behöver hjälp. Många av dem var också inblandade i arbetet med årets webbjulkalender, som lanserades 1.12 med spelet Morr i röret bakom lucka 1. Hur just det spelet blev till ska jag berätta mera om nedan.

Kompletterande medier

Spelkoncepten i de olika webbkalenderspelen har för det mesta en anknytning till händelserna  i julkalendern i BUU-klubben på TV samma dag. På det här sättet bildar TV-programmen och webbkalendern en helhet, där innehållen i de båda medierna kompletterar varandra och visar upp olika sidor av samma berättelse.
Också vi på webbavdelningen plöjde med andra ord under våren igenom en tjock hög med TV-manus för  ännu oinspelade decemberavsnitt av BUU-klubben i TV.  Manusförfattaren och regissören Monica Vikström-Jokela hade en viktig roll i idéandet av speluppslag – det är ju Monica som känner TV-karaktärerna och deras personlighet allra bäst.

Vem springer var och varför?

Musen Morr med dockföraren Mårten HolmDen 1.12 gör musen Morr entré i TV. Eftersom västmetrobygget raserat Morrs eget hem måste han hitta ett nytt ställe att bo på, och hamnar hos mössen i källaren under BUU-klubben.

Vi beslöt att använda samma idé som ramhistoria för webbspelet. Morr ska ta sig genom en lång tunnel, från byggplatsen ända fram till BUU-klubben.  På vägen ska han med spelarens hjälp hoppa över hinder av olika slag. Konceptet är en variant på de populära hinderbanespelen som blivit något av en tradition i BUU-kalendrarna på webben.

Innan en spelkodare kan ta itu med att programmera själva spelet är det mycket som ska slås fast och definieras. Om vi gör kodningen internt på svenska.yle.fi (vilket oftast är fallet) är det vanligt att spelkonceptförfattaren och –kodaren är samma person. Då inleds programmerandet av själva spelmotorn ibland innan konceptet är helt klart, och spellogiken finslipas och vidareutvecklas under arbetets gång.

Ibland köper vi också in spelkodning, när de egna resurserna inte räcker till. (I fallet Morr i röret gick uppdraget till en långvarig samarbetspartner, kodaren  Timo Myllymäki.) Då blir det extra viktigt att försöka tänka ut spelkonceptet noggrant på förhand, så  att leverantören har en bra grund för sin offert. Vilken är spelidén och -logiken? Hur byggs spelbanan upp? Ska den vara likadan varje gång man spelar  eller slumpad? Hur börjar spelet och när tar det slut? Vad händer då?

Småbarn som målgrupp

Extra utmanande blir det hela av att målgruppen är små barn, som för det mesta inte kan läsa. Vilken är en lämplig svårighetsgrad och hur kan man påverka den? Ska man välja mus- eller tangentbordsstyrning, och vilka krav ställer valet man gör på motorik och datorvana?

Självskrivna utgångspunkter är att barnen och deras föräldrar ska kunna känna sig trygga med BUU-klubbspel. Inget våld förekommer i spelen, och eventuella motgångar ska gå att hantera. När Morr krockat eller trillat av banan tre gånger tar spelet slut, men på ett mycket  odramatiskt sätt.  I slutscenen himlar en lätt vimmelkantig Morr sig över allt krockande – och sedan kan spelaren omedelbart försöka på nytt.

Testa, precisera, ändra

Ett är däremot säkert – ett aldrig så noggrant koncept har sina tankefel och brister som uppdagas först när de första demoversionerna av spelet blir färdiga. Det gäller alltså att testa, testa och åter testa, och vara beredd att både precisera och tänka om.

In sin första version såg konceptet för Morr-spelet ut så här (pdf-fil,  finska): BUU2012_luukut_1_16

Under arbetets gång var det flera saker som ändrades och preciserades i konceptet i filen ovan: hindren i taket upphörde t.ex. att vara hinder och blev dekorationer som man inte kan krocka med, för att underlätta spelet lite grann. Vi beslöt också att själva banan byggs upp manuellt med hjälp av en xml-fil, där de olika byggklossarna som Morr springer på listas i rätt ordning, åtskilda av antalet millisekunder som ska förlöpa innan följande markbit rullar in på skärmen. Y-koordinaten, d.v.s. hur högt upp på skärmen markklossen ligger, slumpas inom ramen för vissa gränsvärden. Lösningen för hur brädspelet som finns i julkalenderns rot kommunicerar med det inladdade Morr-spelet ändrades också när vi började testa i praktiken.

Ur filen framgår också att vi ägnat oss åt att snegla på andra, välfungerande spel ute på webben för att hitta inspiration: en av förebilderna för Morrspelets spellogik var t.ex. ett av minispelen i SVT:s finfina webbjulkalender från i fjol, Tjuvarnas jul. (Testa absolut, om ni inte redan gjor det!)

Grafiken får liv

I samma veva som spelkonceptet blir till har redan ett upplägg för spelvyer börjat ta form i konceptplanerarens huvud.  Ibland hamnar också dessa tankar till pappers,  mer eller mindre lättdechiffrerade för grafikern som ska ta över (se bilden)

En stor del av grafiken till årets webbjulkalender (och flera kalendrar före den) är ritad av Johanna Sjöström. I just det här spelet stod Johanna för själva musfiguren, som hon fick en beställning på i profil, dels i springposition, dels i hopposition.

Sedan var det dags för svenska.yle.fi-grafikern Johan Lindström att ta över. (Läs mer i Johans eget blogginlägg!) Med hjälp av programmet Flash animerade Johan både Morrs springande och luftfärden under hoppet. Johan ritade också  spelmiljön: en bakgrund som går att loopa, byggklossarna för banan som musfiguren springer på och element som placeras ut i förgrunden för att ge intrycket av djup, samt en startscen och två slutvyer (en för lyckat och en för misslyckat spelresultat)
Allt detta material hamnade sedan på Timos bord, för att kopplas ihop med spellogiken.

Fiu och pang – ljudeffekterna

Ljudeffekterna spelar en stor roll i att skapa stämningen i ett spel. Under flera år har vi fått eminent hjälp med att göra ljuden till webbjulkalenderspelen  av Mats Prost, som ibland kan få beställningar som ser rätt märkliga ut. Eller vad sägs om:

  • kort  ”Nu gick det fel”-ljud (brööp)
  • fiu eller spojoing som förstärkande effekt till bollen som kastas in i bild
  • Ljudligt sväljljud
  • mjukt flingeflingljud
  • en sjösjuk ljudslinga för ångorna ur hatten
  • Balettrudelutt för  lyckat slutresultat
  • splurtljud som effekt till när Hulda bajsar

(Alla ovannämnda ljud finns med i årets webbjulkalender. Lyckas du hitta dem alla?)

Musen Morr ser stjärnorFör Morr-spelet levererade Mats bland annat byggatmosfär, spring – och hoppljud, krock- och trilljud, ett yrhetsljud för en vimsig Morr som ser stjärnor och en fanfar för när spelaren kommer i mål.

Kända röster

Allt som oftast lånar också en eller flera personer på BUU-klubbsredaktionen sina välkända röster till spelen på BUU-webben. Programledaren Stefanie “Fifi” af Björksten läste in introduktionen till Morr i röret  och ljuden för knapparna, medan radioredaktören Mårten Holm, som spelar Morr i TV, bandade in Morrs kommentarer.
Vart och ett av julkalenderspelen fick också en sammanfattning av spelinstruktionerna på både finska och samiska. (Tack till Benny Törnroos, Ritva Torikka och Irene Länsman, som översatte och lånade röster!)

Eldprov på BUU-dagen

Hundratals rader Actionscriptkod och rätt många arbetstimmar senare var så Morr i röret klart att spelas. En del av webbkalenderspelen brukar utsättas för ett riktigt eldprov, när de visas upp som försmak på webbkalendern på den årligen återkommande BUU-klubbsdagen i Böle i Helsingfors. Hundratals barn i olika ålder och med varierande datorvana provspelar, gläds åt spelidéer de gillar och frusteras över saker vi tänkt fel. Då gäller det att vara uppmärksam, anteckna, finslipa och ändra så gott det går. Och hålla tummarna den första december.

Önska gärna!

När önskemålen om nya spel landar i BUU-klubbens epostlåda är det flera skribenter som tacknämligt precisa i sina önskemål: vi har fått in efterlysningar på flera pyssel, spel med djur (alldeles speciellt med hästar) och flera hinderbanor, bland annat. Vi läser all post och är väldigt glada över idéer och förslag.

Skicka med andra ord gärna epost och berätta hurdana spel du eller dina barn vill se på buu.yle.fi i framtiden! Adressen är buuklubben@yle.fi. Kanske det är just ditt spelförslag som gör resan från idé till nytt spel på BUU-webben härnäst…

Så flyttade vi tio års arbete

Finnairplan i farlig situation” lyder en rubrik publicerad på Yles webbnyheter onsdagen den 30 oktober 2002, klockan 10.35. Den rubriken inledde ett årtionde med verktyget ”Nyhetswebben”.

Ett decennium och 225 000 artiklar senare har Nyhetswebben ersatts av ett nytt system, ”Drupal”. Men de gamla nyheterna finns kvar.

Hur flyttar man tio års arbete mellan två olika system? Det var en utmaning som Svenska Yles webbavdelning stod inför år 2012. Nyhetswebben är ett lättviktigt internt verktyg, medan Drupal är ett komplext öppet verktyg.

Till att börja med sammanställde vi en ”Entity Relationship”-modell som visualiserar hur nyheternas databas är uppbyggd. ER-modellen avslöjar relationer mellan databasens tabeller och kolumner. Denna information hjälpte oss utveckla skript för att pussla ihop artiklarna.

ER-modell

Följande steg var att kartlägga innehållet. Den gamla nyhetssajten bestod ju inte enbart av nyheter, utan även av kolumner, fördjupningar och bloggar, med mera. Kartläggningen hjälpte oss besluta vilka delar av innehållet som skulle migreras, och i vilken ordning.

Vi undersökte och utvecklade tekniska migreringsmetoder. Vi beslöt exportera innehållet från den gamla databasen som en XML-ström (Extended Markup Language) och importera den genom Drupal-modulerna ”Feeds Import” och ”XPathParser”.

Två delar

Migreringen består huvudsakligen av två delar; dels av en exportdel som skapar en XML-ström ur det gamla systemet, dels en importdel som fogar in XML-strömmen som artiklar i det nya systemet.

Exportdelen utgörs mer tekniskt av ett PHP-program som kör MySQL-kommandon i databasen. Programmet pusslar ihop enskilda informationsbitar till artiklar. Artiklarna blir separata objekt i XML-strömmen, så att varje enskild informationstyp får en egen XML-tagg. En utmaning i exportdelen var att ”tvätta” dataströmmen så att avvikande eller korrumperade informationsbitar inte skulle söndra importen.

Den tekniska utvecklingen utmynnade i detaljerade planer. Detta var första gången vi migrerade ett så stort antal artiklar till ett nytt system och vi ville vara säkra på att processen skulle fungera.

Redan de första testerna visade att Drupal inte kan hantera 225 000 artiklar utan prestandaproblem. Det behövdes mellanlagring bland annat via programvarorna ”Memcache” och ”Varnish” för att höja prestandan till en acceptabel nivå. Ytterligare skapade Drupal för varje artikel ett visst antal lyft – lika många lyft som antalet avdelningar artikeln hade funnits i. Detta gjorde att det totala antalet artiklar i Drupal steg till mer än en halv miljon.

Testerna visade också att importen måste köras stegvis för att undvika tekniska avbrott, så kallade ”timeouts”. Vi skapade ett ”Drush”- (Drupal Shell) kommando som kunde köra importen i mindre paket. Detta kommando kördes i sin tur av ett ”Linux Shell”-skript automatiskt i etapper om hundra artiklar åt gången. Hela importen av de gamla nyhetsartiklarna tog ungefär sju timmar i anspråk.

Migreringen fortsätter

Importen av gammalt innehåll har fortsatt med bland annat ”kulturen.fi” där vi använde samma migreringsmetod som för nyheterna. I detta projekt testade vi också att importera artiklar direkt från RSS-filer (”Rich Site Summary”), vilket fungerar nästan lika bra. RSS är en sorts XML. Problemet med RSS-filer är dock att deras syntax är mer begränsad.

För ett tredje projekt, ”Maktbasen”, importerade vi icke-standardiserad information i form av så kallade entiteter, så som personer, företag och kommuner. Det fanns en del halvfärdiga importmetoder tillgängliga ute på fältet, men det effektivaste sättet för oss var att importera entiteterna direkt till Drupals databas.

Drupals entiteter består av en huvudtabell där innehållet hålls ihop av ett unikt ID, samt enskilda tabeller för alla fält som ingår i en viss entitet.

Migreringen av innehåll har fortsatt med bland annat Mat och fritid. För Mat och fritids recept använde vi en likande XML-generator som för nyheterna, men skapade en ny importör, eftersom recepten fick en egen innehållstyp i Drupal.

För resten av sajtens artiklar använde vi nyhetsimporten som vid det här laget hade utvecklats till en generell importör för artiklar. Denna XML-importör kan numera användas för i princip vilken typ av innehåll som helst som kan översättas till XML.

Fotnot:
Verktyget ”Nyhetswebben”, skapades ursprungligen av Robert Tamm. Nyheterna, tidigare ”Internytt”, har även använt andra webbverktyg. Artiklarna från tiden före oktober 2002 verkar dock till största delen ha gått förlorade.

Nyhetswebben 2.1