Howto: Loop or Repeat an Animation

knowledgebase

#1

Looping a Timeline

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

Here’s step-by-step:

  1. Place the playhead at the end of the timeline you wish to loop.
  2. Click the + button on the Timeline actions area to create a new action
  3. In the overlay that appears, select ‘Start Timeline’, then select the name of the timeline that you wish to loop (the current timeline).
  4. 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:

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.


Rotate an image (Infinite loop)
Time line loop button does not work in Hype Pro
Rotate an element without ending point, is it possible?
Finding it difficult to Make a sphere (ellipse) rotate in clockwise circles with a stream following from behind
Knowledge base: Guides from the Tumult Team
(Betsy) #6

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?


#7

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

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


(Betsy) #8

That was so easy! Appreciate your help.

B


(Mattias Lindberg) #9

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


#10

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. :smile:

D


(Mark Hunte) #11

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)


Set number of loops
#12

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


Controlling Audio & Advanced Techniques (Play, Pause, Rewind, Volume control)
(Dennis van Leeuwen) #24

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?


(Mark Hunte) #25

Probably.

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


#26

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


(Dennis van Leeuwen) #27

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)


(Mark Hunte) #28

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. )


(Dennis van Leeuwen) #29

I’ll read up on timeline actions.


#30

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


(Dennis van Leeuwen) #31

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


(Dennis van Leeuwen) #32

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) :smile:
http://bdf1150586.businesscatalyst.com/index.html


#33

timelineLoop.hype.zip (18.0 KB)


#34

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


(Dennis van Leeuwen) #35

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.