Tumult Hype Documentation — Elements
Elements are the objects in a scene. They can be boxes, text, buttons, textured buttons, images, videos, or HTML widgets.
Types of Elements
Text
Add text to the current scene by choosing the Insert > Text menu item, or by using the Insert Elements… toolbar button. The Text 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. Enter any element’s inner HTML editing mode 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.
When inserting a new text element, it is selected and in editing mode. Exit editing mode by pressing the Escape key, or by clicking outside of the text element. To edit the text at a later point, simply double-click the element to re-enter editing mode. By default, text field automatically expand to accommodate text entered as you type. Manually resizing an element will fix the element at the specified size.
Images
Tumult Hype supports importing a wide variety of web image formats, including JPEG, GIF, PNG, and SVG. Create image elements by choosing the Insert > Image… menu item, or by via the Insert Elements… toolbar button. You can also drag-and-drop images onto the scene, or copy and paste them from other applications. Finally, images can be added by dragging-and-dropping from the Media Browser or from the Resource Library (assuming the image is already stored in the current document’s Resource Library).
Images initially preserve their aspect ratio when resized. You can disable this behavior by deselecting the Constrain Proportions checkbox in the Metrics inspector. If an image’s dimensions have been changed, the image can be restored to its actual dimensions by clicking the Original Size button in the Metrics inspector.
By default, Tumult Hype documents appear to visitors only after all included images have been downloaded. This ensures that scene transitions and animations appear as intended. To disable preloading for individual images, open the Resource Library and deselect the Preload checkbox for any images which should not be preloaded.
Proportion and Sizing Options (Metrics Inspector)
Newly created image elements scale the image as the element is resized. If you need an image to repeat horizontally and/or vertically, you can configure those options from the Element inspector’s Background section.
Background Property (Element Inspector)
Compatibility note: While Internet Explorer 6, 7, and 8 support the PNG file format, Internet Explorer 6 will not display transparency in PNGs. Internet Explorer 7 and 8 will display transparency but do not re-composite the background, so it is likely the results will not appear as intended. If transparency is required, we recommend using transparent GIF files.
Videos
Tumult Hype can embed video using the HTML’s native <video> tag. Add video elements by choosing the Insert > Video… menu item, or by via the Insert Elements… toolbar button. You can also drag-and-drop videos onto the scene, or copy and paste them from other applications. Finally, videos can be added by dragging-and-dropping from the Media Browser or from the Resource Library (assuming the videos is already stored in the current document’s Resource Library). Tumult Hype supports importing files with .mov, .ogg, .webm, .mp4, and .ogv extensions, though only .mov and .mp4 files can be previewed from within Tumult Hype.
Unfortunately, the current state of HTML5 video is quite fractured. Safari and Internet Explorer support H.264 (.mp4 files), while Firefox supports Theora (.ogv files), and Chrome supports H.264, Theora, and VP8 (.webm files). Luckily, the video tag supports multiple sources for one element. In Tumult Hype, to add the different video sources, select a video element, and then add sources via the Sources table in the Element inspector's Video section.
Video Sources (Element Inspector)
To convert videos into these formats, we recommend using Miro Video Converter. It is simple, effective, and free. Instructions on how to use this software are at diveintohtml5.info/video.html. For more details on adding video to your document, read our in depth tutorial on adding video.
Video FAQs:
- How do I create custom play or pause buttons?
- How do I embed a Youtube or Vimeo video?
- How do I place a video within an iBooks Author widget?
- How do I stop a Youtube or Vimeo video when leaving the scene?
- Why isn't my video playing in Firefox?
Boxes
The box element is the most foundational element in Tumult Hype: box elements can be customized to look and behave like almost all other elements. Box elements can be repurposed to make horizontal or vertical lines, and even circles. Box elements can have arbitrary colors, gradients, and images set as their background. Add box elements to the current scene by choosing Insert > Box, or by using the Insert Elements… toolbar button.
Buttons
Buttons are elements which present different appearances when the mouse hovers over them, or when they are clicked or tapped. Tumult Hype offers two pre-configured button types, a flat button and a textured button, in its Insert menus. Any element can be converted to a button by choosing Edit > Show Button Controls. Any button element can be transformed back into a normal element by choosing Edit > Clear All Button States and then choosing Edit > Hide Button Controls.
When button elements are selected, Tumult Hype shows a segmented control above the element to toggle between the button’s normal, hover, and pressed states. When the hover or pressed states are active, any changes made to the button — including position, size, and background images or gradients — will be applied when the element is moused over or clicked. To clear the changes made in those states, choose Exit > Clear All Button States.
Button Controls
HTML Widgets
An HTML widget is used to display embedded HTML in your scene or to embed an iframe of a different web page. One use for this element is to embed a code snippet that requires its own JavaScript. Insert HTML Widgets using the Insert menu or the Insert Elements… toolbar button.
To add a Twitter widget, for example:
- Insert a new HTML Widget
- Open Tumult Hype’s Element inspector
- Click the Edit Code Snippet… button
- Paste code obtained from Twitter’s developer site into the Inner HTML popover as shown below.
An HTML widget containing Twitter Widget Code
To display a webpage within the HTML widget, select Specified URL and enter the full URL (make sure to include http://).
Display a Web Page within an HTML widget
For questions about HTML widgets, please search in our forums.
Manipulating Elements
Arrangement, Distribution and Sizing
Elements are rearranged and resized using Tumult Hype’s scene editor. To assist with element arrangement, Tumult Hype’s scene editor provides automatic guides based on the scene’s border and other existing elements. Likewise, it assists with resizing by snapping the element to match the width or height of other elements on the scene.
To quickly rotate an element along the Z-axis, select the element and press Command key while dragging one of the corner resize handles. The 
cursor indicates the selected element will be rotated.
Multiple elements can be moved or resized by first drag selecting elements on the scene and then moving or resizing one of the selected elements.
The Arrange menu also has several different commands for arranging, distributing, and resizing elements:
- Distribute > Horizontally
- Distribute > Vertically
- Align > Left
- Align > Center
- Align > Right
- Align > Top
- Align > Middle
- Align > Bottom
- Size > Make Same Width
- Size > Make Same Height
- Size > Make Same Size
CSS Filter Effects
CSS Filter Effects offer control over the following effects: blur, sepia, saturate, hue, brightness, and contrast. All Filter Effects can be animated. Note that these effects are only supported in Chrome 18+, Safari 6+, and iOS 6+.
Element Inspector: CSS Filter Effects
Z-Ordering
The stack order of elements can be changed by choosing Bring Forward, Bring to Front, Send Backward, or Send to Back from the Arrange menu, clicking the Front or Back toolbar buttons, or by reordering elements in the Element List.
Identity
The Identity inspector provides access to less common element properties, such as the alt tag, a modifiable element ID, and the display name used within Tumult Hype.
Inner HTML
Elements are, at their base, HTML divs. Because of this, they can contain arbitrary HTML. Edit any element’s inner HTML of any element by choosing Edit > Edit Element’s Inner HTML. This is useful for pasting your own custom HTML or CSS, or for tweaking text displayed in elements. Keep in mind that if recording is turned on, modifications to an element’s inner HTML will be animated.
The Identity Inspector for a selected image.
Managing Elements
Grouping
Elements can be grouped by selecting one or more elements, then clicking the Group toolbar button. Grouped items appear indented under their group’s name in the Element List. Clever uses of grouping include enables cropping or masking, rotation from a specified point, and rotation on multiple axes.
Grouping Toolbar Items
Elements can be dragged in or out of groups by rearranging elements in the Element List.
A Group in the Element List
Hiding and Locking Elements
Locked elements cannot be selected or moved on the scene, and their properties cannot be changed in the inspector. Hidden elements are not visible on the scene and are also not exported. Multiple elements can be locked or hidden at the same time by selecting multiple elements on the scene or in the Element List and then choosing Arrange > Lock or Arrange > Hide.
Elements and groups both can be locked or hidden. Any adjustment to locking or visibility on a group affects the state of elements within it.
Hidden, Locked, and Unlocked + Visible elements.
Each element’s visibility and locking buttons now support modifier keys for toggling their state en massé. If you Command-click on an element’s visibility or lock button, all other elements will match the clicked element’s state. Option-clicking will change all other elements’ state, so you can easily hide or lock all other elements.
Ordering Toolbar Items
Additional questions?
If you have any additional questions not covered here, please visit the elements support forum or ask us a question.
