In this video I’ll show you some cool stuff that you can do with 3D models, and sliders, and dials in Articulate Storyline.
cta under video
Working with 3D objects in Storyline
In this demo project I have two slides with here a dial and a slider. Here is a 3D object. You can see that here I have all the states from this object, so if I’ll turn the dial or I’ll move the slider on the second slide you can view all the areas of the object. Now I will show you how I’ve created it. I did it with a little help of PowerPoint.
Create 3D object in Storyline
The first step is to open PowerPoint and open in 3D model. I open PowerPoint, I have the Dutch version but in English if you go to insert and you go to 3D models and you’ll click online sources you’ll see that there are lots of 3D models that you can insert in your PowerPoint presentation. I’ve chosen here, for the Electronics and Gadgets section, so I click this one and I’ll chose this laptop. So insert and PowerPoint has to load in the 3D model, and this can take a while, how quick your computer is.
Create images
PowerPoint has loaded my 3D image. Now if you click here you can drag it real fluidly. You can see that I can move the whole object around, but what I will do now, and I will place it back if I can like so, select this one and click here on 3D objects. Now if I click object I can create a screenshot of each step. So what I have done is I created screenshots of all these steps, copied them to Photoshop, and removed the backgrounds. The next step is back to Articulate Storyline.
Load images in Storyline as state
Now I have all my images and now I want to insert them into Articulate Storyline. There is a trick for it. If I go to insert, go to picture, picture from file. I’ll chose the first image of my 3D images, so I’ll chose this one, open. Now it covers my screen, so this is okay. Now I want all the states of the other images and Storyline do this automatically for you. If you click on edit state here you’ll see that here is a button that says, “Insert pictures as states.” What I will do now I will select the other pictures and click open. Now Storyline will load them as states, so you see that now all the states are a different view of my laptop object.
Add a dial in Storyline
The next step is to add a slider or dial and add variables. Let’s see how I’ve done this. First what I’ve done, I’ve created a dial. Standard dial in Articulate Storyline, no formatting whatsoever. What I say I want a dial that rotates 180 degrees. The starting value is one and the end value is 14, because I have 14 photos. The initial value is one and the step value is one, so that means every time a dial moves a position there is one added to the dial variable.
Creating triggers for the dial
Now what I’ve done here with object triggers you see, for instance, the first trigger says, “Change the state of this picture to form picture one to two.” When the dial turns and its value is two. No. Here you have when the picture move to state three when the dial at three and so on to 13. Let’s preview this and see how it looks. What you get now is if you turn the dial you see all the photos of my 3D image.
Add a slider in Storyline
Now and the same you can do with a slider object. What I’ve done here, the same, I’ve inserted a photo and created all the states. You see there is also a slider object on my timeline, so if I go to design here you see I’ve done almost the same as in my dial. The starting point of the slider is one, the end is 13, the initial is one and it is also as steps one, is it means it has 14 steps. So each time the slider moves one bit one is added to the slider.
Creating triggers for the slider
I’ve also created here all the triggers, so you see here now change picture one to normal, so that’s the first state when slider one moves and its value is one. Change state picture one to two when slider one moves and its value is two, and so on, and so on. Let’s preview this and see how it looks. I move my slider and you see with the steps how my object turns.
What do you think is the best way for this, with slider or dial? What do you think about it? Leave a comment below this video and I will promise to answer it.
