- Maintenant disponible : mise à jour d’Adobe Captivate version 2019 compatible avec Mac OS Catalina. Obtenez la mise à jour maintenant !
- Le panneau Actifs ne se charge pas dans Adobe Captivate (version 2019) ? Lire la suite pour trouver une solution.
Dernière mise à jour le
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 :
-
Dans le menu principal, cliquez sur Interactions > Bouton. Vous observez qu’un bouton est inséré sur la diapositive.
-
Le bouton étant inséré, vous pouvez modifier ses propriétés dans le panneau Inspecteur des propriétés.
Vous pouvez changer le style du bouton (transparent ou image) et modifier la police de bouton.
-
Pour ajouter une action ou une interaction au bouton, sélectionnez le bouton, puis cliquez sur l’onglet Actions, comme indiqué ci-dessous :
-
Afficher si nécessaire les légendes Succès, Échec et Conseil.
- Succès : sélectionnez cette case à cocher pour afficher une légende lorsque l’utilisateur clique sur le bouton.
- Échec : sélectionnez cette case à cocher pour afficher une légende lorsque l’utilisateur clique en dehors du bouton.
- Conseil : sélectionnez cette case à cocher pour 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.
-
Prévisualisez et/ou publiez le projet.
Par exemple , 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.
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.
-
Ouvrez la diapositive à laquelle vous souhaitez ajouter un bouton.
-
Dans le menu principal, cliquez sur Formes > puis sélectionnez n’importe quelle Forme intelligente.
-
Sélectionnez le bouton et modifiez ses propriétés dans le panneau Inspecteur des propriétés.
-
Cochez la case Utiliser en tant que bouton et définissez l’action lorsque l’utilisateur clique sur le bouton.
-
Prévisualisez et/ou publiez le projet.
Ajout d’une image en tant que bouton
Image en tant que bouton
Dans les projets de formation en ligne, il se peut que vous, en tant que développeur de formations en ligne, souhaitiez importer une image pour l’utiliser comme bouton. Dans les versions précédentes de Captivate, l’ajout d’une image en tant que bouton nécessitait plusieurs étapes. Vous deviez importer une image, y ajouter une forme intelligente, modifier l’opacité, puis utiliser la forme intelligente en tant que bouton. Il s’agissait davantage d’une solution de contournement que d’un processus précis.
Dans la mise à jour 2 de Captivate (2019 release), vous pouvez ajouter une image en tant que bouton et ajouter de l’interactivité au bouton, ce que propose déjà Captivate. Vous pouvez utiliser l’objet comme un bouton pour déclencher n’importe quelle action et attribuer des états.
En plus d’améliorer votre productivité, ce processus permet également de créer des boutons plus facilement.
Vous pouvez utiliser à la fois des fichiers jpg/bmp et des images vectorielles comme boutons. Les formats de fichiers pris en charge pour les fichiers image sont les suivants :
· Jpeg, jpg
· Gif
· Png
· Bmp
· Ico
· Emf
· Wmf
· Pot, potx, pict
Pour convertir une image et l’utiliser comme bouton,
-
Ouvrez un projet dans Captivate.
-
Pour insérer une image, cliquez sur Média > Image, puis sélectionnez une image.
-
Sur la scène, sélectionnez l’image.
-
Dans l’Inspecteur de propriétés, sélectionnez l’option Utiliser en tant que bouton.
-
Dans l’onglet Actions, définissez l’action après avoir cliqué sur le bouton lors de la prévisualisation du projet ou après avoir publié le projet.
Préparer la scène
-
Créez un projet réactif.
-
Dans la barre d’outils du projet, cliquez sur Fluid Box, puis sur deux boîtes Fluid Box horizontales.
Boîtes Fluid Box -
Dans la boîte Fluid Box de droite, ajoutez l’image conclusion_img_bottom.png.
Insérer une image -
Ajoutez Dave et Angie à la boîte Fluid Box de gauche.
Dave et Angie -
Dans la boîte Fluid Box de droite, ajoutez une forme intelligente nommée Image en tant que bouton de démonstration.
Insérer une forme intelligente -
Insérez des bulles pour Dave et Angie. Déverrouillez également les deux objets depuis la boîte Fluid Box.
Insérer des bulles
Attribuer des actions aux objets
Une fois la scène établie, les étapes suivantes consistent à créer une variable, des actions avancées et à attribuer des boutons d’action aux actions avancées.
-
Créez une variable _toggle. L’état initial de cette variable est 0. Lorsque vous cliquez sur un bouton, l’état de la variable devient 1. Pour plus d’informations, voir Variables dans Captivate.
Créer une variable -
Créez les actions avancées.
-
La première action avancée masque les deux bulles lors du lancement du projet. Nommez l’action hide_bubbles.
Action Masquer la bulle Dans l’Inspecteur des propriétés, dans l’onglet Actions, choisissez l’action hide_bubbles.
Choisir une action -
Lorsqu’elle est mise en œuvre, la deuxième action avancée, toggle_Dave, dévoile la bulle de Dave, lorsque vous cliquez sur Dave. La valeur de la variable _toggle passe à 1 lorsque vous cliquez sur Dave. Après la disparition de la bulle, la valeur de _toggle passe à 0.
-
Lorsqu’elle est mise en œuvre, la troisième action avancée, toggle_Angie, dévoile la bulle d’Angie, lorsque vous cliquez sur Angie. La valeur de la variable _toggle passe à 1 lorsque vous cliquez sur Angie. Après la disparition de la bulle, la valeur de _toggle passe à 0.
Toggle Angie
-
-
Convertissez Dave et Angie en boutons. Sélectionnez l’image puis, dans l’Inspecteur des propriétés, cochez la case Utiliser en tant que bouton.
Utiliser en tant que bouton -
Attribuez Dave et Angie à leur action avancée correspondante.
-
Une fois votre projet créé, vous devez le mettre à disposition de vos utilisateurs. Pour ce faire, vous devez publier votre projet. Adobe Captivate vous permet de publier votre projet dans plusieurs emplacements de sortie :
· votre ordinateur
· iOS ou Android
· Adobe Connect
Créer un SVG en tant que bouton
Dans cette mise à jour, vous pouvez également créer un bouton SVG (Scalable Vector Graphic). Le processus est similaire à celui utilisé pour créer d’autres types de boutons en tant qu’images.
-
Sur la barre d’outils, cliquez sur Médias > SVG et sélectionnez n’importe quel SVG.
-
Dans l’Inspecteur des propriétés, activez l’option Utiliser en tant que bouton.
-
Dans l’onglet Actions, attribuez une action au bouton depuis la liste déroulante En cas de réussite.
Remplir un SVG
Vous pouvez appliquer une couleur de remplissage à l’image. Pour appliquer un remplissage sur l’image,
-
Sélectionnez le SVG sur la scène.
-
Sur la scène, cliquez deux fois sur le SVG.
-
Sur le SVG, choisissez un chemin, puis appliquez une couleur de la palette de couleurs. Dans le SVG, vous pouvez utiliser un chemin pour créer des lignes, des courbes, des arcs de cercle, etc. Un chemin est également une combinaison de plusieurs formes, par exemple des lignes droites ou courbes. Un chemin peut être aussi complexe qu’une série de polylignes. Par conséquent, il est important de savoir à quel chemin appliquer une couleur. Par exemple, les captures d’écran ci-dessous montrent un chemin rempli de couleurs. Dans la première image, le chemin est rempli de rouge. Dans la seconde image, le chemin est rempli de vert.
La limite bleue sur le SVG montre le chemin sélectionné dans le SVG. Un changement de couleur ne modifierait la couleur que du chemin en question.
Ajouter des états au bouton
Pour ajouter des états au bouton,
-
Convertissez une image en bouton.
-
Dans l’Inspecteur de propriété, cliquez sur Vue de l’état.
-
Modifiez les propriétés des états Survol et Déroulant.
-
Quittez la vue État et effectuez la prévisualisation/publication du projet.
Les boutons doivent changer d’état lorsqu’ils sont actionnés. Vous pouvez également ajouter des états visités et des états personnalisés à l’image sous forme de 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
|
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. |
|
|
|
|
|
|
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.
-
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.
-
Ajoutez des légendes adaptées de succès et d’échec.
-
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.
-
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.
-
Prévisualisez et/ou publiez le projet.
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.
-
Créez un projet de quiz avec les boutons, comme indiqué ci-dessous :
-
Ajoutez des états aux boutons suivants :
- Envoyer
- Retour
- Ignorer
- Révision vers l’avant
- Révision vers l’arrière
- Effacer
-
Prévisualisez et/ou publiez le projet.
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.
-
Créez un projet réactif (Ctrl+H) et insérez une diapositive principale (Insérer > Diapositive principale de contenu) dans le projet.
-
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 -
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 -
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.
-
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
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.
-
Dans un projet ouvert, sélectionnez Modifier > Préférences (Windows) ou Adobe Captivate > Préférences (Mac OS).
-
Dans la boîte de dialogue Préférences, sélectionnez Paramètres par défaut dans le menu Global.
-
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.
-
Sélectionnez le bouton de questions que vous voulez modifier.
-
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.
Accéder à votre compte