1. SM1205 Interactivity Topic 08: Sound Interaction Spring 2011SCM-CityU1

2. Examples Spring 2011SCM-CityU2

3. Sound Loading Load sound via File > Import > Import to Library – Sample music file in W drive Spring 2011SCM-CityU3

4. Sound Playing If you only need background music, drag & drop the music from the library to stage – Test movie! – Alternatively you can change frame property But in this case, you cannot control music playback Spring 2011SCM-CityU4

5. Sound Playing To control music playback, we need AS First need export sound for ActionScript – E.g., give class name as S0 S0 is data type for this music file in AS Spring 2011SCM-CityU5

6. Sound Playing (ref)ref S0 is a Sound object; So it can use properties and methods of Sound class. E.g., – Play music using play method – length property: length of current sound in milliseconds Spring 2011SCM-CityU6 var s:S0 = new S0(); s.play(); var s:S0 = new S0(); s.play();

7. Sound Playing (ref)ref Spring 2011SCM-CityU7 play(startTime:Number = 0, loops:int = 0): SoundChannel; – startTime: initial position (in milliseconds) at which playback should start Useful for implementing music pause 0 is its default value, which will be used when you specify no value – loops: how many times you want your music to loop after it finishes playing – Returning SoundChannel object – Instance of currently playing music – If you call play method multiple times, you will hear mixed sound

8. Stopping & Pausing Sounds To stop a single sound in a channel, use SoundChannel’s stop method To pause music, remember the current playing position before stopping the music Spring 2011SCM-CityU8 var channel:SoundChannel = snd.play(); channel.stop(); var channel:SoundChannel = snd.play(); channel.stop(); var position:Number = channel.position; channel.stop(); // pause... snd.play(position); // play again var position:Number = channel.position; channel.stop(); // pause... snd.play(position); // play again

9. Class Exercise: Simple Music Player Spring 2011SCM-CityU9 btnPlay btnPause btnStop Functionalities – Play – Pause – Stop MouseEvent.CLICK event listeners When play button being click, (re)play music or play music at the paused position, depending on if the music is under pause or not

10. Class Exercise: Simple Music Player What if play button is clicked for multiple times – Sound and SoundChannel do not have method to let you check if the music is playing or not – Hint: introduce a position variable If position != 0, play at paused position Otherwise, stop currently playing music and play at the beginning Spring 2011SCM-CityU10

11. Changing Sound Volume & Pan SoundTransform (ref)ref – SoundTransform(vol:Number = 1, panning:Number = 0) – pan: left-to-right panning of the sound Ranging from -1 (full pan left) to 1 (full pan right) – volume: volume, ranging from 0 (silent) to 1 (full volume). Spring 2011SCM-CityU11 var trans:SoundTransform = new SoundTransform(); trans.volume = 0.5; trans.pan = -1; channel.soundTransform = trans; var trans:SoundTransform = new SoundTransform(); trans.volume = 0.5; trans.pan = -1; channel.soundTransform = trans;

12. Class Exercise Using mouse movement to control volume and pan values – y = stageHeight  volume = 0 – y = 0  volume = 1 – x = stageWidth / 2  pan = 0 – x = 0  pan = -1 – x = stageWidth  pan = 1 Spring 2011SCM-CityU12

13. Visualizing Channel Amplitude To get amplitude at any moment, use SoundChannel’s properties – leftPeak, rightPeak From 0 (silent) to 1 (full amplitude) Note: since soundTransform changes the volume/amplitude of entire channel, it also influences values of leftPeak/rightPeak Spring 2011SCM-CityU13

14. Visualizing Channel Amplitude Many ways to visualize amplitude values – E.g., use them as scaling factors to scale vertical bars barLeft.scaleY = channel.leftPeak; barRight.scaleY = channel.rightPeak; Spring 2011SCM-CityU14

15. Music Resources Search on the Internet – Be careful with copyright issue Spring 2011SCM-CityU15

16. Class Exercise Add sound effects to Air Raid example – E.g., when firing bullets, plane explosion Spring 2011SCM-CityU16

17. Example: Digital Piano Spring 2011SCM-CityU17

18. Example: Digital Piano Start with the skeleton program in W drive Spring 2011SCM-CityU18 k1k2k3k4k5k6k7k8

19. Keyboard Event KeyboardEvent.charCode: code of the key being pressed – E.g., charCode == 97, if “a” is pressed String.fromCharCode converts code to character Spring 2011SCM-CityU19 stage.addEventListener(KeyboardEvent.KEY_DOWN, onPressed); function onPressed(e:KeyboardEvent):void { var key:String = String.fromCharCode(e.charCode); trace(e.charCode, key); } stage.addEventListener(KeyboardEvent.KEY_DOWN, onPressed); function onPressed(e:KeyboardEvent):void { var key:String = String.fromCharCode(e.charCode); trace(e.charCode, key); }

20. Both Flash and your testing movie listen to keyboard events By default, Flash has higher priority to capture keys being pressed Solution – Disable keyboard shortcuts Keyboard Event Spring 2011SCM-CityU20

21. Map Keyboard to Music Notes Given a key pressed, how to know which note should play? Let’s build an index map using Object data type Spring 2011SCM-CityU21 var keys:Array = ["a", "s", "d", "f", "j", "k", "l", ";"]; var notes:Array = [new S1(), new S2(), new S3(), new S4(), new S5(), new S6(), new S7(), new S8()]; var keys:Array = ["a", "s", "d", "f", "j", "k", "l", ";"]; var notes:Array = [new S1(), new S2(), new S3(), new S4(), new S5(), new S6(), new S7(), new S8()];

22. Object Data Type Object data type is like a more powerful Array – Array always uses integer indices – Object accepts String as index Spring 2011SCM-CityU22 var dictionary:Object = new Object(); // initialize mappings dictionary["hello"] = "Used to greet someone"; dictionary["world"] = "People as a whole; the public"; dictionary["coursecode"] = 3124; // use mappings trace(dictionary["hello"]); trace(dictionary["world"]); trace(dictionary["coursecode"]); trace(dictionary["code"]); // output "undefined” var dictionary:Object = new Object(); // initialize mappings dictionary["hello"] = "Used to greet someone"; dictionary["world"] = "People as a whole; the public"; dictionary["coursecode"] = 3124; // use mappings trace(dictionary["hello"]); trace(dictionary["world"]); trace(dictionary["coursecode"]); trace(dictionary["code"]); // output "undefined”

23. Map Keyboard to Music Notes Build an index map Usage examples – notes[indexMap[“a”]] means “Do” indexMap[“a”]  0 – notes[indexMap[“s”]] means “Re” Spring 2011SCM-CityU23 var indexMap:Object = new Object(); for (var i = 0; i < keys.length; i++) { indexMap[keys[i]] = i; } var indexMap:Object = new Object(); for (var i = 0; i < keys.length; i++) { indexMap[keys[i]] = i; }

24. Class Exercise Tasks – How to avoid playing a note for multiple times when the key keeps pressed? – Add some visual effect to show which key is being pressed Spring 2011SCM-CityU24

25. Accessing Symbol Instances in AS Use root property – root is an instance of Object data type – So use [] operator to access symbol instances Syntax – root[instanceName] E.g., root[“k1”]: the first key root[“k” + index]: key with certain index Spring 2011SCM-CityU25