← BACK

Studio workspace consists of six main sections: a menu bar (A) and a project bar (B) at the top, Canvas View (F) that can be switched to Path View in the center, and three vertical scrollable side panels (C, D, E), each with two tabs for different settings.

Tip: The best way to familiarize yourself with Studio workspace is to watch the Overview video from the AppOnboard Academy.

Menu bar Provides the standard File, Edit, View, Window, and Help menus where you can check for Studio updates, set your preferences, open and save your projects, copy, paste, delete layers, undo and redo your changes, toggle full screen view, submit feedback, contact support, and access help.
Header bar

Displays the name of the currently open project on the left. On the right, allows you to preview demos by scanning a QR code with the Studio app and, depending on your license, to publish them in the APK format for Google Play Instant Apps or HTML5 format for Facebook Ads.

This is also where you can view and modify your user account settings, including managing your subscriptions.

Canvas View Displays the assets and elements added to the scene currently selected in the Scenes panel and provides preview controls at the bottom that allow you to play, pause, and stop the video. This is your main work area.
Path View

Displays a visualized sequence of the scenes in the current demo, with each transition represented by an arrow, and any disconnected scenes without transitions listed to the right of the path. 

Note: The sequence is automatically created as you build your demo. You can’t add or modify any scenes or transitions directly in this view. To make any changes, you need to switch to Canvas View. See also Using Path View for Troubleshooting.

Side Panels

Scenes Allows you to add scenes to the demo by creating new ones or duplicating the existing ones along with their assets, actions, and layers. All scenes are displayed in the order they were added. For details, see Scenes.
Assets

Allows you to add and view all media assets files in the project and then drag individual assets to each scene in the Canvas View. For details, see Import Assets and Add Assets to Scenes

Each asset you add to a scene is automatically displayed in the Events & Actions panel, except for images and fonts. Images are displayed as elements in the Layers panel. Fonts are used in the Text Area settings in the Properties panel.

Elements

Allows you to add predefined elements, such as buttons, URLs, gestures, and text, to the currently selected scene. For details, see Elements and Layers.

Each element you add to a scene is automatically added to the Layers panel, with its settings displayed in the Properties panel where you can define them as desired.

Events & Actions

Allows you to view the assets added to the current scene and define their properties in the corresponding action menus that appear on the right. This is where you can add triggers, counters, and other advanced actions to the selected scene. For a list of available actions, see Action Types.

This is where you also add transitions to scenes. See also Advanced Transitions.

Tip: You can also define actions and transitions for gestures through their Properties panel.

Layers

Displays the elements and image assets added to the current scene or to the entire project if you select Global Layers.

This is where you can manage the visibility of individual elements across the entire demo or specific scenes, duplicate the existing elements, nest them inside container elements, or delete them, if needed. For details, see Elements and Layers.

Properties

Depending on your current selection, allows you to view and modify the properties of the following items:

  • The scene selected in the Scenes panel.
  • The element selected in the Layers panel or on the canvas.

Was this helpful?

Updated August 15, 2019