Using output Hype 3 in a Cordova/PhoneGap project

Using JavaScript with Hype
8

Jonathan,

Thanks for the update.

We are creating an animation NOT a movie. Sorry for the confusion. We have experimented with movies before and it’s not a fantastic user experience in Cordova. Everything is a mess :slight_smile:

We want to create simple HTML5 animations for help screens and for onboarding.

To summarise what we have done as this might be useful to other people.

  1. We have created a simple HTML5 animation using Hype 3.

  2. We export the JS and add them to our cordova project.

  3. We use your function call CallHype() to load the animation up when we press a help button in our app.

  4. The animation appears, two lines of text gently fade in as designed. Looks great.

  5. We close the window and it goes away.

  6. If we click on the help button again, the window appears and the end point of the animation is shown. There is no fading in of the text.

  7. We tried to add in HYPE.documents["documentName"].showSceneNamed("firstSceneName") but were getting HYPE is undefined. Clearly we haven’t got access to HYPE.

  8. Searching through the docs and the javascript forums shows this http://forums.tumult.com/t/hype-is-not-defined-calling-hype-from-external-html/5278/3 which looks interesting.

  9. We added the callback and bingo, we have a working callback. Doesn’t do anything but early days. We added in a JSON.stringify(hypeDocument) and we can see ‘hype stuff’ so we have some sort of confidence that something is working.

  10. We looked through more sections and doc and found http://tumult.com/hype/documentation/3.0/#invoking-api-from-outside-oftumult-hype. So we created a new callback for when the event HypeTimelineComplete is complete with a call to actually do something practical, ie.e goto a scene, in our case the first scene, so it loops.


window.HYPE_eventListeners.push({"type":"HypeTimelineComplete", "callback":HypeTimelineComplete});

function HypeTimelineComplete(hypeDocument, element, event) {
  // do something with hypeDocument...
  // HYPE.documents["documentName"] which is the same thing is also ready now

  ConsoleLog("HypeTimelineComplete");

  ConsoleLog("hypeDocument " + JSON.stringify(hypeDocument));

  ConsoleLog("hypeDocument.sceneNames() = " + hypeDocument.sceneNames());

  hypeDocument.showSceneNamed("Untitled Scene")

  return true;
}

  1. We now have a looping animation. We think we can work out bits to start and stop the animation using ```pauseTimelineNamed`` and similar. We want to make sure animations don’t constantly run in the background in our app as this consumes battery power.

  2. This page is also very useful http://tumult.com/hype/documentation/3.0/#api-functions

I think we have got something we can work with. Lets leave this open for a bit so if anything useful pops up I’ll add it here. We may be the first people to embed Hype 3 in Cordova :blush:

Sorry for how long this is, I thought it useful for other people to see what we did and the steps we went through.

Rob