States, Interactivity and lots of headache

Mar 14, 2013

Jo Winter
By Jo Winter

Hey guys,

first of all, i love the functionality of storyline, and the way you can add interactivity without beeing a programmer (though i have some programming skills, which makes it much easier).

But at the very moment im struggling with a nasty little problem:

The states seem to work nice with buttons and simple pictures as well.

I have to build an interactivity with complex shapes in png format.

Because of the non rectangular shape of the objects, i have to create custom hotspots for each part, which trigger the states of the object.

I want the object to change color as the user hovers over it. Also i want it to have a kind of "Visited" state.

So this should be no problem at all: I created the hotspots, which trigger the states:

Mouse hovered over triggers my custom hover state.

User clicks triggers my custom visited state.
Everthing works fine but one thing:

When i click, the object changes its state to visited, as it should do.

BUT, as soon as the Cursor leaves the Hotspot it changes back to normal!

This really drives me crazy, even haunted me in my dreams this night..am i missing something?

6 Replies
Jo Winter
11 years ago03/14/13 at 2:38 am (UTC)

I did a little test:

I changed the action for the change to visited state from "user clicks" to "user presses key".

Now this is what happens:

When i press the key and the mouse is outside the hotspot, it works like a charm.

When i press the key while the mouse hovering over the hotspot, i get the irritating behavior of the shape changing state back to normal, as soon as i move the mouse outside the hotspot.

Now this is becoming really frustrating, because when the user clicks the hotspot OF COURSE the mouse has to be hovering over the hotspot.

It has to do something with how the "Mouse hovered over" Condition is working.

I hope someone can help me on this.

Jo Winter
11 years ago03/14/13 at 3:31 am (UTC)

Ok i think i figured out what the problem is:

1. State: Normal

2. Mouse Hovers over Hotspot and the current state of the png, Normal is stored

    ---> state changes to Hover

3. User Clicks the Hotspot and the state of the picture is changed to Visited

4. Mouse leaves the hotspot and the state that was saved in step 2 is restored, which is the Normal state

---> now instead of the desired Visited state the picture shows the Normal state.

Now that i know the problem i hope i can find a solution. Help would be much appreciated.

Jo Winter
11 years ago03/14/13 at 5:53 am (UTC)

Thanks for your reply Phil. I see that this is difficult to get without an example. I cant show you the project itself because of corperate guidelines, but i attached a little example, hope that helps to understand what i want to achieve.
I know the built in states have special functionality, so basically what im trying to do is to recreate them as custom states.

So your question is: Why would i want to trigger states via hotspot, when there are built in states that do the job?

Because i work on an interactive technical drawing, where the different parts are representet by .png images.

The drawing is pretty complex and different parts have wierd shapes or are overlapping.

The .png format allows transparency, but the .png as an object retains its rectangular shape.

My solution were hotspots that match the shape of the parts and trigger the states of the pictures beneath them.

But as explained, im having much trouble with that.

Hope that explains my problem well, its pretty hard to describe.

This discussion is closed. You can start a new discussion or contact Articulate Support.