Accessibility Features#
Please view the Accessibility chapter for information about building content to support screen readers and assistive devices.
Export as Movie#
Tumult Hype supports exporting to Video, Animated GIF, and PNG sequence. Tumult Hype Professional supports exporting to APNG and to a higher resolution video format. Choose File > Export as Movie and choose your preferred format. The export dialog which appears allows you to change the duration, frame rate, and dimensions of the video, GIF, PNG sequence or APNG. Clicking Save creates the appropriate files in the location you choose.
When exporting to these formats, the duration defaults to the time it will take for all animations to finish when previewed. If a loop is detected, the duration will be set to 30 seconds. Physics-based animations do not count in the duration, so manual adjustments may be required to capture all physics simulations. Use timeline and scene actions to extend the recordable portion of your document. For example, create a Timeline Action at the end of the Main Timeline to transition to the next scene. If the animation on your first scene was 5 seconds, and the animation on your second scene was 10 seconds, the default video duration will be 15 seconds.
Elements
Elements are the objects in a scene. They can be shapes, text, buttons, textured buttons, images, videos, audio, or HTML widgets.
Text#
Add text to the current scene by choosing the Insert > Text menu item, by using the Elements toolbar button, or typing t. The Typography inspector allows you to change the selected element’s font, size, style, color, shadow, and spacing.
For even more styling control, you can directly edit the text element’s inner HTML by selecting the element and then choosing Edit > Edit Element’s Inner HTML. In the pop-up window which appears, you can enter any HTML and see the results live.
After inserting a new text element it is selected and editable. When you are done editing press the Escape key or click outside the text element. To edit the text at a later point, simply double-click the element. By default, text fields automatically resize to accommodate text entered as you type. Manually resizing an element fixes the element at the specified size.
For information on selecting fonts or using web fonts, visit the Typography chapter
Resources
Resources are the images, videos, JavaScript functions, and other files that have been added to a Tumult Hype document. Unlike elements, which are unique to each scene, resources are shared across the entire Tumult Hype document. When playing back in a browser, only a single copy of each resource is downloaded and shared that copy across all scenes.
Managing Resources#
Resource Library#
Tumult Hype’s Resource Library offers control over a document’s resources. Open the Resource library by choosing View > Resource Library or clicking the Resource toolbar button. The Resource Library offers controls for filtering and searching resources, and also provides numerous controls for managing resources.
Adding Resources#
Clicking the Resource Library’s Plus button provides a menu from which new files can be added to or new JavaScript functions can be created in the front-most document. Any file can be added to the Resource Library and will be included in the .hyperesources folder upon export. Images and videos in the Resource Library can be added to a scene by dragging them from the Resource Library and dropping them on the scene.
Resource Groups#
Images, videos, and audio resources all create resource groups, where one resource references multiple files. Resource groups are used to collect different file variants which may be used by the resource in different contexts. Audio and video resource groups have place holders for the different file encodings which are required by browsers, and image resource groups offer place holders for standard resolution images and “@2x” images. It’s important to note that adding additional files to a resource group will not adversely affect the document’s download time: browsers will only ever download the single file they need from a resource group, ignoring the other files in the group.
To add additional audio or video sources to a resource group, select the grayed out source in the Resource Library, click the Add Source button, and then choose the appropriate audio, video, or image file. For example, a “video/webm” resource may be added to the Video2 resource group shown on the right. Additional sources can also be dragged onto the Resource Library, and Hype will attempt to add those resources to the correct resource group.
Resource Optimization#Controlling Preloading#
By default, Tumult Hype documents preload all image resources before beginning any animation. This is done to ensure viewers always see the document as it appears in Tumult Hype, with no missing images. This behavior can be disabled on a per-image basis by first choosing an image from the resource list and then deselecting the Preload checkbox. Videos are not preloaded so there is no control for this behavior. To turn off preloading for multiple images, select the ‘images’ filter at the top of the resources library, and select the first image, hold shift, and click the last image. You may then uncheck ‘preload’ at the bottom of the resource library.
print
Next
Prev