How to use 3D models in Articulate Storyline

Articulate Storyline is a firm favourite here at 4pt and we’re always looking for ways to create engaging content that can be built using its features.

Using Fuse, the 3D modelling application from Adobe, we came up with the idea of creating a 3D character and linking the output to Articulate Storyline’s slider to create a rotating interaction.

Adobe Fuse Splash Screen


To get started, we created our character in Fuse. There are countless options available to customise your model, allowing you to control details such as the height and shape of your character, you can even choose from a range of facial hair options.

Adobe Fuse Workspace

Once we were happy with our character the next step was to upload her to Mixamo. Mixamo is Adobe’s web-based, auto-rigging software that takes the heavy lifting out of 3D character animation. Using Mixamo we were able to choose an animation, in this case a rotation, and apply it to our character, before downloading her in the Collada file format, identified by the .dae file extension. The great thing about this file format is that it opens up directly in to Adobe Photoshop, which amongst other things made it really easy to add a background image by simply adding a new layer beneath our character in Photoshop.

Adobe Photoshop TImeline

The next part of the process was to get the character from Photoshop and in to Storyline. To do this we had to render our animation.

Adobe Photoshop Render Pane Options

In the render settings we opted to export our animation as a Photoshop Image Sequence, using the PNG file format. This gave us 49 individual PNG images, each a different view of the rotation.

Articulate Storyline States Pane

Next we inserted the first image from our Photoshop Image Sequence in to Storyline. We then edited the state of the image and added the remaining images from the sequence as a series of new states.

Now that the images making up the rotation were in Storyline we needed to link them to Storyline’s built-in slider.

To do this we created a series of triggers to update the variable associated to the slider. In essence, every time the slider moves up or down, the associated variable updates and when the variable updates the state of the image changes.

Articulate Storyline Triggers


As impressive as rotating 3D objects are, all the bells and whistles are redundant if they can’t be used to enhance the eLearning experience. With that in mind we extended our demo further with interactive markers and a MCQ to provide an example of how to use 3D rotation as an appropriate solution in an eLearning setting.

Since building this demo we’ve gone on to use Storyline and 3D rotation on a number of eLearning projects, our favourite enabled learners to explore the information on pet food packaging, learn more about this project here.

Overall the entire workflow used to create this example was really simple and demonstrates just how far you can take your eLearning content with a little imagination.

View the 3D interaction

Click the button to view the demo. We’ve included built-in markers and custom MCQs to further demonstrate how to incorporate this sort of interaction in to an eLearning course.

Additional example

Click the button to view an additional example of 3D rotation in Articulate Storyline.

We built custom interactive markers to help show the most commonly affected sites for psoriasis to occur.

Related eLearning Insight Posts

Pin It on Pinterest

Share This