Interaction Elements – How to Use the Property Panel

Cinema8’s Creative Studio allows you to design immersive and interactive videos using a variety of widgets and elements. One of the core tools that enhances this experience is the Property Panel. This feature enables you to fine-tune every interaction element, ensuring it behaves exactly how you need it to within your video.

This guide will walk you through the Property Panel’s interface, its components, and how to use it effectively.

What Is the Property Panel?

The Property Panel is the central hub for managing the settings of any widget or element you add to your video. It appears on the right-hand side when you select an element on your timeline or canvas. Using this panel, you can:

Adjust position and size
Set visibility timings
Configure triggers and actions
Customize appearance, such as colors, fonts, or animations

Components of the Property Panel

1. Basic Information

Name: Set a unique name for the element to easily identify it in your timeline.
Start and End Times: Specify when the widget appears and disappears during the video.
Visibility Settings:
- Skippable: Allow viewers to skip the interaction.
- Visible: Toggle whether the widget is visible.

2. Triggers and Actions

When Clicked: Define what happens when viewers interact with the element (e.g., open a link, display a message).
When Appears on Timeline: Set actions that occur when the widget becomes visible.
When Disappears on Timeline: Configure actions when the widget disappears.

3. Positioning

Top, Left, Width, Height: Use percentage-based values to position the element precisely on the video canvas.
Adjust dimensions: Resize elements to fit your design needs.

4. Appearance Settings

Background: Add solid colors or images as a background for the widget.
Text Styles: Customize font type, size, color, and alignment (available for text-based elements).

5. Advanced Settings (For Specific Widgets)

Forms: Define input fields, placeholders, and validation rules.
Buttons: Customize button text, action links, and hover states.
Hotspots: Specify clickable areas and link them to actions or external resources.

How to Use the Property Panel

Step 1: Add an Element to the Video

Drag an element (e.g., Hotspot, Text, Form) from the Widget Library to your timeline.
Click on the element to select it.

Step 2: Adjust Settings in the Property Panel

Open the Property Panel on the right.
Modify the following settings:
- Set the start and end times to control visibility.
- Adjust position and size to fit your design.
- Configure triggers and actions to define interactivity.

Step 3: Preview and Test

Use the Preview Mode in Cinema8 to test how the interaction behaves.
Adjust settings as needed to improve user experience.

Practical Use Cases

Call-to-Actions (CTAs): Add a clickable button that appears at specific points in the video to guide viewers to a landing page.
E-Learning Assessments: Use drag-and-drop or multiple-choice elements to test knowledge.
Gamification: Add countdown timers and reward badges to create interactive challenges.

Best Practices

Use clear labels: Name your elements descriptively to avoid confusion.
Optimize for visibility: Ensure widgets are visible for an adequate duration.
Test interactions: Always verify actions to ensure they work as intended.

Next Steps

To learn more about working with elements and the Property Panel, check out: