For some reason this simple pop-up and pop-back animation doesn’t seem to be working correctly. If you click on the scale in the top right especially it doesn’t seem to react right away, I have to click it multiple times. Thanks for any help.
http://www.kf-interactives.com/nra-costControl/
Seems that something is overlapping / preventing the click. Can you post your hype document so we can have a look?
Yes, thanks for the help, I have a white cover that comes up, but made it Invisible and put it under the Groups that you click. Here it is… CostControl.hype.zip (676.1 KB)
I couldn’t fix your file as it was. I think you may be overthinking this as I feel there is a much simpler way to approach this. You have for something this simple a lot of click actions that could be refined back into 1 or 2 objects.
So I played a bit with your file, removed the actions from scale-big, report-big, scooper-big and whiteCover. I copied white cover up to the top, made it scale and transparent and gave it the actions whiteCover had before. Then I also added a scale to whiteCover.
Pretty sure someone else comes up with a much better approach then me but maybe my clumsy attempt gives you inspiration…? 
CostControl_attempted_fix.hype.zip (592.5 KB)
Okay so your buttons weren’t reacting because of all the overlay’s and mis-match of click events. I’ve taken the liberty to change your (rather complex) setup drastically.
Preview here: https://oneuppedgames.com/clients/hype/costcontrol/
Download: https://oneuppedgames.com/clients/hype/costcontrol/costcontrol.hype.zip
Make note of a few things:
- I’ve added some JavaScript to handle the click-events and other stuff. This gives you the advantage of control over your click-events and timeline manipulation (i.e. reverse play etc). Check out these events
- If you are not familiar with coding in hype (or at all) here are some pointers:
- the head of the HTML (Document -> Edit Head HTML) has some global variables declared, these are ‘animationElement’ which stores the reference to the ‘largeAnimationSymbol’ in the timeline, and ‘currentTimeline’ which stores the name of the current timeline.
- as soon as the stage loads in HTML, a JavaScript method (setupScene) is called (Scene -> On Scene Load). This methid stores the reference to the animationElement.
- each button has it’s own ‘onClick’ method (select button -> Actions -> On Mouse Click). These methods (i.e.: onClickScoopers) start the proper timeline in the animationElement as well as store the name of this timeline. Now the correct timeline plays.
- as soon as the timeline plays an overlay will be placed over the buttons and the stage. This overlay (as you can see in the animationElement) has it’s own onClick method (open largeAnimationSymbol and select the animationGroup -> Actions -> On Mouse Click). This method (onCloseLargeAnimation) reverses the current timeline. Eventually the timeline will return to 0 and the overlay will be set to ‘hidden’ again (as seen in the timeline animation).
So there it is. Lean and mean and easy to maintain. Let me know if you have any questions!
3 Likes
@oneuppedgames, Thanks for your help. You said “mis-match of click events” where did you see that? I appreciate you sending the other file, but working in other people’s files is like trying to understand how somebody else’s brain works and while I do code, I try to avoid it if possible.
The problem with these kinds of interfaces is often that the user can click on a multitude of buttons simultaneously. For instance, I can trigger the animation of both the scale and the spoons at the same time if I am fast enough. See:
This allows the user to access multiple ‘paths’ in your interface-flow (or data-flow). This is something you want to avoid at all costs, as it can create very unexpected behaviour within your interface (i.e. buttons not working etc). In your case it can trigger multiple animations, which then trigger multiple mouse-events (the reverse-animation for instance).
A second issue with your setup was that the overlay-animations also act as buttons. This is not faulty by default but it can cause a problem with the click-events. Make sure you take a look at the Actions within the inspector. It’s best to set all non-click items to ‘Don’t allow text selection’ and ‘Ignore all pointer events’. This way you won’t have overlaying visuals (or animations) blocking your buttons.
All in all your current setup was a ‘bit messy’. Please, don’t take this as an insult, because it’s not meant to be an insult. I’m just addressing the complications that can occur when overlaying buttons with other buttons: strange behaviour will happen and it’s often very hard to exactly debug.
I hope that clears things up a bit 
1 Like
I thought I was getting rid of the overlapping buttons issue by making the Visibility Hidden in the timeline. This JavaScript code is good, works great, thanks for setting it up. Here is the final after editing… http://www.kf-interactives.com/nra-costControl/
I still stand by my file, it was not “messy”, it was not as slick as yours because I didn’t use code, but when not using code… that’s about as clean as it gets.
Thanks for taking the time to talk me through the alternative and present a different option, much appreciated. I will definitely stop trying to get these multiple buttons to work this way… cause they don’t!
Messy might not be the correct word, I agree. Maybe complex is the better word? Anyway.
The end result looks great! Love the little details in the animation. Good to see that it eventually worked out!
One women’s mess is another man’s … thought there would something wisdomous in there 
yep I just coined a phrase 
Seriously though, there are many ways to achieve similar results and these ways may be solely using Hype or just using Javascript or mixture of both. Lesson learned here is to be mindful of how others perceive/ use Hype in order to complete an end goal.
Glad it’s all worked out though.
1 Like