Learning solutions for the mobile workplace

Monthly Archives: September 2015

Multi-State Objects in Adobe Captivate 9 – A First Look

Posted on by Posted in Adobe Captivate 5 Comments

One of the many new features in Captivate 9 is the ability to additional states to objects. Usually objects have three states, Up, Rollover and Down. You can now add custom states to objects and then use the Change State action in advanced actions to display object states as needed. Here is some info on multi-state objects.

After downloading CP9, I thought I’d explore this new feature first and figure out the workflow. It’s very easy to use; in an object’s Property Panel, there is now a State View button that opens up a filmstrip-like window.

States View Panel
States View Panel

In this panel,  you can manage the states of an object, add/delete states, add other objects or bitmaps to a state, etc. It’s very intuitive; once you understand the concept of states, it’s a snap to set up and use in simple or advanced actions.

For my test project, I decided to work with an image set I had previously used to build a slider interaction in Articulate Storyline2.

I wanted to explore two options for state changes: The first option uses up/down buttons to increase/decrease the value of a variable. Based on a that value, a particular state of an image object is displayed.

Advanced action to display object states based on a variable value
Advanced action to display object states based on a variable value

The second option is a variation of the first on and, instead of clickable buttons, allows the mouse to be used for state changes.

This great new feature opens up lots of possibilities for interactive elements, e.g sliders. Well done Captivate! I will keep experimenting with multi-state objects and use them from now on in new projects.

Here is my first attempt to use custom states in CP9.

 

Rotating Objects in Articulate Storyline – an Experiment

Posted on by Posted in Articulate, Storyline 1 & 2 10 Comments

I was working on a project recently, where the storyboard asked for a ‘get your brain in gear’ animation, something similar  to this…

Design Idea
Design Idea

The gears didn’t have to be mechanically accurate, just good enough to convey the idea. My first thought was to create a video, but then I remembered having answered a related question in the eLearning Heroes community. So, how do you spin objects in Storyline around one axis? You can’t motion paths, because the object would simply travel, along the path (even if it is circular) but would not rotate.

There are two other options:

1. Create custom states for an object, with the object slightly turned in each state and then use triggers to switch between states.

2. Use a Spin Entry Animation and continuously hide/show the object so that the entry animation repeats.

Before committing to the client, I wanted to test out option #2 and set up my Storyline project like this:

Storyline Setup
Storyline Setup

Each Wheel is a .png with transparent background (For this test, I didn’t bother cleaning the edges of the bitmaps).

Each Wheel has a Quarter Spin Entrance animation, which depending on the wheel’s position of the chain either spins it clock wise or counterclock wise. So far so good. The problem is that this setup would only spin each wheel once.

So, I added an offstage object (rectangle) with a looped motion path. whenever the loop is complete, each wheel’s state is set to Hidden and immediately changed back to Normal. This way, the entrance animation is played again, adding another quarter spin, and another…

It only took a few triggers to make that work. Wit the problem solved I wanted to try one more thing: have the animation start and stop based on a button click.

Here is the end result of the my quick test.

This technique can be applied to any object and provides an easy way to add rotation to Storyline projects.

Edit 10/2016: Here is the .story file for download.

Edit 04/2017: I noticed that in SL360’s HTML5 output, the spin animations I used show some weird behaviour. The rotation will speed up uncontrollably. It’s actually cool to look at, but this bug makes the method I described unusable for HTML5 output.

Edit 06/2018: The issue with HTML5 output I had mentioned previously is now fixed in SL360. See here a republished file. The animation is still a bit jerky, but at least the spin doesn’t go into overdrive anymore.