Workshop XIMPEL TV Winoe Bhikharie Vrije Universiteit Amsterdam www.ximpel.net / info@ximpel.net In deze workshop maak je kennis met XIMPEL TV en interactieve video. Bij interactieve video kun je de video die je aan het bekijken bent beïnvloeden. XIMPEL TV is de speler die we gebruiken om interactieve video te bekijken. Om XIMPEL TV te starten, open je ximpeltv.html met een web browser. Figuur 1: XIMPEL TV XIMPEL TV bestaat uit 9 genummerde vakjes met plaatjes die geordend zijn in een 3 bij 3 matrix. Door op een vakje te klikken, wordt er een interactieve video gestart. Als de muiscursor zich boven de gestarte video bevindt, wordt er ingezoomd op de huidige video en wordt deze vergroot weergegeven over de gehele matrix. Om terug naar de matrix met vakjes te gaan, klik je op de buitenste rand. Opdracht 1 Start XIMPEL TV en bekijk een aantal interactieve videos. Het rechtsklikmenu van XIMPEL TV bevat vier extra commando's: Volledig scherm/venster : Wissel tussen weergave in een volledig scherm en venster.
Volgende video : Ga naar de volgende video van de huidige interactieve video. Als er geen andere videos beschikbaar zijn, dan stopt de interactieve video en ga je terug naar de matrix. Pauzeer/Hervat video : Wissel tussen pauzeren en hervatten van de huidige interactieve video. Stop video : Stop de huidige interactieve video en ga terug naar de matrix. Opdracht 2 Verander een aantal plaatjes van de matrixvakjes. Hiervoor ga je naar de submap images. De plaatjes in deze map zijn genummerd van 1 t/m 9 en opgeslagen in het jpeg formaat (met de extensie.jpg ). Om een plaatje te veranderen, moet je het bestaande plaatje vervangen door een ander jpeg plaatje. Je mag zelf bepalen hoe je dat doet (bijvoorbeeld van het Internet halen, zelf tekenen of een bestaand plaatje bewerken). Om te controleren of jouw nieuwe plaatjes goed worden weergegeven, start je XIMPEL TV opnieuw. Om nieuw videomateriaal aan XIMPEL TV toe te voegen, hebben we videos nodig die in het juiste formaat zijn omgezet. Wij zullen in deze workshop videos van YouTube downloaden, omdat deze al in het vereiste formaat zijn omgezet. Figuur 2: YouTube filmpje Opdracht 3a Open de website http://www.youtube.com in je browser. Zoek nu een filmpje naar keuze op YouTube, dat niet langer dan 30 seconden tot 1 minuut lang is. Op de YouTube pagina van jouw uitgekozen filmpje staat onder het kopje URL een link zoals: "http://www.youtube.com/watch?v=e1cyumx5hta". Kopieer
deze link en open vervolgens in een nieuw browserscherm de website http://keepvid.com. Plak de gekopieerde link in de groene downloadbalk en klik op de knop "DOWNLOAD". Er verschijnen nu twee links met de beschrijving ">> Download Link <<". Dit zijn de directe links naar het YouTube filmpje in respectievelijk flash video en mp4 formaat. Rechtsklik op de eerste link (flash video) en sla het filmpje op in de map "video" onder een duidelijke naam die eindigt met de extensie ".flv". Voorbeeld: "ijsbeer_in_gevaar_01.flv". Download vervolgens nog een aantal andere filmpjes van YouTube. Figuur 3: Keepvid.com Opdracht 3b Verander een aantal videos van de interactieve videos. Hiervoor ga je naar de submap videos. In deze map staan er een aantal videos die genummerd zijn van 1 t/m 9 en zijn opgeslagen in het flash video formaat (met de extensie.flv ). Vervang een aantal van deze genummerde videos door videos, die je van YouTube hebt gedownload, te hernoemen. Om te controleren of jouw videos in de interactieve videos zitten, start je XIMPEL TV opnieuw en klik je op het juiste vakje om de gewijzigde interactieve video te starten. Zoals je hebt gezien in de vorige opdracht kun je zelf een interactieve video maken met je eigen videos. Het nadeel van de methode uit de vorige opdracht is dat je alleen de eerste video van een interactieve video kan veranderen. Door de zogenaamde playlist van XIMPEL TV aan te passen, kunnen we veel meer eigenschappen van een interactieve video veranderen. XIMPEL TV gebruikt de playlist om te bepalen welke video moet worden afgespeeld en hoe dat moet gebeuren. De playlist is opgesteld in het dataformaat XML en is opgebouwd uit zogenaamde "tags". Een tag is een woord dat is omgeven door de "kleiner dan" en "groter dan" symbolen: < en >. In de playlist worden de tags gebruikt om verschillende delen van de playlist te definiëren. De eerste tag is de <ximpel> tag en wordt afgesloten door </ximpel>. Binnen de <ximpel> tags wordt de playlist opgebouwd. Tags zelf kunnen attributen met waardes bevatten. Een voorbeeld is het "file" attribuut voor de <video> tag. In de volgende opdrachten gaan we aan de slag met het aanpassen van de playlist. Om te beginnen open je het bestand playlist.xml met de teksteditor Notepad++. Vergeet niet om XIMPEL TV opnieuw te starten nadat je wijzingen hebt gemaakt in de playlist.
Opdracht 4 Bekijk de eerste subject tag met id= 1. Als je in XIMPEL TV op het eerste vakje klikt, dan wordt de eerste video van deze subject tag gestart. De vierde video van deze subject tag bevat een vraag. Verander deze vraag en probeer uit te vinden hoe je het juiste antwoord kunt veranderen. Voeg daarna een nieuwe vraag toe aan de eerste video. Opdracht 5 Bekijk de vijfde subject tag met id= 5. Deze subject tag bevat twee videos. Verander zowel de eerste als de twee video door andere videos (die je bijvoorbeeld van YouTube hebt gehaald) door het file attribuut van de <video> tag aan te passen. Voeg daarna een derde video (naar keuze) toe. Opdracht 6 Bekijk de vierde subject tag met id= 4. De derde video van deze subject tag bevat een zogenaamd keuzemoment. In dit keuzemoment wordt er een vraag gesteld die bovenaan de video te zien. Verder zijn er twee klikbare vlakken gedefinieerd. Dit zijn overlays en maken het mogelijk om in de video een keuze te maken. Verder bevat de video het attribuut repeat met waarde true, wat ervoor zorgt dat de video wordt herhaalt totdat er een keuze is gemaakt. Verander nu zowel de vraag als de keuzeteksten die je ziet als je de muiscursor boven een overlay plaatst. Zoals in de vorige opdracht is genoemd, zijn overlays klikbare vlakken die je in een video kunt definiëren. Overlays worden gedefinieerd met behulp van de <overlaycel> tag en hebben de volgende eigenschappen: Posities x en y. Dit zijn de x en y coordinaten van de linkerbovenhoek van de overlay. Het is belangrijk om te weten dat de coordinaten begrensd zijn: x is begrensd op 800 pixels en y is begrensd op 600 pixels. Groottes width en height. Dit zijn respectievelijk de breedte en de hoogte van de overlay. Ook de width en height zijn begrensd: width is begrensd op 800 pixels en height is begrensd op 600 pixels. Keuze leadsto. De waarde die het leadsto attribuut bevat verwijst naar een id attribuut van een subject. Voorbeeld: leadsto= 2 betekent dat als je op de overlay klikt met deze leadsto, er een sprong wordt gemaakt naar het subject met id= 2. Van dit subject wordt vervolgens de eerste video afgespeeld. Kleur color. De kleur wordt gespecificeerd in hexadecimale notatie (0-9, A-F) met als notatie 0xRRGGBB, waarbij RR staat voor rood, GG voor groen en BB voor blauw. Voorbeeld: color= 0xFF0000 betekent dat de overlay rood is, aangezien alleen de rood parameters de maximale waarde hebben (FF). Andere voorbeelden: 0x000000 is zwart, 0xFFFF00 is geel, 0xFFFFFF is wit. Transparantie alpha. Het attribuut alpha kan een waarde hebben van 0 t/m 1, waarbij 0 staat voor onzichtbaar en 1 volledig zichtbaar. Plaatje image. Om een plaatje in een overlay weer te geven, geef je een
bestandsnaam op van een plaatje dat zich bevindt in de map images. Tekst text. De tekst die in de overlay wordt weergegeven. Tekstgrootte textsize. De puntgrootte van de tekst die is gedefinieerd in het attribuut text. Tekstfont textfont. Het fonttype van de tekst die is gedefinieerd in het attribuut text. Hover attributen. Hover attributen is een collectie van bovengenoemde attributen die je kunt gebruiken om te definiëren hoe een overlay eruit ziet als de muiscursor zich boven een overlay bevindt. De volgende hover attributen kunnen worden gebruikt: hover_color, hover_alpha, hover_image, hover_text, hover_textsize, hover_textfont. Deze hover attributen werken hetzelfde als de normale versies van deze attributen. Opdracht 7 Bekijk de zevende subject tag met id= 7. Er zijn twee <overlaycel> tags gedefinieerd. Verander de overlays naar keuze aan de hand van de attributen zoals ze hierboven zijn beschreven. Probeer hierbij om een eigen overlay effect te maken door zowel de normale als hover attributen te gebruiken. De <overlaycel> tags worden gedefinieerd tussen <overlay> tags. Per <overlay> kun je maximaal 25 <overlaycel> tags definiëren. Je kunt voor elke <overlay> tag een time attribuut definiëren. Dit is de starttijd in seconden en geeft aan wanneer je wilt dat de overlays verschijnen. Als je geen time attribuut gebruikt of time= 0 gebruikt, dan worden de overlays direct weergegeven. Als we een niveau omhoog kijken dan zie je dat <overlay> tags worden gedefinieerd tussen <overlays> tags. Je kunt oneindig veel <overlay> tags definiëren tussen de <overlays> tags. Dit maakt het mogelijk om verschillende overlays op verschillende tijdstippen weer te geven. Opdracht 8 Bekijk opnieuw de zevende subject tag met id= 7. Kopieer nu het deel dat tussen <overlay> tags staat (inclusief de <overlay> tags zelf) en plak dit boven waar </overlays> staat. Verander van de nieuwe <overlay> tag de waarde van het time attribuut van 0 naar 4. Verander verder ook nog een <overlaycel> attribuut (bijvoorbeeld de tekst), zodat je verschil ziet tussen de overlays op tijdstip 0 en op tijdstip 4. Probeer om met het <overlay> time attribuut en de <overlaycel> attributen een eigen overlay effect te maken. Opdracht 9 Verander de playlist en matrix plaatjes zodanig dat jouw versie van XIMPEL TV over een ander thema dan klimaatverandering gaat.