In this tutorial we will learn how to build an interactive video launcher using touchless sensors to map out zones where a user can interact to launch the playback of a video.

While this project will be prototyped using a Leap Motion hand sensor and a monitor, the objective is to learn the proper tools and setup to imagine scaled up versions using video-projection and/or LED walls with touchless sensors such as LiDARs or depth cameras.

This tutorial series will cover the following topics:

  • Setting up tasks to control the launch of timelines
  • Setting up timelines to trigger tasks at specific timecodes
  • Setting up sensors to launch tasks making use of the Trigger Area node
  • Programming variables to change the aspect of interface elements dynamically with Compute Graphs
  • Setting up a Render Graph to make use of transition effects

Regarding pre-load times

In this tutorial, we are deliberately choosing to leave a full 1 second pre-load time in our timelines before starting the playback of our media.

This means we are playing the timeline at timecode 00:00:00:00 but the media only starts at timecode 00:00:01:00.

Please note that this is not mandatory.

Although it is good practice to start playback a little before your media in-points, often just a few frames are sufficient; and depending on your media and the way you implement your transitions, pre-load time can sometimes be unnecessary.

In our case, the 1 second pre-load times coupled with the 1 second and 15 frames cross-fade gives us a great opportunity to present other features of Kinetic Designer to compose with.

Media Kit

Download the Media Kit.


You can access the chapters in each video by clicking on the Chapters button in the bottom controls of the video player.


Part 1: Setting up timelines and showcontrol tasks

In this first part we’ll begin a project from scratch and set up the timelines and tasks to control the launch of video playbacks.

Part 2: Setting up interactivity

In this video we cover how to setup different interactive areas over the buttons in the main menu and link user interaction with those areas to trigger the showcontrol tasks.

Part 3: Dynamic interface using Variables

In this part we’ll add variables to control the aspect of the menu buttons when they are triggered to improve the overall responsiveness of the video launcher without sacrificing the preload time in our timelines.

Part 4: Enhancing the transition effect

In this video we add the finishing touches to our project by adding a visual transition effect using a Render Graph and playing a short sound when launching a video.

Modulo Kinetic version : 5.0.1
If you are using a more recent version of Modulo Kinetic there may be some differences between the video and your interface.
If you are using a less recent version of Modulo Kinetic some features may not be available.

Need more help with this?
Don’t hesitate to contact us here.

Thanks for your feedback.