Tumult Hype Documentation — Actions

Scenes, timelines, and animations are the foundation of all Tumult Hype documents. Actions link together this foundation and make documents interactive. Actions are triggered five different ways:

  1. In response to mouse or touch events.
  2. In response to scene events.
  3. In response to keyboard events.
  4. At specific times on a timeline.
  5. Via JavaScript.

This chapter will discuss the first three triggers, as well as the types of actions and action chaining. Tumult Hype’s JavaScript API is discussed in the JavaScript chapter.

Mouse and Touch Actions

Any element can respond to both mouse and touch actions. Set an action on an element by selecting the element, opening the Actions inspector, and then clicking the Plus button next to any action handler. If Use Touch Events is enabled in the Document inspector, events are mapped to the tap action in parenthesis. The following six actions can be detected:

  • Mouse Click (Tap) — A complete click (a mouse down followed by mouse up) has been completed.
  • Mouse Down (Touch Start) — Once the pointing device has been depressed on the element.
  • Mouse Up (Touch End) — The mouse button has been released after being pressed.
  • Mouse Over — The cursor has entered the bounds of the element.
  • Mouse Out — The cursor is no longer within the bounds of the element.
  • On Drag — A drag has begun on the indicated element.
    • Control Element Position — Controls the position of the element when dragged.
    • Control Timeline — Horizontally or vertically dragging across the selected element controls playback of the selected timeline. The axis dropdown defines whether a horizontal or vertical drag controls the timeline. The direction dropdown defines whether the indicated timeline plays forwards or backwards. Select ‘Continue after drag’ to maintain the momentum of the timeline's playback after releasing.
    • For deeper control over dragged elements, see the JavaScript Drag API section of the documentation.



On Drag Action to Control a Timeline

Most mouse actions translate logically to touch actions. For example, tapping an element invokes that element’s touchstart action. For more information about touch support, please see the Touch & Mobile chapter. By default, a tap on a mobile device will be triggered at the start of a touchstart event. To change this behavior, disable Use touch Events in the Document inspector.

To correctly trigger mouse actions, elements must not have other elements above them or overlapping with them.

Set an action on a button by selecting the button, activating the Mouse Action inspector, and then clicking the Plus button next to the On Mouse Click action header:


A Mouse Action Set on a Button

Scene Actions

Scene actions trigger in response to scene events and are useful for scene-specific interactivity. The following scene actions can be triggered:

  • On Scene Load — Triggered when entering the scene.
  • On Scene Unload — Triggered when leaving the scene.
  • On Any Timeline Complete — Triggered when any timeline in the current scene has finished playing.
  • On Key Press — Triggered when a character key has been pressed and released.
  • On Key Down — Triggered when pressing a keyboard key.
  • On Key Up — Triggered when a keyboard key has been released.
  • On Swipe Left — Triggered when the scene is swiped from right to left.
  • On Swipe Right — Triggered when the scene is swiped from left to right.
  • On On Swipe Up — Triggered when the scene is swiped from bottom to top.
  • On Swipe Down — Triggered when the scene is swiped from top to bottom.
  • On Drag — Triggered when the scene area is dragged.
    • Control Timeline — Horizontally or vertically dragging across the scene controls playback of the selected timeline.
    • For deeper control over dragged elements, see the JavaScript Drag API section of the documentation.

Timeline Actions

Timeline actions fire at a certain point in a timeline. Add a new timeline action at the playhead’s current position by clicking the Plus button in the Timeline Actions gutter, or by double clicking anywhere on the Timeline Actions’ timeline. Existing Timeline Actions can be edited by double clicking on their associated keyframe.

To run a Timeline action at the end of a timeline, you may also use the On Any Timeline Complete action in the Scene inspector. This action is triggered every time any timeline in the current scene completes playing. For further control over actions beyond Timeline Actions, please see the JavaScript API documentation.


Timeline Actions

Edit an existing Timeline Action by double clicking on its associated keyframe to open the Timeline Action pop-up window:


Timeline Actions Pop-up Window

Example Timeline Actions

Here are a few examples of what Timeline Actions can be used for:

  • Looping an animation — To loop an animation, you can set a timeline action to either Start Timeline or Go to Time in Timeline for the same timeline.
  • Jumping to a scene or running an alternate timeline — Create interactivity that navigates to specific points in scenes and timelines. You would create multiple animations on one timeline, and use the Pause and Continue actions to move between them.

The example document below demonstrates a Timeline Action

Types of Actions

The types of actions possible for scene, mouse, or time-based events are the same. The action menu throughout Tumult Hype provides quick access to eight different actions and one command.


Available Actions


A .6 second Push Scene Transition Action

  • Jump to Scene — Change to the previous, next, or arbitrarily specified scene, using one of the following seven scene transitions:
    • Instant
    • Crossfade
    • Swap
    • Push (Left to Right)
    • Push (Right to Left)
    • Push (Bottom to Top)
    • Push (Top to Bottom)

    Note: The Swap transition is only shown in WebKit-based browsers, Firefox, and Internet Explorer 10.

    The document below may be useful for testing transitions. We recommend downloading this document.

  • Run JavaScript — Invokes a JavaScript function. See the JavaScript chapter to learn more about what’s possible with JavaScript in Tumult Hype.
  • Go to URL — Loads a URL.
  • Compose Email — Composes an email, with optional subject line and body fields.
  • Play Sound — Starts the selected sound.
  • Stop Sound — Stops the selected sound.
  • Start Timeline — Start playback of any timeline in the current scene.
  • Pause Timeline — Pause playback of any timeline in the current scene.
  • Continue Timeline — Resume playback of any timeline in the current scene.
  • Go to Time in Timeline — Jump to a specified time in any timeline in the current scene.
  • Remove — Removes the associated action.

Chaining Actions

More than one action can be triggered in response to an event. For example, a button click could sequentially perform these two actions:

  1. Go to Time in Timeline…
  2. Continue Timeline…

Clicking the Plus button in any action handler’s section appends a new action to the end of the action chain.


Adding Actions

Additional questions?

If you have any additional questions not covered here, please visit the support forum or ask us a question.