SM1205 Interactivity Topic 08: Sound Interaction Spring 2012SCM-CityU1

SM1205 Interactivity

Topic 08: Sound Interaction

Spring 2012 SCM-CityU 1

Examples


Sound Loading

• Load sound via File > Import > Import to Library – Sample music file in W drive


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 2012 SCM-CityU 4

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


Sound Playing (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


var s:S0 = new S0();s.play();var s:S0 = new S0();s.play();

Sound Playing (ref)


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


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

Class Exercise: Simple Music Player


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

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


Changing Sound Volume & Pan• SoundTransform (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).


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;

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


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


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;


Music Resources

• Search on the Internet – Be careful with copyright issue


Class Exercise • Add sound effects to Air Raid example– E.g., when firing bullets, plane explosion


Example: Digital Piano


Example: Digital Piano

• Start with the skeleton program in W drive


k1 k2 k3 k4 k5 k6 k7 k8

Keyboard Event

• KeyboardEvent.charCode: code of the key being pressed – E.g., charCode == 97, if “a” is pressed

• String.fromCharCode converts code to character


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);

}

• 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


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


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()];

Object Data Type

• Object data type is like a more powerful Array– Array always uses integer indices – Object accepts String as index


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”

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 2012 SCM-CityU 23

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;

}

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


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


Documents

SM1205 Interactivity Topic 08: Sound Interaction Spring 2012SCM-CityU1