Synchronization

Here is one of the biggest assets of PandaSuite Studio: synchronization! By synchronizing any component with the component of your choice, you create infinite interactive effects.

Synchronize two components

How it works

A synchronization is defined as a group. For each component, you choose the property to synchronize with the other components: pages, "x" values, "y" values, markers, zoom values... Each type of component has its properties. 

Select components

Click on Components and insert the Synchronization component. It only appears in the Object list, it is not visually present in your screen.

Open the Properties window. Click on + ADD COMPONENT: you must choose at least two components to create your synchronization group. 
The list shows you the components that are accessible nearby. By clicking Advanced Selection, you can search for any component in your project. A blue mode is here when you select this component. 

select components you want to synchronize

Select synchronization properties

Once you have selected the components, specify the synchronization property. To do this, click on each component in the list and select the property to synchronize. If you do not select any property, your synchronization is not activated.
The REVERSE button impacts the selected property by reversing its execution (for example, an "x" synchronization runs from the smallest to the largest number, but the REVERSE option will run it from the largest to the smallest number).

synchronization properties

Be careful: if you want to synchronize several properties of the same component (for example, the "x" and "y" positions of a scrolling area), you must create as many separate Synchronization components.

Examples of synchronization

Parallax effect

The Parallax effect is a classic of web design: it consists in moving several elements of the same page on different layers and at different speeds, which gives it an effect of depth. 
To build a Parallax effect, synchronize several scrolling areas of different sizes. Each zone includes elements moving at the same speed. The speed is defined by the size of the scrolling area: the larger the scrolling area, the higher the speed. In a Parallax effect, background items move at a slower speed than forward items.
Let's take the example of a Parallax effect for an iPad app.
  1. Insert a Scrolling Area component and stretch it across the entire screen.
  2. In the Properties window, click on vertical scrolling and hide the scroll bar.
  3. Modify the height of the content (1067 px for example) and insert in your area the elements of the foreground.
  4. Create a second scrolling area in the same way: this time, set a greater height (1125 px for example) and insert your background elements inside. Place this area behind the first one.
  5. Insert a Synchronization component: In the Properties window, select the two scrolling areas and synchronize the "y" positions.

Tip: with three scrolling areas, your Parallax effect will be even more visual. For an optimal rendering, we recommend that you increase the height of your 2nd zone (the middle one) by 60 pixels and your 3rd zone (the front one) by 120 pixels.

Synchronize the speed of a video with the accelerometer

Synchronization also allows you to play with the sensors (movement, compass, shake, blow). In our case, we will synchronize a Video Player component by tilting it horizontally.

  1. Insert the Video Player component and add the video of your choice.
  2. In the Properties window, change the min and max speed so that the change is visible, for example 0 and 3. Make sure playback is automatic (checked). 
  3. Insert the motion sensor and enable only horizontal tilt. 
  4. Insert a Synchronization component: in the Properties window, select both the Video Player and Motion Sensor components. For the Player, synchronize the speed; for the sensor, synchronize the horizontal axis.

Still need help? Contact Us Contact Us