Changing States with my own images

Jul 02, 2013

I am trying to create an interaction where a red shape(a png image)  changes its state to purple after the user clicks. Both shapes are placed into the same slide on top of each other. When I click on the red shape and then "Edit States" and "add new state", "Visited" the new state that appears is red and I am not able to swap it out for the purple. I added a trigger: change picture 1 to "visited" after user clicks picture 1. How can I get Storyline to recognize that the purple image is the "visited" state?

9 Replies
Kathy Collins

Hello Meryem:

I did watch this a couple times before but could not figure out where I went wrong. I found a work-around but not sure if this is the right way to do it:

Since this was an odd shape, I created a quarter circle in Powerpoint in two different colors (same size, red and purple, saved as picture-png) and inserted the shapes into Storyline. When I clicked on Edit states and then the "Visited" state, it shows a red quarter circle. I had to cover up the red with the purple shape. Is there a better way to do this? I had to fiddle with it to make sure the red didn't show.



Kevin Thorn

Hi Kathy,

You're on the right path. Just a slight change to your assembly. Follow these steps and see if this helps:

  1. Insert the red shape onto the slide
  2. Click the states tab and insert new state (custom or pre-selected such as 'visited')
  3. When you do this, Storyline will automatically create the state with the red shape. Select that shape.
  4. Now, instead of "inserting" the purple shape, right click on the red shape and choose "Change Picture..."
  5. Replace the red shape with the new purples shape.

As long as the two .png shapes are of the same height and width, the swap will be in the exact same x.y coordinate.

Any trigger you use to change the shape should work just fine.

Nancy Woinoski

Ok Kathy. Don't place the shapes on top of each other to start. Just place the red shape on the screen where you want it to be.  Select the red image on the screen and the click the states tab and the create new state option. From your message, I assume that you want to turn the shape purple when visited so select Visited from the drop down list. You should now have a normal state and a visited state that are both red.  Now click on the visited state so that it is selected and the on the slide right click on the red image and select "change image".

Browse to find the purple image on your computer.  The image on the slide should now be purple.  Now go back to the states area and click done editing.

this should do the trick.  When you add an on click trigger to the red shape on your screen it should change to purple when clicked.

Paul Brennan

I have a slight variation on Kathy's issue.  I'm trying to change the state of an object in response to a variable change (simple enough), but something odd is going on.

I've got an object which shows one of three faces/expressions: happy, indifferent, angry.  The state changes when numerical variable hits certain value:

  • Happy - Variable has value of >=9
  • Indifferent - Variable value between 7 and 9
  • Angry - Variable value <7

I take the original object image (Happy/Normal), click Edit States, duplicate it to create two new states (Indifferent and Angry).  Select a state, right click on the image on the stage, change the image. Hey presto,  my object now has three states, each with a different image/expression.

But here's the weird part.  In the State 'thumbnail' at the bottom of the screen, on the Indifferent state it seems to duplicate the image for the Normal/Happy state - even though the object on the stage has changed.  To further differentiate the states, I added a glow effect (green, amber, red).  The glow in the thumbnail changes, but the image doesn't. 

Now when I run the scene, make a couple of mistakes to trigger the variable change, the object refuses to change image (i.e. it reflects the incorrectly duplicated image as per the State thumbnail) - however the glow effect DOES change (so I KNOW the variable triggers are working).

I even tried creating a new State instead of duplicating an existing one, but this doesn't work either.

Is it something I'm doing wrong here?  I'll upload the story file when I get back home.


Jennifer Roller

Hi everyone! I am super new to sliders and am attempting to create my first one but I don't understand it fully. I attached my file. I created different states for my rectangular boxes and when the slider moves from left to right...I basically want my first box to go lower and the other two boxes to increase but I can't figure out how to make this happen. I tried adding triggers but how do I trigger to a different section on the slider and then also make it drag back? Can someone help me out please?