Set number of loops


(Alexina) #1

I’m using Hype to make web banners, and they need to have a set number of loops (3 actually). I refuse to go the gif route as it takes forever to create and edit in Photoshop, and I’ve scoured the forums trying to find if it’s possible to loop a set number of times within Hype, to no avail (unless I’ve completely missed something). Please make this possible in future versions, as it’s a little bothersome to copy animations or scenes to make certain websites happy. It would be a lot more fluid to just set a loop number.

Edit: I also do not want to duplicate scenes as the file size would balloon astronomically!


Feature request - Loop animation an number of times and stop at the end
(Markus Bjerre) #2

I don’t quite understand what your problem is. You create banners within Hype that are ment to be “looped” 3 times? Are you doing it within a timeline? The easiest way is to end the timeline after 3 of the same animations. However, if you want it to be called by a javascript and make it loop the same timeline I’ve been trying to figure it out with javascript. I’m not sure why the timeline is “not defined” in firebug but perhaps someone here could help us out. Take a look at my example here: banner-loop.hype.zip (9.1 KB)


(Alexina) #3

Yes, I mean that my timeline should loop 3 times then end. In Photoshop you can select a number of loops for your gif without having to repeat the frames, but here we’re given no such route, and again I refuse to go back to gifs because booo. I’m no javascript hero so opening up the javascript files produced during HTML5 exportation of a Hype document gives me the creeps and I’d as likely screw up than fix my problem if I tinkered in there. I’d love if there were an option in the UI, without having to repeat animations so I could preserve my file size, to select the number of loops for a timeline, either in timeline actions or during exportation to HTML5.


(stephen) #4

Setting the number of times a timeline should loop is definitely a cool idea and something we will consider for a future version.

Here is a javascript approach to loop the Main Timeline 3 times:
banner-loop.hype.zip (11.0 KB) .

If you prefer not to use javascript you could either copy/paste the animations 3 times or add a second timeline which is responsible for looping the Main Timeline. This timeline would simply have two actions that restart the main timeline and pause the current timeline. Then at the end of the Main Timeline continue this loop timeline.
banner-loop-no-javascript.hype.zip (11.5 KB)


Loop then stop early in the timeline
Ads: Include at least one 'ClickTag' in your html?
Have a viewport timeline animation play only once
(Markus Bjerre) #5

Awesome Stephen! I guess “if” works much better in this case, or could it be done with “setinterval” as well?


(Alexina) #6

That is indeed awesome news, Stephen, thanks :slight_smile:


(stephen) #7

You could use setInterval, the issue is that hypeDocument is out of scope when your function fires.

This should work:
setTimeout(function(){ hypeDocument.continueTimelineNamed(‘Main Timeline’, hypeDocument.kDirectionForward); }, 3000);

I just favored the ‘if’ solution because it requires less knowledge of javascript.


(Markus Bjerre) #8

Thanks Stephen! I added the clearInterval to it so now it works as intended:

var myVar;

myVar = setInterval(function(){ hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward); }, 3000);
setTimeout(function( ) { clearInterval( myVar ); }, 7000);

(J S Poyser) #9

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


(Carola Clavo) #10

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.


(J S Poyser) #11

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.


(Carola Clavo) #12

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


(Damion Parsons) #13

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?


#14

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


Loop last scene back to start