Countdown Timer for an animation built with Tumult hype


(Stefano) #1

Hi to everyone,
I am new in this community and i want to congratulate with you for this awesome software.

My question is:
How to insert a timer countdown that start both the animation that i have built with Hype 3?

The animation during 30 second and i want that start with the animation when i click over the button.

Someone can help me?

Thanks


#2

Create a new timeline, which you can call ‘Timer’:

Next, create a timeline action on this timer that performs an action:

Select your button, and create a ‘Mouse Click’ action to run this timeline:

If you want feedback for the current state of this timer, please check out this solution by @nick that gives you a countdown timer:

This can be inserted within the inner HTML of a HTML widget:

<span id="countdown" class="timer" style="color: Yellow; font-size: 50pt">></span>
<script>
var seconds = 30;
function secondPassed() {
    var minutes = Math.round((seconds - 30)/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;  
    }
    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
    if (seconds == 0) {
        clearInterval(countdownTimer);
        document.getElementById('countdown').innerHTML = "Try Again";
    } else {
        seconds--;
    }
}
 
var countdownTimer = setInterval('secondPassed()', 1000);
</script>

Understand relative timelines
(Stefano) #3

@nick with this method it doesn’t work! Other solutions?


#4

Can you explain how the answer above doesn’t answer your question?


(Stefano) #5

If i use the Html code, you offer me in the first response, into an Html widget, i don’t understand how i can allow to start the countdown timer if i push over the button which do start the animation to count.


#6

Here’s a version that has that countdown script within the inner HTML of an element, and it is set to start at 1 second into the main timeline (in the second scene):

countdown timer.hype.zip (156.6 KB)

This technique uses inner HTML key framing: If you modify the inner HTML of an element while recording, you can change the inner HTML at a specific time on a timeline.


(Stefano) #7

Perfect. Now work. Thank you so much!


(freed) #8

This is work perfectly. THANKS !
Do you know if it’s possible to add millilseconds to this timer ?


#9

Yes: the value selected at the bottom here is the number of milliseconds:


(Ralph) #11

I need something similar to this timer but it needs to work a different way.

I need the timer to go from 0.00 to 3 hours in 10 seconds of a timeline.

so the timer needs to go up instead of down.

This is to display a sped up instruction of two separate situations. I know this can be done but this is way beyond my scope.

anyone?

R


#12

Going up is easily done by changing “seconds–” to “seconds++” but what you are asking if I’m understanding correctly is that you want a timer to show 0 - 3hrs within 10 seconds?

Put this in a new function and call it at the beginning of the timeline.

var seconds = 0;
var display = hypeDocument.getElementById('display'); // this is your element that you want to display the time in.
		
window.time = setInterval( function () {

	seconds = Math.round(seconds) + 9;
	var minutes = Math.floor((seconds)/60);
	var hours = Math.floor(seconds/3600);
	var minsRemain = minutes % 60;
	if (minsRemain < 10) {
		minsRemain = "0" + minsRemain;
	}
	var secondsRemain = seconds % 60;
	if (secondsRemain < 10) {
		secondsRemain = "0" + secondsRemain;
	}
	display.innerHTML = hours + ":" + minsRemain + ":" + secondsRemain;
	
	if (seconds >= 10800) {
		
		clearInterval(time);
	}
		
}, 1/100);

Put this in another New Function and add it at the end of your timeline (10 seconds):

clearInterval(time);

(Ralph) #13

Thx for this but dont I need to assign a font ? as adding this function only when precviewing shows nothing.


#14

You have to add an element. A Text element for example and give it an ID. In my example I gave it “display”.

display.innerHTML = ....

shows the result.


(Ralph) #15

Ok but where do I add the element from within the function?

function starts like this

var seconds = 0;
var display = hypeDocument.getElementById(‘display’); // this is your element that you want to display the time in.

an example would do it or me, thx much


#16

The element is an object you place within your scene. The function just references this. It can be any object you want. A rectangle, a Circle but I would use a text element. But give it an ID using the inspector. You could use whatever you want as an ID as long as you put that in the function. For ease, I would stick with “display” as an ID.

countUp.hype.zip (14.6 KB)


(Ralph) #17

Ah Ok I got it now, I found where you change the element id copied the same function for a different display name and both timers work. But only ONE stops at 2:59.51 and the other keeps going , I see a stop function as well how do I add that correctly?

And last I need one timer to go to 3 hours in a little less time like 5 seconds and the second timer to go to 9 hours in 10 seconds then I’m done. thx so much

R


#18

countUp-v2.hype.zip (17.6 KB)