AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Sound in Action Script "The games of a people reveal a great deal about them.“ Marshall McLuhan

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Controlling sound Enhance animation and interactivity Engaging more user’s senses Establish the mood of the movie Use narration to accompany the story Give audible feedback to interactions Flash supports.WAV,.MP3,.AIF Sound class controls sound Start Stop Adjust sound volume Stereo effect

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Controlling sound sound object mySound=new Sound(); mySound.attachSound(“sound_name”); mySound.start ( seconds offset, loops); Seconds offsetnumber that determines how many seconds into the sound it should begin playing (from the beginning 0, or from a later point) Loopshow many times sound will play No parametersFlash playes sound once from the start

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Controlling sound mySound.start ( 0, 5); Plays sound from the beginning 5 times mySound = new Sound(); mySound.attachSound("guitar"); startButton_btn.onRelease = function() { mySound.start(0,5); } stopButton_btn.onRelease = function() { mySound.stop(); }

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Modifying sounds Flash allows to attach many sounds to the same sound object Start function will play the most current sound attached Volume control setVolume() Racing game- control the volume of the car engine sound as the cars pass by Pan control - control of the output through the left or right speaker setPan() Pong game – control the left and right hit wall sounds from the appropriate sides

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Modifying sounds setVolume(percentage of the full volume from 0 to 100) 100- maximum volume 0- silence setPan(number from -100 to 100) -100left speaker 100right speaker 0plays sound from both speakers equally

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Modifying sounds – 02soundobject_pan_volume.fla Open 02soundobject_pan_volume.fla from the Pickup folder

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Modifying sounds – 02soundobject_pan_volume.fla Drag the instances of the volume, left, right, both buttons on the stage and name them: volUp_btn volDown_btn leftSpeaker_btn rightSpeaker_btn bothSpeakers_btn

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Modifying sounds volUp_btn.onRelease = function() { mySound.setVolume(100); } volDown_btn.onRelease = function() { mySound.setVolume(20); } leftSpeaker_btn.onRelease = function() { mySound.setPan(-100); } rightSpeaker_btn.onRelease = function() { mySound.setPan(100); } bothSpeakers_btn.onRelease = function() { mySound.setPan(0); }

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Modifying sounds independently 03modify2sounds.fla Create separate sound objects with parameters that target specific movie clips Sound objects will be applied to different movie clips so that setVolume () and setPan () could control the sounds separately

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Modifying sounds independently 03modify2sounds.fla clip1= _root.createEmptyMovieClip("clip1", 1); clip2 = _root.createEmptyMovieClip("clip2", 2); mySound1 = new Sound(clip1); mySound2 = new Sound(clip2); mySound1.attachSound("music1"); mySound2.attachSound("music2"); start1Button_btn.onRelease = function() { mySound1.start(0, 1); } start2Button_btn.onRelease = function() { mySound2.start(0, 1); } leftButton_btn.onRelease = function() { mySound1.setPan(-100); } rightButton_btn.onRelease = function() { mySound2.setPan(100); }

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Transforming sounds 04soundtransform.fla More precise sound control Switch left / right speakers and stereo / mono dynamically setTransform () allows to set percentage of how much of the lefr /right channel will play through left / right speakers Properties of the sound transform object ll% value -how much of the left input plays in the left speaker lr% value -how much of the right input plays in the left speaker rr% value -how much of the right input plays in the right speaker rl% value -how much of the left input plays in the right speaker

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Transforming sounds 04soundtransform.fla mySound = new Sound(); mySound.attachSound("conversation"); startButton_btn.onRelease = function() { mySound.start(0, 5); } transformButton_btn.onRelease = function() { mySoundTransform = new Object(); mySoundTransform.ll = 0; mySoundTransform.lr = 100; mySoundTransform.rl = 100; mySoundTransform.rr = 0; mySound.setTransform(mySoundTransform); }

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Transforming sounds 04soundtransform.fla When we click Transform button Flash creates a generic object with properties (mySoundTrasnform.ll, mySoundTrasnform.lr, …) to hold the sound transformation information. This information then used by the setTransfrom () to change the distribution in the left and right speakers.

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Dynamic sound control 05dynamicsound.fla Sets desired volume level or speaker control draggable movie clip acting as a sliding controller The position of the movie clip is correlated with volume parameter of the setVolume () slider_mc movie clip groove_mc movie clip Groove_mc will limit the motion of the draggable slider_mc

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Dynamic sound control 05dynamicsound.fla slider_mc.onPress = function() { this.startDrag(false, _root.groove_mc._x, _root.groove_mc._y - 100, _root.groove_mc._x, _root.groove_mc._y); } slider_mc.onRelease = function() { stopDrag(); }

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Dynamic sound control 05dynamicsound.fla slider_mc.onPress = function() { this.startDrag(false, _root.groove_mc._x, _root.groove_mc._y - 100, _root.groove_mc._x, _root.groove_mc._y); } When user presses the slider_mc, startDrag () lets the user drag the specified movie clip and limits the position of the clip according to parameters

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Dynamic sound control 05dynamicsound.fla.startDrag([lock, [left, top, right, bottom]]) Lock A Boolean value specifying whether the draggable movie clip is locked to the center of the mouse position ( true ), or locked to the point where the user first clicked on the movie clip ( false ) left, top, right, bottom Values relative to the coordinates of the movie clip's parent that specify a constraint rectangle for the movie clip.

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Dynamic sound control 05dynamicsound.fla slider_mc.onRelease = function() { stopDrag(); } stopDrag() stops dragging setVolume(100) setVolume(0)

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Dynamic sound control 05dynamicsound.fla setVolume(100) setVolume(0) Correlates the y position of the slider_mc with the setVolume() globalToLocal()converts the coordinates of the slider to coordinates relative to the groove

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Dynamic sound control 05dynamicsound.fla

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Dynamic sound control 05dynamicsound.fla slider_mc.onMouseMove = function() { myPoint = new Object(); myPoint.x = this._x; myPoint.y = this._y; _root.groove_mc.globalToLocal(myPoint); } The current x position of the slider is assigned to myPoint.x onMouseMove provides a good way to trigger volume change based on the slider position The global coordinates of myPoint are changed to local coordinates of the groove movie clip

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Dynamic sound control 05dynamicsound.fla Link slider position to volume setting myMusic_sound.setVolume(-myPoint.y); updateAfterEvent(); } Groove movie clip is 100 pixels tall Hence its local coordinates range from -100 to 0 To change this range to positive value negative sign(-) is used The result is a range from 100 at tope and 0 at bottom That can be used as the setVolume parameter

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Dynamic sound control 05dynamicsound.fla Create sound object and play button myMusic_sound= new Sound(); myMusic_sound.attachSound("music"); startButton_btn.onRelease = function() { myMusic_sound.start(0, 10); } Test the movie When you drag the slider up and down it dynamically changes the volume

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 External sounds 06externalsound.fla Internal sounds (from the library) increase the.swf file size loadSound () allows playing external sounds that can be kept outside flash movie Allows change the sound file easily Smaller flash file size mySound = new Sound(); mySound.loadSound("kennedy.mp3", true); loadSound("kennedy.mp3", true); Kennedy.mp3 name of the external sound file True streaming (true) or event (false) sound

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 External sounds 06externalsound.fla Streaming sounds start play as soon as enough data downloads one stream per sound object long passages of music narration Event sounds must be downloaded completely before they can play require start() command to plav short sounds sound effects

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Sound properties 07soundproperty.fla mySound = new Sound(); mySound.loadSound("kennedy.mp3", true); _root.onEnterFrame = function() { image_mc._alpha = (mySound.position / mySound.duration) * 100; image_mc._xscale = 50 + ((mySound.position / mySound.duration) * 50); image_mc._yscale = 50 + ((mySound.position / mySound.duration) * 50); } Positionmeasures the numbers of milliseconds a sound has been playing Durationtotal number of milliseconds in the sound

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Sound properties 07soundproperty.fla Modifies the image according to the sound length As the sound plays, the image slowly reveals itself When the sound ends the image is completely revealed _root.onEnterFrame = function() { image_mc._alpha = (mySound.position / mySound.duration) * 100; image_mc._xscale = 50 + ((mySound.position / mySound.duration) * 50); image_mc._yscale = 50 + ((mySound.position / mySound.duration) * 50); } (Position / duration) * 100 gives the percentage of sound that has downloaded Increases the alpha of the movie clip as the sound plays so that the movie clip begins transparent and ends opaque

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009 Detect sound event 07soundproperty.fla onSoundComplete()detects the end of the sound mySound.onSoundComplete = function() { image_mc.attachMovie("end", "ending_mc", 1); } When sound ends a movie clip “end” is attached to the image_mc movie clip. The registration point of the attached movie clip was modified in advance so that it appears in correct position.