Storyline 2 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.

We’ve recently been playing with Fuse, the new 3D modelling application from Adobe and we came up with the idea of creating a 3D character and linking the output to Storyline’s slider to create a rotating interaction.

Adobe Fuse Splash Screen

Workflow

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

Summary

As impressive as rotating 3D objects are, all the bells and whistles are redundant if they can’t be used to enhance the e-learning 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 e-learning setting.

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

Click the links below to see what we came up with:

David began his career in eLearning in 2000 after earning qualifications in Graphic, News and Infographic Design.

He is passionate about creating well-designed and purposeful eLearning solutions and is a current Articulate E-Learning Heroes Super Hero.