Icon States

Aug 18, 2021

I feel this is an easy thing, however, I cannot figure it out. It has really been one of those weeks. 

I am using a Java Script to mute my audio on and off. This really works well and I am happy with it's functionality. I place a small speaker icon in the corner and when clicked, the audio is muted. 

What I want is for the state of the icon to change to a small speaker with soundwaves to a small speaker with an X. I don't understand how to incorporate a separate image in the State of the of the normal audio on icon. I tried grouping them and setting them as a button set to no avail. 

Anyway, I hope there is a response to this. 

10 Replies
Marc Raskinski

This is pretty much what I want. however, I cannot select it to change its attributes (resize etc). How did you do this? I saved my desired icons as PNG files (though I am happy to use yours too if I can resize them and change the fill) but I can't get Image 1 coupled with image 2. 

 

Thanks

Marc

Richard Mulcahy

There are a couple of ways. If you don't have an existing image (png), then you can use one of the icons from Storyline. Make it big. Copy and paste it into photoshop. remove the white background. and then resize it and save as a png.

In the example above, you need to make 2 images just like I did in my examples. Don't use the icons and try to edit them as they are not images.

Marc Raskinski

I think the mix up is that I don't know how to do as you recommend. 

Let me rephrase. 

Okay, the .PNG files are done (please see the attached). What is the next step?

Do I insert them using the insert menu option? Or do I copy and paste? 

Once the two icons are present, how do I conjoin them? How do I make one PNG the Normal state and the other PNG the other state (Selected, Disabled, etc)? 

a step by step would be much appreciated.

Thanks, I appreciate your time. 

Marc

Marc Raskinski

Thanks Richard. I have been messing with this for days and I am about to throw in the towel which is frustrating because I know this can be done. Would you take a look at it? I have copied one image into the story, with both states but they don't work and I have also attached each PNG. Getting a step by step of what you did would be awesome but at this point, I'll take whatever I can get. 

Thanks

Marc

Richard Mulcahy

You're missing adding a variable and triggers to make things come alive when the user clicks on the icon. I added a variable Speaker_on_off (True/False) that toggles every time you click the icon. The there are 2 triggers that change the state of the icon to either normal or off.