Audio integration, components, and animations. I’m never gonna give you up!



It’s Friday and we’re back with some fun tips and tricks. It’s mostly a handful of simple techniques all put together to form a masterpiece. Firstly, feel free to click on the link below to witness it :slight_smile:

Now that you have been enlightened by that experience, let’s briefly overview some of the tricks used in my example.

The core of this prototype is the audio integration and then built-in animations or styles to make everything look better. I also included components in order to demonstrate their usefulness and features.

Audio Integration:
Let’s start with audio integration because I’m sure that’s the most interesting thing here. To do this you’ll need to inject some code. As daunting as it may sound you don’t need to actually have any experience with coding. You just need to have a hosted .mp3 file to link to and that’s basically it! Then you’ll be using “Open Link > Link to External URL” actions to insert the code provided below. Be sure to replace the INSERTSOURCEHERE with your link and also be sure to name the widget “audioplayer”. (I had to include an image because the left and right chevrons were seen as HTML tags from this forum post)

Then somewhere else, inject the code below in the same way. You can tell this will make the audio play.

javascript:void( $("#player")[0].play() );

You can check out how I did this in the .rp file attached. Now go forth and fill all your prototypes with noise!

Never Gonna Give You Up.rp (4.0 MB)

These are super great when you want to build something and reuse it within your prototype. Any changes made to the component will percolate to all instances where it is used—which is great! For the most part, these components will look and behave identically to each instance where you’ve used them.

Sometimes you still want to tweak each one a little bit. Like if you’re reusing a button or image but want it to look or say something different. Fortunately, you can achieve this with text and image overrides. You can see how I’ve done so with the “Play” and “Pause” SVGs.

The image icons that I am using are SVGs and sometimes when you are using them in your prototypes they may come out blurry on the canvas. Not to worry! When you preview or publish your prototype they will be crystal clear. However, if you want them to look crystal clear on the canvas you can also just right-click the SVGs and select “Transform Image > Convert SVG to Shapes”.

Isolate Selection Group
Another cool thing about components is the ability to toggle selection group isolation. Since components are made from the same source, you can uncheck “Isolate Selection Groups” in each instance in order to ensure they are part of the same selection group. Doing so will allow you to only select one at a time which I’ve integrated with my play and pause buttons.

Raise Events
Another really useful feature of components is the ability to raise the events out of the instance. Normally, you can’t add interactions to components at the page level but with Raised Events, you totally can!

Another quick overview: Events are the triggers and can be anything like a click, a button pressed, or even if it’s being moved. Actions are, as it sounds, what you want to happen after this trigger, like setting the text of something or well… playing some music!

Because I want my buttons to do different things, I’ve added a “Raise Event” action within my component instance. Then at the page level, I can now use that event I raised to do make one component instance play the music and the other to pause the music.

Apply Mouse Style Effects to All Widgets in Group
This feature is so great as well. Let’s say you have a MouseOver style effect on a widget but you want another widget to be able to trigger it as well. Just put the widgets in a widget group and check that setting. In my example, I wanted the MouseOver style effect on the rectangle underneath to also be triggered when the mouse goes over the image icon too.

Alright, now the last topic is the GIFs and animations. If you’re ever trying to add GIFs to your prototype, you will need to choose “No” when it asks whether you want to optimize it. As for animations… well, it’s pretty straight forward and I just wanted to line him up with that amazing city skyline every time.

If you liked this post don’t forget to smash that Like button!


Wow it’s great, it has helped me a lot to be able to introduce sound in one of my prototypes. Thank you so much!!!

I was trying to make the sound play by itself, that is to say that it has autoplay when the proto is launched, but then the button continues to do the On/Off function. Do you think it would be possible?


That’s great news! I’m glad to hear that you were able to get sound into your prototypes :slight_smile:

I’ve actually tried to get the audio to autoplay upon prototype loading (only for maximum comedic effect of course) but was unable to. If you are using Chrome as well, then I suspect this is because of a change they’ve implemented in order to prevent unwanted ads or audio from playing when navigating to websites.


I’ve run into this issue (blocked autoplay of sounds) in the past. My basic workaround is to require a click before the “actual” test/demonstration prototype starts. Here’s the critical part of Google Chrome’s autoplay policy (similar to other browsers):

The first bullet is the key. (Pre)Start your prototype with a (pre)click. You can have a dynamic panel or group that covers the entire screen/viewport and has a “Start” button that just hides this dp or group and launches the sound. If you are doing user testing and don’t want the user to have to click anything first, then have a test moderator click a Start button on the prototype.

I tested this out with the demo above on Windows 11, latest Chrome browser (ver 116) and it works. The “pre-click” must be on the same page or it won’t work. Here’s my demo test using the prototype above:
Never Gonna Give You Up -autoplay.rp (8.0 MB)

  • Page 0 attempts to have a pre-click on a separate page, loading Page 1 that has a Page Loaded event firing the Play button’s CustomClickEvent. The sound won’t play though until the user clicks a button on Page 1 (…following the existing interaction logic it would need to be the Pause button then the Play button–and then the sound plays.)

  • Page 1b uses a “Launcher” group and button click to get things going, but it leaves the prototype in an otherwise “unused” state–nothing happens until the mouse is moved. When a mouse movement is detected, the Play button is triggered and the sound “autoplays”. (I use the value of OnLoadVariable to make sure the autoplay is only triggered on the first mouse movement, otherwise the Pause and Play buttons won’t work correctly as the whole thing starts over on any and every mouse movement.) You could use a keypress, scroll, other gesture, delay, or system event to trigger the “prototype start” and the sound to play instead of the Page Mouse Move event.