Need help identifying best way to achieve desired functionality in Hype?


(Joyce Vogt) #1

I’m hoping someone can narrow down my search here. I am looking for the following behavior and am hoping someone can point me to the proper method to accomplish:

My .json data source will have a different number of objects every day, ie. number of professional sports games each day. I would like to program Hype to discern the number of objects within the .json each day and then determine how many loops to play of the same animation with different data. As an example, I am playing the schedule/ results for three games (six teams) on each animation. If the .json finds three objects (games for a given day), it plays through once with these results. If the .json finds twelve objects (games for a given day), it plays through four times with these results. I’m thinking that either scenes or layouts may be the way to handle. I am find with the animation and scene length being exactly the same for each “set of three” results. I know we can program this outside of Hype, but I would absolutely love to stay within the application so that I can have the greatest flexibility of visual design later.

Thanks in advance for your help!


(Jonathan Deutsch) #2

As you mentioned, there’s probably many different ways to do this, but at the heart of it is probably going to be looping a timeline in some manner.

The way I’d probably structure it is to have a global variable that represents your counter on the loops you’ve been through. You can initialize this either in the Head HTML or [if you’re just using one scene] then use an On Scene Load handler.

window.loopCounter = 0;
window.totalTimesToLoop = 10; // actually this would come from your JSON

Then, you can create your animations on a timeline. At the end of the timeline, use a timeline action to check to see if the counter exceeds your value and either run the timeline again or not. This would roughly look like:

if(window.loopCounter < window.totalTimesToLoop) {
    hypeDocument.startTimelineNamed(event.timelineName);
    window.loopCounter += 1;
}

(Joyce Vogt) #3

Thank you Jonathan. We are in the midst of programming this and have chosen to break the animation out into five different scenes for up to 15 games/ 30 teams playing in a day, but often as few as 3 or 4 games on weekdays. So, our approach was to ask Hype to launch a Javascript on Scene Unload/ Load that will analyze whether there are more objects to display in our json or if the app should stop because there is none. Do you have any examples of this? Can you direct me to forums or documentation for managing this process? Does this seem like it would work effectively? Thanks!


(Jonathan Deutsch) #4

This sounds like it would pretty well; that way you only need to change the JSON to change the behavior. I don’t have any specific examples (though dealing with JSON is abundant on the web), but this isn’t too difficult of a task assuming a intermediate knowledge of JavaScript. Since there’s so much that can be done there’s not many specific snippets; such is the way of programming!


(Joyce Vogt) #5

OK @jonathan I think we have things working well on our Hype file above. One area I’m struggling with is in coding a simple stop statement in Hype for when it has passed all of the data through. Here’s what I’ve got and I’m hoping you can help!! :smiley:

We have two scenes, one is the app (called 1) and one is the end (called End). We have set a timeline action for each screen of data (3 games) to launch a javascript that carries an if/else. This javascript asks if more data, continue timeline and show the next set of results. If no more data, then switch to scene called END. We have set a timeline on end of 1 second, but it seems to sit for 10 seconds instead. Not sure what’s happening there. Anyway, I thought that there may be a “STOP” instruction we could add to EITHER act as the “else” in my javascript or to be added to the END scene so that it immediately ends when it lands on this scene.

Let me know if you have thoughts. Thanks!!!