Opdracht 1: Media Browser

Achtergrond

Als je veel afbeeldingen hebt om te laten zien (veel werkstukken die je wil laten zien in je portfolio), maar je wil ook dat het deze afbeeldingen overzichtelijk worden getoond, voorzien van de bijbehorende tekstuele informatie, dan zul je op een of andere manier door je afbeeldingen heen moeten kunnen 'browsen'.

Opdracht

Maak een media browser welke aan de hand van een extern XML bestand afbeeldingen inlaadt.

De gebruiker kan door middel van een volgende en vorige-knop een voor een door de media heen 'browsen', waarbij telkens informatie over de afbeelding wordt weergegeven.

De media browser moet minimaal voldoen aan de volgende eisen:

• Gebruik minimaal 10 verschillende afbeeldingen (jpeg, gif, png, swf)
• De afbeeldingen staan in een externe directory naast de fla/swf opgeslagen.
• Elke afbeelding heeft een titel en een omschrijving welke bij de afbeelding worden getoond.
• Je ontwerpt zelf een structuur voor de XML die de media browser gebruikt bij het inladen.
• Je schrijft zelf de XML, met minimaal per afbeelding de volgende informatie:
  • het pad naar de afbeelding (bv. ./media/1.jpg)
  • de titel van de afbeelding
  • de omschrijving van de afbeelding
• De media browser laadt de XML met URLLoader in.
• Alle afbeeldingen staan extern en worden met een Loader ingeladen.
• Er zijn twee knoppen, volgende en vorige, om door alle afbeeldingen heen te 'browsen'.
• Als de media browser opstart, laadt hij de eerste afbeelding automatisch in.

Tips

• Teken eerst analoog op een vel papier de functionaliteit van de media browser uit en maak een Activity Diagram met alle mogelijke acties. Zo krijg je een goed overzicht van de functionaliteiten die je moet gaan bouwen.
• Hoe ga je bijhouden wat de huidige foto is die getoond wordt?
• Waar bewaar je de ingeladen XML data zodat je er makkelijk bij kan?
• Schrijf eerst de XML die je gaat inlezen; denk goed na over de structuur.
• Ga niet alles in een keer tegelijkertijd implementeren, maar pak het stapsgewijs aan.
• Maak losse test FLA bestanden om losse functionaliteit te testen en uit te pluizen, deel dit op in bijvoorbeeld: XML inladen, een knoppen test, plaatje inladen etc. Zo zie je duidelijk en geïsoleerd hoe en of het werkt!
• XMLList is een array van XML items!

Extra

Als je deze opdracht niet lastig vind kan je het volgende optioneel implementeren:

• Zet de buttons aan of uit naargelang je bij de eerste of laatste foto bent.
• Maak een transitie tussen de twee foto's.
• Toon een progressbar bij het inladen van de foto's.
• Laat de XML op de server door een php bestand genereren op basis van data uit een database

Inleveren

Als je meerdere dingen geprobeerd hebt, vooral als dingen niet gelukt zijn zoals je wilde, kun je meerdere (oudere) versies inleveren in aparte sub-directories (mappen). Plaats niet alleen de (werkende) flash applicatie online (.swf bestand(en)), maar ook de broncode (.xml en .fla bestand), zodat de docent ook kan zien hoe je het hebt aangepakt.

Schrijf bovendien ook een opleverdocument. Hierin maak je jouw werk en werkwijze voor de docent inzichtelijk,zodat deze het beter kan beoordelen. In dit opleverdocument schrijf je:

• Wat je aan zelfstudie hebt gedaan om de leerdoelen te behalen,
• Hoeveel tijd je hieraan gespendeerd hebt,
• Hoeveel tijd je hebt besteed aan het maken van de opdracht,
• Hoe je de opdracht hebt aangepakt
• Welke problemen je hierbij bent tegengekomen, hoe je die hebt proberen op te lossen en in hoeverre dat gelukt is

Opdrachten moeten worden upgeload naar je webspace op ftp://student.cmd.hro.nl/public.www . Je werk moet steeds te vinden zijn op de locatie die hoort bij de opdracht: http://student.cmd.hro.nl/[studentnummer]/jaar2/lente/fed/opdracht1/ . Op deze locatie moet ook je opleverdocument te vinden zijn. Schrijf je opleverdocument in correcte XHTML en link daarin naar je werkende applicatie en naar de broncode.

Houd rekening met de deadline voor deze opdracht: zondagavond 22 maart om 24:00. Zie voor meer informatie de modulewijzer.

Beoordelingscriteria

• Je kunt een programmeer vraagstuk zelfstandig oplossen.
• Je kunt een XML bestand ontwerpen (gegevens structureren) voor het versturen van data tussen een webserver en een flash applicatie.
• Je kunt een extern XML bestand inladen met AS3 en de data gebruiken binnen een Flash applicatie.
• Je kunt externe afbeeldingen (jpeg, gif, png, swf) inladen met AS3 en deze gebruiken binnen een Flash applicatie.
• Je ActionScript code is overzichtelijk (inspringen) en van zinvol commentaar voorzien
• Je werk is goed gedocumenteerd en correct ingeleverd (zie 3.1.4 en 3.1.5 in de modulewijzer)
• Je voldoet aan de algemene beoordelingscriteria (zie 3.2 in de modulewijzer)

Succes.