All Collections
8.0 SCENE DESIGNER
8.4 Image and Video Elements
8.4 Image and Video Elements

Use image and video in a scene

Omma Sign avatar
Written by Omma Sign
Updated over a week ago

Inserting an Image Element

  • Click on the Insert Image button on top header bar.

  • An image element with a placeholder will appear on the canvas.

Now that you put the placeholder, it's time for picking the image. We have two options for image selection; (a) from media library or (b) from a datasource. 

a. Adding an Image from Media Library

  • Click on Pick Media From Library.

  • This will open a media library and only images will be listed here. This is the list view of media library.

  • Click on the checkbox to the left of your image to select it. Click Add to Content.

  • Your Image will appear on the canvas with its original size. Resize and position it accordingly.

b. Adding Image from a Datasource Field 

When you need to change your visuals regularly, you may use a datasource. This way, instead of opening scene designer and changing the visual, you can directly manage your datasource. The image element you added to your scene will be updated automatically. Learn more here.

Formatting Image

  • We will use format tab to go over the image settings.

  • Name: You can edit the name of the image to easily distinguish it from other elements you put on the canvas. 

Note: You can select your element by clicking on it under Layers tab. Naming your images is helpful especially in populated scenes with lots of elements.

  • Value: When you select image from your media library, Value field displays the ID of the image in your media library. When you pick a datasource field, you can see the datasource path here. 

  • Refresh icon: In case you add the image via a datasource, this icon updates image area, and the current image in the datasource is reflected on the canvas. 

  • Delete and duplicate icons are self explanatory.

  • Box settings are opacity and radius. 

  • You can check the transform and arrangement settings from here.

Inserting a Video Element

  • Click on the Insert Video button on top header bar.

  • A video element with a placeholder will appear on the canvas.

Now that you put the placeholder, it's time for picking the video. We have two options for video selection; (a) from media library or (b) from a datasource. 

a. Selecting a Video from Media Library

  • Click on Pick Media From Library.

  • Selecting your video from media library is same with selecting image process (above).

  • Your video will appear on the canvas.

  • Click play button on the bottom right to preview your video. You can click on the timeline on the bottom to expand it. Here you can see the total duration. Timeline will be useful with the animations.

b. Selecting Video from a Datasource Field

When you need to change your videos regularly, you may use a datasource. This way, instead of opening scene designer and changing the video, you can directly manage your datasource. The video element you added to your scene will be updated automatically. Learn more here.

Formatting Video

  • We will use format tab to go over the video settings.

  • Name: You can edit the name of the video to easily distinguish it from other elements you put on the canvas. 

Note: You can select your element by clicking on it under Layers tab. Naming your videos is helpful especially in populated scenes with lots of elements.

  • Value: When you select video from your media library, Value field displays the ID of the video in your media library. When you pick a datasource field, you can see the datasource path here. 

  • Refresh icon: In case you add the video via a datasource, this icon updates video area, and the current video in the datasource is reflected on the canvas. 

  • Delete and duplicate icons are self explanatory.

  • Loop: Uncheck when the video should play once. If checked, video will loop through the total scene duration.

  • Volume: This slider works if your video has sound and your device supports playing sound.

  • Box settings are opacity and radius. 

  • You can check the transform and arrangement settings from here.

_______

_______

Did this answer your question?