Hi all,
I have been digging through the forum to see if I find a solution for my problem but haven’t quite found it. Hope someone can give me a tip.
I have an image that animates on and keeps animating through the 15 seconds the banner is supposed to last. Additionally i have a button with two states - Normal and Hover - created with a same-size-as-canvas empty rectangle, since I need the cliccable area to be as big as the canvas. Then I have a “dummy” button, just a cutout from a sprite that has to states, hover and normal. I’m trying for the hover state to be triggered from a “Continue” action on the “real button”. that’s working so far. But when I add a Mouse Out button action for it to return to its original state something is not working. Not sure if I am being too clear explaining this so, please take a look at the attached project.
thanks!!
plane_button_test.zip (83.4 KB)
Hi Daniel!
You may or may not be enthused about my solution as I made several major changes to your set-up. One of the major changes was to get rid of the “Hover” timeline. Perhaps You have another use for it other than the hover effect; if so it was not apparent to me and it appeared to simply complicate things so I removed it.
plane_button_test_JHSv1.hype.zip (50.3 KB)
In place of the two groups “book now Hover” & “book now Normal” there is now a single button (“Book Now”) in a group called “Book Now Button” and placed the “TextSprite_970x250.svg” as a background image for this button.
The group “Book Now Button” has its content overflow set to “hidden” so as to allow just one part of the “Book Now” button to be visible (i.e. the “normal” state).
We then select the “Book Now” button itself, not the containing group, and choose “Show Button Controls” from the “Edit” menu. A small bar appears over the button with “Normal”, “Hover” and “Pressed” options. (Please see Fig.1)
I selected the “Hover” option and changed the “top property” (in the “Metrics Inspector”) of the “Book Now” button from “-20” (the “Normal” top position) to “-58” which reveals the “Hover” part of the SVG image.
In order to trigger the “Book Now” button for the “Hover” and “Mouse Click” events I moved it above the BIG button that covers the entire background. I also set a “Mouse Click” event (“Book Now” button) to go to the same URL as the BIG button (called “Original Big Btn > Go to URL” in my Demo)… so no matter where You click in the black background area the same “Go to URL…” will be triggered.
Functionally the Demo works as You requested even though the mechanism has been altered, and the actual set-up is much faster & simpler than it reads here. 
Fig.1
1 Like
thanks Jim! That’s what I needed minus a couple of things. I started going this route but deviated to the two timelines situation because I needed the button to transition with a fade between the two states. This may come from my lack of knowledge on when to use Timelines. Also, the “Big Button” works for the Pointer switch to hand On Mouse Over and taking you to the URL On Mouse Click, but I wanted to also be the trigger for the change of states in the button, from Normal to Hover, On Mouse Over. Would there be a way to achieve both those things?
thanks so much, again 
I started over using your original file…
plane_button_test_JHSv2.hype.zip (55.3 KB)
Main Changes - Please refer to Figs 1 & 2 for the following…
The “book now HOVER” group has had the Timeline extended another 5 frames (10 now in total).
At the 5 frame mark there is now a “Pause Timeline” action.
The “Mouse Over” event for the “Big Button” starts the Timeline “Hover” (set at “0” seconds) which runs until frame 5 (the “Pause Timeline” action) and the “book now HOVER” opacity changes from 0 >100%.
The “Mouse Out” event for the “Big Button” continues the Timeline “Hover” (to frame 10) and the opacity of “book now HOVER” changes from 100% back to 0%.
Fig. 1 - “Hover” timeline new settings
Fig.2 - “Big Button” mouse events
1 Like
Hey Jim,
Thanks!! I see that this works if the BOOK NOW button is there from the beginning. What if I wanted it to fade on after the plane has come up, in its Normal state. Granted still keeping the Hover interaction you created in your last post.
Hi Daniel!
I’m just about to start a 90 minute meeting - will follow through on your request after that.
Of course!! no worries. I appreciate your time 
1 Like
Hi Daniel!
So the issue is one You will need to keep your eye on with Hype 3.xx (don’t know about the upcoming v4)… when working with the same elements on different Timelines sometimes the property settings can get skewed for a given element - as happened in this case.
The “book now NORMAL” opacity setting - which should have had been animated with a start value of “0” and an ending value of “100” on the “Main Timeline” instead had both its values bumped to “92” and “192” respectively.
The fix is to reset these (2) opacity values as appropriate in the Demo project (please see Fig.1).
Fig.1
1 Like
hmmm… I see. but in your latest project, v2 the “BOOK NOW” button doesn’t really fade on, its there from the beginning. I created a new version of it. I have it working the way I want but, since the “hover” timeline gets triggered with the Mouse over action on the banner, you can accidentally reveal the button on its “hover” state before the "normal"button fades on in the Main timeline. Would this be a situation where scenes come into play?
Thanks Jim!!
see attached project for reference
plane_button_test_DS_v3.zip (57.7 KB)
plane_button_test_DS_v3.zip (57.7 KB)
Hi Daniel!
I did not change v2 - I was expecting You to do it using the corrections I outlined in my previous post - in which I described why there was an issue...
So now You have your working project - except:
Please see Fig.1 below for reference
To prevent the premature trigger of the rollover from happening for the "book now HOVER" group create a keyframe for the "Display" property (use the "Property" pop-up to select it) at "0" seconds in the "Main Timeline" for the "book now HOVER" group.
Next change the "Display" property of the "book now HOVER" group to "Hidden".
Then where the "book now NORMAL" group appears on the timeline (opacity "100"), add another keyframe for the "book now HOVER" group and set the "Display" to "Visible".
The "Display - Hidden" property prevents an element from being interacted with, as well as making it invisible. Whereas an opacity of "0" simply makes the element invisible - but it still can be interacted with.
I have not updated your project - this change is for You to make.
Fig.1 - Setting the "Display" property for an element
1 Like
Of course!! I wasn’t expecting for you to make it all for me 
You have used so much of your time in walking me through these. I really appreciate it.
Thanks soooo much Jim. You are the best.
d
1 Like
