Unmute/Mute Toggle Button HTML5 Canvas, Adobe Animate

[splitz78]

Hoping someone can help with this. I can't get it to work to save my life.

I have an animation I did years ago in Flash, and am trying to update it in Adobe Animate adding a mute/unmute toggle button and then export it as HTML/Javascript for use on a website.

There are 4 different layers of sound effects. I need all the sounds to be muted initially, showing the sound icon with a line thru it so that everyone knows its muted... then when clicked, remove the line and unmute all the sounds.

I have searched the discusions here and spent hours trying to figure out how to get this mute toggle button working, but alas, am having no luck at all. The Adobe Animate interface is a lot like the old Flash so I'm finding my way around there, but am really struggling with getting the Actionscript correct and tying it in with the button.

Here is a link to the current .FLA file I'm working with: https://drive.google.com/file/d/1lhNfWgcm7tzs0_f3vqe2lM56EIoTx1vq/view?usp=drive_link

This is the Actionscript I'm currently trying to use with the button...

var root = this;
var muteButton = root.muteButton;
root.toggleMute = function(e)
{
    createjs.Sound.muted = !createjs.Sound.muted;

    if (createjs.Sound.muted)
        root.toggleButton(e.currentTarget, {out:2, over:2, down:2});

    else
        root.toggleButton(e.currentTarget, {out:0, over:1, down:2});
};

root.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.out;

        if (typeof(listener.overLabel) !== 'undefined')
            listener.overLabel = frames.over;

        if (typeof(listener.downLabel) !== 'undefined')
            listener.downLabel = frames.down;
    }

    button.gotoAndStop(frames.out);
};

muteButton.on("mousedown", root.toggleMute);

[kglad]

just use a boolean to set and check if sounds are muted.

[splitz78]

Thanks, I wish that was as easy for me as it sounds, but my programming/actionscript skills are horrible.

I did try the one below before, that I had found in an old Youtube video, and I kinda understood what they were doing with it, but when I added it to my button and plublished to view, the whole animation just went black.

mute_btn.white_bar.visible=true;

function setVolume(vol){
	var volTransform:SoundTransform = new SoundTransform();
	volTransform.volume = vol;
	SoundMixer.soundTransform = volTransform;
}

var Mute:Boolean = false;
mute_btn.addEventListener(MouseEvent.CLICK, toggleMuteBTN);

function toggleMuteBtn(event:MouseEvent){if(Mute==true){Mute = false; setVolume(1);
	mute_btn.white_bar.visible=false;}

else{Mute = true; setVolume(0);
	mute_btn.white_bar.visible=true;}
}

[kglad]

that last snippet is actionscript 3, not javascript.

anyway, what are the sounds that you want to mute/unmute?  is it just a timeline (with the sounds attached) that you want to play once?  are they button sounds (eg, clicks)?  something else?

[splitz78]

It's a timeline with the sounds attached. There are 3 layers of sounds that play on and off when things appear during the animation, 1 of the sounds layers is birds chirping that plays continuously in the background. The whole animation runs in a loop. There are no button click sounds. If you want to take a look I uploaded the .fla file to my google drive. Link is in my original post.

[kglad]

move those sounds to a graphic symbol.  make sure the sounds are set to stream.

you can then add that graphic to your timeline that now contains your sounds.

you would then use gotoAndPlay() apllied to that graphic when you want sounds to play and stop() when you want them muted.

[kglad]

// initial settings (ie, muted)

this.mute_toggle = true;

this.sound_graphic.stop(); // graphic with your sounds set to stream

// end initialization

this.muteButton.addEventListener("click",muteF.bind(this));

function muteF(){

this.mute_toggle =!this.mute_toggle;

if(!this.mute_toggle){

this.sound_graphic.gotoAndPlay(this.currentFrame);

} else {

this.sound_graphic.stop();

}

}

[splitz78]

Thank you so much for providing the script. I converted all the sounds into one graphic symbol, labeled as sound_graphic, and added your script to the button. All sounds are muted on the animation playback, but I still can't get the button to work - to unmute/mute sound.

If of any use, I posted my updated fla file to my google drive:
https://drive.google.com/file/d/1OM8dosWQK8qle4Fts8TzzMMfwIuVXHiV/view?usp=drive_link

[kglad]

i sent a request from my gmail address.

[splitz78]

Accepted it.

[kglad]

there are problems in that file.  first, the sound in your sound_graphic symbol are not all set to stream. second, you still have sound on your main timeline.

[splitz78]

Thanks for taking a look. I left those other sound layers in hopes of easily being able to make adjustments if needed, and then duplicate and convert them into the sound graphic. I thought if I hid those layers it wouldn't matter for export. I took them out, but of course no change.

As for the sound graphic not all set to stream, when I edited the sound_graphic and viewed the layers it wouldn't let me set them to stream (greyed out). If I set them all to stream and them convert them to the sound graphic... I get the output that stream audio is not supported inside symbols.  I am obviously doing something wrong. Will have to try and research more about the correct way to convert my sound layers to a sound graphic set to stream.

[JoãoCésar · Accepted solution]

https://drive.google.com/file/d/1ImBb1s1tGOEggAplJzJ9S99pOJisSoo6/view?usp=sharing

I hope this helps.

Regards,

JC

[splitz78]

Thank you for sharing that JC! It's a step in a different direction at least. When I tested it, the visual toggle of the button is working, but no toggle of sound.... and my animation isn't playing.

[JoãoCésar · Accepted solution]

Sorry.

There's a stop call in the main function. You can remove that.

[splitz78]

Hey no problem, I removed that stop and all appears to be working beautifully. I am extrememly grateful you went above and beyond to work on this file, wow!! I'm a dig-and-learn kind of person, but really struggle with the programming side of things. And, I havn't touched flash since 2008 (of course Animate was totally new to me)... so this was definitly a challenge. I'm gonna study over what you did in the file and try and learn a few things. Again, so very appreciative of your help with this!

[JoãoCésar]

Awesome!

You're welcome!

[JoãoCésar]

Hi.

Just requested access to the file.

Regards,

JC

[splitz78]

Hi JC, I didn't see a share request in my email or spam from you. Maybe Google is slow at sending those out this morning. Anyway, I did change the privledges on the file so anyone with the link should be able to download.

https://drive.google.com/file/d/1OM8dosWQK8qle4Fts8TzzMMfwIuVXHiV/view?usp=drive_link