Synchronisation

Voici la pépite du studio de création : la synchronisation ! En synchronisant n'importe quel composant avec un composant de votre choix, vous réalisez une palette infinie d'effets interactifs.

Synchroniser deux composants

Une synchronisation se définit sous la forme d’un groupe. Pour chaque composant, vous choisissez la propriété à synchroniser avec les autres composants : pages, valeurs en "x", valeurs en "y", marqueurs, valeurs de zoom… Chaque type de composant a ses propriétés. 

Sélectionner les composants

Cliquez sur Composants et insérez le composant Synchronisation. Il apparaît uniquement dans la liste des Objets, il n'est pas présent visuellement dans votre écran.

Ouvrez la fenêtre Propriétés. Cliquez sur + AJOUTER COMPOSANT : vous devez choisir au moins deux composants pour créer votre groupe de synchronisation. 

La liste vous indique les composants accessibles à proximité. En cliquant sur  Sélection avancée, vous pouvez rechercher n'importe quel composant de votre projet. Un mode bleu vous accompagne pour sélectionner ce composant. 

ajouter les composants à synchorniser Choisir les propriétés synchronisables

Une fois que vous avez sélectionné les composants, indiquez la propriété synchronisable. Pour cela, cliquez sur chaque composant dans la liste et sélectionnez la propriété à synchroniser. Si vous ne sélectionnez aucune propriété, votre synchronisation n'est pas activée.

Le bouton  INVERSÉ 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 INVERSÉ va l’exécuter du plus grand au plus petit nombre).

ajouter les composants à synchorniser

Attention : si vous souhaitez synchroniser plusieurs propriétés d’un même composant (par exemple, les positions en “x” et en “y” d’une zone de défilement), vous devez créer autant de composants Synchronisation distincts.

Exemples de synchronisation 

Effet Parallaxe

L'effet Parallaxe est un classique du web design : il consiste au déplacement de plusieurs éléments d'une même page sur des couches et à des vitesses différentes, ce qui lui donne un effet de profondeur. 

Pour réaliser un effet Parallaxe, synchronisez plusieurs zones de défilement de taille différente. Chaque zone comprend les éléments qui se déplacent à la même vitesse. La vitesse est définie par la taille de la zone de défilement : plus elle est grande, plus la vitesse est élevée. Dans le cadre d'un effet Parallaxe, les éléments en arrière-plan se déplacent à une vitesse moins grande que les éléments en avant.

Prenons l'exemple d'un effet Parallaxe pour une app iPad.

  1. Insérez un composant Zone de défilement et étirez-le sur l'ensemble de l'écran
  2. Dans la fenêtre Propriétés, cliquez sur le défilement vertical et cachez la barre de défilement.
  3. Modifiez la hauteur du contenu (1067 px par exemple) et insérez dans votre zone les éléments du premier plan
  4. Créez une deuxième zone de défilement de la même manière : cette fois-ci, définissez une hauteur plus grande  (1125 px par exemple) et insérez vos éléments d'arrière-plan à l'intérieur. Placez cette zone derrière la première.
  5. Insérez un composant Synchronisation : dans la fenêtre Propriétés, sélectionnez les deux zones de défilement et synchronisez les positions en "y".

Astuce : avec trois zones de défilement, votre effet Parallaxe sera encore plus visuel. Pour 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).

 

Synchroniser la vitesse d'une vidéo avec l'accéléromètre

La synchronisation vous permet également de jouer avec les capteurs (mouvement, boussole, secousse, souffle). Dans notre cas, nous allons synchroniser un composant Lecteur Vidéo par une inclinaison horizontale.

  1. Insérez le composant Lecteur Vidéo et ajoutez la vidéo de votre choix.
  2. 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). 
  3. Insérez le capteur de Mouvement et activez uniquement l’inclinaison horizontale. 
  4. 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 avez encore besoin d'aide ? Contactez-nous Contactez-nous