Adding a "Selected State" to a graphic/button makes it shift position on the screen in HTML5

Product: Storyline2
Update: 7

A client is building slides in Storyline 2 that require the user to build various food items. To help the user know they have already selected a particular item, each correct item has a "Selected State" that uses a the Picture Effects "glow" and "soft edges." I've also tried using only a simple picture border. In each case, any of the food icons that have a "Selected State" shift on the page, once published, but only in the HTML5 version, meaning, in the Flash version they are in the correct places on the screen but in the HTML5 version, they shift slightly all in the same directions (in this case, up and left.) Example attached to see the icon placement issue.

Any idea what I can do to prevent this? Is there a setting somewhere I can adjust? We need to publish to HTML5 so that they can be viewed easily on an iPad without needing the AMP app.

13 Replies
Christie Pollick

Hi, Molly -- Many thanks for sharing your screenshot and you can definitely see a shift in placement. Just so you have it for quick reference, here is our SL2 System Requirements sheet. And yes, if you'd like to share your file, we are happy to do some testing. 

I did want to share this thread that appears to be on a similar topic, so you may want to check out the suggestions offered and let us know if you find improvement or if issues persist. 

Molly Butz

Thanks for offering to take a look. I have stripped the story down to just one slide that has the issue. I am noticing one additional thing: the person that built this originally had the items in a scrollbar on the side but that made picking them from an iPad difficult (in HTML5). But I am noticing that they don't reset to initial state when you build the project wrong so we must need to add some settings to make that happen. I'll look into that. For now, here's the slide build story.

Christie Pollick

Hi, Molly -- Many thanks for your patience while I tested your file. As you can see if you click on this link, I also experienced that same type of behavior you described when testing in HTML5. I'll go ahead and create a case ticket for you and send it along to our Support Engineers to see what they may be able to suggest to address this behavior. You'll be hearing from someone via email shortly. :)

Christie Pollick

Hi, Molly -- Always happy to help! It looks like your case 00731983 has been received, and you should have received a confirmation email in your Inbox. If you have not, please check your SPAM folder as it may have been rerouted in error. 

As a side note, I see that you mentioned you are still in the process of learning SL2, so I thought perhaps you might find some of the awesome resources available here to be helpful, as well. :)

Christie Pollick

UPDATE for anyone who is following along with Molly's post here. From her support case, she received the following reply:

"Thank you for uploading your project file. We have reviewed your project file and we were able to duplicate your issue on a new project file. The Picture Effect Glow when applied to the Selected state Object, shifts the image in HTML5. 

I have submitted your case to our Quality Assurance team for their review. Unfortunately I was unable to determine a workaround. I cannot offer a time frame for when or if this issue will be resolved.  For the meantime, you may want to consider applying the glow effect using Image editing software, then import the edited image and use it on the Selected state. 

We will contact you as soon as a permanent solution is found."

Crystal Horn

Hi Nicole.  I'm sorry you're hitting a bump.

I am reexamining the documentation we have for this issue.  Would you be able to attach your .story file here for us to test out?

There have been some updates released since this issue was discovered, and I just want to be sure the behavior in your file is the same.

Thank you!

Nicole Rayner

Unfortunately, I can't share the file because I already used a workaround to avoid the problem.  I had to get this up and running as soon as possible, so i went through and removed all of the Picture Effect Glows from every state.  

I found that as long as there is no Picture effect glow applied, the placement of the picture is correct in Chrome.  If there was a Picture effect glow (on any of the states), the placement of the picture was off.