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 
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)
Components:
Overview
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.
Overrides
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.
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.
Animations
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!