Fading out volume using TweenLite

I showed in my previous post how to change the volume of a playing sound. In this post I am going to show how to tween that volume using TweenLite.

The class we are going to do the tween on is the SoundTransform class. So we will first have to create our sound objects.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var someSound = new Sound(new URLRequest("MySound.mp3");
var someChannel = new SoundChannel();
var someTransform = new SoundTransform(1);//volume is set to the max
 
someChannel = someSound.play(0, 99999, someTransform);//The sound will start from 0 millisecond, will loop 99999 times and will use the someTransform SoundTransform
 
//the next lines are for fading out the volume
 
TweenLite.to(someSound, 1, {volume:0, onUpdate:updateChannel, onComplete:stopSound});
 
function updateChannel():void{
  someChannel.soundTransform = someTransform;
}
 
function stopSound():void{
  someChannel.stop();
}

As you can see, even if you modify the volume parameter of the SoundTranform it won’t do a thing. You also have to update the SoundChannel. You can’t also tween the SoundChannel.soundTransform.volume directly. It’s the same as when you tween colors using Color.interpolateColor, you have to modify an intermediate Object.

, , , ,

  1. #1 by Jack - April 8th, 2008 at 12:59

    Believe it or not, it’s actually easier than you think to fade the volume using TweenLite. It’ll take care of the intermediate object for you, and it’ll control the volume of any SoundChannel or MovieClip. Your code could be simplified to look like this instead:

    var someSound:Sound = new Sound(new URLRequest(“MySound.mp3″));
    var someChannel:SoundChannel = someSound.play(0, 99999);
    TweenLite.to(someChannel, 1, {volume:0, onComplete:stopSound});

    function stopSound():void{
    someChannel.stop();
    }

    stop();

    Oh, and by the way, you might want to check out TweenMax – it’s like TweenLite on steroids. I just launched it a few days ago and it includes a bunch of new features. Since it builds on top of TweenLite, it’ll do ANYTHING TweenLite can do, plus a bunch more.

    See more at http://www.TweenMax.com

    Thanks again for the great posts on how to more effectively use the TweenLite family of classes.

  2. #2 by peterjakes - October 7th, 2008 at 10:05

    I’m getting a ReferenceError: Error #1056: Cannot create property volume on flash.media.SoundChannel.

  3. #3 by Mikko - December 15th, 2008 at 18:06

    There’s an error in the source code:

    TweenLite.to(someSound, 1, {volume:0, onUpdate:updateChannel, onComplete:stopSound});

    This should be:

    TweenLite.to(someChannel, 1, {volume:0, onUpdate:updateChannel, onComplete:stopSound});

    That’s because it’s not the Sound object that we’re tweening but the SoundChannel.

  4. #4 by Ian - January 9th, 2009 at 18:05

    Awesome- Thanks for the help. Great advice as usual.

  5. #5 by Edward Davies - January 19th, 2009 at 23:40

    Hi, there’s a slight error in the code, it should read:

    TweenLite.to( someSound.soundTransform, 1, { volume: 0, onComplete: stopSound } );

    That should work decently.

  6. #6 by oliver - March 5th, 2009 at 11:32

    THANKYOU!!!!

  7. #7 by shawn - June 24th, 2009 at 20:51

    @Mikko
    No, it should be

    TweenLite.to(someTransform, 1, {volume:0, onUpdate:updateChannel, onComplete:stopSound});

    we are tweening the transform, and then applying it in function updateChannel()

  8. #8 by jose - October 16th, 2009 at 09:50

    @jack

    YOU ROCK. A year and a half later, and this just made my life so much easier. Been using tweenLite for a while now, freaking love it so.

  9. #9 by Erwan - October 22nd, 2009 at 10:39

    exactly!!!
    tweenlite has made my developers life so much easier…. It can’t believe it still helps my more than 1 year after!
    Thanks for the tip

  10. #10 by Aaron - November 4th, 2009 at 05:07

    Thank you. And thank you Jack. My volume is tweening! Couldn’t figure out which object to target.

  11. #11 by GrM - November 4th, 2009 at 11:39

    Thanks, it did the tricks !

  12. #12 by Dharmang - November 17th, 2009 at 06:39

    how to use dynamic sound with the tweenlite?

  13. #13 by bluekylin - December 5th, 2009 at 02:36

    oh,baby!

    TweenLite.to(someSound, 1, {volume:0, onUpdate:updateChannel, onComplete:stopSound});

    “someSound ” should be “someTransform”

    A-N-D
    this transform created some noise among the fade

  14. #14 by Organirama Crowded Rich Media - December 23rd, 2009 at 08:28

    A SIMPLER SOLUTION:
    GreenSock Tweenlite + Volume Plugin

    import com.greensock.TweenLite;
    import com.greensock.plugins.*;
    import com.greensock.easing.*;
    TweenPlugin.activate([VolumePlugin]);

    var snd:Sound = new Sound();
    var req:URLRequest = new URLRequest(“MySound.mp3″);
    snd.load(req);

    var trans:SoundTransform;
    trans = new SoundTransform(1, 0);
    var channel:SoundChannel = snd.play(0, 1, trans);

    TweenLite.to(channel, 4, {volume:0});

  15. #15 by Gabriel. - January 20th, 2010 at 18:29

    Access to undefined function in line 1 :

    TweenLite.to(someSound, 1, {volume:0, onUpdate:updateChannel, onComplete:stopSound});

    must i to create as3 tween class inside another file?.

    :O

  16. #16 by Dave - April 16th, 2010 at 01:39

    @peterjakes
    its the “onUpdate:updateChannel”

    just take it out, works without it if you use TweenPlugin.activate([VolumePlugin]);

    that was mentioned in comment #14

  17. #17 by Vusi Sindane - June 18th, 2010 at 11:23

    you should be tweening the soundTransformation object inttead of the channel, and then update the soundchannel. see eg belo

    //note that my example is to fade in the sound
    var sound:Sound = new music();//loading from library
    var tran:SoundTransform = new SoundTransform(0,0);

    //play with no volume
    var soundChannel:SoundChannel = sound.play(0,0,tran);

    //fade in the sound
    TweenLite.to(tran, 1, {volume:1,onUpdate:fadeSound});

    //update the soundTransformation
    function fadeSound():void
    {
    soundChannel.soundTransform = tran;
    }

    note you need to set the “volume” to “0″ if you wanna do opposite.

  18. #18 by Kelsey - October 11th, 2011 at 17:21

    If you use the included plug-in it’s really simple:

    import com.greensock.plugins.TweenPlugin;
    import com.greensock.plugins.VolumePlugin;
    import com.greensock.TweenLite;

    TweenPlugin.activate([VolumePlugin]);

    var snd:Sound = new Sound();
    var channel:SoundChannel = snd.play(0);
    TweenLite.to(channel, 1, {volume:0});

  19. #19 by S├ębastien ( Webdesigner – Flash developer) - November 4th, 2011 at 19:51

    Thank you ! Code mentioned in comment # 17 is fine.

  20. #20 by bob - December 19th, 2011 at 16:30

    Hi.

    When I launch multiple tween on multiple sound channel with method mentioned at comment # 17, I’m experiencing little “tic” sounds, in other words, it’s not 100% smooth.

    Any idea for this problem ?

    Thx.

  21. #21 by DrPelz - January 10th, 2012 at 17:09

    @ Vusi Sindane
    Thank you very much!:) Your solution works like a charm (I’m so sorry for having to say this but all other “solutions” failed so far for me).

  22. #22 by edere - May 28th, 2012 at 05:40

    @Kelsey

    Thanks for much simpler code!
    I nearly frustated wjavascript:document.tcommentform.submit();ith this thing.

(will not be published)
Subscribe to comments feed