Components
Components are the cornerstone of creation in PandaSuite Studio, it's what gives you the greatest flexibility. They are customizable, powerful and synchronizable with each other. Discover the list of components, their role and how to edit them.
What is a component?
A component is a preconfigured module that allows you to create interactive effects from your content (scrolling, pop-up,...) and to use specific functionalities (in-app purchase...). Components are customizable, nestable into each other and you can make them interact with each other.
Here are the characteristics of a component :
- It has properties
- It has triggers to start an action
- It may be the subject of one or more actions
- It is customizable using markers
- It can be synchronized with all other components
- It reacts according to languages
- It can receive dynamic data (data provider).
Regularly we add new components. It is also possible to create a custom component using the PandaBridge library.
List of components
There are graphic components and system components: graphic components have a visual appearance in your workspace, while system components only appear in the Object list.
Graphic components
The graphic component (except the interactive zone) is based on a notion of depth: you must go inside the component to edit content. Its properties then apply to all the content inside.
- Interactive Zone
- Gallery
- Multi-state
- Pop-up
- Drag and Drop
- Video Player
- Image Sequence
- HD Image
- Web
- Camera
- After Effects
- 3D/Augmented Reality
- URL Media Player
- Group
- Scrolling Area
- Flexbox
System components
- Motion Sensor
- Blow Sensor
- Compass Sensor
- Shake Sensor
- Beacon Sensor
- Video(full screen)
- Audio
- Timer
- Bluetooth (BLE)
- Recognizer
- Download
- GPS
- Synchronization
- In-App Purchase
Tip: take the time to discover each component and its features. Get help from the tutorial.
Add a component
To add a component, click on the Components icon from the top menu.
If it is a visual component (scrolling zone, pop-up...) :
- Place the component where you want
- Double-click the area or click the EDIT button on the Properties window to edit the content of the component.
Otherwise select it from the Objects window.
Tip: use the breadcrumb trail to find your way around your project.
The user is in the scrolling area component within the List menu screen.
Properties of a component
Each component has specific properties to be found in the Properties window.
Example of scrolling area component properties
Markers of a component
Create a marker to identify a specific position on your component (the time of a video, the position of a scroll, a degree of tilt of the device...) and assign an action to it.
Creation of 2 markers on a scrolling area
Trigger an action
Select the component and click on Interactivities. Click on the + Add button and choose the trigger of your choice. Each component has its own list of triggers.
If you have created a marker, it will appear in the list.
Triggers of the scrolling zone (we find the 2 markers)
Interact with a component
Select a trigger (e.g. Simple tap on a button) and select the action Interact with a component. In the orange menu, select the component. You can select any component in your project.
