Last week Harpreet has placed a comment for one of my YouTube videos. If I could do a video about how to create a spin wheel effect in Articulate Storyline. Now, I didn’t want to reinvent the wheel, so what I did is I asked Joanne Chen, if I could create a video on her spin wheel interaction. In this Articulate Storyline tutorial, I will show you how Joanne set up her Articulates spin the wheel effect.
cta under video
Before I forget, you can find Joanne’s spin wheel interaction on the community forum, and you can download their Storyline 360 file, so you can use it for your own projects.
And I’ll put a link in the comments below to the download. Now let’s open Articulate Storyline and see how Joanne set up her spinning wheel interaction.
How to set up the spin wheel interaction
I opened Joanne’s Articulate Storyline file, and let’s look how she set up the spin wheel interaction. Let’s see what 4 objects she used on her slides. For instance, the first one here is a start button. And if you click this one, a few triggers will be executed. We’ll come back to that later. There’s a character with a thing that says, “Hit start to spin the wheel” and a balloon is in the image. If you uncheck this, you’ll see that the balloon will also disappear.
Now, here is an oval hotspot, and she did this so you can click on the dial below.
There’s some music that plays when the spinning wheel interaction is played. There’s a triangle here to check on which position of the wheel you’ve ended when the dial turns.
Here is the dial itself. There is a piece of the image. This image will stay, and this image will rotate because this is the dial itself.
If I uncheck this one and this one, and you’ll see this. And there’s also a here, a rectangle and this rectangle moves with motion paths. And on top a Ford is motion path. There are a fair bulls, and we’ll come back to this later. Let me show you how you can convert something to Dow. So I will jump to another scene. I’ve prepared something for instance of clock here. So if I want to go convert this one to dial, I go here to insert. I check dial, and I can here, say convert to dial, and you’ll see, it’s a dial.
Now, for instance, I can say 360. So my clock can now a third dial turn on certain 360 degrees. So this is how you can create a dial of any object that you want. It can be an image, but it can also be a group of objects. Now let’s go back to the slide of Joanne and see how she shares things up with the triggers. So let’s select the start button and see, which triggers there are on the start button. So if you click start and a variable stop will be set to false. The check, the state of overwhelm start is set to disabled. So this button will be, will disappear or will have another. I have another state.
Wheel variable
The wheel variable will set to zero and a rectangle to this variable of this rectangle. So let’s click this one again. Will move along motion path 3. When the user clicks, this one, when stop is false. So this means when stop is false, this motion path, this one moves along the motion path. And with the motion paths on this object, Joanne created a loop. So the rectangle will move up when the motion down completes and we’ll move down when the motion path up completes. And this way you can check if something is true or do something with variables. So let’s see which variables they’re attached on motion path 2. So you see here move rectangle 2. There’s this rectangle along motion path 4 when the animation motion path 3 complete. So this means that if it’s goes down and the animation completes, it will go up until a stop is true, but if stop is false, this rectangle will move.
So there’s a random number between 40 and 200 to wheel variable. When the animation motion path 3 completes, if stop is false. And when motion path 2 along motion path 3, when motion path 4 completes. So there’s the loop and at, a random number between 40 and 200 to wheel, when the motion path line completes and stop is false. Now let’s see when a stop is true and how we will continue. So there is an audio file on the slides and has a duration of 5 seconds. And when the audio file completes stop will be set to through, and the wheel stops spinning. And you’ll see here that the start over one set to normal, when audio completes the state of character, one, it will set to a review. So let’s see which that is character one, as a reveal state. So here, this is once you checks, when the wheel is turning and here, this is the revealed state with the result variable on it. So, and the result variable is the number on the wheel.
Result variable
And you can see here that it will jump to a specific slide. If the result is one, 2, 3, 4, 5 or 6, so you can do something with the corresponding numbers. And here also on audio file, you’ll see that the result variable will be set to one when audio competes. So when the audio is finished and if the wheel is between this number or this number, and this corresponds with the places on the circle here and this also for 2. So there are 2 places here because the number is here and also here. So, and it is for the number one, number 2, number 3, number 4, number 5 and number 6. So let’s see when you preview this one, how it will work, so click on briefly 2 slides and you’ll see that if I hit start, the wheel turns for 5 seconds and my outcome is 6. So here you’ll see that result is now 6, and I can now click on it. And now I cannot do it as in my preview, but if you publish the whole module, you will be able to go now to the page for number 6. So I can show you that. Let’s go story view with someone here.
So here you will. We was sent to the number 6, so you can hear specify content for number 6. Darryl’s also will be over here and we will be set to this number. So it is sets to not that we will be always set to this when the user clicks on the multiplied is on this button, it will be set to the search of initial state. You will jump back to the first page and you can spin the wheel again. So I’ll hope that you get some inspiration of this video. If you have ideas for new videos, place a message in my comments, and maybe your idea will be a video next week. Don’t forget to see in the comments for the download file of Joanne and the awareness. Also a blog post on a community forum, where she explains how she created the dial and we’ll reference also there. So have a great day and see you on next video.
