Set number of loops

Hi Stephen, I know this is old but Im new to Hype and its solving so many issues for me.
I tried your code and it works a treat. Would you happen to know what I would need to do if I wanted it to stop on the 3rd loop at a specific time?

Many thanks

1 Like

I need this too, commonly web ads loop three times and then stop in the last frame where you can see the offer and click button.

Hi there.

Open the “Resources” window.
Add javascript function.
Label it loop3 (This is set to “untitledFunction” as default).
Copy and paste into the same file the following:

if (window.loopCount == null) {
	window.loopCount = 0;
}

if (window.loopCount < 3) {
	window.loopCount++;
	hypeDocument.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
}

Create another javascript function and label this “stop”.
copy and paste the following into the same file:

if (window.loopCount == 3) {
hypeDocument.pauseTimelineNamed(‘Main Timeline’);
}

Now go to your timeline and create 2 Timeline actions.

Place the 1st where you want it to stop permanently. (You will be prompted with a number of options, choose “Run Javascript” then choose “Stop”).
Then place the 2nd where you want it to loop 3 times from. (choose “Run Javascript” then choose “loop3”.

Thats it.

Hope it works.

3 Likes

Thank you! I’ll store this in my Notes. :grinning:

Hi @stephen,

How can achieve the same results in your “banner-loop.hype.zip” example if I have 2 scenes the project instead of 1 scene?

@damionp

I've adapted @MarkHunte's example from another thread...

Hype Demo: loop MH JHS.hype.zip (30.1 KB)

Note:
In your other related post (see below) You wanted 5 frames/sec. I did not find that frame rate in Hype's drop down selector - the lowest I saw was 8 frames. I do not know if there is a way to set a custom number.

1 Like

Hi Jim, Question below runs fine as infinite amount of counts however I want to tweak this where theres an interval set for 15secs and then it switches to new timeline within symbol? Any Ideas on how to accomplish this?

 var allSymbolInstances = hypeDocument.getSymbolInstancesByName('Spinner');
 for (var i = 0; i < allSymbolInstances.length; i++) {
 	var symbolInstance = allSymbolInstances[i];
 	symbolInstance.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
 }

The main timeline action calls the symbol code to start all the symbols

	var allSymbolInstances = hypeDocument.getSymbolInstancesByName('Spinner');
 for (var i = 0; i < allSymbolInstances.length; i++) {
 	var symbolInstance = allSymbolInstances[i];
 	
 	
 	symbolInstance.startTimelineNamed('loop', hypeDocument.kDirectionForward);
 	
}

In the symbol, we have two actions on the loop timeline.

The first one calls a new js function loopSecondCounter.

    var symbolInstance_ = hypeDocument.getSymbolInstanceById(element.id)
	 
	
	
	
 	 if(typeof window[element.id].counter == "undefined") {
	window[element.id].counter  = Math.floor(symbolInstance_.currentTimeInTimelineNamed('loop'))
	} else {
 	
	window[element.id].counter   +=  Math.floor(symbolInstance_.currentTimeInTimelineNamed('loop'))
	}
	
	if (window[element.id].counter > 14){
	
	symbolInstance_.startTimelineNamed('col', hypeDocument.kDirectionForward);
 	
 	
	}
	   
element.querySelector('.textCounter' ).innerHTML =  window[element.id].counter

This creates a global counter property for each symbol that’s loop timeline calls it.
The property’s value accumulates the current time in the loop timeline.
The calling action is 100th of a second before the second action for this reason.

The second action simply just restarts the loop timeline.

Symbol loop by seconds MHv1.hypetemplate.zip (25.5 KB)

2 Likes

Slight update done to code above
Made the undefined of the global property an if else instead of an if block

1 Like

This is awesome, Thanks Mark. I took me a few minutes to understand the inner workings of the code and how its presented, pretty clever stuff.

Thanks again :slight_smile:

1 Like

Ta.

Check the timings. I think because I was flooring the time it may be slightly out.

I only used floor() so I could get a clean number in the text.

This may work better

	var symbolInstance_ = hypeDocument.getSymbolInstanceById(element.id)
	 
	
	
	
 	 if(typeof window[element.id].counter == "undefined") {
	window[element.id].counter  =  symbolInstance_.currentTimeInTimelineNamed('loop') 
	} else {
 	
	window[element.id].counter   +=   symbolInstance_.currentTimeInTimelineNamed('loop') 
	}
	
	if (window[element.id].counter > 15){
	
	symbolInstance_.startTimelineNamed('col', hypeDocument.kDirectionForward);
 	
 	
	}
	   
element.querySelector('.textCounter' ).innerHTML =  Math.floor(window[element.id].counter)

I took out the floor() for the main code and put the limit up 15 ( from 14)

Mark what would it take if I need this slightly tweaked for my project.

So In your example the hype file code loops the spinner in the new timeline ‘col’. What I wanted initially for it to stop completely at 15 secs ‘loop’ before entering ‘col’ timeline?

I know you know the answer to that…

symbolInstance_.pauseTimelineNamed('loop')

symbolInstance_.startTimelineNamed('col', hypeDocument.kDirectionForward);
`
1 Like

Kinda ?

if (window[element.id].counter > 15){
	symbolInstance_.pauseTimelineNamed('loop')
	symbolInstance_.startTimelineNamed('col', hypeDocument.kDirectionForward);
2 Likes

Thats it.

:+1:

2 Likes

If you want to avoid code, you can also just have a second timeline that triggers stuff on the 15s frame with a an timeline actions.

1 Like

Yes, true I was aware of that, but this one needs the above the solution. Without going too much into detail, the loop is basically for a propeller of a Drone Mavic 2 Zoom/Pro consisting of just one symbol propeller duplicated for 4x times for 4x sides spinning at rate .1 - .2 seconds in y coordinate giving it a sense of that fast movement? Anyhow, Safari gave me a warning because that propeller animation being in a constant state of loop thereby almost ‘choking the browser’?

Update:
Im toying with different ideas that may or not need the above.

I ended up not going with the above and made a decision to stop the animation for the propeller at a specific point in time by dropping an action in different timelines where it needed to be stopped where it was needed and hide the spinning drone by just using this

 var allSymbolInstances = hypeDocument.getSymbolInstancesByName('Spinner');
 for (var i = 0; i < allSymbolInstances.length; i++) {
 	var symbolInstance = allSymbolInstances[i];
 	symbolInstance.pauseTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
 }	

heres the result

1 Like

This is exactly what I was after! Thank you so much! :grin:

1 Like

Was this ever implemented in any updates since March 2015?
Thanks

Specified loop count is not a feature presently; the code above is still the best way to accomplish this.

2 Likes