Sommaire

Synchroniser des composants

Voici une pépite du studio de création : la synchronisation !
Son principe est simple : elle vous permet de coordonner entre eux les éléments de votre choix (deux et même plus).

En vidéo (3'30) :

1. Créer une synchronisation

a. Le principe

Une synchronisation se définit sous la forme d’un groupe. Pour chaque élément, vous choisissez le paramètre à synchroniser avec les autres éléments. En fonction du type d’élément, vous avez accès à différents paramètres : pages, valeurs en x, valeurs en y, marqueurs, valeurs de zoom….

b. Choisir les composants

Insérez le composant Synchronisation : vous le retrouvez dans la Liste des Objets, il n'apparaît pas visuellement dans votre écran.

Rendez-vous dans la fenêtre Propriétés. Cliquez sur + AJOUTER COMPOSANTS : choisissez parmi la liste des composants présents dans votre état ou cliquez sur Sélection avancée pour rechercher un composant hors de votre état. Le mode bleu vous accompagne pour choisir ce composant : vous pouvez vous rendre sur un autre écran, dans un avant-plan, un arrière-plan, dans un composant...

Propriétés de la synchronisation

c. Définir les propriétés synchronisables

Une fois que vous avez défini les composants de votre groupe, n'oubliez pas de les sélectionner dans la fenêtre Propriétés et de choisir la propriété à synchroniser. Sinon, votre composant n'est pas synchronisé.

Le bouton INVERSE impacte la propriété sélectionnée en inversant son exécution (par exemple, une synchronisation en “x” s’exécute du plus petit au plus grand nombre, mais l’option « Inverse » va l’exécuter du plus grand au plus petit nombre).

Propriétés synchronisables

Attention : si vous souhaitez synchroniser plusieurs paramètres d’un même élément (par exemple, le “x” et le “y” d’une zone de défilement), vous devez créer autant de composants Synchronisation distincts.

Exemple : Synchroniser les pages d'une galerie et une zone de défilement verticale

- Insérez un composant Galerie et un composant Zone de Défilement : paramétrez-les comme vous voulez. - Insérez un composant Synchronisation et dans la fenêtre Propriétés, sélectionnez les deux composants. - Définissez les paramètres synchronisables pour chacun de ces éléments : les pages pour la Galerie et les positions en "y" pour la Zone de Défilement (car le défilement est vertical. - A vous de tester !

2. Libérez votre imagination

C'est simple : la synchronisation vous permet de synchroniser tous les composants entre eux, où qu'ils se trouvent et quels que soient leur type. Vous pouvez ainsi créer toutes sortes d'effets, nous n'en détaillons ici que deux exemples.

a. Effet Parallaxe

Dans PandaSuite, un effet Parallaxe correspond à la synchronisation de plusieurs zones de défilement de taille différente. La vitesse est définie par la taille des zones de défilement : plus la hauteur/largeur est grande, plus la vitesse est élevée. (Attention il s’agit bien de la hauteur/largeur de la zone entière et non pas de la hauteur de la zone visible). Suivant le principe du Parallax, vous appliquez une vitesse moins grande aux éléments en arrière (zone plus petite) qu’aux éléments en avant pour contribuer à donner une impression de profondeur.

Pour mieux comprendre ce composant : Créer une zone de défilement.

Exemple : Créer un effet Parallaxe à partir de deux zones de défilement vertical.

- Créez une première zone de défilement dont la zone visible couvre l’ensemble de l'écran. Définissez un défilement vertical dans la fenêtre Propriétes et cachez la barre de défilement.
- Modifiez la hauteur du contenu à 1067 px et insérez dans votre zone les éléments de premier plan de votre choix.
- Créez une deuxième zone de défilement de la même manière : cette fois-ci, définissez une hauteur de 1125 px et insérez vos éléments d'arrière-plan dedans.
- Insérez un composant Synchronisation : dans la fenêtre Propriétés, sélectionnez les deux composants Zones de défilement et synchronisez les positions en y dans les deux cas.

Astuce : il est encore mieux de synchroniser trois zones de défilement pour rendre votre effet Parallaxe très visuel. Pour avoir un rendu optimal, nous vous recommandons d'augmenter de +60 pixels la hauteur de votre 2ème zone (celle du milieu) et de +120 pixels votre 3ème zone (celle de devant).

b. Pilotez une vidéo par mouvement de la tablette

La synchronisation vous permet également de vous amuser avec les capteurs (mouvement, boussole, secousse, souffle). Dans notre cas, nous allons piloter un composant Lecteur Vidéo avec un mouvement horizontal.

Exemple : Contrôler une vidéo par inclinaison horizontale de la tablette.

- Insérez le composant Lecteur Vidéo et intégrez la vidéo de votre choix.
- Dans la fenêtre Propriétés, modifiez le min et le max de la vitesse pour que le changement soit visible, par exemple 0 et 3. Assurez-vous que la lecture est automatique (cochée).
- Insérez le Capteur de Mouvement et choisissez uniquement l’inclinaison horizontale.
- Insérez un composant Synchronisation : dans la fenêtre Propriétés, sélectionnez les deux composants Lecteur Vidéo et Capteur de Mouvement. Pour le Lecteur, synchronisez la vitesse ; pour le capteur, synchronisez l'axe horizontal.
- Vous aimez ?