Sound fade out

Report · Aug 24, 2018

Hello,

i need to fade out my sound on any keyframe.

If i click on the sound keyframe i can't choose "effects" to fade out the sound.

Pleas tell me what's wrong or what i can do.

P.S. it's a mp3 file.

Thank you for helping!

Report · Aug 24, 2018

Hi.

The effects are only available in the Animate CC IDE for AS3 documents.

If you're using an HTML5 Canvas document, than you're gonna need to use code to apply effects as far as I can tell.

Regards,

JC

Report · Aug 24, 2018

Hi,

thank you for Info.

Yes i have a HTML5 Canvas duocument 😞

Do you know ich code i have to use to fade out my sound?

Or do you know where i can finde a code tutorial or snippet for it?

AS is long ago for me

Report · Aug 24, 2018

Sure.

Here is an example of how to fade the sound in and out.

I know it will look 'too much" at a first glance, but I'm giving you an approach I use in real world projects. I could've only copied and official example of the docs and adapted to you, but it would not be enough, IMO.

To give you a more direct answer:

- Just call the playSound function like this: exportRoot.playSound("gas", "bgm");

- Then fade it with a tween: createjs.Tween.get(exportRoot.playlist[exportRoot.sounds["gas"].id]).to({volume:0}, 2000);

JavaScript code:

this.soundCount = 0;
this.playlist = {};
// SETTINGS
// path to where the sounds are stored
this.folders =
{
    bgm:"sounds/bgm/",
    sfx:"sounds/sfx/"
}
// sounds settings. You're gonna play and fade sounds using their "id" property
this.sounds =
{
    city:  {type:"bgm",  id:"city",  file:"City_Plaza.mp3",                   volume:0.5},
    trip:  {type:"bgm",  id:"trip",  file:"Easy_Trip_Trap.mp3",               volume:0.6},
    gas:   {type:"bgm",  id:"gas",   file:"Gas_Pedal.mp3",                    volume:0.6},
    bonus: {type:"sfx",  id:"bonus", file:"190019__aiwha__hit-on-wood-3.wav", volume:0.4}
};
// FUNCTIONS
this.start = function()
{
    exportRoot.loadSounds();
};
// sounds need to be loaded before trying to play them
this.loadSounds = function()
{
    createjs.Sound.registerPlugins([createjs.WebAudioPlugin]);
    createjs.Sound.alternateExtensions = ["mp3"];
    createjs.Sound.on("fileload", exportRoot.soundLoaded, exportRoot);
    for (var key in exportRoot.sounds)
          createjs.Sound.registerSound(exportRoot.folders[exportRoot.sounds[key].type] + exportRoot.sounds[key].file, exportRoot.sounds[key].id);
};
// this is something I never know if I'm doing right. Because we have to play the sounds and immediately stop them so it can be availabe and stored in a variable
// for future references. I dunno if there's a way of doing this without playing the sound first. We also check if the number of sounds loaded is equal to the number
// of sounds we set in the 'sounds' property so we can be sure that the app can be started
this.soundLoaded = function(e)
{
    exportRoot.playlist[e.id] = createjs.Sound.play(e.id);
    exportRoot.playlist[e.id].volume = exportRoot.sounds[e.id].volume;
    exportRoot.playlist[e.id].stop();
    exportRoot.soundCount++;
    if (exportRoot.soundCount == exportRoot.getTotalSounds())
          exportRoot.allSoundsReady();
};
// convenience function to play sounds by passing at least the sound id and the type. The type is important (in our case "bgm" and "sfX") because we don't want to stop a BGM
// when we play a SFX
this.playSound = function(soundName, type, loop = 0, soundToStop = "", volume = 1)
{
    if (soundToStop)
         exportRoot.stopSound(soundToStop);
    exportRoot.playlist[exportRoot.sounds[soundName].id].play({interrupt:createjs.Sound.INTERRUPT_ANY, loop:loop, volume:volume});
};
// convenience function to stop a sound
this.stopSound = function(soundName)
{
    exportRoot.playlist[soundName].stop();
};
// convenience function to get the total of sounds in the "sounds" property
this.getTotalSounds = function()
{
    return Object.keys(exportRoot.sounds).length;
};
// function called when all sounds are ready. It's here that we call all code that needs the sounds to be available
this.allSoundsReady = function()
{
    exportRoot.fadeInButton.on("click", function(e)
    {
          createjs.Tween.get(exportRoot.playlist[exportRoot.sounds["gas"].id]).to({volume:1}, 2000);
    }, exportRoot);
    exportRoot.fadeOutButton.on("click", function(e)
    {
          createjs.Tween.get(exportRoot.playlist[exportRoot.sounds["gas"].id]).to({volume:0}, 2000);
    }, exportRoot);
    exportRoot.playSound("gas", "bgm");
};
// here we initialize the app
this.start();

FLA download:

animate_cc_html5_fade_out_sound.zip - Google Drive

I hope it all make sense.

Regards,

JC

Report · Aug 26, 2018

Hi again,

thank you for helping, but i've convert my HTML5 Canvas document in a SA3 document.

Everything works fine, but if i export it as a video the fade out effect doesn't work.

The fead out effect only works in my swf file.

Report · Aug 27, 2018

Hi.

Would you mind sharing your FLA or at least a part of it where you're using fade out?

Thanks,

JC

Report · Aug 27, 2018

Hi,

i hope it works for you to download, otherwise i could do it in my dropbox

test.s-design.tirol/WIEDERHERGESTELLT_medpremium-jingle_ActionScript 3.0.fla.zip

Thans!

Report · Dec 20, 2018

Hey this is great, just wanna ask what if I just wanna have one button, like toggle button on and off sound fadein and fade out, can you give example with .fla file, thanks

Report · Dec 21, 2018

Hi!

Sure.

Here is:

JavaScript code:

this.folders =
{
     bgm:"sounds/bgm/",
     sfx:"sounds/sfx/"
};
this.sounds =
{
     city:  {type:"bgm",  id:"city",  file:"City_Plaza.mp3",                  volume:0.5},
     trip:  {type:"bgm",  id:"trip",  file:"Easy_Trip_Trap.mp3",              volume:0.6},
     gas:  {type:"bgm",  id:"gas",  file:"Gas_Pedal.mp3",                    volume:0.6},
     bonus: {type:"sfx",  id:"bonus", file:"190019__aiwha__hit-on-wood-3.wav", volume:0.4}
};
this.soundCount = 0;
this.playlist = {};
var folders = this.folders;
var sounds = this.sounds;
var soundButton = this.soundButton;
var soundCount = this.soundCount;
var playlist = this.playlist;
this.start = function()
{
     createjs.Sound.registerPlugins([createjs.WebAudioPlugin]);
     createjs.Sound.alternateExtensions = ["mp3"];
     createjs.Sound.on("fileload", exportRoot.soundLoaded, exportRoot);
     for (var key in sounds)
          createjs.Sound.registerSound(folders[sounds[key].type] + sounds[key].file, sounds[key].id);
};
this.soundLoaded = function(e)
{
     playlist[e.id] = createjs.Sound.play(e.id);
     playlist[e.id].volume = sounds[e.id].volume;
     playlist[e.id].stop();
     soundCount++;
     if (soundCount == exportRoot.getTotalSounds())
     {
          soundButton.on("click", exportRoot.fadeSound, null, false, {id:"gas", duration:500});
          exportRoot.playSound("gas", "bgm");
     }
};
this.playSound = function(soundName, type, loop = 0, soundToStop = "", volume = 1)
{
     if (soundToStop)
          exportRoot.stopSound(soundToStop);
     playlist[sounds[soundName].id].play({interrupt:createjs.Sound.INTERRUPT_ANY, loop:loop, volume:volume});
};
this.stopSound = function(soundName)
{
     playlist[soundName].stop();
};
this.getTotalSounds = function()
{
     return Object.keys(sounds).length;
};
this.fadeSound = function(e, data)
{
     var volume;
     if (e.currentTarget.toggled)
     {
          exportRoot.toggleButton(e.currentTarget, {outLabel:0, overLabel:1, downLabel:2});
          volume = 1;
     }
     else
     {
          exportRoot.toggleButton(e.currentTarget, {outLabel:2, overLabel:2, downLabel:2});
          volume = 0;
     }
     e.currentTarget.toggled = !e.currentTarget.toggled;
     createjs.Tween.get(playlist[sounds[data.id].id]).to({volume:volume}, data.duration);
}
this.toggleButton = function(button, frames)
{
     var listeners = button._listeners;
     if (!listeners)
          return;
     for (var key in listeners)
     {
          var listener = listeners[key][0];
          if (typeof(listener.outLabel) !== 'undefined')
               listener.outLabel = frames.outLabel;
          if (typeof(listener.overLabel) !== 'undefined')
               listener.overLabel = frames.overLabel;
          if (typeof(listener.downLabel) !== 'undefined')
               listener.downLabel = frames.downLabel;
     }
};
this.start();

FLA download:

animate_cc_html5_canvas_fade_sound_on_toggle.zip - Google Drive

I did some tweaks in the code structure but in general things are the same.

I've included a handy function to toggle the default button that Animate CC uses.

I hope this helps.

Regards,

JC

Adobe Community

Sound fade out