Scenes

To set up more complex Designer experiences, you can use Scenes. A scene is a individual canvas of your experience that displays it's own unique content. An experience can be made up of multiple scenes to create more dynamic interactive experiences. Scenes can be activated and transitioned to via an action assigned to a user input, like a button tap.

Although each scene is a unique canvas, they will all track to the same target image you uploaded at the start of your project.

Working with Scenes

By default, Designer projects will start with 1 scene. At the bottom of Designer there is a Scene Manager Panel, in this panel you can:

  • Add a new scene
  • Rename an existing scene
  • Duplicate an existing scene
  • Delete an existing scene
  • Select your active scene to edit

Adding a new scene

To add a new scene, click the either the Add Scene button to the right of the active scene name or open the Scene Manager Panel and click the empty (+) scene.

Adding a scene

Your active scene will be updated to the most recently added scene.

Renaming scenes

Scenes will be given an auto-generated naming convention. There will be times where you'll want to rename a scene to help understand the functionality in that specific scene. To do this, hover over the scene you want to change and click on the vertical ellipsis menu. From here you can select Rename and update the name of the scene.

Renaming a scene

Duplicating a scene

Duplicating scenes removes the need to start from a blank canvas each time. When you duplicate a scene, all the components and content will also be duplicated, which is great for when you have a background image or a button that is consistent throughout all of your scenes.

To duplicate a scene, hover over the scene you want to duplicate, click on the vertical ellipsis menu and select Duplicate. You might want then to rename the scene using the method above.

Duplicating a scene

Deleting a scene

To delete an unwanted scene, hover over the scene you want to delete, click on the vertical ellipsis menu and select Delete.

Deleting a scene

Selecting your active scene

During development, you'll want to view and edit the content in the different scenes. To select the active scene shown on the canvas, open the Scene Manager Panel and click on the desired scene.

Selecting an active scene

You can also drag and drop scenes to change the order of them in the Scene Manager Panel. This won't have any effect on how the experience performs, however, it's helpful from a developer perspective to keep the scenes in personalized order.

Scene Properties

Each scene has it's own properties panel. In this properties panel you can change the Scene Name and assign Transition Effects that will apply to everything in the scene.

Scene properties

Next article: Actions

zapcode branded_zapcode i