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
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>
@nick with this method it doesn’t work! Other solutions?
Can you explain how the answer above doesn’t answer your question?
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.
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.
Perfect. Now work. Thank you so much!
This is work perfectly. THANKS !
Do you know if it’s possible to add millilseconds to this timer ?
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
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);
Thx for this but dont I need to assign a font ? as adding this function only when precviewing shows nothing.
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.
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
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)
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
countUp-v2.hype.zip (17.6 KB)
Hi i need a timer simliar to this but i want the timer to start when i click on each of the appliences button , is there any way i can do this
for example when i click the vacum cleaner or any other one i want the timer to start for that purticular appliences
can that be done ?
INTERFACE.hype.zip (1.5 MB)
this is my user interface- that i created
please look it up at https://inorganik.github.io/countUp.js/
well explained, easy setup …
