What's New in Tumult Hype 1.5

See 25 New Features in 10 Minutes
Problems viewing the video? Download here.

Follow @hypeapp

Animation

Redesigned Animation Interface

Element and property keyframe editing on the timeline are now separated. The result is a better view of the animation at a glance and easier editing of keyframes for specific properties. The element-level animations can be moved and scaled, affecting all property-level animations. All animated properties are automatically listed in an element’s property list, and other properties can be made visible via a pop-up menu. Each property has an associated Add Keyframe button, which replaces the old global Add Keyframe button. Timing and easing functions are more easily changed via a pop-up menu, and also now apply to multiply selected keyframes.

New Timing Functions

Hype now has Bounce and Instant timing functions.

Paste With Animations

Element animations can be copied and pasted with along with their elements. The Edit > Paste With Animations command pastes elements with their animations from the current selected timeline at the time of the copy.

Accurate Motion Paths

When selecting an element, an accurate path of its animated motion is displayed as small dots between larger keyframes. It is easier than ever to visualize how elements move on the scene. Changing the duration of the animation changes the spacing between dots, giving an indication of an element’s speed.

Editable Timecode View

Change the playhead location on the timeline by either clicking on the timecode view or choosing Animation > Go to Time…. Use the Up and Down arrow keys to adjust the currently selected digit.

End of Timeline Adjustments

Gain more space for manipulating animations by sliding the playhead beyond the bounds of the timeline.

Layout

Grouping

Elements can be grouped together. The group itself behaves as an element, and can have its own styles, actions, and animations. Double-click on a group to dive in and edit grouped elements.

Zooming

Our most popular feature request — the scene view can be zoomed out for a big-picture view, or zoomed-in for detailed control.

Locking and Hiding

Lock elements to prevent accidental selection and manipulation. Hiding an element prevents interaction, and also keeps the element from being exported.

Rulers

Rulers display pixel locations for elements on the scene.

Guides

Add custom guidelines to help with alignment. Guides can be dragged out from the ruler or added via the Arrange > Guides menu. Guides can be copied and pasted to other scenes.

Snapping

Hype now has relative element spacing and sizing snapping. For example, if you have two elements spaced apart from each other, a third element will snap to that same spacing.

Smart Selection Behavior

If you select an item from the element list, clicking in the scene on that element will preserve the selection even if other elements are located above it.

New Document Sizes

Default document sizes are now included for mobile banner ads, iPhone Retina displays, and iBooks Author Widgets.

Elements

HTML Widget

Hype now has an HTML Widget element which can be inserted for arbitrary code/script execution. This is useful for embedding Twitter widgets, Google Checkout forms, or YouTube/Vimeo videos. It is functionally equivalent to an iframe, and a source URL can also be specified in the element inspector.

Inner HTML Script Execution

Elements with custom Inner HTML can run code inside <script> tags. This is limited to inline code; if it references a source URL, you should use the HTML Widget element instead.

Compose Email Action

Set scene or mouse action handlers to trigger sending an email to a recipient with a specified subject and body message.

Reload Inner HTML

If the inner HTML or iframe display is stale, bring up the contextual menu for the element and choose Reload HTML Content to refresh.

User Interface

Vertical Layout Option

Change the window layout to a vertical mode which places the Timeline views on the right side of the scene. This is useful for smaller monitors or if you have vertical content.

Lion

Hype is a first class Lion app, now with support for Autosave, Versions, and overlay scrollers.

Menu and Keyboard Shortcut Changes

A few keyboard shortcuts and menu item locations have changed for clarity and consistency. Most notably, the Preview in Browser command is now in the File menu, and uses Command–Return to preview in the default browser. Command–Arrows will move the playhead by individual frames, Command–Shift–Arrow keys will move the playhead by a second, and Command–Shift–Control–Arrow keys will jump to the beginning or end of the animation on the timeline.

Contextual Menus

Contextual menus are now located throughout application.

Hex Color Picker

The color picker now includes a hex value field for entering or retrieving in HTML colors. It even accepts named colors, such as “white” or “wheat.”

Icon Refresh

The application icon is now an animator’s lightbox.

Exporting

iBooks Author

Make interactive lessons for textbooks using the File > Export as HTML5 > Dashboard/iBooks Author Widget command.

Smaller File Sizes

Exported JavaScript files are significantly smaller; generally about ⅓ the size as Hype 1.0.5. An empty document only requires three network connections and is 41.3 KB (only 14.4 KB when gzip compressed). This drastically improves download times and performance, especially over high latency connections for cell phones.

Malformed JavaScript Protection

If there is a parse error in your custom JavaScript, Hype will alert of this when exporting. It also insulates the document so it will continue to play animations.

Versioned Exports

The JavaScript top-level HYPE object is now versioned to avoid conflicts with existing/older animations on the same HTML page.

Better Animation Performance

The HYPE.js runtime has adopted window.requestAnimationFrame for better browser performance. This leads to smoother animations in supported browsers, and better battery life when on laptops.

Browser Support

Scene Transitions

Push, crossfade, and swap scene transitions now work on Firefox.

3D Support in Firefox

Firefox 10 now supports 3D transformations, and Hype 1.5 supports this feature in exported documents.

Updated Browser Warnings

Browser warnings have been updated to reflect the new versions of browsers which have been released since Hype’s last version.

JavaScript

Customizable IDs/getElementById()

Set custom DOM IDs on elements to access from JavaScript. There now is a hypeDocument.getElementById() API which can be used in favor of the standard document-level call to ensure the element is found correctly in face of conflicting IDs.

Triggering Events

Custom JavaScript functions now get the triggering event passed as an argument.

For more details, please read our release notes in the version history.