How to use the timer


(Joao Ribeiro) #1

Hi again,

I am trying to understand the start timer and stop timer that I have as an event response.
Can I set a timer to delay the next action? Like onMouseOut I’d like to trigger two actions, starting one time line and continuing another, but one should wait a few seconds before the other action takes place. So far the actions are executed immediately and one stops the other from happening. I wonder if I can’t set a timer to avoid this kind of conflict.
Thanks in advance,
Joao


#2

Yes - You can do this… but

It is always good to show your work (upload your actual project - or an example of the issue) - that way the Forum can offer the most accurate solutions.


(Joao Ribeiro) #3

Hi Jim, it is not my project, I am steeling other people projects to learn how to do it. I “disassemble” them and try to solve, improve or simply understand how they did them.
Anyway, here it goes:

https://we.tl/t-RyE3XV3KFC

As I said, my intention here is learning and collecting ideas.

Cheers


#4

Excellent - You are in a great place for that. :+1:

I’ve looked at your example and have created one of my own, but I do not have time at this moment to do the write up to post here. I will be able to finish later tonight (about 5 hours from now).


(Joao Ribeiro) #5

Hi Jim,

I had to travel today, but I got home and did this:

https://we.tl/t-NSM9CiuHlO

It works, but not quite well in responsive/iPhone mode.

Also, when I do things quickly, like clicking here and there the page seems to go a bit crazy,

Cheers,

Joao


#6

I am a little behind You as my response demo in this post is based on your first example…

Our overall goal in this demo (per the request in your original post) is to create an interface that works with “Mouse Over” ~ “MouseOut” (no scripting).

This is a problem situation unless the user interaction is tightly controlled. Your initial “Mouse Over~Out” example shows this problem clearly as actions fire all over the place as the user slides the mouse around over various buttons creating an incoherent visual experience. The timelines are also needlessly complex. A “Mouse Click” (or Up~Down) would have been a better choice for this scenario IMO.

In the simple attached “Demo” there are only two buttons to show the basic concepts. I have put a block on user interaction with the other button by effectively disabling it until the “active” button (i.e. the initial button with a mouse over~out event) is completed, then the “mouse over” event for the other button becomes available.

In addition to the “Main Timeline” there are the “Rectangle” & “Circle” timelines where all the property settings occur.

Note that in the “Rectangle” & “Circle” timelines the “Mouse Over ~ Out” events change the opacities of elements as well as sliding them left-right (in and out of view). These are your adjustable timed controls.

So with these things in mind… Timer_Demo_JHSv1.hype.zip (15.9 KB)

When the mouse moves over a button (the “active” button) there is a “cover” element placed on the other button preventing it from firing any actions until the “mouse out” event occurs for the active button. Note that these covers use the “Display” property which shows or hides the “cover” element (not change their opacities).

When the “cover” element is shown over a button it prevents any assigned actions for that button from firing. When the “cover” element is hidden the button interacts with assigned “mouse over~out” actions.

In this demo I have given the “cover” element a light grey color to help You visualize how the process works. In actual use there would be no color assigned to the “cover” element.

BtnCovers


(Joao Ribeiro) #7

Hi Jim,
I have just downloaded the file. I’ll have a look and see if I can understand it.

Thanks,

Joao


(Joao Ribeiro) #8

Ok, I saw what you did, but why do I have to block the other buttons? To avoid them being triggered before the action has stoped? Is it?
Interesting, I have to block the user from triggering a bunch of events at a time.

Check if I understood it correctly.

Cheers,

Joao


#9

Exactly, otherwise You have a mess if the user quickly moves over various buttons which are all firing “mouse over” & “mouse out” timelines. As indicated in my previous post I think “mouse click” is a better interface approach, but your first post specified a “mouse out” event.


(Joao Ribeiro) #10

One thing is happening, tho, the clickable area of the button seems to be pretty small, sometimes it switches on and off. Is there a way to make it bigger?
Here goes the updated project.


Thanks a lot for the tutorials.
Joao


#11

Either make the button itself bigger - or put it in a “Group”. The button can then stay the same size but the area of influence can be larger due to being in a Group.


Process to create a “Group” for a button…

• Create the button - select it - choose “Arrange” menu > “Group”.

• Note that when the Group is created there are no visible borders or background color.

• Enlarge the Group (“Metrics Inspector”) so that its area is larger than the button. The appropriate sizing is up to You.

• Position the button inside the Group as needed.

• Use the Group as the trigger for actions - not the button; however, just the button is visible to the user.

Demo: Button_Expanded_Area.hype.zip (12.3 KB)


=====================================

Your new example still does not work very cleanly IMO - and the timeline set-up appears to be more complicated than it needs to, however I do not have a full understanding of your set-up or intentions.


You are Welcome!


Additional Note: Your project would be far easier to create & maintain using JavaScript. I know You are not familiar with Javascript but will be worth your while to begin learning as time allows. Currently there are so many timelines and controls… Just sayin’ :sunglasses:


(Joao Ribeiro) #12

I see, but that way I can’t profit from the button states, I’ll have to recreate them.


#13

Why not just make the button larger?


(Joao Ribeiro) #14

That’s a solution. As I mentioned, my goal is to learn, in this process I’d like to know why the drawing, transformed in a button, will have a clickable area less than the real area?
It is not a project, just a learning process.

My next step would be trying to incorporate javascript, but that’s for a new topic.

Thank you,

Joao


(Kalle) #15

Just place the ‘Buttons’ group at the very top of the layers panel. The buttons don’t work correctly, because all the ‘rect…’ groups are placed on layers above the buttons layer. And - remove the ‘continue Main Timeline’ on mouseOver. This doesn’t make any sence at all, since nothing happens on the Main Timeline but it makes the buttons unstable…


(Joao Ribeiro) #16

Hi Kalle,
Thanks for your answer.

The continue main timeline with mouse over is used to play the timeline in reverse, so it will make the timeline “go away” and load the next animation.

I remove the rectangles one weird thing is happening, the palm button, altho has the same programming, has a different behavior.

https://we.tl/t-uh55HAqe85

Cheers,

Joao