Navigating the UI
ZapWorks Designer is made up of a number of different panels, each of which are essential when developing experiences.
The image below showcases the main Designer UI elements, with the fundamental panels highlighted.
Continue reading the article to learn more about what each of these panels do.
Components Panel (1)
| Section | Description |
|---|---|
| Button | Select from a range of basic buttons to add to your scene. |
| Text | Choose from preset themed and hierarchy based text objects. |
| Image | Add an image from your media library to your scene, or upload a new image from your device. |
| Video | Add a video from your media library to your scene, or upload a new video from your device. |
| 3D | Import a 3D model into your project to create a three-dimensional experience. |
Scene Manager Panel (2)
This scene manager panel alters the properties of the scenes in your project. Here you can find:
| Section | Description |
|---|---|
| Scene Selector | Select which scene is currently displayed in the viewport. |
| Rename Scene | Change the name of your scene by selecting on your scene name, or via the burger menu, on the scene selection menu. |
| Add Scene | Adds another scene to your project. |
| Duplicate Scene | Duplicates the scene that is currently being viewed. |
You can find more information on editing your scenes here.
Project Properties (3)
The project properties section is for making changes to your overall project. Here you can find:
| Section | Description |
|---|---|
| Upload Target Image | Upload the image you wish for your project to be tracked to. |
| Background Sound | Add some background sound that plays when a user views your experience. |
| Scene Properties | Edit the name and view the content of the scene. |
| Scene Transitions | Add a transition that plays when you move between scenes. |
| Photo UI | Toggle the camera controls for saving and sharing your scene. |
| Zoom | Determines how zoomed in or out the scene viewport is. |
| 2D-3D Switch | Change between a 2D and a 3D view. |
The project properties panel is responsive and can show different options based on the what's selected in the scene.
Action Bar (4)
The Action Bar contains admin functions for your project. Here you can find:
| Section | Description |
|---|---|
| Rename | Rename the project on your workspace. |
| Send Feedback | Fill out a feedback form to let us know what you think of Designer. |
| Undo/Redo | Undo or redo any changes you have made to your project. |
| Collaborators | Shows the users that are currently editing the project. |
| Preview | Generates a temporary QR code to scan and view your current version. |
| Publish | Publishes your project so anyone with the project trigger to access your project. |
Scene Entities Panel (5)
When selected, the Scene Entities Panel shows a list of all the objects in your active scene. You can rename, lock and hide an object by hovering over its entry in the list.
Selecting an object from the list will also update the selection in the scene. This is great for quick selecting objects that are overlaid by others.
The order of the objects in the Scene Entities Panel relates to the order in which the object is rendered. The order property of the first object in the list will be classed as "on top". Click and drag objects to update the order.
In 3D mode, the Z axis position of an object takes priority unless the 2 entities are on the same Z position.