Studio interface

Welcome to the studio! This is where you easily create screens and add interactivity. Insert your content and use components to create awesome effects without lines of code.

The interface is designed to be intuitive and those of you who are already familiar with graphic design softwares (such as Illustrator, InDesign, Photoshop) will make it easier.

Separate windows give you the right information at the right time. Because we know you like to do things your way, you can move all of these windows!

Interface_du_studio_PandaSuite.png

 

1. Work space

This is your creative space, the visible part on the tablet. When creating a new project, you can define ratio and orientation depending on the support (desktop, tablet, smartphone).

You can easily navigate and zoom by using the tools located at the bottom left of your work space (hand tool and zoom +/-)

Interface_Zoom.png

 

2. Screens

a. Screens

Screen_window.png  

The screen is the support base of your application: it can be declined in different states, i.e. in different layouts. All these elements are shown in the window on the left. Initially, your project is composed of one screen arranged in one state.

Click the + ADD SCREEN button to add a new screen. If you select a state, this button becomes + ADD STATE... to add a new state!

The number next to the name of your screen tells you how many states you've created. Click and hold to select the name and change it: okay, this may sound like a very basic feature but it turns out to be a really useful one and we strongly suggest using it to navigate more easily within your project!

 

b. Foreground and background

By clicking on SCREENS, you can access the foregrounds and backgrounds. They can be edited as classic states.

 

3. The creation tools

creation tools

In the top menu, these 4 icons allow you to add different objects to your screens.

 

a. Text

When you click on the Text button, a text box appears at the center of your screen. To edit its content, simply double-click or click on MODIFY TEXT CONTENT in the Properties window. On the right, in the Properties window, you have access to many text editing features: font, size, line spacing, color, alignment, etc.

 

b. Images

Once you've inserted your image, you can change its source, frame it or round its corners in the Properties window. By clicking on ADDING A MASK, you can hide a part of the image by selecting a type of mask (square, circle, bubble, triangle, star etc.).

 

c. Shapes

Many shapes are available for your project. You can also change their color, rotate them and frame them using the Properties window.

 

d. Components

Welcome to Ali Baba’s cave! Here you'll find a large array of components, i.e. modules to add complex features to your project. Each of these components can be personalized and you can even make them interact.

Take all the time you need to discover these components - they each have a dedicated article - and see how you can adapt them to your needs.

There are two types of components:

  • Graphic components: they are visible on your user interface:
  • System components: they create interactions without being visible

GRAPHIC COMPONENTS:

gallery-icon.png Gallery >>> Create a gallery

video-player-icon.png Video player >>> Insert a video file

sequence-icon.png Sequence >>> Create a sequence

hd-zoom-icon.png HD Zoom >>> Use HD Zoom

scrolling-area-icon.png Scrolling area >>> Create a scrolling area

pop-up-window-icon.png Pop-up (window) >>> Create a pop-up (window)

drag-and-drop-icon.png Drag / Drop >>> Use Drag and Drop

multi-state-icon.png Multi-state >>> Use the multi-state component

interactive-zone-icon.png Interactive zone >>> Create an interactive zone

html-component.png HTML >>> Add HTML content

SYSTEM COMPONENTS:

motion-sensor.png Motion sensor >>> Master system components

blow-sensor.png Blow sensor >>> Master system components

compass-sensor.png Compass sensor >>> Master system components

shake-sensor.png Shake sensor >>> Master system components

video-icon.png Video >>> Insert a video file

audio-icon.png Audio >>> Insert an audio file

Synchronisation_.png Synchronization >>> Use synchronization

Timer.png Timer >>> Use timer

Beacon.png Beacon >>> The Beacon Sensor

Recognizer.png Recognizer >>> Use images recognition 

Bluetooth_BLE.png Bluetooth >>> Use BLE technologie 

Purchase_in_app.png Purchase in app >>> Integrate in-app purchase

Download.png Content Download >>> Add downloadable content

 

4. Interactivities

"interactivities

This is the magical window! By clicking on + ADD ACTION you can add interactive actions. Soon you’ll see that it's a matter of combining a trigger and an action: be patient, you’ll become a real pro in no time!

 

5. Properties

properties

The Properties window gives you access to specific features of the selected object. When no particular object is selected, the icon also gives you access to state properties. It's automatically displayed when an object is inserted.

A common property to all objects is User interaction: when unchecking it, you remove any possibility for users to launch an interaction that you may have defined for this object or in this object.

 

6. My Medias

medias

My Medias window gives you access from anywhere all to all the elements you've imported for your project: images, videos and audio files. You can find these items easily using the search engine and setting a filter, see how often you've used each of them and access other file information.

To add these items into your project, all you need to do is drag them from Medias and onto your screen. Do keep in mind that it's not because your files are in Medias that they're already included in your project! To make sure they really are in there, check that they appear in the LIST OF OBJECTS at the bottom left of your screen.

 Tip: one that will help you save time! Don’t forget to name all of your files as you work, so that you can find them easily later on - you'll probably end up with a lot of files by the time your finish your project.

 

7. Project Management

You could find it by clicking on the "Burger" menu upper left.

In this window, you can:

 

8. Toolbar

toolbar

When selecting an object, this toolbar allows you to find all the common layout features. You can:

  • Delete objects
  • Undo / Redo
  • Change opacity
  • Move an object forward or backward
  • Define coordinates
  • Adjust left / center / right
  • Adjust top / middle / bottom
  • Change dimensions
  • Adapt left / right / up / down
  • Rotate object

 

9. Breadcrumb

breadcrumb

Under toolbar, the breadcrumb is your ultimate guide: it helps you navigate in your project, especially when you manage through several levels (a component within a component example).

 

10. List of objects

list of objects

At the bottom left, the List of Objects includes all the objects, visible or not, that are within your current state. Graphic components are on the top of the list and are separated from the system components by a bar in the list. You can choose to lock or hide certain elements (which will also be hidden on the preview and PandaViewer). When you assign an action to an object, a flash appears next to it.

You can edit by double-clicking objects.

 Info: please note that the order of objects in the list also indicates their depth.

 

11. Save and preview

Save_and_preview.png

Save your project and preview it either via the Preview icon, or via the PandaViewer application.

At the bottom right, you see the window to "chat" with a member of the team (we will be delighted to speak with you!)

The article was long but the studio has (almost) no secrets for you! :-)

Was this article helpful?
0 out of 0 found this helpful

Create today your interactive content

Easy-to-use ∗ Free ∗ No installation

START NOW!