Controlling Illustrated Characters via JS?

Hi Andrew,

Part 1

All custom states should be written exactly as they appear in the Object States panel—no underscores are needed. For example, in your case, the custom state is "Happy".

Underscores are only required for default states such as Selected, Hover, Visited, and Down. These must be written with the "default" prefix, like so:

• _default_Selected
• _default_Hover
• _default_Visited
• _default_Down

This also applies when combining multiple default states during interactions, assuming all relevant states are activated in the Object States panel.

Note:

• The Normal state remains simply "Normal" (no prefix or underscores).
• The Disabled state is written as "Disabled".

I used a simple script executed when the timeline starts, as well as for enabling and disabling a button.

const button1 = object('5pyrnxdTyGJ');
setInterval(() => {
  setVar('currState', button1.state);
}, 100);

I also used a separate trigger attached to another button to enable and disable the target button.

const button1 = object('5pyrnxdTyGJ');
button1.state = 'Disabled';
// when a disable/enable button is Selected 
// else
const button1 = object('5pyrnxdTyGJ');
button1.state = 'Normal';

Part 2

I'm not entirely sure what you meant by dynamically changing expressions. The JavaScript API for Storyline only exposes the current state of an object, not the full list of available states.

To cycle through all states, you need to dig deeper into Storyline’s internal structure. I used a custom recursive function to locate the object by its ID and extract its states from nested properties. Then, I created a simplified version containing only the properties I needed, resulting in an array of all available states. This function is reusable—the only change you need to make is updating the object ID (e.g., '6fO7ipghgcH') to retrieve the available states for your next target object.

In the example below, the first button retrieves all available expression states for my character, and the second button cycles through them every second by setting object('id').state = stateName.

If you'd like to dig deeper, I can attach my Storyline file for you to review and test.

Part 3

To avoid writing complex code while achieving the same result, you might consider renaming your states using simple numbers—for example, from "1" to "8". Then, you can use a simple function to iterate through these states by setting the object's state to a number that increases at a regular interval (e.g., every second). The numeric value should match the name of each state, allowing the function to dynamically set the object’s state based on that number. You might even be able to squeeze in some form of GSAP or web animation between the intervals to create smoother transitions between states.

const rectangle = object('6cn5CQM1j6n');
let num = 1;

setInterval(() => {
  if (num <= 8) {
    rectangle.state = `${num}`;
  } else {
    rectangle.state = 'Normal';
    num = 0;
  }
  num++;
}, 1000);

Agree with Nathan on the states they only exist if the are created as states, it would cause a bit of bloat if they were all included and never used.