Problem with controlling looping symbol timelines

I'm trying to create a tutorial involving propagating sound waves, and I want an animation showing expanding circles to represent the wavefronts at two different frequencies. I'm attaching a sample (test) to show progress so far.

I have a symbol which is just a red circle, which expands linearly in its own timeline (symbol::Main Timeline) over 4 seconds, and which loops back to the beginning when it reaches the end of its own timeline. I placed 4 instances of this symbol on the main scene, offsetting the start of each by 1 second.
To represent a higher frequency (double), I just duplicated the symbol, changed its colour (to blue), and put 8 instances on the scene, offsetting each by 0.5 s (and slightly offsetting them all from the existing red symbols).
This works fine (but be aware if you run the test sample that it can be visually slightly disturbing - so if you are sensitive take care).

My problem is that periodically I need to "freeze" and restart the animation of the sound waves, so that I can illustrate key points about sound reception at different phases. I have a javascript function that I think should pause both the symbol timelines and the scene timeline, and another which should continue them. I call the pause function as a action set about 8 s into the main scene timeline (for demonstration, you can also call it by clicking a central rectangle), and it pauses fine.
A key press calls the continue function, and I want the sound wave animation to continue from exactly the same state that it was in when it was paused. However, it does not! The wavefronts become offset, and sometimes apparently arbitrary changes in position seem to occur. It is as though the different timelines were not all stopping and starting in synch.

Sorry this is a bit complicated (hopefully the sample will make the problem clear). I think I must have somewhere got the wrong concept about symbol timelines or using the Hype Javascript API, so any help or advice would be much (30.6 KB)

Bill Heitler

1 Like

The Easiest solution: Don't use symbols and only one timeline to pause and continue.

More complex answer: If you want to pause and continue multiple symbols you need a lookup and store the play state and direction to restore it properly. You shouldn't just continue symbol timelines as they might haven't been playing yet. Doing so, will certainly lose synchronicity.


PS: @jonathan there seems to be some bugs when pausing and continuing a timeline in combination with symbol actions doing the same. Times and durations are somehow not managed correctly and create some weird jumps asynchronicities).


Hi MaxZieb,

Thanks for the reply. In my sample “test” the programmed pause in the scene main timeline does not occur until after all the symbol timelines have themselves been started, so they should all be playing at that point. But also, the Pause function pauses the main scene timeline as well as the individual symbol timelines, so even if it gets called early (before all the symbol timelines have been started), then the start of the remaining symbols should be delayed until the scene timeline itself continues, and so should stay in synch. At least, that was my plan!

I realize that I could just brute-force multiple copies of each waveform playing out in turn as a non-symbol in the scene timeline, but that seems a bit clunky.

(I should perhaps say I’m a refugee from Flash and quite new to Hype and to javascript, so I do not discount the possibility that I have missed something obvious, or just made a mistake …)


1 Like

I think you're running into issues where the main timeline is trying to synchronize the child symbol timelines. Because symbols have "run off on their own" the synchronization analysis can't be much more than rudimentary and looks like it is failing to figure out it should be keeping the playback state because you want it to loop once kicked off.

If you were to remove the pause/continue for the scene's main timeline in your code, I believe you will find the behavior is what you want? The only problem is that it would not work correctly if you manually pause before your 0.08.11 pause point, since the main timeline would continue to run and start timelines that have not yet executed.

Just to clarify - you only want an initial offset and then the loop should always be continuous whether pausing or stopping?

If you wanted a no-code solution, similar to @MaxZieb's suggestion, you could not use symbols and instead have your ellipses in the scene. But what you'd do is create an individual timeline for each one, and kick it off via a timeline action on the main timeline. It wouldn't be too bad for this number of waves, but I get that it is a small PITA :slight_smile:.

For a code approach that doesn't require breaking out the symbols, you could likewise make timeline actions that run code kicking off an individual symbol. You'd just need to keep some state or tie the symbol index to a particular time.

(both of these solutions would mean reinstating the pause/continue of the scene's main timeline)

1 Like

Thanks Jonathon,

I’ve ended up using a brute-force approach, just putting multiple staggered ellipses in the Main Timeline. It’s ugly on the developer side, but it seems to work fine on the user side, and in the end it was easier than trying to de-tangle the mess I was getting myself into with multiple looping symbol timelines…

I must say I enjoy working with Tumult Hype, and appreciate the responsiveness of the forum support to beginners like myself.

In the unlikely event that anyone is interested, here is the finished product:

Bill H


chapeau, cool project :slight_smile:

Wow - that is a great explainer document! Sometimes simplest is best :slight_smile:. I didn't know about the underlying mechanisms or how phantom sounds were created (or avoided) - so this is quite new and interesting too.