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.
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.
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.
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.
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.
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.
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.
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
Learn how to build a crossword puzzle in Articulate Storyline 360.
Embed Storyline 360 courses directly in to your website using this Responsive iframe code.
David began his career in eLearning in 2000 after earning qualifications in Graphic Design and Newspaper, Magazine and Infographic Design.
He is passionate about creating well-designed and purposeful eLearning solutions and is a current Articulate E-Learning Heroes Super Hero.