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.
Info: please note that the order of objects in the list also indicates their depth.
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! :-)