What’s New in Tumult Hype 1.6

Animations and Interactivity

New Actions

Tumult Hype 1.6 adds the ability to pause, continue, and go to a time on a specified timeline. These new actions unlock entirely new ways of producing animations.

Timeline-Triggered Actions

In addition triggering actions in response to scene and user events, Timeline Actions allow the triggering of any action at a specific time in a timeline. Use the View > Show Timeline Actions menu item. A common use case is looping by using this and restarting the timeline.

Action Chaining

Actions can now be chained in an ordered sequence. JavaScript code is no longer required to execute multiple actions.

Capo Tool

The Capo tool pairs with recording to help build animations quicker. Wherever it is positioned is where animations start from when recording is turned on. Control-dragging, or control and using the keyboard modifiers, maintains the distance between the Capo and playhead.

Relative Keyframe Improvements

Relative keyframes are a way to achieve unique interactive effects without any code. They are now represented more distinctly from the absolute keyframes with a round visual style and lightly colored bar if there is potential for animation. Also, new timelines by default use absolute keyframes, making common cases like looping timelines significantly easier.

Stacked Keyframes

Overlapping keyframes now stack on the timeline, making it easier to manipulate overlapping animations. These represent an instant transition.

Elements

CSS Filter Effects

Tumult Hype now supports applying CSS3 Filter Effects. You can modify elements with blur, sepia, saturation, hue-shifts, brightness, and contrast effects. All effects can be animated to make the most visually compelling documents. Please Note: this is a bleeding edge web feature and can currently only be displayed on Safari 6, iOS 6 (including iBooks), and Chrome 18 or later.

More iOS Fonts

The fonts panel now includes many more fonts compatible with iOS devices.

Optional Image Preloading

Tumult Hype has always preloaded all images to ensure high fidelity animations. Through the new Resource Library, preloading can now be disabled on specific images, which can decrease load time.

Rotation Controls

Command-drag any element’s corner handle to easily rotate that element around the z-axis.

Proportional Resizing

Resizing one element now proportionally resizes all selected elements.

Toggling Lock & Visibility

In the Element List, element visibility and locking buttons now support modifier keys for toggling their state en massé. Command-click on an element’s visibility or lock button to change all other elements so they match the clicked element’s state. Option-click to toggle all other elements’ state, to easily hide or lock all other elements.

Document

Resource Library

The Resource Library is the one stop shop for managing all images, videos, functions, or other files that you’d like to include in the exported resources folder. Add scripts and stylesheets, quickly replace images and videos, re-link assets for external update notifications, and toggle preloading from the Resource Library.

HTML <head> Editing

Add CSS, JavaScript, custom meta tags, web font references, or anything else in the <head> of the exported .html document. Changes will also affect the scene and preview.

Layout Guides

The new guideline creator quickly subdivides a scene based on pixel values or a specified number of columns or rows, making it easy to create grid-based layouts.

Scene Copy and Paste

Scenes can now be copied and pasted between documents.

Documents Sizes

The default document sizes have been expanded to include the iPhone 5 and iPad 3 dimensions.

JavaScript

New JavaScript APIs

Tumult Hype offers new JavaScript APIs for pausing and continuing timelines, as well as jumping to specific times in a timeline. Hype also now offers an API for invoking user-defined JavaScript functions you’ve created in your documents. Finally, there’s an API to get the URL of the resources folder.

Event Callbacks

External JavaScripts can register for event callbacks for document loading, scene loading, unloading, and timeline completion. This is especially useful if you need to run code once a Tumult Hype document has been loaded.

Additional Event Information

We've added the event.timelineName property to the On Any Timeline Complete handler to determine which timeline was completed for conditionalizing behavior.

Documentation Viewer

The Documentation Viewer sits below the JavaScript and HTML <head> editor and offers quick access to HTML variables, JavaScript functions, and their documentation.

JavaScript Editing Improvements

Find and replace is now built in, as well as indenting and outdenting.

Application Improvements

Retina Artwork

Tumult Hype’s artwork has been optimized for high resolution displays and looks wonderful on Apple’s new Retina MacBook Pros.

Sandboxed

Tumult Hype is now fully sandboxed for security compliance. As fallout, the resources folder name has changed to “documentName.hyperesources” and previews are loaded from a built-in web server.

Exporting

Small Export Size

Even with tons of new features, HYPE.js is only 38.08 KB — 279 bytes smaller than it was in 1.5.2!

Multiple Documents

The identical exported document can appear multiple times on the same webpage.

iBook HTML Widget Thumbnails

Hype generates widget thumbnails for HTML widget based on the current scene and playhead position at the time of export.

Optional Graphics Acceleration

The Document inspector has an option to disable graphics acceleration for WebKit browsers; this can sometimes lead to better battery life and fewer crashes on iOS devices.

Browser Compatibility

New Browser Compatibility View

Tumult Hype 1.6 simplifies the Document inspector’s browser compatibility section, making it easier to set minimum supported browser versions via popup menus. The ‘Latest’ version of browsers can also be selected if you only care about what’s most current — useful for high adoption browsers like Chrome.