Two problems with a button menu


(Rick Wolff) #1

I have an animation that consists of five buttons, each initiating a timeline that reveals a text box, pauses, then animates it away. I have one approach for desktop, and one for mobile (phone only so far). Each has a problem I can’t figure out. I don’t know if they’re related, except that they’re both happening to the same file.
DESKTOP
Upon click, the box takes its shape, and is populated by content, at which frame the timeline pauses. The box is offset enough to be able to click another choice, which causes the visible text box to continue its timeline and animate off the screen while the next choice is animating on.
Problem: The first click of any button causes all five to animate on. The next click clears them away, and the problem doesn’t return.
MOBILE
A different approach here: I have a standard dismiss X with each open box, which lets the box fade out (continue timeline), clearing the screen to make a new choice. (Note: I hid the big choice buttons when a text box is open, to keep the user from accidentally tapping one.)
Problem: When I click on a choice high in the menu order after having clicked on a choice low in the menu order, the dismiss X button doesn’t work.

I have included the file in question. woofsloganmenu.hype.zip (2.2 MB)


#2

Hi Rick!

The following appears to be causing the problem on the “Desktop” layout:

In the screenshot below the “music” button is set to “Start Timeline…” the others are set to “Continue Timeline…”. The other buttons follow the same pattern e.g. the “eclectic” button has “Start Timeline…” the others are set to “Continue Timeline” (including “music”).

The net effect is on the initial opening of the layout a click of any button has all the timelines run from their beginning. However, after this first time around, when You click on another button which has its setting as “Start Timeline…” it resets itself to the start of its timeline and runs, and things work as planned.

So since having all timelines at their end (after the very first click) appears to function correctly why not do that at “Layout” opening? This seemed to be the simplest solution.

In this demo: woofsloganmenu_JHSv1.hype.zip (2.2 MB)
“On Layout Load” has the time set to “00:01.18” for all the appropriate timelines (what I believe is their end points). I only have had the time to do a slight bit of testing, perhaps there are other functions that might be affected, but things appear to work correctly.


Below: “Music” button selected with corresponding “Actions Inspector”


**Edit:** On review of the literature @jonathan already suggested this solution (as posted here) in direct reply to your question some days ago... what's up with that? http://forums.tumult.com/t/relative-timelines-but-not-backwards/8659/6

#3

On to Issue #2 the Mobile “dismiss” box.

Usually when things aren’t responding according to intentions the first thing You look for is what is covering the trigger.

What has shown up in my investigation - the “dismiss” box is not eliminated (“Display” property = “Hidden”) only the opacity has been set to “0”. An opacity of “0” does not remove the element - it is just invisible.

Example: The “Music” button & “music” timeline.


As I have gone through your set-up I noticed You have inconsistencies in how You delineate elements.

It may be totally coincidental but the very elements that are causing the issue are also those elements that are not in a coherent naming schema. Example: some of your “dismiss” images are given a numerical suffix (the ones causing the issue) - e.g. “dismiss-f60”; the others (that function properly) are given an alphabet-only nomenclature, e.g. “dismiss eclectic”. Just an observation.


(Rick Wolff) #5

Thank you for both.
Desktop layout: I got impatient waiting for @Jonathan’s reply, which was the same approach, and was also concerned with proper forum etiquette (it was technically a different issue).
Phone layout: I had three elements fading out, and only remembered to make a keyframe for Display at the end of the text and the dark box, but not the dismiss button. I changed the names of them back to the original names of the SVGs, just for good measure. Next time I’ll plan my naming convention a bit better. That didn’t cause the problem, though, since it happened with every dismiss button.


#6

Hi Rick!

Thank You for the update… I wasn’t clear about your reply just now - all is running properly?


(Rick Wolff) #7

Yes, it is. Both problems are fixed.
It’s just a matter of time before I start to think natively in Hype.