Canvas

Canvas is the area that represents your screen (white rectangle on the middle). Background and canvas settings are on the right.

  • You can set the scene name by typing into the Title input on the canvas tab. You can also type above the canvas.
  • You should adjust the width and height according to your device resolution before start.

Zoom

You can zoom in-out using the slider on top or on the canvas tab.

Background

Background is the base layer for your other design elements. There are 5 different background types that you can choose from.

-1- Color

  • Color is default option when you create a new scene. 
  • Click on the small box next to the color option. This will open a color palette. You can click on the palette, enter RGB values, enter a hex code or choose from preset colors at the bottom.
  • Click somewhere else to close color palette.

-2- Image

Note: You can only use one image as background. If you want to add multiple images, visit here.

  • Select Image from background drop-down menu.
  • Image placeholder will appear on the canvas, and there will be settings for the Image background. Click Pick Media From Library button.
  • This will open your media library, and only images will be listed. 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. If the resolution is not the same with your canvas, image will fit to the canvas automatically.

-3- Video

Note: You can only use one video as background. If you want to add multiple videos, visit here.

  • Choose video from the background drop-down menu. Video placeholder will appear on the canvas. 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.

Note: Playlist Item's duration will be updated to the length of video.

-4- HTML

  • Click on the HTML from background drop-down menu.
  • Code placeholder will appear on the canvas. There will be a HTML Code text area on the right. You can paste your html code here and it will show up on the canvas instantly.

-5- Iframe

  • Click on the Iframe from background drop-down menu.
  • Web placeholder will appear on the canvas. Paste URL into the input area under background drop-down menu.

Note: Iframe is not previewed on the canvas.

_______

Next: 8.3 Scene Elements

Previous: 8.1 Introduction to Scene Designer

_______

Related Articles:

8.4 Image and Video Elements
8.6 HTML and Iframe Elements
8.10 Timeline - Keyframes - Animations

Did this answer your question?