sound in action script
DESCRIPTION
"The games of a people reveal a great deal about them.“ Marshall McLuhan. Sound in Action Script. 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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/1.jpg)
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
![Page 2: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/2.jpg)
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Controlling sound
Enhance animation and interactivityEngaging more user’s sensesEstablish the mood of the movieUse narration to accompany the storyGive audible feedback to interactions
Flash supports .WAV, .MP3, .AIF
Sound class controls sound
StartStopAdjust sound volumeStereo effect
![Page 3: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/3.jpg)
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 offset number that determines how many seconds into the sound it should begin playing
(from the beginning 0, or from a later point)
Loops how many times sound will play
No parameters Flash playes sound once from the start
![Page 4: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/4.jpg)
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();}
![Page 5: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/5.jpg)
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 controlsetVolume()
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 speakersetPan()
Pong game – control the left and right hit wall sounds from the appropriate sides
![Page 6: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/6.jpg)
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 volume0- silence
setPan(number from -100 to 100)
-100 left speaker100 right speaker0 plays sound from both speakers equally
![Page 7: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/7.jpg)
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
![Page 8: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/8.jpg)
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
![Page 9: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/9.jpg)
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);
}
![Page 10: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/10.jpg)
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
![Page 11: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/11.jpg)
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);}
![Page 12: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/12.jpg)
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Transforming sounds 04soundtransform.fla
More precise sound controlSwitch 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
![Page 13: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/13.jpg)
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);
}
![Page 14: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/14.jpg)
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.
![Page 15: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/15.jpg)
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
![Page 16: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/16.jpg)
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();
}
![Page 17: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/17.jpg)
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
![Page 18: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/18.jpg)
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.
![Page 19: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/19.jpg)
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)
![Page 20: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/20.jpg)
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
![Page 21: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/21.jpg)
AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009
Dynamic sound control 05dynamicsound.fla
![Page 22: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/22.jpg)
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
![Page 23: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/23.jpg)
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 tallHence 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
![Page 24: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/24.jpg)
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 movieWhen you drag the slider up and down it dynamically
changes the volume
![Page 25: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/25.jpg)
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 easilySmaller 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
![Page 26: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/26.jpg)
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
![Page 27: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/27.jpg)
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);}
Position measures the numbers of milliseconds a sound has been playing
Durationtotal number of milliseconds in the sound
![Page 28: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/28.jpg)
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 itselfWhen 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
![Page 29: Sound in Action Script](https://reader035.vdocuments.us/reader035/viewer/2022062222/56814ff8550346895dbdbffd/html5/thumbnails/29.jpg)
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.