Hi Guys, firstly thanks to the Tumult Team for creating this software, it really is great and opens up a world of possibilities to people like me, non-coders.
I am trying to create a simple animation for a button. When I mouse over a button I would like another button to slide over the top of the the original button. This second button changes the colour with a bit of opacity, and adds a title. I have done this using a timeline for each button which is triggered by mousing over the first button. The same timeline is set to reverse when the mouse leaves the button.
The issue I have is that when you are ‘mousing over’ the first button, the timeline keeps restarting every time the mouse moves by the tiniest amount. Ideally I would like the timeline to run only once, and only run again if the mouse leaves the buttons border and re-enters.
Is there a simple way to do this using the timeline?
Your problem is you have put the actions on all the elements.
You only need two actions. One on the mouse over of the image and one on the mouse out on the shield (blue button)
Giv me a sec and I will upload an example. I just noticed another problem. Mousing out of the shield button and over the blue title will cause a mouse out and trigger the timeline. I think Grouping them and running the action on the group will solve it.
I came across another issue which I haven’t been able to get around. When you mouse over the image, and move to another image very quickly, the mouse out action on the first image does not run and you are left with 2 shields in view. You can actually run the mouse over all 6 images very quickly and they will all remain in view.
I guess this is because as the shield slides in from the side, if you move the mouse quickly once activating the mouse over action, it doesn’t actually touch the shield and activate the mouse out action.
Anything I try seems to cause further issues.
I know you are probably busy but if anyone knows how to get around this it would be much appreciated. At present i have changed the buttons to be clicked rather than moused over until i can fix this.
If your mouse moves faster than the browser can detect, a 'mouse out' function won't be detected. Unfortunately there's not much in Hype we can do to overcome this. One way to anticipate this with the use of timelines is to construct your 'mouse over' timeline so that after 10 seconds it returns to its original state. Like a failsafe in case the 'mouse out' action never happens.
Thanks for taking the time to reposed to my issue.
I have been playing around with this a bit more and I don’t think it is a browser detection issue.
I have set the shields to animate quite slowly, therefore slide in from left to right over 1-2 seconds. To get over the initial issue I had the first image has a mouse over action applied and the animated shield has the mouse out action applied. The issue is that i can move the mouse onto the first image to activate the shield animation and can then move the mouse off the first image before the shield animation completes. By doing so the mouse out action is not activate and the shield remains in place.
I can’t add a mouse out action to the first image as this causes erratic behaviour.
For the time being i have made the shield animations instant which has solved the issue however i prefer the slide animation
Is there anything you can think of to resolve this issue. Should I be looking at custom Javascript to achieve this?
I have adjusted it so the 2 images on the left have an instant animation and the 4 to the right have a 0.5 second slide animation.
As you will see if you run the mouse over the 4 on the right, not particularly fast, the mouse out event won’t be triggered on some of them, maybe all of them.
I tried adding extra mouse over actions, which set all of the timelines to 00.00.00, except the one you are mousing over, but this seemed to have issues aswell.
