Tumult Hype Forums

Welcome, Guest Login

Support Center

Tips for making your Tumult Hype production Mobile Friendly (iOS & more)

Last Updated: Nov 14, 2014 11:56AM PST
For documentation on creating mobile-compatible Tumult Hype documents, please see the Touch & Mobile documentation chapter

Redirecting Mobile Devices

Please see this article for techniques to redirect mobile devices to a different scene or page. 

Detecting portrait or landscape orientation

Let’s say you have a Hype document that looks great in Landscape mode, but not so good portrait mode. If you create two documents for those two rotations, you can use CSS to show only one depending on the rotation. For this example, let’s say your Portrait document is called ‘Portrait’ and your landscape document is called ‘Landscape’. All we have to do is hide the Portrait when we’re turned to landscape, and hide Landscape when we’re turned to Portrait. You'll need to add these styles to your <style> area in your exported html file:

<style type="text/css">
  body {
    background-color: #FFFFFF;
    margin: 0px;
  @media screen and (orientation:portrait)
    #portrait_hype_container {
      display: block;}
    #landscape_hype_container {
      display: none;}}
  @media screen and (orientation:landscape)
    #portrait_hype_container {
      display: none;}
    #landscape_hype_container {
      display: block;}}

Note: The preceding CSS will not work in IE8 and below. If you need to support those browsers, we recommend that you include this 'media queries' script in your document. If you are using a max/min width CSS style instead, you may be interested in 'respond.js'. Either script you choose should  be added between <head>...</head> You can download this example and the script at the bottom of this page. 

The previous example is great for single page sites, but what if you have multiple scenes? We’re going to need to keep track of what scene you’re on so both the Portrait and Landscape version of the site are in synch. The file named 'RotationAndSceneDetection…' at the bottom of this page does just that. That example advances to the selected scene in both Portrait and Landscape versions by triggering events in Tumult Hype Javascript API. You can pair this functionality with the 'swipe' gestures mentioned earlier in this article for a very native-feeling web app. 

Other tips and techniques

There are many articles devoted to developing powerful web apps. Mike Dellanoce's post has 10 great tips (many covered here) for building a great web app.

Linking between parts of a page: You can quickly link between different positions in a scene that extends beyond the bounds of the viewport by using anchor tags. Here is an example document

Encouraging Portrait Mode: In this example .html page, a notice is shown to people visiting your webpage in 'Landscape' orientation on an iOS device (It reads "Please switch to Portrait Mode". This technique also makes use of media queries. For many people this technique will be ideal because there's no need to create a portrait and landscape version of your document. 

Building a truly “Offline” app with a Tumult Hype document

...For sale in the app store

For a tutorial on working with Hype within iOS apps (via Xcode) read this excellent tutorial by Gordon Johnston. The most streamlined method to create something with Tumult Hype for sale in an app store is to load your Hype animation into an additional Framework like Phonegap and Appcelerator --  powerful and free applications that allow you to package a full blown app from a Tumult Hype document. 

If you're hoping to make an ebook, please check out the Baker framework

Aerei di Carta, which contains a series of video tutorials for creating a variety of paper airplanes, is a recent example of an app created with Hype for sale in the App store. Roberto Davide Gambuti used only Phonegap & Tumult Hype.


Example Files

At the bottom of this article you'll find a zip file containing demos of many of the topics described here. If you need any further assistance with these demos please don't hesitate to get in touch.

Other tips

  • You can read more about building Web Applications here.

Contact Us

seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found