Highlighted

Sound fade out

New Here ,
Aug 24, 2018

Copy link to clipboard

Copied

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!

TOPICS
Discussions

Views

712

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Sound fade out

New Here ,
Aug 24, 2018

Copy link to clipboard

Copied

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!

TOPICS
Discussions

Views

713

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 24, 2018 0
Adobe Community Professional ,
Aug 24, 2018

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 0
New Here ,
Aug 24, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 0
Adobe Community Professional ,
Aug 24, 2018

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 24, 2018 1
New Here ,
Aug 26, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 26, 2018 0
Adobe Community Professional ,
Aug 27, 2018

Copy link to clipboard

Copied

Hi.

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

Thanks,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 27, 2018 0
New Here ,
Aug 27, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 27, 2018 0
Community Beginner ,
Dec 20, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2018 1
Adobe Community Professional ,
Dec 21, 2018

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 21, 2018 0