Comment concevoir un accordéon

Dans cet article, vous apprendrez à créer un accordéon.

Voici comment le construire :

Voir

  • Sélectionnez « Panneau dynamique » dans la section Contenu dynamique et placez-le sur le canevas. Ensuite, allez dans la palette Propriétés et réglez la disposition du panneau sur « Vertical ».acc 1
  • Placez un deuxième « panneau dynamique » sur le canevas ; ensuite, sélectionnez un « rectangle » et, en maintenant la touche Commande (Mac) ou Contrôle (Widnows) enfoncée, placez-le à l’intérieur du nouveau panneau ; redimensionnez et façonnez votre rectangle pour simuler un en-tête et placez une flèche dans le côté gauche.acc 1
  • A l’intérieur de votre panneau, sous l’en-tête, vous pouvez définir les informations/images/éléments que vous souhaitez afficher ; ensuite, cliquez sur le panneau, et les règles de redimensionnement s’afficheront, poussez le bouton vers le haut jusqu’à ce que vous couvriez les informations et que le panneau n’affiche plus que l’en-tête.
  • Maintenez la touche Commande (Mac) ou Contrôle (Windows) enfoncée et faites glisser le deuxième panneau dans le premier. Vous verrez une teinte bleue lorsque vous ferez glisser l’élément à l’intérieur ; cela simulera un élément dans votre accordéon.
  • Répétez l’opération pour créer d’autres options et placez-les les unes à côté des autres à l’intérieur du premier panneau.acc 1

Evénements

Sélectionnez le premier « Rectangle », allez dans la palette Événements et cliquez sur « Ajouter un événement ». 

  1. Dans la boîte de dialogue, cliquez sur « Choose Trigger », survolez la section « Mouse » et sélectionnez « on Toggle ».
  2. Dans « Choisir une action », sélectionnez « Redimensionner l’élément » et assurez-vous que le panneau contenant votre premier élément est sélectionné.acc 1

Pour la valeur, sélectionnez « Fixe » et ajustez la valeur pour la hauteur uniquement ; ici, vous devrez redimensionner en augmentant le nombre pour afficher toutes les informations que vous avez dans votre panneau. Cliquez sur « Ok » pour terminer la création de l’événement.

Allez dans la palette Événements et cliquez sur le « + » pour ajouter un nouvel événement.

  1. Dans la boîte de dialogue, cliquez sur « Choose Trigger », survolez la section « Mouse » et sélectionnez « on Toggle ».
  2. Dans « Choisir une action », sélectionnez « Faire pivoter l’élément » et sélectionnez la flèche.
  3. Pour la valeur, sélectionnez la valeur « Fixe » 180°. Cliquez sur « Ok » pour terminer la création de votre événement.acc 1

Le « rectangle » étant sélectionné, accédez à la palette Événements et cliquez sur « Copier tous les événements ».
Sélectionnez le rectangle suivant (option 2) et collez tous les événements ; modifiez les événements pour rediriger la cible et ajustez la taille et la rotation.
Répétez l’opération avec les « options » restantes.

Simulez votre prototype.