#ID6WC – Amp Quiz: How-To

Very glad people liked the Amp Quiz example for #ID6WC and thank you so much Girly Geek for asking about how I created it. Le me walk you though and also here’s the story file so you can play with it too 🙂

This is a simple Storyline 360 one slide piece that uses dials, states and layers.

First, under slide master I created the background and tried to emulate an Amp. Using the content library I found the speaker front look and for the top panel used shapes.

Back in creation and again from the content library I found a switch and a voltage dial to add to the upper panel. A small grey circle shape next to the switch, and the dial itself (Insert >Dial) which can be formatted. Then to using a free online logo creator I created Fenshall (Fender/Marshall – geddit!) which I changed to grey tones in paint.net

There is a great Dial tutorial on Articulate here 

I chose a start value of 0 and end value of 5 with each step value 1. The dial auto lays out the points (joy!) so just put in the numbers using text.

I found 5 pieces of royalty free classical music from http://www.freemusicpublicdomain.com/

When the dial turns it is a variable and in this slide each variable would relate to showing a layer. So I created 5 layers, inserting one piece of music per layer. Then it is simply a case of setting your triggers on the base layer

Show layer (insert layer name) > When the dial turns  > If the dial equals (position). (For Dial = 0, I made it show slide so it always returns to the base layer). And remember to hider other layers!

Now time to play with states – lots!

Remember the grey circle – I created a new state for it (called new state because I am that inventive!) where it was coloured green with a big edge glow. Then add a trigger so if the power switch is click it shows the new state – powerlight is on!

For the voltage dial, I took it to paint.net and move the needle, added this ontop of the volt picture already there. Set the normal state to the one with the dial on zero and the one with the needle ‘up’ to new state. Set a trigger that shows new state if the dial is not equal to 0 – in others words when you turn the dial, it looks like the needle has moved!

Likewise for the instruction caption and text – set a new state where it is not shown and a trigger to show that state if the dial is not equal to 0.

Back on the layers, I placed 3 buttons across the amp and more states fun. Under states change the colour of the button to green or red depending on whether it is the correct or incorrect answer when the button is ‘down’ and ‘visited’. This really simple state change gives an immediate visual feedback on whether you’ve clicked the correct button or not. Of course you could add more triggers and show feedback etc but i didn’t want that – I wanted this is be a really quick, obvious do you know the name or not.

I think dials are a great change and especially if you are looking to create a simulation or setting where dials would naturally appear like an amp or cooker. One word of warning though – if users are going to access through a mobile phone/small touch screen it does work but can be fiddly for them so may not be the best choice in that scenario.



Please feel free to comment!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: