Tumult Hype Documentation — Elements

Elements are the objects in a scene. They can be shapes, 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. Edit an 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 expand to accommodate text entered as you type. Manually resizing an element will fix the element at the specified size.

For information on selecting fonts or using web fonts, visit the Fonts Chapter.

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.


Proportion and Sizing Options (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.

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.

Retina Image Support & Image Optimization: Tumult Hype automatically optimizes images during export; images are converted to formats supported on the web and resized for optimum support on ‘retina’ screens. For more information, please read the Previewing & Exporting chapter.


Background Property (Element Inspector)

Video

Tumult Hype embeds video using HTML’s native <video> tag, whenever possible. If the browser doesn’t support HTML5 video, as is the case with Internet Explorer 6 through 8, Hype falls back to the QuickTime plug-in. For information about playing and controlling video, see the Audio & Video documentation chapter.

Shapes

You may quickly add a Rectangle, Rounded Rectangle, or an Ellipse from the Elements toolbar item. The Rectangle element is the most foundational element in Tumult Hype: Rectangle elements can be customized to look and behave like almost all other elements.

Add shapes to your scene by selecting Insert > [shape], or by using the Insert Elements… toolbar button.


Default shapes

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 Edit > 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:

  1. Insert a new HTML Widget
  2. Open Tumult Hype’s Element inspector
  3. Click the Edit Code Snippet… button
  4. 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:// or https://).


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 elements along the Z-axis, select the elements and press Command key while dragging one of the corner resize handles. The cursor indicates the selected element will be rotated. The Metrics inspector also has controls for rotating elements along the X-, Y-, and Z-axis.

An element’s anchor point sets the element’s rotation origin. To move a selected element’s anchor point, press Command to reveal the anchor point crosshair icon and then drag the icon to a new location. The Metrics inspector offers control over the anchor point location in the Rotation Origin section.


Element with Z-axis rotation animation and a custom anchor point

Please note that an element’s anchor point cannot be modified if it’s animated using motion paths.

Multiple elements can be moved, rotated, 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
  • Distribute > Horizontally Within Selection
  • Distribute > Vertically Within Selection
  • 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.


The Identity inspector for a selected image.

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.


Editing the Inner HTML of a Box

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 masse. 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.

Knowledge Base Articles

See all articles...