The Studio

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!

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 +/-)

2. Screens

a. Screens

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

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 >>> Create a gallery

 Video player >>> Insert a video file

 Sequence >>> Create a sequence

 HD Zoom >>> Use HD Zoom

 Scrolling area >>> Create a scrolling area

 Pop-up (window) >>> Create a pop-up (window)

 Drag / Drop >>> Use Drag and Drop

 Multi-state >>> Use the multi-state component

 Interactive zone >>> Create an interactive zone

 HTML >>> Add HTML content

SYSTEM COMPONENTS:

 Motion sensor >>> Master system components

 Blow sensor >>> Master system components

 Compass sensor >>> Master system components

 Shake sensor >>> Master system components

 Video >>> Insert a video file

 Audio >>> Insert an audio file

 Synchronization >>> Use synchronization

 Timer >>> Use timer

 Beacon >>> The Beacon Sensor

 Recognizer >>> Use images recognition

 Bluetooth >>> Use BLE technologie

 Purchase in app >>> Integrate in-app purchase

 Content Download >>> Add downloadable content

4. 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

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

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:

• add new languages to your project (for multilingual apps);
• define a magazine navigation mode as well as the number of fingers required to switch screen in this mode.

8. 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

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

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.

11. Save and preview

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! :-)