Change circle color through button depending on previous button

Good morning you all, i have 4 different color circles and 4 buttons that change it's color.
Default it is like this

so only red circle is colored.
At step 2 by clicking on yellow button the second circle gets yellow, the third button third circle green and so on and I gave the circles 2 second by getting colored in fade-in, but if I click on green without clicking the yellow before, both yellow and green should go on fade in.

(i just worked with time sequences)
circles switch.zip (30.6 KB)

I didn't find an analogue topic, wish u can help me!

Posting your Hype file would be helpful...

circles switch.zip (30.6 KB)

oh i see.. sorry

Be careful with timelines and timeline actions: I found several actions in the first frame of your timelines, changing the color of other circles instantly (this was the problem with the yellow circle, when starting the timeline for the green). I deleted those timeline actions - now each timeline runs independently from the others. I spent the 'red-button' a separate timeline, so that you can start 'red' again (it starts initially on sceneLoad, so the red button fades in automatically). Does this solve your problem?

Regards, Kalle

cerchi switch_1.zip (28.5 KB)

Bildschirmfoto 2022-08-16 um 12.11.45

the previous colors should fade in automatically like before, but for example if I click on "green" so the third button, yellow and red should be colored, red is colored from the beginning, yellow should be 100% colored if it's button was previously clicked, but if people go from the first button "red" to the third "green" without passing by the second "yellow" both yellow and green should do the animation, and fade in slowly, i just was able to say, color the previous button automatically, but it should check if the person sees the colors sequentially or it jumps to third or fourth step, at that point it shouldn't be just one fade in but as many as steps jumped...

It's still a bit vague to me, but if it's so specific I would just script it out with if/else statements.

So to reiterate, what you want is:

  • clicking red only highlights red
  • clicking yellow always makes sure red and yellow are highlighted
  • clicking green always makes sure red, yellow, and green are highlighted
  • clicking blue always makes sure red, yellow, green, and blue are highlighted

Is that correct?

There's two basic approaches. Probably the best behaving one is to use timeline actions to continue the dependent timelines:

  • Each timeline should have an animation only for the particular color
  • Each timeline should have a timeline action at the start that calls Continue Timeline… for the other ones that you want to make sure are colored (e.g. the Blue one has three chained actions for r,g, and v)

Because you're using continue, it will simple start the timeline if it hasn't started. If it has already started then it will effectively do nothing and keep playing until the end.

The second approach is to use Relative Timelines where there's animations for all the colors you want to change. But I don't think this approach is as good because a click would start the timelines, and any items already fading in would take longer to finish since it resets the playhead time (though uses the current color value as the starting point). I bring this up though since it might be useful information depending on your future project plans.


P.S. As a side note I saw in your document you were using this code:

if(document.getElementById('hype-obj-ZJ3MZLIQ33SQN9OYGYBQ').clicked == true)

That particular element ID is randomly generated by Hype, and will not be the same between runs/cannot be relied on. If you want a stable element ID, then you can set one in the Identity Inspector.