Interaction Elements – How to Use the Property Panel

Cinema8’s Property Panel is a powerful feature in the Creative Studio that lets you fine-tune any interactive widget you add to your video. From controlling when an element appears to customizing its appearance and behavior, the Property Panel ensures that your video interactions behave exactly how you intend.

What Is the Property Panel?

The Property Panel appears on the right-hand side of the Creative Studio whenever you select a widget or element. It provides granular control over:

• Timing — When an element appears or disappears
• Positioning — Adjust the exact placement on screen
• Triggers & Actions — Set interactivity rules
• Styling — Customize fonts, colors, and backgrounds
• Advanced Behavior — For specific elements like buttons, forms, or hotspots

Key Sections of the Property Panel

1. Basic Information

• Element Name — Assign a clear, descriptive name for easy identification.
• Start & End Times — Define when the element is visible on the video timeline.
• Visibility Settings
  • Skippable — Allow users to bypass this element.
  • Visible — Control whether the element is initially shown.

2. Triggers and Actions

• When Clicked — E.g., open a link, show a message, trigger another element.
• On Appear / Disappear — Trigger actions when the widget enters or exits view.

3. Positioning

• Top, Left, Width, Height — Use percentage-based values for responsive positioning.
• Resize elements visually or manually for precision.

4. Appearance Settings

• Background — Apply solid colors or background images.
• Text Styling — Adjust font, size, color, alignment (for text-based widgets).

5. Advanced Settings (Element-Specific)

• Forms — Set input fields, placeholders, validations.
• Buttons — Define button labels, links, hover effects.
• Hotspots — Assign clickable areas and destination actions.

How to Use the Property Panel

Common Use Cases

• CTAs — Add buttons with links that appear after product intros or learning checkpoints.
• E-learning Assessments — Use quiz widgets and evaluate user input with conditional triggers.
• Gamified Interactions — Add progress meters, countdowns, or scoreboards for engagement.

Best Practices

• Use clear labels — Especially helpful in projects with many widgets.
• Set generous visibility durations — Avoid too-brief appearances that users might miss.
• Test every trigger — Always verify your actions behave as expected before publishing.

Next Steps

Continue exploring advanced use cases:

• Hotspots and Their Properties
• Creating Advanced Triggers with Cinema8