Several Buttons Change Pictures

(Manolo) #1

I received a great help from @JimScott, he teaches me how to make the button correctly, the problem now is: I have this button when pressed changes the picture from ON-OFF-ON, when I insert the second button (there will be 15 buttons in this widget), does not work separated as I need, I am sure I am doing something wrong.
I tried with only the main timeline to insert the second button but when I press any button both buttons changes the picture. After reading some posts on this forum I decided to go one timeline per button, it works but now I see only one button (picture) in the preview and only works after the second click, the second button I see only the frame but after click in the frame without the picture, it shows and behave as needed. The idea is to have all buttons available and the user clicks each one as he likes, many times as he wants to see the animations of each one.
Any help is more than welcome. (124.1 KB)


Hi manolo!

I do not have time right now to create a solution - though someone else might - but my inclination is to drop the timeline approach with this many buttons.

I’m not clear about the “ON” - “OFF” examples - i.e. how will it really work? I would think the “ON” button will be an actual image; but when the button is in the “OFF” state what will be used for the “OFF” image?

I ask this because I am thinking about having the “OFF” state be the “ON” image at a reduced opacity (say 50%); and when the button in the “OFF” state is clicked (it’s now “ON”) the image is then shown at full (100%) opacity. This approach will be relatively easy to automate with Javascript and require minimal effort on your part.

Does this approach sound reasonable to You?

(Manolo) #3

@JimScott Hi, each button will have a different image I only use the ON-OFF images as a trial, if the reduce opacity will give the same result would be ok. I can make this in Keynote, but the idea is to learn Hype. Thanks for the idea, let’s see if someone can help me with this… Thank you very much for your time.

(Mark Hunte) #4

Create a single Button.

Use a timeline like in the example below to switch the image.

Make the button a symbol.
When that is set up, Duplicate the symbol. Drag the duplicates on to the scene. You can change the images for the individual symbols as you see fit through the inspector.

Doing this will save on a lot of pointless timeline creations… :smiley: (284.8 KB)


So if learning Hype is the goal then here is a timeline approach.
I did not use the “Main Timeline” but one of your “ON-OFF” timelines… (131.3 KB)

Doing this will save on a lot of pointless timeline creations… :smiley:

Mark’s approach is different (symbols) - and You will get to learn more about Hype… at a certain point timelines become a problem instead of a solution. But that’s part of learning the program, knowing which tool is right for the task at hand.


So now let’s create a real solution for your set-up with JavaScript.

The difference between JavaScript and the “Timeline” approach is flexibility.

Below is the code. You can have 5 images or 70 images it does not matter - we don’t need a timeline for every image - in fact we don’t need any timeline:

whichImage =;
hypeDocument.setElementProperty(origImage, 'background-image', '${resourcesFolderName}/01_00.jpg');
hypeDocument.setElementProperty(element, 'background-image', '${resourcesFolderName}/' + whichImage + '.jpg');
origImage = hypeDocument.getElementById(whichImage);

Demo here. (82.4 KB)

This is a far more powerful~flexible approach.

Hype provides the Skeleton - JavaScript provides the Muscles~Ligaments… together they Dance.

(Manolo) #7

Hi @JimScott, sorry for the late reply, right now I am watching some videos on youtube Hype Tutorial about the symbols pointed by @MarkHunte, I did not know about that.

Your new approach is very nice, the only inconvenience is the button touch, I have to be able to click back to the original image in each of the buttons without touch the others first (it is a toggle button). Is there a way to do it? in the first example when you teach me how to do it with timelines I was able to click twice in the image to get back to its original state. Thanks for your help both of you.

(Manolo) #8

It seems to me that with JavaScript it is easier to have many buttons and the size of the file will be smaller, I am doing this for a iBook widget so size is a big concern.

I will try to find a tutorial to learn how to use java in Hype so I will be able to dissect your example, and try to replicate it, and learn.

Thanks again…


Toggle feature - OK… Right now it’s close to bedtime here in California (2am) - I may not have solution until sometime tomorrow (August 7th). And of course, some of the guys on the Continent, could clearly beat me to it… bedtime or not.

I’m glad You appreciate the Hype~JavaScript synergy.

(Mark Hunte) #10

Also be aware that the file name may get a “_2x” added and extension may change to “jpg” if the file is optimised or not.

@jonathan, It actually would be good to have an API that you could check if the file name/extension has changed so you can easily accommodate for this in JS.


var imageName = '3D-ON-1.png'
if (  hypeDocument.isOptimisedImageWithResouceName(imageName)){
imageName =hypeDocument.isOptimisedImageWithResouceName(imageName).name
//-- >3D-ON-1_2x.jpg'

(Jonathan Deutsch) #11

Thanks for the request. Our general recommendation is that if you’re using JS or custom code to not use image optimization, but this itself falls down because Hype still makes runtime choices on using retina/non-retina images so it’d be great to be able to look up which one is being used.



Attached is: (102.6 KB)

Demo here.

I’d already been working on this for You so I thought I’d finish it. It uses an opacity “toggle” of fading in~out the image depending on which image is clicked. It conforms to your request of having the same image respond to a click (increased~decreased opacity) rather than require others to achieve that effect.

If You still need to have an actual image swap (different images used) let me know.

There are two functions:

“initialImage” - which sets the “default” image (i.e. the one set to 100% opacity). This image is the only one that needs an ID (this is covered in the annotation for this function).

“opacityToggle” - as the name indicates this function does the opacity toggling.

The Hype project is heavily annotated so the only thing I need to say is when You add a new image to the project You just need to adjust the opacity of that image - I’ve been using 40% (.4)… no other actions~settings are required for the opacity toggle to work.

(Manolo) #13

@JimScott this was nice, I am saving for the future.

I really need the swap images, what I am trying to achieve is the user to interact (learn) with the buttons, and see what will be the next position of each button, then the user can return to its original position ON/OFF/ON.
I will use this to teach students to be aware of the positions of the buttons and switches. The buttons changes images instantly in real life.
I am attaching some examples of the buttons and switches I will use.

1- original state is the left after press the button the DISCH will appear. If pressed again the button returns to original state.

2- Original is ON the second is AVAIL and vice versa… note some buttons toggle up/down when pressed other not.

3- Switches only changes the direction, but some of then have 3 positions or more.

4- This is a knob it increments the bright as needed but I have no idea how to give to the users this impression. This particular knob has three different characteristics, the centre os ON/OFF toggle, and there is the button to incresase/reduce the brightness.

I really appreciate all inputs from everyone, thanks a lot

(Mark Hunte) #14

There are so many ways this can be done. The above example should give you some of this already!.

Here is a couple of more ways using JS,css. all these examples should get you on you way to achieving your goal. ( with some study ) (75.0 KB)

(Manolo) #18

@MarkHunte that is what I was looking for, thanks to everyone for the great help.

(Mark Hunte) #19

I am only now able to get to my Mac, Did you figure it out. ?

(Manolo) #20

Yes I did, all working as I need. Thanks, great help :slight_smile: