Ajouter des boutons interactifs aux projets Adobe Captivate et ajoutez des états aux boutons.

Les boutons sont l’un des moyens les plus courants d’ajouter un objet standard à vos diapositives Captivate.

Vous pouvez ajouter un niveau d’interactivité supplémentaire à vos projets Adobe Captivate en ajoutant des boutons. Pour ajouter un bouton, utilisez le style de bouton par défaut (un rectangle blanc). Vous pouvez également importer des images de bouton personnalisé. Vous pouvez modifier la taille et l’emplacement des boutons sur une diapositive. Vous définissez l’action résultant du clic de l’utilisateur sur le bouton.

Ajout d’un bouton interactif

Dans Captivate, vous pouvez ajouter des interactions à un bouton pour déclencher n’importe quelle action lorsque vous cliquez sur le bouton.

Pour ajouter un bouton interactif :

  1. Dans le menu principal, cliquez sur Interactions > Bouton. Vous observez qu’un bouton est inséré sur la diapositive.

    Button
  2. Le bouton étant inséré, vous pouvez modifier ses propriétés dans le panneau Inspecteur des propriétés.

    Button properties

    Vous pouvez changer le style du bouton (transparent ou image) et modifier la police de bouton.

  3. Pour ajouter une action ou une interaction au bouton, sélectionnez le bouton, puis cliquez sur l’onglet Actions, comme indiqué ci-dessous :

    Button actions
  4. Afficher si nécessaire les légendes Succès, Échec et Conseil.

    Button sfh
    • Succès : sélectionnez cette case à cocherpour afficher une légende lorsque l’utilisateur clique sur le bouton.
    • Échec : sélectionnez cette case à cocherpour afficher une légende lorsque l’utilisateur cliqueen dehors dubouton.
    • Conseil : sélectionnez cette case à cocherpour spécifier un conseil à afficher pour les utilisateurs. Le conseil est affiché lorsque l’utilisateur place le pointeur de la souris sur le bouton.

    vous pouvez supprimer un bouton à tout moment en le sélectionnant et en appuyant sur la touche Supprimer. Lorsque vous supprimez un bouton, tous les objets associés (tels que les légendes de succès et d’échec) sont également supprimés.

  5. Prévisualisez et/ou publiez le projet.

Parexemple, créez un projet avec un bouton interactif qui, lorsque vous cliquez dessus, masque un objet. Lorsque vous cliquez à nouveau sur le bouton, vous pouvez voir l’objet.

Créez une variable myVar et définissez sa valeur sur zéro. Dans le panneau Actions avancées, pour le bouton Succès, sélectionnez une action conditionnelle à l’aide d’une déclaration si.

L’action vérifie que si la valeur de myVar est nulle, elle masque l’objet et augmente la valeur de myVar à un.

Démonstration : bouton interactif

 

Ajout d’une forme intelligente en tant que bouton

Les formes intelligentes comprennent de nombreuses catégories de formes facilement accessibles, telles que des flèches, des boutons et des formes de base. Vous pouvez insérer et modifier ces formes rapidement et facilement dans les projets Adobe Captivate.

Vous pouvez convertir une forme intelligente en bouton et la rendre interactive.

  1. Ouvrez la diapositive à laquelle vous souhaitez ajouter un bouton.

  2. Dans le menu principal, cliquez sur Formes > puis sélectionnez n’importe quelle Forme intelligente.

  3. Sélectionnez le bouton et modifiez ses propriétés dans le panneau Inspecteur des propriétés.

    Button Smart Shape properties
  4. Cochez la case Utiliser en tant que bouton et définissez l’action lorsque l’utilisateur clique sur le bouton.

    Button Smart Shape Use as Button
  5. Prévisualisez et/ou publiez le projet.

Dans la démonstration ci-dessous, insérez une forme intelligente, convertissez-la en bouton, puis affectez des propriétés au bouton.

Créez ensuite une action avancée comme une action de succès pour le déclenchement du bouton. Dans l’action avancée, vérifiez si la variable que vous aviez créée est égale au nom « John ». En fonction de la condition, l’action accepte votre saisie et imprime le nom dans la deuxième diapositive.

Démonstration : forme intelligente en tant que bouton

 

Référence des propriétés du bouton

Pour afficher les propriétés d’un bouton, sélectionnez-le sur la diapositive. L’inspecteur des propriétés affiche les propriétés du bouton. Lorsque vous modifiez les propriétés, les modifications sont instantanément appliquées à l’instance sélectionnée du bouton.

Propriétés du bouton interactif

Interactive button properties
ID Description
1 Sélectionnez l’un des éléments suivants : Texte, Transparent ou Image.
2 Étiquette du bouton.
3 Modifiez les propriétés de la police de l’étiquette du bouton.
4 Modifiez les effets de l’étiquette du bouton.
5 Modifiez les propriétés d’ombre et de reflet du bouton.
6 Choisissez d’appliquer les propriétés à tous les objets du même type.

Forme intelligente en tant que propriétés de bouton

Propriété Description de l’étiquette

1. Modifiez la forme intelligente.

2. Modifiez la couleur d’arrière-plan et l’opacité de la forme intelligente.

3. Modifiez les propriétés de contour du bouton.

4. Modifiez les propriétés de police de l’étiquette du bouton.

1. Insérez un symbole, une variable définie par l’utilisateur ou un hyperlien.

2. Modifiez les propriétés de la couleur d’étiquette du bouton.

3. Modifiez les marges du bouton.

4. Modifiez les propriétés de l’ombre du bouton.

  1. Sélectionnez l’action à exécuter lorsque vous cliquez sur le bouton.
  2. Affectez un raccourci au bouton.
  3. Affichez la légende Réussite/Échec/Conseil au moment de cliquer sur le bouton.
  4. Sélectionnez le type de curseur et activez/désactivez le son du clic.
  1. Sélectionnez un fichier/clip audio qui est lu lorsque vous cliquez sur le bouton.
  2. Modifiez la taille et la position du bouton.
  3. Modifiez la position d’angle du bouton. Conserve le rapport hauteur/largeur du bouton lors d’un redimensionnement.

Utilisation des boutons interactifs dans un projet d’interaction glisser-déposer

Les interactions glisser-déposer offrent un moyen intéressant et attrayant d’évaluer les connaissances de vos utilisateurs. Cette interaction permet aux utilisateurs de répondre à des questions en faisant glisser et en déposant des objets sur des zones ou objets désignés.

Une interaction glisser-déposer implique une source de glissement et une cible de dépôt. Les utilisateurs font glisser les sources et les déposent sur les cibles de dépôt.

  1. Créez un projet d’interaction glisser-déposer spécifiant les sources et les cibles de l’action de glisser-déposer et les mappages, comme indiqué ci-dessous.

    Pour plus d’informations sur la création d’une interaction glisser-déposer, voir Interactions glisser-déposer dans Adobe Captivate.

    Drag and Drop design
  2. Ajoutez des légendes adaptées de succès et d’échec.

  3. Pour ajouter les boutons Annuler et Réinitialiser au projet, accédez au panneau Glisser-déposer et activez les options Annuler et Réinitialiser.

    DnD Undo Reset 1
  4. Pour ajouter des états à un bouton, sélectionnez-le, cliquez sur l’Inspecteur des propriétés, puis ajoutez les propriétés du bouton pour les états Survol et Déroulant.

    DnD button states
  5. Prévisualisez et/ou publiez le projet.

Démonstration : boutons interactifs dans un projet glisser-déposer

 

Utilisation des boutons interactifs dans un projet de quiz

Dans Captivate, vous pouvez ajouter des états aux boutons de quiz. Vous pouvez ajouter un état de survol et/ou un état déroulant aux boutons.

  1. Créez un projet de quiz avec les boutons, comme indiqué ci-dessous :

    Quiz buttons
  2. Ajoutez des états aux boutons suivants :

    • Envoyer
    • Retour
    • Ignorer
    • Révision vers l’avant
    • Révision vers l’arrière
    • Effacer
  3. Prévisualisez et/ou publiez le projet.

Démonstration : modifications d’état de bouton dans un projet de quiz

 

Utilisation des boutons interactifs dans une diapositive principale en mode réactif

Vous pouvez ajouter des états aux boutons sur une diapositive principale en mode réactif et utiliser la diapositive principale dans votre projet.

  1. Créez un projet réactif (Ctrl+H) et insérez une diapositive principale (Insérer > Diapositive principale de contenu) dans le projet.

  2. Ajoutez le titre, le sous-titre et les espaces réservés de contenu. Ajoutez trois formes intelligentes dans le projet et convertissez-les en boutons.

    Mise en page réactive de diapositive principale
    Mise en page réactive de diapositive principale

  3. Ajoutez des états aux boutons. Sélectionnez un bouton, puis dans le panneau Inspecteur des propriétés, ajoutez les propriétés du bouton pour les états Survol et Déroulant.

    États de bouton
    États de bouton

  4. Quittez la vue de la diapositive principale. Insérez une diapositive de contenu et sélectionnez la diapositive principale que vous avez créée dans la liste des diapositives principales. Insérez un titre, un sous-titre et un contenu pour la diapositive.

    Prévisualisez/publiez le projet.

  5. Pour insérer des boîtes Fluid Box dans le projet, cliquez sur Suggérer des boîtes Fluid Box dans l’Inspecteur des propriétés. La boîte Fluid Box crée automatiquement des conteneurs selon la mise en page des objets.

    Alignez les objets verticalement ou horizontalement.

    Pour plus d’informations sur les boîtes Fluid Box, voir Boîtes Fluid Box dans Captivate.

    Mise en page de la boîte Fluid Box de la diapositive principale
    Mise en page de la boîte Fluid Box de la diapositive principale

Redimensionnement automatique de boutons

Vous pouvez configurer Adobe Captivate pour qu’il redimensionne automatiquement un bouton ou une légende en fonction de la quantité de texte contenue dans le bouton. Si vous modifiez le texte, le bouton change de taille pour s’ajuster à la nouvelle quantité de texte.

  1. Dans un projet ouvert, sélectionnez Modifier > Préférences (Windows) ou Adobe Captivate > Préférences (Mac OS).

  2. Dans la boîte de dialogue Préférences, sélectionnez Paramètres par défaut dans le menu Global.

  3. Sélectionnez Taille automatique des boutons dans le panneau Général sur la droite.

Remarque :

il est recommandé d’effectuer le redimensionnement des boutons avant celui du projet. Le redimensionnement du projet n’entraîne pas automatiquement le redimensionnement des boutons.

Modification de boutons des diapositives de questions

Vous pouvez modifier certaines des propriétés des boutons sur les diapositives de questions. Les boutons standard sont les boutons d’effacement, de retour, d’envoi et Ignorer.

  1. Sélectionnez le bouton de questions que vous voulez modifier.

  2. Dans la zone Options du panneau Propriétés de quiz, définissez les valeurs des diverses options.

Remarque :

effectuez le redimensionnement des boutons avant celui du projet. Le redimensionnement du projet n’entraîne pas automatiquement le redimensionnement des boutons.

Télécharger des exemples de projets

Pour en savoir plus sur Captivate et sur la manière de créer un contenu d’apprentissage attrayant, téléchargez les projets suivants :

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne