Forum Discussion

Spencer's avatar
Spencer
Community Member
4 years ago

Overlapping States

I've been noticing a randomly occurring, but frequent, issue since the newest update. On some objects, the Normal/Original state will overlap with any other state (Hover, Visited, custom states, etc...
storyline 360
BrettConlon's avatar
BrettConlon
Community Member
2 years ago

The problem I have is that I like to shrink the elements on the DOWN state (by a few pixels in all directions) to give the impression that the button has been pressed down. Most of the time, I can still see the outer edges of the full-size Normal state. If the elements are all the same shape/size, between the states, the proposed workarounds are OK (still painful to have to apply and often catches me out. The moment one of the shapes of the states changes, you're stuffed!

Articulate, PLEASE schedule a fix for this!!!!

Spencer's avatar
Spencer
Community Member
2 years ago

Hi Brett,

I've been in that exact situation, where I need the button to appear as those it's pressed down, and there are several ways I've gotten around it. 

I'm attaching an SL file with 4 buttons:

The first three are all based on "covering up" the original state, as has been suggested. HOWEVER, we're going to make the bottom most layer match the background. I'll refer to this as the "False Background" method.

False Background Method

  1. Create your button and it's Normal state.
  2. Go to States > Edit States > Duplicate or New State > Hover
  3. Make your shrunken Hover state
  4. Now... here's where the magic happens. Go to your first state and copy the shape of the original button.
  5. Paste in Place (CTRL + SHIFT + D) on your Hover state.
  6. Delete any text and recolor it so it matches the background of the slide (in this case, I made the purple rectangle WHITE)
  7. Go to Arrange > Move to Back
  8. If that doesn't work right away, copy EVERYTHING on the Hover state, delete it, and paste in place everything. That sometimes gives it the extra push it needs.

I've used this method on 3 different buttons in the example; one with a hover state, a down state, and one that is even 3D. 

If you'd like to dissect them, just CTRL + A and copy everything inside the Edit States function, and then paste it outside on the timeline!

New State Method

This method is preferred if you cannot cover up the background. Such as if you have a photo background, video background, gradient, etc. and either can't or don't want to cover it. If you like working with triggers, it's especially fast and easy - albeit cumbersome and not as evergreen.

  1. Create your button's Normal state
  2. Create a New State, DO NOT PICK A PREMADE STATE MAKE A NEW CUSTOM STATE
  3. Name your State (I named this one "_Hover")
  4. Edit State > Edit the button's New State to look how you want
  5. Exit Edit States
  6. Create a new trigger: Set state of (Button) to (New State) When the (user hovers over) (Button) (restore previous state when the user hovers out)
  7. If it doesn't work right away, do the COPY/DELETE/PASTE IN PLACE step mentioned above on your New State. 

I hope this helps out! Let me know if it does, or if there's anything else!