Editing States with images

I want to change the state of each image to a "visited state". When the user visits the state, I tried inserting a check mark but its not working. I also tried to change the color of each object of each stated once they visited, but its not working. How do I make the states change in color or add an object so the user knows they have selected that object. 

6 Replies
Brian Allen

Hi Helena,

States are one of my favorite features in Storyline. The great thing is that for states like "visited" you don't even have to add additional triggers.  Once the image has been clicked Storyline automatically knows to show the visited state for that image, if it has one.

I've taken your .story file and added visited states to the first two images, check it out (attached).

Also, for more info on how to work with image states, check out this great tutorial - https://community.articulate.com/series/4/articles/adding-and-editing-states-in-articulate-storyline-2

Hope this helps, and good luck!

Mark Shepherd

Hi Helena:

Like Brian, creating customized States (particularly Buttons) is a key component of my Job.

Here's how I add (or change) graphics/details for a STATE:

In Articulate Storyline 2:

  1. First, select the Slide containing the object you wish to add/change STATE Of/To.
  2. Now add the Image/Detail you wish to ADD to your STATE somewhere on the same Slide (Insert Tab > Picture).
  3. SELECT this Image and CUT or COPY IT to the Windows Clipboard.
  4. Now SELECT the object (typically, a Button) you wish to Change States Of/To by clicking to select, clicking STATES, and then pressing the EDIT STATE Button located near the bottom of the Storyline Window.
  5. Now CLICK/SELECT (Highlight) the SPECIFIC STATE (ie: Visited) you wish to change.
    You need to do this or you may not end up changing the State you want to alter.

    NOTE: If you don't SEE the STATE you wish to CHANGE, you MAY need to CREATE it.
  6. Immediately PRESS the PASTE Button to bring in the Image copied in Step #3.
  7. You can use the ARROW BUTTONS on the keyboard to NUDGE/Reposition the newly pasted element within your now-modified Button State

    NOTE: This will be displayed on the Slide as well as in the States Library shown at the bottom of the Storyline Window.
  8. You can also use CTRL-SHIFT-ENTER to change its Sizing and Position Properties.
  9. If you are Copying/Pasting Shapes into your STATE, change its COLOR and other DETAILS by clicking the PICTURE Context Tab and changing FILL, BORDER, etc.
  10. When the newly modified STATE is complete, PRESS the DONE EDITING STATES Button.
  11. Now TEST your STATES by SELECTING your Object with your Edited States, and change its DEFAULT STATE to see what that State looks like in your Slides
  12. Or ADD TRIGGERS to your Slide to change the Object's displayed State from NORMAL to (STATE NAME).

Hope this helps!

-Mark