Maak je eigen Apps Deel 2 (versie 1.2 NL 3-11-2011) door Serge de Beer Geluid in je App De kracht van (de meeste) computers en tablets is hun multimediale karakter. Door de combinatie van beeld en geluid kan de inhoud aantrekkelijker worden gepresenteerd. In dit deel van de cursus leer je één van deze multimediale elementen toe te passen. Geluid is een mooie toevoeging op de meeste Apps. Zo kunnen teksten worden voorgelezen, wat comfortabel is voor de gebruiker. Ook kan met behulp van muziek een bepaalde sfeer worden opgeroepen. Je moet maar eens opletten hoe vaak er geluiden te horen zijn in een App. Meestal gebeurt dit vrij onbewust, bijvoorbeeld als je tikt op een bepaald element. Als oud-geluidsman weet ik dat geluid pas opvalt, wanneer het niet goed is. Daarom ga je in dit deel niet alleen leren hoe je de geluiden op een goede manier in je App zet, maar ook hoe je ze kunt maken. In dit deel worden de volgende LearningPoints behandeld: Programma voor geluidsbewerking installeren Geluid opnemen Een opname "schoon snijden" Geluiden importeren in GameSalad Een geluid aan een Actor koppelen Muziek laten horen De muziek uitzetten De muziek verder laten spelen Het geluid harder en zachter zetten Het gebruik van Attributes De waarde van Attributes aanpassen Volume aanpassen op basis van een Attribute Omvang van de volumemeter aanpassen 2011 - Serge de Beer 1 van 27 apps@learningtour.nl
LearningPoint 2.1 - Programma voor geluidsbewerking installeren We maken eerst even een klein uitstapje. Om geluiden op te nemen en te bewerken, heb je andere programma's nodig dan GameSalad. Gelukkig bestaat er ook een uitstekend gratis geluidsbewerkingsprogramma. Maar voor we zover zijn, moet je natuurlijk eerst geluid hebben om te kunnen bewerken. Zelf gebruik ik daarvoor vaak een losse audiorecorder, die zowel MP3-bestanden, als WAV-bestanden kan opnemen. Dit is echter niet perse nodig, aangezien je ook prima opnames kunt maken met de ingebouwde microfoon van je computer. Om geluiden op te kunnen nemen en straks ook te kunnen bewerken, installeren we eerst het programma Audacity. 1. Ga naar: http://audacity.sourceforge.net/ 2. Klik op de eerste stabiele versie, in dit geval 'Download Audacity 1.2.6a' (de Beta-versie is vaak nog niet stabiel). 2011 - Serge de Beer 2 van 27 apps@learningtour.nl
3. Klik in het nieuw verschenen scherm nogmaals op 'Audacity 1.2.5' (vermoedelijke heb je een Intel). Het bestand wordt nu gedownload. 4. Klik rechts boven in de browser (mits je Safari gebruikt) op de knop 'Downloads'. 5. Dubbelklik op het gedownloade 'Audacity DMG-bestand'. 6. Sleep het bestand 'Audacity.app' naar 'Programma's' op de onderste balk. 7. Klik in 'Programma's' op het 'Audacity.app' icoon. 2011 - Serge de Beer 3 van 27 apps@learningtour.nl
8. Klik in het nieuwe scherm op de knop 'Open'. Audacity is nu geïnstalleerd en gestart. LearningPoint 2.2 - Geluid opnemen Audacity is geïnstalleerd en gestart. We kunnen beginnen met het opnemen van geluid. 1. Klik op de knop 'Opnemen' (met het rode, ronde symbool) 2. Praat, zing of maak andere geluiden. 2011 - Serge de Beer 4 van 27 apps@learningtour.nl
3. Klik op de knop 'Stop'. De opname is nu gemaakt. LearningPoint 2.3 - Een opname "schoon snijden" Meestal zullen de opnames die je maakt, niet van het eerste tot het laatste moment bruikbaar zijn. Je wilt het fragment zo "schoon" mogelijk hebben. 1. Selecteer het deel van het geluidsbestand, dat je wilt gebruiken. 2. Klik op de knop 'Play' om te horen of je het juiste deel hebt geselecteerd. (Mocht het niet de juiste selectie zijn, maak deze dan opnieuw, totdat je tevreden bent over het fragment.) 3. Gebruik de toetscombinatie ' + t' ('cmd + t') om het fragment in te korten tot de selectie (dit heet "trimmen"). 2011 - Serge de Beer 5 van 27 apps@learningtour.nl
4. Kies in het menu 'File' voor de optie 'Export Selection As WAV...'. 5. Geef het bestand een naam (bijvoorbeeld "test.wav") en klik op de knop 'Save'. Het bestand is nu geëxporteerd als WAV-bestand. Dit kenmerkt zich door een goede kwaliteit, meestal beter dan MP3-bestanden. We hebben het origineel niet meer nodig, dus je hoeft bij het sluiten van Audacity het bestand niet te bewaren. Oefening 1 Maak 3 verschillende geluidsbestanden aan (in WAV-formaat). Dit moeten losse woorden zijn, die een object benoemen (bijvoorbeeld "pollepel" of "augurk"). Zorg dat ze herkenbare namen hebben. Bijvoorbeeld zoals in de onderstaande afbeelding (het bestand "test.wav" hadden we in het vorige LearningPoint al opgeslagen). 2011 - Serge de Beer 6 van 27 apps@learningtour.nl
Einde oefening 1 Oefening 2 Maak een nieuwe App en plaats drie Actor met een afbeelding in de eerste Scene. We gaan straks de geluiden koppelen aan deze afbeeldingen. Weet je niet meer hoe dat moet, pak dan Deel 1 van deze cursus er nog even bij. Bewaar het document met de naam "Audio.gameproj". De Scene moet er ongeveer uitzien als in het onderstaande voorbeeld. Uiteraard ben je geheel vrij wat voor soort afbeeldingen je kiest. Natuurlijk moeten de overeen komen met de geluiden die je net hebt opgenomen. Einde oefening 2 2011 - Serge de Beer 7 van 27 apps@learningtour.nl
LearningPoint 2.4 - Geluiden importeren in GameSalad Net zoals afbeelding, moeten ook geluiden eerst worden geïmporteerd. Je zult zien, dat de methode vrijwel hetzelfde is. 1. Klik in het schermgedeelte 'Library' op de knop 'Sounds'. 2. Klik op de knop met het '+' symbool. 3. Selecteer de juiste audiobestanden. 4. Klik op de knop 'Open'. 2011 - Serge de Beer 8 van 27 apps@learningtour.nl
GameSalad vraagt of het om "Music" of "Sound" gaat. Aangezien wij korte geluidsfragmenten hebben, kies je voor "Sound". 5. Klik op de knop 'Import as Sound'. De bestanden zijn nu geïmporteerd. LearningPoint 2.5 - Een geluid aan een Actor koppelen Je hebt nu drie Actors met een afbeelding en drie geluidsbestanden. Deze moeten nu aan elkaar worden gekoppeld. 1. Dubbelklik op de meest linker 'Actor' (in mijn voorbeeld die met de afbeelding van het vliegtuig). 2011 - Serge de Beer 9 van 27 apps@learningtour.nl
2. Klik op het symbool van het 'slot'. 3. Klik op de knop 'Create Rule'. 4. Verander in de Rule de middelste optie 'Mouse button' in 'Touch'. 2011 - Serge de Beer 10 van 27 apps@learningtour.nl
5. Sleep de 'Behavior' 'Play sound' naar de Rule. 6. Kies bij het dropdown-menu 'Sound' het bijbehorende geluid. Je kunt nu de eerste Actor testen. Klik hiervoor op de knop 'Preview'. Klik je nu met de muis op de eerste Actor en (als het goed is) hoor je het geluid. Klik ook even snel achter elkaar voor een grappig effect. Oefening 3 Plaats deze geluiden ook onder de andere Actors, op dezelfde manier als je dat in het vorige LearningPoint hebt gedaan. Test of bij het klikken op de Actors het geluid afgespeeld wordt. Een veel voorkomende fout is het niet veranderen van 'Mouse button' in 'Touch', in de Rule. In dat geval klinkt het geluid bij iedere willekeurige klik met de muis (of, als het later een ipad App wordt, bij aanraking van elk punt op het scherm). Einde oefening 3 2011 - Serge de Beer 11 van 27 apps@learningtour.nl
LearningPoint 2.6 - Muziek laten horen Voor de volgende instructie heb je een muziekbestand nodig in MP3-formaat. Het maakt niet uit wat voor muziek het is. Het gaat om de oefening. Eventueel kun je iets uit itunes halen. Sla dit op als "music.mp3". Mocht het echt niet lukken, dan heb ik nog het bestand "music.mp3" in de aanbieding, waarin ik op virtuoze wijze het muziekstuk "Boer, er ligt een kip in het water" ten gehore breng. Ik mail het je graag. 1. Importeer het MP3-bestand in GameSalad (net zoals bij LearningPoint 2.4). 2. Klik op de knop 'Import As Music'. 3. Maak een nieuwe Actor met de naam "Play the music". 4. Plaats de Actor 'Play the music' in de Scene. 2011 - Serge de Beer 12 van 27 apps@learningtour.nl
5. Dubbelklik in de Scene op de Actor 'Play the music'. 6. Klik op het 'symbool van het slot' om de Actor te kunnen bewerken. 7. Sleep het muziekbestand "music.mp3" naar de Actor. 8. Zet een vinkje bij 'Loop'. Je kunt nu testen of er achtergrond muziek is door op 'Preview' te klikken. Uitleg over direct slepen, geen Rule en Loop Direct slepen Je hebt net het bestand "music.mp3" direct gesleept naar de Actor. Dus zonder eerst een Behavior aan te maken. Dit is een snelle methode om een geluidsbestand aan een Actor te koppelen. GameSalad bedenkt dus zelf welke Behavior daarbij hoort. Geen Rule Het is je misschien opgevallen, dat we geen Rule hebben geplaatst in de Actor "Play the Music". In dit geval is dat ook nog niet nodig. Een Rule heeft altijd een bepaalde voorwaarde (Actor wordt aangeklikt, minimaal zoveel punten etc.). Wanneer je geen Rule plaatst, wordt de Behavior direct uitgevoerd bij het starten van de Scene. Loop Door een vinkje te plaatsen bij 'Loop' wordt het geluidsbestand steeds herhaald. Zet je dit vinkje niet, dan wordt de muziek slechts één keer afgespeeld. Eind uitleg 2011 - Serge de Beer 13 van 27 apps@learningtour.nl
LearningPoint 2.7 - De muziek uitzetten Omdat je niet altijd muziek wilt hebben, gaan we nu een knop maken, die de muziek uit kan zetten. 1. Verstop de Actor 'Play the Music' buiten beeld. Hoewel de Actor niet meer zichtbaar is, wordt de muziek gewoon afgespeeld. 2. Plaats een nieuwe Actor op de Scene met de naam "Stop the Music". 3. Maak de Actor 'Stop the Music' rood. 4. Dubbelklik op de Actor 'Stop the Music'. 5. Klik op het 'symbool van het slot' om de Actor te kunnen bewerken. 2011 - Serge de Beer 14 van 27 apps@learningtour.nl
6. Klik op de knop 'Create Rule'. 7. Verander in de Rule de middelste optie 'Mouse button' in 'Touch'. 8. Plaats in de Rule de Behavior 'Pause Music'. Als je nu op 'Preview' klikt, zal de muziek gaan spelen. Deze stopt, zodra je op de rode Actor klikt. LearningPoint 2.8 - De muziek verder laten spelen Het zou natuurlijk jammer zijn om de muziek niet weer opnieuw te kunnen laten spelen (behalve dan bij mijn "Boer, er ligt een kip in het water"). Daarom ga je nu nog een knop maken om dit voor elkaar te krijgen. In de meeste Apps wordt deze functionaliteit samengevoegd in één knop, maar dat vraagt om veel meer "programmeren". Dus eerst even via deze overzichtelijke weg. Ik maak de instructie nu iets compacter, omdat je een aantal vaardigheden al beheerst. 1. Plaats een nieuwe Actor in de Scene met de naam "Resume the music". 2. Maak deze Actor groen. 2011 - Serge de Beer 15 van 27 apps@learningtour.nl
3. Plaats een Rule in de Actor 'Resume the Music'. 4. Verander in de Rule de middelste optie 'Mouse button' in 'Touch'. 5. Plaats de Behavior 'Play music' in de Rule. 6. Zet de optie 'Sound' op 'Resume current music'. 7. Plaats een vinkje bij 'Loop'. Als je nu de App test, kun je met de rode knop de muziek stoppen en met de groene knop de muziek weer verder laten spelen. 2011 - Serge de Beer 16 van 27 apps@learningtour.nl
LearningPoint 2.9 - Het geluid harder en zachter zetten Ik vind het handig om het geluid te kunnen variëren zonder de knoppen op de ipad of de computer te hoeven gebruiken. In GameSalad kun je het geluidsniveau traploos aanpassen. Dit LearningPoint deel ik op in twee instructies, omdat het een vrij groot aantal stappen bevat. Voorbereiding van de Actor om het geluid zachter te zetten. 1. Maak een Actor met de naam 'Volume 1'. 2. Plaats de Actor 'Volume 1' in het venster. 3. Dubbelklik de Actor 'Volume 1'. 4. Ontgrendel het 'slot'. 5. Klik op de knop 'Create rule'. 6. Verander in de Rule 'Mouse button' in 'Touch'. 7. Sleep uit de lijst van Behaviors 'Change Attribute' in de Rule. We hebben nu alle attributen om het geluid zachter te kunnen zetten. Vervolgens kunnen we de echte actie gaan toevoegen. 2011 - Serge de Beer 17 van 27 apps@learningtour.nl
De juiste actie aan de Rule en de Behavior toekennen. 1. Klik op de 'knop met de drie puntjes' naast 'Change Attribute'. 2. Klik in de Attribute browser op 'Devices', 'Audio' en dubbelklik op 'Music Volume'. 3. Verander de waarde achter 'To:' in '0.2'. Test nu de functie van deze Actor in Preview. Als het goed is, wordt de muziek zachter als je op de Actor 'Volume 1' klikt. Oefening 4 Maak nu nog vier extra Actors om het volume in vijf stappen te kunnen bepalen. Het is belangrijk om te weten, dat het volume gevarieerd kan worden van 0 (geluid uit) tot 1 (geluid op z'n hardst). Alle waarden daartussen moet je scheiden met een punt, bijvoorbeeld 0.2 of 0.8. Het resultaat kan lijken op het onderstaande. Het verloop is: 0.2 0.4 0.6 0.8 1 Einde oefening 4 2011 - Serge de Beer 18 van 27 apps@learningtour.nl
LearningPoint 2.10 - Het gebruik van Attributes In het vorige LearningPoint hebben we voor elk geluidsniveau een aparte knop gemaakt. Ik wil je nu graag leren hoe je knoppen kunt maken, waarmee je het geluid harder en zachter kunt zetten in kleine stapjes. Bovendien maken we een indicator, waarmee je kunt zien hoe hard het geluid staat. Om dit te kunnen doen, moet ik eerst iets nieuws introduceren: Attributes. Hiermee kunnen we een bepaalde waarde (bijvoorbeeld hoe hard het geluid staat) bewaren in het programma. In andere programmeeromgevingen wordt ook wel gesproken van "variabelen". Over dit onderwerp zou je boeken vol kunnen schrijven, maar door ze toe te passen, leer je snel wat je met Attributes kunt doen. 1. Klik in het schermdeel 'Inspector' op 'Attributes'. 2. Klik op de knop met het symbool '+'. Hiermee maak je een nieuw Attribute. 3. Klik op 'real'. Dit is het type Attribute, dat je gaat gebruiken. 2011 - Serge de Beer 19 van 27 apps@learningtour.nl
4. Klik op de knop 'Choose'. 5. Dubbelklik op 'New Attribute'. 6. Verander de naam in "SoundVolume". 7. Bevestig de nieuwe naam met een druk op de knop 'Enter'. Je hebt nu een Attribute gemaakt, waar we zo in gaan zetten wat het huidige volume van het geluid is. Dit zijn de teksten, die worden uitgesproken bij de plaatjes, dus niet de muziek. 2011 - Serge de Beer 20 van 27 apps@learningtour.nl
Oefening 5 Voeg de onderstaande elementen toe aan het scherm. Actor met het opschrift '+' en de naam "SoundPlus". Actor met het opschrift '-' en de naam "SoundMin". Actor met een grijze kleur en de naam "SoundLevelBack" Actor met een rode kleur en de naam "SoundVolumeIndicator". Alle vaardigheden die je hier voor nodig hebt, heb je geleerd in Deel 1. Plaats de rode Actor op de grijze Actor, zoals in het onderstaande voorbeeld. Einde oefening 4 2011 - Serge de Beer 21 van 27 apps@learningtour.nl
LearningPoint 2.11 - De waarde van een Attribute aanpassen Een Attribute word waardevol als je de waarde kunt aanpassen. Hiermee "onthoudt" GameSalad hoe hard het geluid staat. 1. Dubbelklik op de Actor 'SoundMin'. (ontgrendel eventueel het slot, als dit nog niet is gedaan). 2. Klik op de knop 'Create Rule'. 3. Verander 'Mouse button' in 'Touch'. 4. Voeg de Behavior 'Change Attribute' toe. 5. Klik op de 'knop met de drie puntjes' naast 'Change Attribute'. 2011 - Serge de Beer 22 van 27 apps@learningtour.nl
6. Klik in de Attribute Browser op 'Game' en dubbelklik op 'SoundVolume'. 7. Klik op de 'knop met de schuine E' naast het veld 'To:'. 8. Klik in de Expression Editor op de 'knop met de pijl naar beneden'. 9. Klik op 'Game' en dubbelklik op 'SoundVolume'. 10. Typ achter het veld van de formule "-0.2". (zoals in het onderstaande voorbeeld) 11. Klik op de 'knop met het groene vinkje'. Oefening 6 Waarschijnlijk voel je de oefening al aankomen. Net zoals je het volume naar beneden kunt bijstellen, moet je het natuurlijk ook harder kunnen zetten. Plaats exact dezelfde Rule in de "+ knop", met dat verschil, dat er nu "+0.2" wordt opgeteld bij SoundVolume. Einde oefening 6 2011 - Serge de Beer 23 van 27 apps@learningtour.nl
LearningPoint 2.12 - Volume aanpassen op basis van een Attribute Uiteraard had je het volume direct kunnen laten beïnvloeden, maar ik wil je graag laten zien hoe je de waarde, die is opgeslagen in het Attribute, door de App heen kunt gebruiken. 1. Dubbelklik op de Actor 'plane'. (in mijn voorbeeld de Actor met de afbeelding van het vliegtuig) 2. Klik op de 'knop met de schuine E' naast 'Volume'. 3. Klik op 'Game' en klik op 'SoundVolume'. 4. Sluit de Expression Editor met een klik op het 'groene vinkje'. Je hebt nu de waarde van het Attribute 'SoundVolume' meegegeven aan het weergeven van het geluid. Dus druk je op de '+' dan wordt het geluid harder en druk je op de '-' dan wordt het zachter. Oefening 7 Pas dit ook toe op de andere twee Actors met een afbeelding. Eind oefening 7 2011 - Serge de Beer 24 van 27 apps@learningtour.nl
LearningPoint 2.13 - Omvang van de volumemeter aanpassen Natuurlijk kun je horen hoe hard het geluid staat. Maar een visuele weergave is natuurlijk ook wel makkelijk. Daarom gaan we nu de rode "SoundVolumeIndicator" aanpassen aan het volume. We doen dit nu op een eenvoudige manier. Later in de cursus zullen we dergelijke aanpassingen ook op basis van berekening gaan doen. 1. Open de Actor 'SoundVolumeIndicator'. 2. Klik op de knop 'Create Rule'. 3. Verander 'Actor receives event' in 'Attribute'. 4. Klik op de knop met de 'drie puntjes' en kies 'Game', 'SoundVolume'. 5. Verander de waarde '0' in '1'. Hier staat nu eigenijk: "als het geluidsniveau gelijk is aan '1', doe het volgende...". 2011 - Serge de Beer 25 van 27 apps@learningtour.nl
6. Sleep de Behavior 'Change Attribute' naar 'Drag your behaviors here'. 7. Klik op de knop met de 'drie puntjes' en kies 'SoundVolumeInidcator', 'Size' en 'Height' (dus de hoogte van deze Actor zelf). 8. Verander de waarde achter 'To:' in '94' (dit is de ideale hoogte in mijn voorbeeld, mogelijk moet je het aanpassen in jouw project). Oefening 8 Voeg ook de Rules toe voor de andere waardes van het volume. Bij elke Rule verandert dus de voorwaarde (als volume is gelijk aan X dan...) en de hoogte van de "SoundVolumeIndicator". Hier zul je wat voor moeten experimenteren. Extra! Eventueel kun je nog het Attribute 'Position.Y' toevoegen, om de hoogte van de onderkant van het rode vlak te veranderen. Dit is een pittige oefening. Mail me gerust als je er niet uitkomt. Einde oefening 8 2011 - Serge de Beer 26 van 27 apps@learningtour.nl
Opdracht bij deel 2 Het Soundboard Als afsluitende oefening voor Deel 2 moet je een App bouwen, die gebruik maakt van de mogelijkheid om geluiden af te spelen. Omschrijving van de App: Maak een "soundboard", waarbij afbeeldingen gekoppeld zijn aan geluiden. Een soundboard is een apparaat dat gebruikt wordt in de muziek- en mediawereld. Klik je op een knop, dan klinkt een geluid. Bijvoorbeeld handig voor een hoorspel of een theaterproductie. Dit is het Programma van Eisen: 1. De App bevat minstens 8 afbeeldingen met daarachter een geluid. 2. De App bevat twee muziekjes die onder de geluidseffecten moeten kunnen klinken (zoals in het voorbeeld in deze cursus). 3. Het volume van de effecten moet regelbaar zijn. 4. Het volume van de muziek moet regelbaar zijn. 5. Zorg dat het totale project niet groter is dan 5 Mb. Je kunt deze opdracht (alleen het projectbestand) insturen per e-mail naar: apps@learningtour.nl met als onderwerp: Cursus Maak je eigen Apps, Opdracht 2. Je krijgt dan een beoordeling van de opdracht. Copyright 2011, LearningTour, Serge de Beer Alle rechten voorbehouden. Niets uit deze uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand of openbaar gemaakt, in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door fotokopieën, opnamen of op enige andere manier, zonder voorafgaande schriftelijke toestemming van de uitgever. 2011 - Serge de Beer 27 van 27 apps@learningtour.nl