Circular countdown

1

I like to make a circular countdown i.e. in a timeline the circular progress bar will become 0% to 100%.

is there any unique way?

2

hope this’ll get you creative :wink:

circularCD.hype.zip (13.9 KB)dl

3

I made somthig like this, 5005.hype.zip (11.3 KB)however not exactly satisfied. I was looking for super smooth progress with some physics may be added on it but anyway it will somewhat OK for me.

4

@8848

I have made changes to Hans’ version that are closer to the functional style & color of your original example.

As part of these changes there are (3) more graphic element layers & the setTimeout method has been added to the “count” function (now called “count2”).

You can adjust the timing via the Timeline, plus changing the number in the countdown text box.

circularCD_Green.zip (18.6 KB)

2 Likes
5

wow! @JimScott sir! mindblown!

1 Like
6

I tried to make the animation count up from 0-100 by changing -1 to +1 with no luck.

Any suggestions on how I can achieve this, and add easing to the count up ?

count.innerHTML = (count.innerHTML)-1;

if (count.innerHTML != “0”)
window.setTimeout(hypeDocument.functions().count2, 1000, hypeDocument);

7

count.innerHTML will return Text. Not a number.

So what you are doing is stringing the returned text to a 1.

Convert the text to a number and then the + will become a math operator instead of a string operator.

Number(count.innerHTML) + 1;
8

@LEO.JOSEPH

One of the reasons I find it difficult to have a firm grasp of JavaScript is its systemic irregularities.

If “-1” works then why shouldn’t “+1” or “++”… but nooooo! - not in this situation.

Try:

count.innerHTML = Number(count.innerHTML)+1;
    
   if (count.innerHTML != "100")
      window.setTimeout(hypeDocument.functions().countUp, 1000, hypeDocument);

Note that we need to put “Number” in front of (count.innerHTML)+1;

Also note that if You are counting up to a number with this set-up, the code adds one to the existing number before it hits the conditional “if” line (and bails) - so You will want to use the number You are counting up to - not that number + 1. So for counting up to “100” put “100” in the conditional line not “101”.

Edit: Looks like Mark beat me to it!

9

ha true, I thought as loops use +1 or ++ it would work here.

This solution works, thanks

10

i am still having problems to make it like the circularCD_Green. can u make a video tutorial? I need to follow the same steps.

11

@8848

Based on your first sentence it sounds like You are creating a version from scratch ~ is this accurate? If so, is there a reason why You chose to go this route instead of adapting the “circularCD_Green” Hype file?

It would be helpful for You to describe what is giving You a problem(s) - the graphics, the code, the interface, something else?

3 Likes
12

For those who can’t handle JS, the old school method for the circle from the video world is to create several pieces of art and manipulate them manually – green circle on white and a green circle with a 360º stroke on white - dupe both. Turn all into individual one-item groups with overflow hidden, then offset the circles this way:
One green half circle (left side visible), one green half circle with stroke (left side visible), one green half circle with stroke (right side visible). The fourth object - a plain green circle on white - is not offset. Make certain that the center point of each group has been offset to line up with the actual centers of the circles.
Stack them top to bottom: half green circle (left side), half green circle with stroke (right side) set to 0 opacity, half green circle with stroke (left side), full green circle.
To animate - rotate the third layer (left half circle with stroke) 360º over the span of 60 seconds. When it hits the 30 second mark, make the third layer (right half circle and stroke) visible (instant) and make the top layer (left green circle) invisible (instant).
That’s it.
As the revealed halves are set to change visibility with a bit of three-card-monty action, it provides the illusion that the stroke is stretching around the circle.
As for the numerical countdown, JS is the best way but if you are really stubborn and have lots of time on your hands, you can do this manually (I wouldn’t want to be you).

13

anything innerHTML or HTML for that matter is always gonna be text as the browser has to display it. I don't find this irregular :smile:

Just to add (for clarity) javascript uses a "+" symbol for concatenation as well as the add operator which is why when using it with the string above it "concatenates" instead of adding 1 to the value.

There is quite a large debate as to why Javascript uses this as it can lead to "hard to track bugs".

Just be aware of this in future :wink:

14

@Furutan

Your description is basically what I created in my example “circularCD_Green.zip” above. The only use of code (setTimeout) was for the numerical countdown, which was - as you noted - the best way. The code is very straightforward. Just cut 'n paste with one adjustment needed - the name of the text box used in the project - or one could simply go with the existing name.

15

anything innerHTML or HTML for that matter is always gonna be text as the browser has to display it. I don't find this irregular

@DBear

Hi DBear!

Thank You... indeed, this scenario was a learning experience.

I came across the string aspect when I looked things up in one of my reference books. What I find irregular is that "-" by itself works (clearly one is not minus-ing a string so JavaScript plows ahead), but using a "+" by itself does not (the concatenation). To be consistent~regular both symbols should require the use of Number in front of the expression when doing math~arithmetic (because the "+" concatenation is with us for good I would think).

Not needing Number with "-" might be a shorthand convenience, but it does not lend itself to clarity in the learning process. (So glad I didn't have to learn English as a second language.)

16

@JimScott

I understand what you are saying Jim and I feel for you and I agree in some respect but this boils down to not learning the basics of Javascript unfortunately. I’m not referring to yourself but everyone in general.

Of course the language could have better handling of these situations but ultimately it’s down to learning the basics of the language. Again I’m not pointing this in your direction but a lot of people these days copy and paste code expecting it to do what they think it does without understanding what it does.

But, hey we all live and learn. Glad everything got sorted in the end.

2 Likes
17

Hey there!

I have tried a Count up to 5,4 Seconds with the Method in JimScotts Reply (Mar 14) and I cannot get it to work. :frowning: Any Ideas??? I upload my file.

test CounUp to 5,4s.hype.zip (28.4 KB)

18

Looking at what you have done it is clear you do not understand what each part of the code is doing or basic JS.

I understand that it is convenient to copy and paste code but if it does not work and you do not know the basics all you end up doing is asking us to show you the basics.

Saying that

Read the code you have there.

You are doing math with seconds.

So if you have an integer that counts up every 5.4 seconds is it ever going to reach a figure of 5,4.

Look at your timeout line. What is that doing when the time out is reached. Is it going to do anything as you have it.

1 Like
19

Wow, that was rude (and somewhat elitist)!

Do you realize that a significant group of Hype users are probably designers with no formal CS training because the tool is so much like Flash? Most of the time, you can do a lot with Hype and never have to touch JS.

Also, the rest of the world outside of the US uses “,” as a decimal point indicator.

I can easily see how someone outside the US would not realize that JavaScript is a language developed by a US company who imposed a narrow minded “.” convention for the decimal point.

20

Be careful and check your facts @emailsergio UK, some places in Europe, Latin America, Asia and Australasia use the "." as a decimal mark.

Also most technical notation uses the "." as the mark and as we are referring to computer language here it's almost de-facto that "." is used because the "," separates variables.

Also myself and Mark are from the UK not the US

I perfectly except that "5,4" means "5 point 4" (how we say it in my country) but when it comes to computer language it should be learnt that one needs to learn how to use the "." point as the decimal mark.

Finally, did you check out the fact that the person who liked Mark's reply was the very same person he was aiming the reply at. Clearly he didn't think it was rude.

1 Like