Hover state issues
Jul 10, 2015
I'm working with a brand that requires us to create custom buttons for interactions. They are very simple, just shapes with text and an image (image inserted into the states via this method from Phil Mayor: https://community.articulate.com/discussions/articulate-storyline/states-for-a-group). But some of the regular states are being held over into the hover state for instance. Here's a screengrab from the edit states dialogue:
But this is how it renders out:
I intentionally shifted the white arrow to the left to reveal the black arrow that is left over from the Normal state. You can also see the gray fringe around the "02" that shows the black version of that text beneath.
What's going on with the states? I didn't leave the black versions on the hover and down state so how do I fix this issue?
6 Replies
Hi Brad
Most of the built in states are built on top of the normal state which is why those objects are there. If you can use shapes to build the arrow in normal and change its colour in Hover this won't happen, but may not be ideal for your brand.
The other option is to use a custom state as these are not built on top of Normal but you would need a trigger to then change the state on hover.
This is the way the built in states work as they are additive on top of normal, I think selected is the only one that isn't.
Hope this helps a bit.
Hey Phil! Thanks for the response! I was thinking that it was something like that going on in the back end. I think we can switch to the shapes for the arrows, as I'd really not want to rebuild the wheel.
Oh, but additionally, the numbers 01, 02, etc they are just text that we changed the color of, but they get a strange gray outline. Is there anything we can do about that other than custom state?
I normally find at this stage I build the whole thing in illustrator or photoshop and just change images on each state, I think this was something that wasn't expected when the states were developed.
Hey Phil, thanks for the input quite a while back now! I redid the buttons to start from a text box with no shape formatting. Then inserted the background images on the states. For what it's worth I found it's best to start from a text box, so that when you copy paste the button, and change the button text it changes across all states (as opposed to starting from the image which makes dealing with text very buggy).
Thanks for sharing an update, Brad. :)
This discussion is closed. You can start a new discussion or contact Articulate Support.