Inserting an Image Element

  • Click on the Insert Element button on top header bar.
  • Select Image.
  • 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. You can switch to grid view from top right corner. 
  • Click on the checkbox to the top left corner 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 Element button on top header bar.
  • Select Video.
  • 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.

_______

Next: 8.5 Text and Shape

Previous: 8.3 Scene Elements

_______

Related Articles:

8.7 Resize - Position - Opacity - Radius Settings
8.8 Duplicating & Deleting a Scene Element
8.11 Dynamic Data (Datasource)

Did this answer your question?