[DEMO] Dynamic Fade In & Out using SM2 background audio

Jul 25, 2015

Alexandros Anoyatis
By Alexandros Anoyatis

Ok, this one was a must do for me during the design stage of what never became my Articulate Guru 15 entry. I had long ago been able to use Soundmanager in projects where background audio was required, but never really felt like I had complete control.

 



This little demo works around some of the well-reported limitations using dynamic fades controlled by a single variable (well, more like...two). So everytime you want to lower the volume or completely turn it off you'll be able to do it by changing the value of just one variable.

View Demo

Story file - See attachment below.

INSTRUCTIONS (i.e. How to edit the example file for own use)

1) Publish the story once and copy the folder generated by the webobject (should be named 6ot4STUqXpR) somewhere on your computer.
2) In your new folder, replace 6ot4STUqXpR/audio/main.mp3 with the audio file of your choosing.
3) Then go back to the source story and remove the webobject from slide 2.1 and add it again pointing to the index.html of the folder you copied (and edited in step 2).
4) Republish the story - a new webobject folder will be created (with a different 11 character ID). Note that down.
5) Replace all instances of '6ot4STUqXpR' with the new ID in :
a) the 1st slide trigger in Slide 1.1
b) layer trigger inside Layer 'Audio Play' on the Master slide
6) Remove unnecessary clutter (play/pause buttons etc.) - they are only used as an example. Or you can keep them if you require user intervention.

Finally, you can control play by incrementing variables audioPlay, audioPause, audioResume, audioStop and...

audioVolume: this last one can be set to 0 for complete fade out, 100 for fade in, or any other number in between - the script automatically decides whether it should fade in or out depending on the previous audioVolume value.

Hope you like it.

Enjoy,
Alex

15 Replies
Parashuram Vhaval
over 8 years ago07/27/15 at 7:29 am (UTC)

Great work Alexandros.

I was just exploring source file that you have  provided. I did not understand, what purpose is behind variables "audioPause, audioPlay, audioResume and audioStop. I guess these variables are not making any significant difference. Please correct me if I am wrong.

Again Very great work, really like it. 

Alexandros Anoyatis
over 8 years ago07/27/15 at 9:33 am (UTC)

@Nancy
What I like about this is that with a little bit of extra coding you can potentially define the duration of each fade too.

@Parashuram
They are. They fire the layer that corresponds to an action via listener triggers. The value in them does not matter though, and you could combine in just one variable if you want.

Alexandros Anoyatis
8 years ago02/15/16 at 8:19 pm (UTC)

Hi Mike,

If you set the audioVolume variable equal to a different value than what it currently has, it should run a sequence that increments/decrements the actual volume (audioVolumeOld) to the percentage value that you set (you should notice audioVolumeOld running through an iteration as soon as you click outside the textbox).

I've set the trigger as, "Change value of audioVolume to x when textbox loses focus" because of the actual textbox, but you can use any event you like.

But make sure you're not running or previewing this locally as the functions are being run in JS.

Vine demo of the initial test (functionally identical to the story attached here).

The 1% increment/decrement is currently set to constantly occur every 50ms (but you can change that value to get a faster/slower fade in the Audio Fade In Out Master Slide Layer's JS trigger (Lines 4 & 6).

Let me know how it goes.

Hope this helps,
Alex

Alexandros Anoyatis
8 years ago02/15/16 at 10:42 pm (UTC)

This was designed to work with only one background audio file.

You'll need to change some code (on the Masters) around to accomodate 3 (or more) different background audio files, but it's perfectly doable.

Also, inserting the additional mp3's in your folder should still occur in Step 2 as described above, so by doing so it means you will have to redo Steps 3-6 again (no way around that I'm afraid). This is also true if you just want to simply replace that 1 audio file the template is designed for.

I'm very interested to see how you'll be using this and provide some potential feedback in the process (screenshots mostly welcome).

Thanks,
Alex

Alexandros Anoyatis
8 years ago04/08/16 at 8:56 pm (UTC)

Hi Charlie,

Here's the screenshot of the layer and the exact number you need to change.



The number is milliseconds, so if you need to Fade In/Out faster, you should go with a number lower than 50 (but not less than 1).

You can also have different speeds for each type (the first "50" Fades Out, the seconds one Fades In).

Hope this helps,
Alex

Alexandros Anoyatis
5 years ago02/07/19 at 7:32 pm (UTC)

There are 2 things I would check.

1) Check whether the folder generated by the webobject has changed. If so, the reference inside the js triggers should change as well (see OP for detailed steps on how to do this).

2) For some unknown reason, sometimes a variable does not fire when using a "When timeline starts" event trigger. This is a well known bug that has carried over from the SL2 version. To get around this I use a "When timeline reaches 0.1sec" event in place - that works every time.

Hope this helps,
Alex

This discussion is closed. You can start a new discussion or contact Articulate Support.