Howto: Loop or Repeat an Animation

Daniel · January 8, 2015, 11:12pm

Looping a Timeline

Do you have a timeline you want to loop? Here's how:

Here's step-by-step:

Place the playhead at the end of the timeline you wish to loop.
Click the + button on the Timeline actions area to create a new action
In the overlay that appears, select ‘Start Timeline’, then select the name of the timeline that you wish to loop (the current timeline).
Add another timeline action at the beginning of the same timeline to 'Continue Timeline'.

'Play in Reverse' immediately starts that timeline from the current point in reverse.
If you want to loop just the end of a timeline, create a 'Go to time in Timeline' action. Whenever the playhead crosses that point, your timeline will jump to the time you set.

Looping a certain number of times:

An Animation: Check out @MarkHunte's solution below, and read his explanation of how it works.
As a Timeline action: Howto: Loop or Repeat an Animation - #53 by CheeseDeluxe
A Video: Check out @DBear's solution below.

Looping within Hype

The 'Loop' toggle in the timeline controls will loop your animation within Hype, but will not have any effect on your export. This is useful for getting the timing of your animation just right.

BetsyPeters · August 12, 2015, 8:12pm

Hello, I am trying to loop a video-- but I am using Hype 2. I am unable to add actions right in the timeline.
Any advice?

Daniel · August 12, 2015, 8:22pm

In Hype 2: Select the video, switch to the ‘Element’ inspector:

And then you can check ‘Loop’ in that area:

BetsyPeters · August 12, 2015, 8:24pm

That was so easy! Appreciate your help.

B

FakePilot · September 2, 2015, 9:50am

How would you, loop it say only 2 or 3 times and then stop?

DBear · September 2, 2015, 10:49am

Hi Mattias,

Javascript would be needed.

set a variable and increase it with each loop and then after the third loop. Call a stop() or pause() on your video.

D

MarkHunte · September 2, 2015, 11:09am

For Animation,

In your Head;

Add this counter var,

<script type="text/javascript"> 
	window.loopCounter  = 0;
	  </script>

Then have the timeline Actions call a javascript function

Main timeline starts the animation timeline by calling the function.

the loop timeline starts the animation again by calling the same function.

The function code.

window.loopCounter++;
	
	
	
	if (window.loopCounter <= 3) {
	
	hypeDocument.startTimelineNamed('loop', hypeDocument.kDirectionForward)
	}

We limit the animation to three times.

loop.hype.zip (18.0 KB)

DBear · September 2, 2015, 11:20am

Mark’s method is great.

For video:

var video = document.getElementById("myVideo");
var loop = 0;

video.addEventListener('ended', function () {
	
	if (loop >= 2) {
	
		this.pause();
	
	} else {
	
		//console.log('ended');
		this.play();
	}
	
	loop++;
});

D

Bendora · November 6, 2015, 2:13pm

Mark,

could we also edit it that after the 3 loops i will jumpt to a specific label on the time line and stop there?

MarkHunte · November 6, 2015, 6:20pm

Probably.

But can you would need to explain a bit better of what you are after…?

DBear · November 7, 2015, 1:16am

You can probably put another if statement saying

if (window.loopCounter == 4) {
    hypeDocument.goToTimeInTimelineNamed(4, 'timelineName')
}

or even create another variable like

var endLoop = false;

and then change it to true at the end of the loop and then write your if statement then.

As Mark says though. If you could explain a bit more on what you want to achieve … we could be more specific.

D

Bendora · November 9, 2015, 10:46am

Well in the flashworld we would build a loop and after the loop counter finishes it would jump to a specific label on the time line. Labels are not yet here in Hype.

This is the loopcounter I normally would use:

if (isNaN(count) || count == undefined) {
	var count:Number = 1;
} 
else {
	count++;
}

if (count == 2) {
	gotoAndStop("final");
}

I made a small sketch of what I would like the timeline to do in Hype (yes, I have a nice steady drawing hand):

But me being me, maybe I am thinking to complex. So I should maybe think differently and add a few more seconds after the final timeline is done and once the loop has repeated itself 2 times, it should continue the timeline after a specific point.

I did understand the timeline Edge Animation had. There one could jump between timeline points with labels, like in Flash. See the screenshot.

Here is the final test animation I build back then in 2012:
hvl_test_edge.mp4.mp4 (1.6 MB)

MarkHunte · November 9, 2015, 11:34am

In a test I did while waiting for your reply. This is exactly what I did. Which worked but when we say probably we mean yes you can jump to a point on the timeline. Bu twe use the word probably because we are unclear of your exact needs and therefore cannot say 100% percent that what you want can be done.

Jumping to anywhere on a time line is easily done through code or GUI. In GUI I mean timeline Actions after the repeat time that has an action to "go to time on time line"

It would be better if you posted your example Project so we get a better idea of what you goal is.

( P.sI do not and have never used Flash so have no idea what you mean by Labels. I suspect they are similar to timeline Actions. )

Bendora · November 9, 2015, 1:03pm

I’ll read up on timeline actions.

DBear · November 9, 2015, 2:06pm

There are no “labels” in Hype (perhaps a feature request?).

Timeline actions are just that. It is a point on the timeline you can call a built in action in Hype.

You will have to use the “goToTimeInTimelineNamed” function and put in the time that you want to go back to. (Like above) and then:

hypeDocument.pauseTimelineNamed('timelineName');

That way when your loop has finished you can jump back to a time in the timeline and then pause.

D

Bendora · November 9, 2015, 2:14pm

May I ask for an example file to see it work?

Bendora · November 9, 2015, 2:25pm

I think I just found it and fixed it.

added an Action with a name called ‘final’.

Then updated the code inside the loop.counter action:

window.loopCounter++;

if (window.loopCounter <= 2) {

hypeDocument.startTimelineNamed('loop', hypeDocument.kDirectionForward)
}

if (window.loopCounter == 2) {

hypeDocument.goToTimeInTimelineNamed(12.21, 'final') // set.time to end, jump to empty named action
hypeDocument.pauseTimelineNamed('final') // this needs to be here or the timeline will continue
}

Now what would be nice if I could add this: hypeDocument.kDirectionReverse to see if it would play backwards and not jump. UPDATE: Just tested it… don’t work. But that is a compromise I will accept for the time being. The main problem is solved. See the short mp4: 300x250_MR_BDF_wechseljahre3.mp4 (2.1 MB)

Banners are live on a temp-page (after 30 days will get deleted)
http://bdf1150586.businesscatalyst.com/index.html

DBear · November 9, 2015, 2:43pm

timelineLoop.hype.zip (18.0 KB)

DBear · November 9, 2015, 2:48pm

You can add this at the end of my example like this:

case 4:

hypeDocument.continueTimelineNamed('animation', hypeDocument.kDirectionReverse);

break;

and then have a timeline action that calls a javascript function at whatever point in your timeline you want to end and just put in

if (window.loopCounter == 4) {
    hypeDocument.pauseTimelineNamed('animation');
}

haven't tested this but it would work

D

Bendora · November 9, 2015, 3:51pm

So I will give this a try:

window.loopCounter++;

hypeDocument.getElementById("counter").innerHTML = "" + window.loopCounter + "";

switch (window.loopCounter) {

case 1:

	hypeDocument.startTimelineNamed('animation', hypeDocument.kDirectionForward);
	hypeDocument.getElementById("text").innerHTML = "1st Time";
	
	break;

case 2:

	hypeDocument.startTimelineNamed('animation', hypeDocument.kDirectionForward);
	hypeDocument.getElementById("text").innerHTML = "2nd Time";
	
	break;
	
case 3:

	hypeDocument.startTimelineNamed('animation', hypeDocument.kDirectionForward);
	hypeDocument.getElementById("text").innerHTML = "3nd Time";
	
	break;
	
case 4:

	hypeDocument.continueTimelineNamed('animation', hypeDocument.kDirectionReverse);
	hypeDocument.getElementById("text").innerHTML = "4nd Time";
	
	break;
}
if (window.loopCounter == 5) {
hypeDocument.pauseTimelineNamed('animation');
}

so I testet it and it works fine. Thanks D. That is a nice loop.