This is documentation for Tumult Hype 2.5.3, released in October of 2014.

View Latest Documentation

Tumult Hype Documentation — Touch & Mobile

Tumult Hype offers several options for producing touch-friendly interactivity for:

  • iBooks Author Widgets
  • Animations on the web
  • Interactive elements within mobile applications
  • Animations accessible from a touch screen

This chapter explores initial configuration options for your document, touch actions available at the scene and element level, and offers tips for optimizing for touch screens.

Document Options

The Document inspector contains basic configuration options for your Hype document.

  • Document Size – When selecting a document size, choose from many different mobile device sizes in the document size drop down.
  • Create offline application cache – When selected, Tumult Hype generates a cache manifest file for resources used in your project. With this option selected, your document, when loaded as a web app, will download and locally save everything needed to ensure the document works even when the device is offline. Note: Your document will need to be loaded once as a web app to prime the cache. Also, Google fonts require an Internet connection as they cannot be cached on the device.
  • Viewport – Choosing Document Width sets the document’s viewport to match your document’s width. Device Width and Device Height define the exported document’s viewport to match the viewing screen’s width or height. Choosing Don’t Set excludes any viewport tag from your document’s exported content.
  • Initial Scale 1.0 – Selecting this option adds the “initial-scale=1.0” property to the exported page’s viewport.
  • Allow user scaling – When selected, users can pinch and zoom to zoom in to and out of your document.
  • Use touch events – When selected, actions set in the Actions inspector default to tap events when possible. For example, a Mouse Click will be fired after a Tap without any delay.
  • Show tap highlight – When selected, the default tap highlight color appears when tapping elements. Tap highlight does not appear when 'Use Touch Events' is selected.
  • Home screen web app – This option allows visitors to add your web app to their iOS device’s home screen and choose a color for the status bar. To add the Apple Touch Startup images to your document, click here.
  • Status bar – If “Home screen web app” is enabled, allows you to choose the desired appearance for your web app’s status bar.

Scene Touch Actions

Scene level touch actions — such as swiping and dragging on the scene — can trigger one or more actions. Swipe actions are a great way to introduce mobile device support in your document’s navigation. For example, the following action creates a natural swiping motion between scenes.

In addition to swiping up, down, left and right, you may also trigger actions from Drag events. Drag events at the scene level can control the playback of a timeline when dragging horizontally or vertically, or it may optionally trigger JavaScript. Our JavaScript API offers more options for the dragging API.

Element Touch Actions

By default, Tumult Hype optimizes events that occur on touch events. For example, a tap on a link in Mobile Safari fires only after a 300ms delay, regardless of the speed of the tap. With Use Touch Events enabled in the document inspector, tap actions fire after the finger has left the surface of the screen. The tables below provide a bit more information on these events and how they behave with or without Use Touch Events.

“Use Touch Events” Enabled

Action Name Mouse Event Touch Event
On Mouse Click Mouse Click Tap on Element
On Mouse Down Mouse Down touchstart
On Mouse Up Mouse Up touchend
On Mouse Over Hover n/a
On Mouse Out End Hover n/a
On Drag Click and Drag Tap and Drag

Scrolling & Touch Events: The mouse click event fires after the element has been tapped. It triggers on Touch End but will cancel if a scroll begins before that occurs. If touch events are enabled, a scrolling movement that begins on an element with a Mouse Down event, the action will fire.

“Use Touch Events” Disabled

Action Name Mouse Event Touch Event
On Mouse Click Mouse Click Emulated Mouse Event +300ms delay
On Mouse Down Mouse Down Emulated Mouse Event +300ms delay
On Mouse Up Mouse Up Emulated Mouse Event +300ms delay
On Mouse Over Hover n/a
On Mouse Out End Hover n/a
On Drag Click and Drag Tap and Drag

When Use Touch Events is disabled, if you begin scrolling on an element with a Mouse Down event, a Mouse Down event will not fire.

For more information about touch events and emulated mouse events, please see Safari Web Content Guide: Handling Events.

Testing

Touch actions work on mobile and desktop browsers, but to really test how a touchable interface behaves, test on the mobile browser and device you’d like to support and host your document from a staging server.

Hype Reflect is a free companion iOS app that streamlines previewing Hype documents on iOS devices. When Reflect is open on an iOS device, Hype Reflect appears as a preview option alongside Safari, Chrome, and other browsers. Learn more about Hype Reflect and visit the Previewing Chapter.

Use Mobile Safari’s developer tools to profile and test actions, events, and resources from your Mac. Note that Hype Reflect also has a console for reading console.log(); events.

When designing for touch devices, make sure your tappable elements are the right size for fingers. Read Getting Started with iOS Web Apps for tips on designing for touch screens.

Tips

  • Exporting to different platforms and content management systems: Please see our Exporting FAQ.
  • Decrease loading times: To improve the performance of your document, optimize your site by reducing preloading and by optimizing images.
  • Apple Touch Images: When a web page is added to the home screen of an iOS device, images may be used to define icons and startup images for the various device sizes. You may define images to use for iPhone and iPad users’ home screen icons and startup/loading images.
    First, add your images to your resource library, and reference them using the ${resourcesFolderName} variable. Use the code snippet below in the <head>…<head> area to load these images. Edit the contents of the <head>…<head> of your exported .html file by selecting Edit HTML Head in the Document Inspector.


<!-- Springboard Icons -->
<!-- non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="${resourcesFolderName}/icon57.png" sizes="57x57">
<!-- non-retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="${resourcesFolderName}/icon72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="${resourcesFolderName}/icon76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="${resourcesFolderName}/icon114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="${resourcesFolderName}/icon120.png" sizes="120x120">
<!-- retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="${resourcesFolderName}/icon144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="${resourcesFolderName}/icon152.png" sizes="152x152">


<!-- Startup Images -->
<!-- iPhone -->
<link href="${resourcesFolderName}/apple-touch-startup-image-320x460.png"
       media="(device-width: 320px) and (device-height: 480px)
          and (-webkit-device-pixel-ratio: 1)"
       rel="apple-touch-startup-image">

<!-- iPhone (Retina) -->
<link href="${resourcesFolderName}/apple-touch-startup-image-640x920.png"
       media="(device-width: 320px) and (device-height: 480px)
          and (-webkit-device-pixel-ratio: 2)"
       rel="apple-touch-startup-image">


<!-- iPhone 5 -->
<link href="${resourcesFolderName}/apple-touch-startup-image-640x1096.png"
       media="(device-width: 320px) and (device-height: 568px)
          and (-webkit-device-pixel-ratio: 2)"
       rel="apple-touch-startup-image">

<!-- iPad -->
<link href="${resourcesFolderName}/apple-touch-startup-image-768x1004.png"
       media="(device-width: 768px) and (device-height: 1024px)
          and (orientation: portrait)
          and (-webkit-device-pixel-ratio: 1)"
       rel="apple-touch-startup-image">
<link href="${resourcesFolderName}/apple-touch-startup-image-748x1024.png"
       media="(device-width: 768px) and (device-height: 1024px)
          and (orientation: landscape)
          and (-webkit-device-pixel-ratio: 1)"
       rel="apple-touch-startup-image">


<!-- iPad (Retina) -->
<link href="${resourcesFolderName}/apple-touch-startup-image-1536x2008.png"
       media="(device-width: 768px) and (device-height: 1024px)
          and (orientation: portrait)
          and (-webkit-device-pixel-ratio: 2)"
       rel="apple-touch-startup-image">
<link href="${resourcesFolderName}/apple-touch-startup-image-1496x2048.png"
       media="(device-width: 768px) and (device-height: 1024px)
          and (orientation: landscape)
          and (-webkit-device-pixel-ratio: 2)"
       rel="apple-touch-startup-image">