Create HTML5 Animation Resources.
- In-App HTML is only currently available for iOS universal apps. It is available for use in the HTML 5 viewer.
- Mobile platforms do not support Flash, so the use of Flash content in embedded HTML files will fail.
Creating your animation resources:
- Limit your memory footprint to roughly 10-15 MB per view. The cumulative total of memory usage for all independent HTML 5 animations on any two facing pages must not exceed 10-15 MB.
- Use the viewport tag. Include a viewport tag in your HTML. This should always have "user-scalable=0". In addition, it should set the width the number of pixels (not a percent) of 100% of the web width.
<meta name="viewport" content="width=768, user-scalable=0;" />
- Set body background color to transparent, e.g. rgba(255,0,0,0).
- jQuery is required for the messagepassing-min.js script below. You will need to host the jQuery script.
- Note: You must host all of the assets yourself on a standard webserver or content delivery network that provides HTTP access. Those assets must be available at all times or the animation will fail. The messagepassing-min.js script is the single exception to the requirement that all your assets be local and contained in a single flat directory.
- Optionally use the load/unload functions. On loading or showing of the page, the function bt_pageload() is fired. On unloading or hiding of the page, the function bt_pageunload() is fired. You can define these in your HTML page.
The application will pass as an argument to the bt_pageload() function an anonymous object with the following attributes (currently only available in the HTML 5 Viewer):
- issue.id (the globally unique ID for the issue)
- issue.name (the Issue Name set in the dashboard)
- page.name (the Page Name set in the dashboard)
- page.number (the sequential page number of the issue, e.g., “1” for the Cover)
- publication.id (the globally unique ID for the publication)
- publication.name (the Publication Name set in the dashboard)
- publisher.id (the globally unique ID for the publisher)
- publisher.name (the Publisher Name set in the dashboard)
- reader.id (the globally unique ID set for the reader for login or registration-required issues)
- screen.height (the height of the screen or browser window on which the digital edition is currently being viewed)
- screen.width (the height of the screen or browser window on which the digital edition is currently being viewed)
- bt_fields.* (“bt_field_name” and “bt_field_value” pair set in the URL, as documented at http://knowledgebase.screenstepslive.com/s/5659/m/16007/l/162548-url-parameters. For example, if bt_field_name=someparam and bt_field_value=someval, there would be a corresponding attribute named "bt_field.someparam" set to “someval”.)
- Optionally use alert functions to communicate with the page. Some alert functions are intercepted by the app for communication.
alert('bt_message:disable_links=1'); //will disable the links in which the HTML 5 animation resides so they do not interfere with the touch events on the page. alert('bt_message:disable_links=0'); // will re-enable the links in which the HTML 5 animation resides. alert('bt_message:disable_zoom=1'); // will disable the zoom for the page in which the HTML 5 animation resides. alert('bt_message:disable_zoom=0'); // will re-enable the zoom for the page in which the HTML 5 animation resides.
- Link Integration - Allows the Viewer to handle all clicked links, instead of redirecting the page or popping up a new window. This allows increases compatibility across all HTML5 versions of the viewer, including the web-based viewer and Windows 8 app.
- Page Dragging - The messagepassing-min.js script automatically allows the HTML5 viewer to control all non-interactive areas of the page so that normal navigation is still easy for the user.
- Interactive elements will need to have the class bt_passthrough when using the messagepassing-min.js script.
- If your page changes, either automatically or in response to the user, you may need to tell the MessagePassing script about those changes.
- If you add links to the page, you simply call bindAnchors afterwards to update them to work properly in the HTML5 viewer, like so:
- If your layout changes and you need more or less space to be interactive, simply call bindEventableElements to update the position of all interactive elements in the HTML5 Viewer, as such:
- You'd want to call these functions after doing things like adding or removing links, videos, or slideshows