Here’s the greatest goody included in the studio: synchronization! The idea is simple: it coordinates any number of objects you want (two or more).


1. Creating a synchronization

a. The principle

Synchronization is defined by group. For each element, select the parameter you want to synchronize with other elements. Depending on the type of element, you'll access different parameters: pages, x values, y values, markers, zoom values, etc.


b. Select the components

Insert the Synchronization component: you'll find it in the List of Objects as it's not visible in your screen.

Go to the Properties window. Click on + ADD COMPONENTS: select them from the list of your state components or click on Advanced selection to look for a component out of the state. The blue mode indicates that you can go to another screen, foreground, background, in a component etc.

select components you want to synchronize

c. Define synchronizable properties

Once you've selected the components, don't forget to select them in the Properties window and define the synchronizable properties. Otherwise, your component won't be synchronized.

The Reverse button impacts the selected property by reversing its execution (for example, “x” synchronization will occur in ascending order, but the “Reverse” option will switch to descending order).

synchronization properties 

 Be careful: if you want to synchronize several parameters of the same element (i.e. “x” and “y” values for a scrolling region), you must create as many distinct Synchronization components.


Example: Synchronize a Gallery with a vertical Scrolling Area

    1. Insert a Gallery and a Scrolling Area components: configure them as you want.
    2. Insert a Synchronization component and in the Properties window, choose both components.
    3. Define the synchronizable properties for each element: pages for the Gallery and "y" positions for the Scrolling Area (because of its vertical scrolling).

Time to play!


2. Unleashing your imagination

It's that simple: the Synchronization component lets you synchronize together all components you want, wherever they are and whatever their type is. You can also create all kind of effects, here are two examples.

a. Parallax effect

In PandaSuite, a Parallax effect is the synchronization of many scrolling areas with different sizes. Speed is defined by the size of the scrolling areas: the greater the width/height, the faster your speed. (Be careful to consider the size of your complete area and not just the visible zone). Based on the Parallax principle, you apply a slower speed to background elements (smaller zone) than to foreground elements to give some depth.

For more details about this component: Create a scrolling area.


Example: Create a Parallax effect by synchronizing two scrolling area. 

  1. Create a first scrolling area whose visible zone covers my entire state. In the Properties window, define a vertical scrolling and hide the scrollbar.
  2. Change its height to 1067 px and insert all the elements you want. 
  3. Create a second scrolling area the same way, but again increase the height to 1125 px and insert my images inside, the ones that will “live” in my background. 
  4. Insert a Synchronization componnet : in the Properties window, select the two scrolling areas and choose an y positions synchronization for both elements.


 Tip: for a striking Parallax effect, it's best to synchronize three scrolling areas. In this case, for optimal results, we recommend you apply a +60 pixel increase to the height of the second area (the one in the middle) and a +120 pixel increase to the height of the third area (the one in front).


b. Managing your media with tablet moves

Synchronization lets you have fun with sensors (motion, shake, blow, compass). In this example, we manage a Video Player with an horizontal move.


Example: Manage a video with horizontal tilt. 

  1. Insert the Video Play component and add the video you want.
  2. In the Properties window, change speed min and max to make it more visible, for example 1 and 3. Make sure there is an automatic play.
  3. Insert the Motion Sensor component and choose only the horizontal tilt.
  4. Insert the Synchronization compoentn: in the Properties window, select the Video Player and Motion Sensor components. For the player, choose speed; for the sensor, choose the horizontal tilt.

Do you like it?

Was this article helpful?
1 out of 2 found this helpful

Create today your interactive content

Easy-to-use ∗ Free ∗ No installation