Showing the time line time

Hello everyone!

I am once again stuck. In the first scene I am using ‘on drag’ to run my function to display the timeline time in the box which works fine. However, I would really like the function to run continually when the timeline starts rather than be controlled by dragging the slider (eg a simple display of the timeline time as it runs). I don’t know how to continually invoke the function other than putting loads of timeline actions in (which would be ridiculous).

In the second scene, I have pasted the animations into a symbol but it doesn’t work at all. How can I make it all work in a symbol. My eventual aim is to have the timeline time continually displayed in a persistent symbol.

If anyone can spare a few minutes to take a look and solve this, I would be hugely grateful.

Many thanks

Simontimer.hype.zip (19.4 KB)

I’m using the Linux laptop right now, so this is theoretical. It sounds like you want to use requestAnimationFrame

Closest example I have is here…

…where there needs to be constant updating of data. It happens with each frame of animation. So if things start to slowdown, there’s less updating.

I suppose this is another example too…

It uses both requestAnimation frame and setInterval. The latter was used because it needed refreshed calculations every second. You can decide what works best for your project.

You can also use Hype AnimatonFrame. Its a Hype specific wrapper for RequestAnimation frame and cleans up after itself when you switch scene etc… Further more it offers a built in FPS option. Find it on the forum in the extension section.

Another option without much code is to create an additional timeline and add a timeline-action (function call from the timeline) and put a custom behavior call on half a second and the also add a start timeline on that frame action stack.

Now the custom behavior is called every 15 frames and executes your code. You can listen to this trigger from within your scene or any symbol.

You can also use a shorter interval and start and stop this “ticker” by starting and stoping the ticker timeline. Nice benefit… Hype cleans up the interval when you change scenes etc.

2 Likes

Many thanks for your help. I think that this code is well beyond my (very) basic knowledge of javascript but I’ll give it a go.

That’s fantastic, and nice and simple for my small brain to understand. Works a treat, exactly what I was looking for. Thank you kind sir.

1 Like

I’m nearly there. It is all working except I cannot get the javascript to work in the symbol. I can start the symbol timeline from outside the symbol, but the ‘addTenSymbol’ and ‘timeInBoxSymbol’ will not work. If anyone knows a quick fix to this I would be very grateful.

Simonscorer.hype.zip (29.4 KB)

The console shows:

Error in undefined: TypeError: hypeDocument.getSymbolInstancesById is not a function. (In 'hypeDocument.getSymbolInstancesById('score line')', 'hypeDocument.getSymbolInstancesById' is undefined)

The problem is you are using getSymbolInstancesById but it returns a singular instance, so the API is getSymbolInstanceById.

That maybe will get you unstuck to keep moving forward :slight_smile:.

1 Like