Ontwerp en Implementatie in Flex

Multimedia: Modelleren en Programmeren 2009-2010!!

!

!

!

!

!

1/6

Ontwerp en Implementatie in Flex Maarten Lambert, 1ste Master CW Gijs Vanderhoydonk, 1ste Master CW Hans Moorkens, 1ste Master CW Frans Guelinckx, 1ste Master CW Abstract - Dit verslag beschrijft de bedenking, het ontwerp en de implementatie van het eerste project voor het vak “Multimedia: Modelleren en Programmeren” van groep 5. Wij hebben een toepassing ontwikkeld met één centrale speler: de MusiCow. De gebruiker geeft een artiest of genre in dat door de symathieke koe “verteerd” wordt tot gelijkaardige muziek met alle denkbare bijbehorende info. De belangrijkste uitdaging was zonder twijfel het gewoon raken aan een volledig nieuwe taal en het tempo waaraan we moesten werken. Uit dit project hebben we dan ook geleerd hoe we een multi-mediatoepassing kunnen bedenken adhv een storyboard en hoe we dat idee kunnen uitwerken in een gegeven programmeertaal, dit alles binnen een krappe tijdsspanne. Ingediend op: 12 oktober 2009 ——————————  ——————————

1. Inleiding Na een inleiding over de inhoud van het vak en een introductie tot de wereld van de mash-ups, werd het stilaan duidelijk wat er verwacht werd van de teams bij het eerste project. Het enige dat nog ontbrak was een concreet idee voor de muziekapplicatie en voldoende programmeerkennis over Adobe Flex. Dit vormde eveneens de grote uitdaging die ons te wachten stond om de eerste grote opdracht van het academiejaar tot een goed einde te brengen. Zoals het goede studenten beaamt startten we de werkzaamheden met een brainstormingsessie, waar allerlei ideeën, het ene al serieuzer dan het andere, op papier werden gezet. Opvallen was de boodschap, dus verdwenen de meest evidente onmiddellijk in de prullenbak en bleef merkwaardig snel de MusiCow over. Een meer uitgebreide uitleg over dit merkwaardige dier volgt in puntje 2 dat handelt over het storyboard. Nu moest er nog uitgezocht worden welke mogelijkheden Flex en de beschikbare online services boden om de muzikale koe tot leven te wekken. Daar boden de ontelbare tutorials en fora, gewijd aan flex, gelukkig soelaas en kon er snel overgegaan worden tot de eerste steenlegging. Meer info over het ontwerp en de architectuur staat te lezen in puntje 3 van dit verslag. Vele handen maken licht werk, dus werden de taken verdeeld over de vier teamleden, in de hoop dat we op die manier snel een grote verzamelde kennis over flex zouden vergaren. De tijd waarop de muziekapplicatie tot stand moest komen, dwong ons

namelijk tot dit soort aanpak. Eén iemand stond in voor de GUI, één iemand voor het streamen van muziek naar onze app, één iemand voor het ophalen van bijkomende informatie (artiest, songtitel, upcoming events, lyrics,...) van het internet en tot slot iemand voor het visualiseren van al die informatie. Er werd unaniem besloten van zoveel mogelijk gebruik te maken van externe diensten en zo te bewijzen dat we het concept van mash-ups, meer bepaald in Flex, grondig onder de knie hadden. In puntje 4 wordt er dieper ingegaan op de eigenlijke implemenatie. Bij de eerstvolgende samenkomst werd er getracht het reeds geleverde werk samen te voegen en het beestje al wat meer vorm te geven. Er was gelukkig een gemeenschappelijke vijand: FLEX. De taal biedt heel wat mogelijkheden die voor een beginner soms (veel te) goed verborgen zitten, wat nu en dan voor frustraties en schijnbaar uitzichtloze situaties zorgde. Maar op- of toegeven was geen optie, we zouden het been stijf houden en rustig voortploeteren. Een eerlijke mening over de kwaliteiten van Flex (of het gebrek eraan) staan gedocumenteerd in puntje 5. Om te besluiten staat in puntje 6 te lezen wat we uit deze opdracht geleerd hebben en welke lessen we uit deze samenwerking getrokken hebben.

2.Storyboard Bij de ontwikkeling van het storyboard werd vooral aandacht besteed aan het creëren van een visueel aantrekkelijke omgeving waarbij


muziekinformatie op een attractieve manier getoond kon worden. Aangezien er gevraagd werd de lat zo hoog mogelijk te leggen, hebben we getracht zo sterk mogelijk ”out of the box” te denken. Uiteindelijk werd er geopteerd voor een soort van metafoor te gebruiken zoals voorgesteld in figuur 1. Deze metafoor houdt in dat de gebruiker voedsel geeft aan een koe, deze koe verwerkt het voedsel vervolgens tot een hoeveelheid uitwerpselen die er dan op hun beurt voor zorgen dat een bloem uit de grond kan groeien. Er zouden verschillende zakken voedsel klaar staan met telkens een bijhorend genre dat de gebruiker graag wil horen. Naast het voedsel zou de gebruiker dan ook de mogelijkheid krijgen bepaalde wolken aan te klikken waaruit dan wat regen zou vallen. Elke wolk stelt een bepaald decennium voor waaruit de gebruiker momenteel muziek wil horen. Wanneer de bloem dan uiteindelijk volgroeid is, begint er automatisch muziek te streamen die afgestemd is op het decennium en het genre dat de gebruiker graag wil horen. Om niet enkel de informatie over de muziek visueel weer geven, werd ook het idee naar voren geschoven om de koe te laten dansen op het ritme van de muziek. Door op het bloempje te klikken kan de gebruiker meer info vergaren over het liedje dat momenteel aan het spelen is, wat deze info zou zijn was bij het opstellen van het storyboard nog niet erg belangrijk. Tot slot was ook de bedoeling dat bepaalde achtergrondelementen op subtiele wijze zouden mee veranderen met de gespeelde muziek (bijvoorbeeld achtergrond veranderen naar gelang de plaats waar de groep vandaan komt). Dit was het origineel storyboard maar zoals verder in dit verslag zal blijken, zijn er doorheen de ontwikkeling van het project enkele noodzakelijke aanpassingen gebeurd.

3.Ontwerp Bij het ontwerp kwam het team heel wat moeilijkheden tegen. Dit kwam hoogstwaarschijnlijk door het gebrek van kennis over Flex. Vooral de combinatie tussen het gebruik van actionscript en de xml gebasseerde layout taal maakten van het ontwerp van het programma geen sinecure. Uiteindelijk is het team gemakkelijkheidshalve overgaan tot “een mxml bestand per panel”-structuur, waardoor vooral de samenwerking binnen het team vlotter verliep. Deze aanpak zorgde voor een ontwerp zoals aangegeven in figuur 2. Vervolgens worden de verschillende elementen in het klassendiagramma kort besproken:

!

!

!

!

!

2/6

• Musicow: De hoofdklasse waaruit alles wordt opgeroepen bestaat uit de mxml file “Musicow”. Deze toont het maincanvas en geeft de mogelijkheid het artiestenpanel en het albumpanel op te roepen via respectievelijk de bloem en de boom die op het maincanvas getoond worden. • Maincanvas: Dit is het canvas waar het hele tafereel op getekend wordt. Hier bevinden zich de figuren en wordt de functionaliteit van de services klasse aangeroepen. Ze is ook gelinkt aan de soundvisuals klasse die zorgt dat de koe mee op het ritme beweegt wanneer er muziek weerklinkt uit de bloem. • Albumpanel: Dit panel roept alle info op over vijf bekende albums van de artiest en geeft de gebruiker de mogelijkheid hier meer info over te bekomen. Deze klasse maakt gebruik van de de Last.FM service via de services klasse. • Artistpanel: Dit panel gebruikt de services klasse voor het verkrijgen van informatie over de artiest die op dat moment op de Last.FM-radio speelt. De klasse maakt ook gebruik van de Google Maps API om het eerstvolgende event van de betreffende artiest weer te geven op een wereldkaart. • Services: Deze klasse verzamelt de gebruikte services waar na de beschrijving van het architectuurdiagramma dieper op zal worden ingegaan. • Soundvisuals: Deze klasse berekent het spectrum van de muziek die momenteel aan het afspelen is en zorgt ervoor dat de koe op het maincanvas op het ritme van de muziek beweegt. Tot slot zal in deze sectie nog even dieper ingegaan worden op de verschillende api's die onderzocht en eventueel gebruikt werden in onze applicatie. • Last.FM: De Last.FM service werd grondig onderzocht door het team en werd dan ook veelvuldig gebruikt doorheen de ganse applicatie. Ze wordt gebruikt in het zoeken naar een gepaste playlist aan de hand van een meegegeven tag, het opvragen van extra informatie over een artiest en ten slotte ook het streamen van de muziek, wat het team heel wat uren gekost heeft. • LyricsFly: Deze API werd gebruikt voor het opvragen van de lyrics van een liedje en deze worden dan ook telkens getoond op een wolk in het maincanvas.


• Google Maps: Deze API wordt in combinatie met de Last.FM api gebruikt voor het tonen van het meest recente evenement van de artiest die momenteel aan het spelen is. • Discogs API: Deze API heeft heel wat weg van de Last.FM API en werd aanvankelijk ook gebruikt in ons programma, maar aangezien de Last.FM API uiteindelijk alle functionaliteit heeft overgenomen, bleek de Discogs API overbodig. • Yahoo music / ILike: Toen het team wat problemen ondervond bij het streamen van muziek via Last.FM, werd gezocht naar een alternatief. Hiervoor viel ons oog op de Yahoo music API, waar het echter niet onmiddellijk duidelijk was of er nu gestreamed kon worden of niet. Uiteindelijk bleek het team bedrogen uit te komen. Een gelijkaardig voorbeeld is de API van Ilike, deze kon blijkbaar wel streamen maar bleek niet te voldoen aan onze eisen. Het was namelijk niet mogelijk om een keuze te maken van een playlist op basis van enkele tags.

4.Implementatie in Flex De belangrijkste moeilijkheden worden in deze sectie even onder de loep genomen. • Een hoofdprobleem dat eerst aan bod komt in deze sectie, is het feit dat het team noch kennis had van Flex als van ActionScript. Het is gebleken dat deze taal effectief simpel is om te leren, maar erg moeilijk om volledig onder de knie te hebben om er uiteindelijk een piekfijne applicatie mee af te leveren. Vooral de kruising tussen de xml gebaseerde layout stijl en de script taal was vaak een struikelblok. In volgende sectie waar wat dieper wordt ingegaan op de mening van het team over Flex, zullen enkele verdere details aan bod komen. • Een eerste probleem dat het team regelmatig tegenkwam, was de moeizame parsing van XML-files. Wanneer er bijvoorbeeld een namespace aanwezig was in de heading van een XML-file, moest telkens verwezen worden naar die namespace als een XML-object aangesproken werd. Dit werd uiteindelijk opgelost door een tijdelijke omzetting naar een textuele file, vervolgens het wegnemen van de namespace declaratie en tot slot de wederomzetting naar een XML-file. Dit is natuurlijk allesbehalve een propere manier maar het was tenminste een werkende oplossing. Achteraf bleek dat er wel een

!

!

!

!

!

3/6

library online stond voor het parsen van xml files, maar dit nieuws bereikte ons wat laat in de implementatiefase. • Ook het aan de praat krijgen van de Last.FM-stream bracht het team vaak in vervelende situaties. De inlogfase zorgt er namelijk voor dat het proces om uiteindelijk iets te kunnen streamen, zeer omslachtig wordt. Er wordt namelijk niet alleen een API-key gevraagd, maar ook een secret key als extra beveiliging en een token key om uiteindelijk een session key te bemachtigen. Verder bleek ook dat de gratis dienst zich niet alleen beperkt tot het afspelen van 30 liedjes, maar dat er zonder betalende account geen stream gestart mag worden. • LyricsFly leek aanvankelijk een fijne API maar door het grote arsenaal aan liedjes dat Last.FM biedt, kan deze API niet altijd de juiste lyrics vinden bij een bepaald lied. • Een ander probleem dat redelijk laat aan het licht kwam, was dat de visualisaties van de koe niet werkten wanneer onze applicatie op de webserver van KULeuven gebracht werd. Dit was uiterst merkwaardig aangezien er lokaal, ook al werd er online gestreamed van Last.FM, nooit een probleem opgedoken was. Door de moeilijkheden die het team gekend heeft tijdens de ontwikkeling van de applicatie, werd er nu en dan een aanpassing gedaan aan het origineel concept zoals beschreven in het storyboard. Hieronder worden de belangrijkste elementen op een rijtje gezet: Het concept van de voedselzakken die de genres voorstelden en de wolkjes die de verschillende decennia voorstellen heeft het team laten vallen. Dit omdat het lange tijd niet duidelijk was in hoeverre een lied kon aangevraagd worden op basis van deze gegevens. Pas toen getest kon worden welke afspeellijsten bepaalde tags genreerden, kon er nagegaan worden of dit een haalbaar concept was. Omdat dit uiteindelijk niet echt een meerwaarde gaf aan de werkelijke functionaliteit van ons programma, werd er besloten hiervoor enkel een kadertje te openen waar naar willekeur tags ingevoerd kunnen worden. Tot slot zijn ook de veranderingen van de achtergrond spijtig genoeg niet meer geïmplementeerd geraakt, dit hoofdzakelijk wegens tijdsgebrek.


!

5.Over Flex Naast noties van enkele scripttalen, was de aanpak van Flex totaal nieuw voor ons. De scheiding van de lay-out en het script staan in schril contrast met elke andere objectgerichte programmeertaal. Op het eerste zicht leek deze manier van werken relatief eenvoudig: Stel de lay-out op in MXML met de tientallen ingebakken componenten en voeg functionaliteit toe aan de hand van ActionScript. Zeker aan de hand van de bijgeleverde Flex Builder zou dit een piece of cake moeten zijn... Na enkele uren gewerkt te hebben met de nieuwe programmeertaal in de al even nieuwe programmeeromgving, lijken de kinderziektes overwonnen te zijn. Flex is ontwikkeld met het oog op RIA’s (Rich Internet Applications) en dat merk je: er kan met gemak informatie opgevraagd en verwerkt worden van externe diensten in de vorm van XMLbestanden. Het animeren en vormgeven van de applicatie zijn ook een klein obstakel na enkele tutorials gelezen te hebben. Anderzijds zijn hier de eerste gebreken van de scripttaal voelbaar; de foutenafhandeling laat te wensen over waardoor soms uren gezocht kan worden naar een speld in een hooiberg. Als je daarnaast in de steek gelaten wordt door de Adobe-documentatie, de fora en de ontelbare tutorials sta je er helemaal alleen voor. Bijvoorbeeld voor het streamen van muziek vanuit Last.FM is het ploeteren en zweten van de ene bug naar de andere. Des te groter was de euforie natuurlijk wanneer de koe haar eerste noten zong. Hoewel de Flex-taal 100% objectgeoriënteerd is, hebben we op dit vlak ook problemen ondervonden. Wanneer een event plaatsvindt (eg. MouseEvent) worden er geen parameters doorgegeven aan de functie die dat event moet opvangen. Noch wordt er de mogelijkheid geboden door Flex om dit te doen. Gelukkig waren we niet de enigen die hiermee worstelden en vonden we na lang zoeken een pasklare oplossing op het web1 die ons zeer veel duplicate code heeft bespaard. Kortom is Flex heel nuttig om snel een multimediale applicatie in elkaar te steken die makkelijk bereikbaar is voor een breed publiek. Bovendien is zeer toegankelijk voor minder gevorderde ontwikkelaars met weinig programmeerervaring. Wanneer het echter ingewikkelder wordt, vertoont Flex meer en minder

1

http://board.flashkit.com/board/showthread.php?t=803255

!

!

!

!

4/6

ernstige gebreken die het programmeren moeilijk maken.

6.Besluit Deze opdracht heeft geleerd hoe een multimediale applicatie kan gemodelleerd worden aan de hand van een storyboard. Die werkwijze dwong het team ertoe van bij het begin een concreet idee uit te werken in plaats van in het wilde weg te beginnen programmeren. Het was ook onmiddellijk duidelijk wanneer er van het oorspronkelijke verhaal werd afgeweken, om welke reden dan ook. Op het vlak van ontwerp en implementatie was er alle vrijheid en werden we met vallen en opstaan ingeleid in de wondere wereld van Flex. Omdat er vrij weinig tijd beschikbaar was om een werkende applicatie te maken, hebben we een grote mate van zelfredzaamheid aan de dag moeten leggen. Voor elke aparte externe dienst is er een aparte API die uitgepluisd moet worden en ingepast worden in de applicatie. Ook gezien het feit dat Flex voor iedereen nog relatief onbekend terrein was, had het team van bij het begin moeite om een passend ontwerp uit te werken. Naarmate de flex-kennis bijgeschaafd werd, kreeg het ontwerp dan ook meer en meer vorm. De hoeveelheid diensten die aangesproken worden in de applicatie is vrij talrijk, wat naar onze mening zeker een positief aspect is. De opzet van de opdracht was het maken van een multimediale mashup en daar is het team zeker en vast in geslaagd. Aan de hand van zeer geringe gebruikersinput geeft de MusiCow een batterij aan uitgebreide informatie terug, gaande van albumcovers tot eigenlijke muziek. De grafische user-interface daarentegen laat hier en daar zeker te wensen over, maar de focus van deze cursus ligt eerder op het modelleren en programmeren. Daarom kreeg de vormgeving ook de allerlaagste prioriteit, wat tot uiting is gekomen in het resultaat. Een laatste praktisch aspect dat, raar maar waar, van bij het begin over het hoofd is gezien, is het gebruik van een SVN-server. Het nut en gebruikersgemak ervan moet zeker en vast niet meer uit de doeken gedaan worden. Het staat dan ook buiten kijf dat hier bij de volgende opdracht gebruik van gemaakt zal worden.


!

!

!

!

!

5/6

7.Appendix Maarten Lambert

Flex Tutorials

Hans Moorkens

Gijs Vanderhoydonk

Frans Guelinckx

Totaal

Binnen sessie

Buiten sessie

Binnen sessie

Buiten sessie

Binnen sessie

Buiten sessie

Binnen sessie

Buiten sessie

Binnen Buiten sessie sessie

3

3

3

3

3

3

3

3

12

12

0

8

Storyboard

2

2

2

2

Vormgeving

2

1

3

4

Ontwerp

2

2

2

2

0

8

Implementatie

25

28

22

20

0

95

Verslag

3

2

6

0

15

160

160

Totaal

40

8.Bijlagen

Figuur 1: Storyboard

41

4 39

40


Figuur 2: Architectuurdiagram

!

!

!

!

!

6/6

Ontwerp en Implementatie in Flex

Recommend Documents