Skip to content

Your First Project

In this tutorial you will build a complete show-ready project with two screens, background video loops, a title graphic that fades in and out, and a Playlist for operator control. This covers the most common Exaplay 3 workflow and introduces several key features.

Time required: about 20 minutes

What You'll Build

A dual-projector setup for a live event:

  • Left projector — Looping background video + title graphic that fades in on cue
  • Right projector — Looping background video (continuous)
  • Playlist — A named cue that triggers the title graphic, operable by hotkey or mouse click
  • Operator URL — A simplified control view for your show operator

By the end, you will understand multi-screen workflows, layers, transitions, Playlists, and the operator control view.

Before You Begin

Make sure you have:

  • [x] Completed the Quick Start Tutorial and are comfortable with the basic workflow
  • [x] At least two display outputs connected (or one is fine — you can still create multiple screens for pre-programming)
  • [x] The following media files ready:
    • A background video (any video loop or long clip)
    • A title graphic (a PNG or JPEG with transparency works best, but any image will do)

Working with one monitor?

You can follow this entire tutorial with a single monitor. Exaplay 3 lets you create screens without physical outputs — the content renders in the canvas preview. You can assign outputs later when the hardware is available.


Step 1 — Create a New Project

  1. Launch Exaplay 3 (or if it is already running, choose File → New to start fresh).
  2. Immediately save with Ctrl+S and name it something meaningful, e.g. Event Show.

Saving first gives your project a .vpp file on disk. This is a good habit — it enables auto-save and auto-heal recovery.

Step 2 — Set Up Two Screens

In Quick Start you used the Screen that Exaplay 3 creates automatically for every new project. For this dual-projector show you need two screens, so you'll rename that default screen and add a second one, then assign a display to each.

Rename the default screen to "Left"

  1. Open the OUTPUTS tab in the top navigation.
  2. In the Screens & Fields section, select the existing (default) screen and rename it to Left.

Add a second screen: "Right"

  1. Still in Screens & Fields, click New Screen.
  2. Name it Right.

Two screens in Screens & Fields

Assign a display to each screen

  1. Switch to the Outputs section (still within the OUTPUTS tab).
  2. Create or select a display for the left projector and assign it (its owner) to Left.
  3. Repeat for the right projector, assigning it to Right.

See Output Setup for the full reference on creating and binding displays.

You now have two independent Screens — Left and Right — each with its own Field ready to receive content. Neither has a Timeline yet; that's next.

Step 3 — Add Background Loops

Next, add a looping background video for each screen. Since Screens and Compositions are separate things in Exaplay 3, this means pointing a Timeline's track at each screen's Field, then dragging in the video.

On the Left screen:

You already have one Composition — a Timeline — open from when the project was created. You'll use it for the Left screen.

  1. Select Track 1 in that Timeline (click it in the track list).
  2. In the Inspector, find the Screen field property and drag the Left field onto it (or click it to pick Left from the Screens & Fields list). This points the track's output at the Left screen.
  3. In the File Browser, navigate to your background video.
  4. Drag the video thumbnail onto Track 1.
  5. Select the clip on the timeline (click it). The Inspector panel on the right shows the clip's properties.
  6. Click the infinity Loop icon in the Inspector to toggle looping on. This makes the video restart automatically when it reaches the end.

On the Right screen:

  1. Click + in the composition strip (above the Timeline) to add a new Composition for the Right screen.
  2. Select its Track 1 and bind its Screen field to Right, the same way as above.
  3. Drag the same (or a different) background video onto Track 1.
  4. Select the clip and toggle the Loop icon on in the Inspector.

Two screens with background loops

Press Space to play — this plays only the active composition tab, so switch between the Left and Right tabs and press Space on each to start both. Once started, each keeps looping independently on its own canvas preview.

Why use Track 1 for backgrounds?

Track 1 is the bottom layer of the composition. Content on higher-numbered tracks draws on top. Placing your background on Track 1 ensures it is always behind any foreground graphics or titles you add later.

Step 4 — Add a Title Graphic

Now add a title graphic that fades in and out on top of the Left screen's background.

  1. Switch to the Left composition tab in the composition strip.
  2. In the File Browser, navigate to your title image (PNG/JPEG).
  3. Drag it onto Track 2 (right-click the track list → Add Track Above if Track 2 doesn't exist yet).
  4. Position the clip on the timeline at the timecode where you want the title to appear. You can drag the clip left or right on the track to adjust its position.
  5. Select the clip and find its Opacity property in the Inspector, then keyframe a fade in and out:
    • At the clip's start, set Opacity to 0 and click the diamond icon next to it to add a keyframe.
    • Move the playhead about a second later and set Opacity to 100 — a second keyframe is created automatically.
    • Near the clip's end, set Opacity to 100, then move the playhead to the clip's end and set it back to 0.

Fade vs. Crossfade

This fades a single clip in and out using Opacity keyframes — the right tool when a clip has nothing to blend against, like a title floating over a background on another track. A true Crossfade is different: it happens automatically whenever two clips on the same track overlap in time — useful for smoothly switching between two background videos, for example. See Frame Blending & Transitions and Property Keyframes.

The title graphic now sits on Layer 2 (Track 2), above the background on Layer 1 (Track 1). When the playhead reaches the title clip, it fades in over the background. When the clip ends, it fades out.

Step 5 — Create a Playlist

So far, everything is driven by the continuous timeline. For a live show, you usually want an operator to trigger events manually. That is what Playlists are for.

Add a Playlist composition

  1. Click the + button in the composition tab bar to create a new composition.
  2. In the editor area, click Playlist to set the composition type (instead of Timeline). Rename it (e.g. My Cues) in the Inspector.
  3. The composition's editor area now shows the Playlist with its empty cue list.

Add a cue

  1. Right Click or Double Click on the Cue Line to Click create a new cue entry.
  2. Configure the cue:
FieldValueDescription
NameTitle InA descriptive label for the operator
ActionGo to timecodeThe cue will jump the timeline to a specific position
Timecodee.g. 00:00:05:00Enter the timecode where the title clip begins on Track 2 (match the clip's position on the timeline)
Hot KeyF1Pressing F1 triggers this cue

Playlist with one cue

How cues work

When the operator triggers a cue (by clicking it, pressing the hotkey, or receiving an external command), the timeline jumps to the specified timecode and begins playback from there. This means the background video keeps looping on Track 1 while the title graphic fades in on Track 2.

Test the cue

  1. Press Escape to stop playback and return to the beginning.
  2. Press Space to start playing the background loop.
  3. Press F1 — the timeline jumps to the cue timecode and the title fades in.

If it works, you have a functional operator-controlled show!

Step 6 — Set Up the Operator Control View

Exaplay 3 includes a simplified Control View that shows only the Playlist and transport controls — no editing tools. This is what you share with your show operator.

  1. Find your machine's IP address (e.g. 192.168.1.100).
  2. On any device on the same network, open a browser and go to:
    http://192.168.1.100:8123/control
  3. The operator sees a clean interface with:
    • The list of cues (with names and hotkeys)
    • Play / Pause / Stop buttons
    • Current timecode display

Operator control view

Tablets and phones

The Control View is responsive and works well on tablets. For live events, giving the operator an iPad or Android tablet with this URL creates a portable, wireless show control surface.

Step 7 — Save and Archive

  1. Press Ctrl+S to save your project.
  2. The .vpp file in Documents\Exaplay3\ now stores everything: both screen layouts, all media references, the Playlist, transition settings, and loop configurations.

Keep your media files accessible

Media files are referenced by file path, not embedded in the project. When moving a project to another machine:

  • Keep the media folder in the same relative location, or
  • Place media in Documents\Exaplay3\media\ on the target machine
  • Use File → Export Project to create a ZIP archive that includes all referenced media files

✅ Checkpoint — What You've Accomplished

You have built a complete show-ready project:

  • [x] Created a two-screen setup (Left and Right projectors)
  • [x] Added looping background videos to both screens
  • [x] Layered a title graphic on top of the background using Track 2
  • [x] Configured an Opacity fade for smooth visual blending
  • [x] Created a Playlist with a hotkey-triggered cue
  • [x] Tested operator-driven cueing with the F1 key
  • [x] Set up the Control View URL for a show operator
  • [x] Saved the project as a .vpp file

Going Further

Now that you have the fundamentals, explore these topics to expand your skills:

TopicLinkWhat you'll learn
Full Interface GuideInterface OverviewEvery panel, tool, and shortcut in detail
Visual EffectsEffectsColor keying, chromatic aberration, dome looks, and other live effect controls
Projection MappingProjection MappingVIOSO warping, edge blending, multi-projector geometry
Timecode SyncTimecode SyncLTC, OSC, and MTC sync for frame-accurate shows
User Panel BuilderUser PanelsCreate custom touch-friendly operator panels
Live Events WorkflowLive EventsEnd-to-end guide for concerts and festival stages
Multi-Client SetupMulti-ClientSynchronise playback across multiple Exaplay 3 instances

Challenge yourself

Try extending this project by adding:

  1. A second cue that fades the title out (Go to timecode at the end of the title clip)
  2. A third layer on Track 3 with a logo watermark set to 50% opacity
  3. A different background video on each screen

Exaplay 3 User Documentation