Forum Discussion
First time trying AUDIO TRIGGERS
Searching the archives the past few days, I see about a million people have asked some version of "How to get audio to play across all slides?" But I couldn't find anything on my music-related question:
What's the step by step to show an image on a slide, and have the user be able to click my "play" button (beneath the image) to play the audio I've associated with that image?
They also need to stop the playback with the "stop" button I've created. I have no plans for a rewind, pause or fast forward button. The course is related to audio, so these audio clips are not just background music for the course. Once they've played the audio (and maybe replayed it a couple times) they can click NEXT and move to the next slide.
I'm relatively new to the platform less than a year, but I know this has something to do with layers and triggers. Can someone give me a Dummy's walkthrough for this specific challenge? Trial and error and Googling is not serving me well so far, going on 2 days now.
Appreciate being spoon-fed a solution. THANKS!
Hi, James.
Thank you for reaching out!
I created a short Peek 360 recording (3mins) with an overview of using audio triggers. In my example, I used the Text-to-speech audio, but the same steps would apply to an audio file you insert from your computer or record from within Storyline.
If you want to only have one button that plays and pauses your audio, you can use the steps in the article below:
I hope this helps!
Hi Maria-
Thank you so much for the detailed reply and walkthrough. Apparently I went
down the wrong path based on wrong assumptions of how to approach this.
I'll get back to you again once I've applied the steps you outlined, or if
I run into any other issues.The peek screenshare was much easier for me to process than the
triggers/toggle tutorial at this point. But I think I just need more
experience using that functionality.Once again, I really appreciate the time you took to help me out with this,
and I'll check in with you again with my results.James
Thanks so much, Maria!
Attached is my screenshare reply.
James
Hi James,
I'm so happy to hear that Maria was able to assist you with this! I wanted to quickly point out that I don't see an attachment included in your previous post. You can upload an image by selecting Add Attachment.
Please let me know if you have additional questions!
Hi Kelly. Interesting- I replied from my email, so I guess attachments don't forward when doing it that way. Sorry about that. Here it is, attached.
Thanks!
James
Hi, James.
Thank you for your screen recording!
I created a Peek 360 recording (3mins) with a couple of suggestions that I hope will work for you:
- Using layers (similar to what you have now)
- Using states
Let me know if you have additional questions!
Back at ya, Maria. That was really useful and using states got me past that sticking point. Thanks very much!
Peek Screen recording attached.
Thanks so much, again.
James
Hi, James.
Thank you for the recording and update on where you are in the project!
A few tips:
- For your hover, it's better to use a transparent fill on a shape, than no fill.
Think of a window:
-
- Shape with no fill = window open. You can touch the frame of the window, but the middle is open.
- Shape with transparent fill = window closed. You can touch both the frame and the glass.
You want to make sure the shape has a fill, and then you can adjust it to 100% transparency. This will help with the hover behavior in your project. See below:
In the preview below, the top object has no fill, and the bottom one has a transparent fill:
You also asked about the different states. Take a look at the articles below for information on built-in and custom states:
- Storyline 360: Definition of Built-In States
- Everything You Need to Know About States in Storyline 360
I hope this helps!
Maria - Been meaning to ask you: how did you create these mini screencap visual demos above? What are the steps? I really need to do this to explain functions and locations for my EFL students.
Hi James,
Happy to step in here. Maria used a tool called Snagit to make short recordings that are then saved as GIFs. You can download it here if you want to check it out.
- For your hover, it's better to use a transparent fill on a shape, than no fill.
- Hi Maria. That tip about filling with transparency worked like a charm. Thanks much!One thing- it seems that works for "shapes", however, I have another slide where the play/pause/stop objects are actually "icons". When I explore the format of those objects, their status is already "filled" (not "no fill").The tricky thing is that these icons have transparent-looking spaces within them. And playing around with the "fill color" doesn't affect those spaces, but changes the color of the solid portions. The point is, mousing over the transparent spaces is treated like actual no fill by the cursor. To make it odder, this only happens with the play and pause icons, not the stop icon (even though it too has open space within it).Quick Peek attached. Thanks!
Hi, James.
A quick way to solve the issue with the icons having spaces is to insert a transparent shape that covers the icon in its Normal state.
In the example below, I left the outline on to make it easier to show you, but you can remove it, so the icon looks exactly the same as before:
You can also take a look at this conversation for additional suggestions:
I hope this helps!
The transparent shape overlay worked like a charm, Maria. Thanks heaps!
Now I'm still working on other elements of the project. But I think I've
gotten a handle on the issues that were throwing me off initially.Will update you later if you're interested.
Thanks again!
James
