Créez des projets réactifs dans Adobe Captivate qui sont parfaitement fluides sur tous les appareils et toutes les tailles d’écrans. Utilisez les projets réactifs pour créer une expérience de formation captivante pour vos élèves et transmettez des connaissances de manière intéressante et interactive. Ce document vous apprend comment créer et personnaliser des projets réactifs dans Adobe captivate.

Ressources et exemples

Ce document présente des procédures qui nécessitent d’utiliser des ressources, comme des images et des exemples de fichiers de projet Adobe Captivate. Vous pouvez choisir d’utiliser vos propres ressources et exemples. Cependant, il est recommandé de télécharger et d’extraire le fichier .zip suivant sur votre ordinateur :

Création d’un projet réactif

Commençons par créer un projet réactif dans Adobe Captivate.

  1. Dans l’onglet Nouveau de l’écran de bienvenue d’Adobe Captivate, choisissez Projet réactif et cliquez sur Créer.

    welcome-screen-responsive

    Adobe Captivate crée un projet réactif avec une seule diapositive.

    Dans un projet réactif dans Adobe Captivate, la barre d’aperçu au-dessus de la diapositive vous propose des options pour visualiser rapidement le projet sur différentes tailles d’écran ou différents appareils.

    responsive-slide
  2. Pour prévisualiser le projet sur différents appareils, sélectionnez l’option Aperçu de votre choix dans la liste déroulante.

  3. Le curseur de prévisualisation sur le côté droit de la barre Aperçu vous permet de redimensionner la diapositive actuelle et de prévisualiser le contenu de manière dynamique.

    Lorsque vous déplacez le curseur vers la gauche ou la droite, le contenu de la diapositive s’ajuste pour s’adapter à l’écran.

    responsive-slide-smaller

 

Pour en savoir plus à ce sujet, consultez Conception de projets réactifs avec Adobe Captivate.

Ajout de boîtes Fluid Box aux diapositives

Vous pouvez aussi créer des projets réactifs Adobe Captivate à l’aide de la mise en page de boîtes Fluid Box. Cela permet de disposer des objets sur une diapositive de sorte que ces objets aient un comportement prévisible lorsque la diapositive s’adapte à différentes tailles d’écrans et différents appareils. Une boîte Fluid Box est un modèle de mise en page simple à utiliser pour les concepteurs de formation en ligne. Vous pouvez placer les objets enfant dans n’importe quelle direction et vous pouvez les adapter à la taille de l’appareil.

Un conteneur Fluid Box agrandit les objets pour remplirl’espace disponibleou réduit les objets pour éviter le débordement. Les éléments dans une boîte Fluid Box ne tiennent pas compte de la direction. Les objets peuvent s’adapter à l’espace disponible.

Ajoutons maintenant une diapositive vide à notre projet, puis utilisons des boîtes Fluid Box pour faciliter la réactivité de la diapositive. La diapositive de fin de cette procédure est la suivante :

responsive-slide-withboxes

La diapositive ci-dessus utilise deux boîtes Fluid Box horizontales.

  1. Dans le dossier des fichiers téléchargés, accédez au sous-dossier des échantillons et ouvrez :

    create-responsive-projects.cptx

    Remarque :

    Le téléchargement du fichier de projet fourni avec ce didacticiel n’est pas obligatoire. Vous pouvez toujours suivre les étapes de cette procédure. Cependant, assurez-vous que vous créez un projet réactif dans Adobe Captivate.

  2. Avec la première diapositive sélectionnée dans la Bande de film, dans la barre d’outils, cliquez sur Diapositives, puis choisissez Diapositive vide.

    Ajoutons d’abord deux boîtes Fluid Box horizontales à la diapositive actuelle. 

  3. Dans la barre d’outils, cliquez sur Fluid Box et choisissez Horizontale.

  4. Dans le sous-menu, choisissez la deuxième boîte pour ajouter deux boîtes Fluid Box horizontales.

    horizontal_fluidboxsubmenu

    Lorsque vous placez des boîtes Fluid Box sur une diapositive, les boîtes sont espacées de manière uniforme sur la diapositive. Le curseur vous permet de redimensionner la boîte.

    responsive-slide-fluidbox-horizontal
  5. Déplacez le curseur vers la gauche pour redimensionner les boîtes horizontales.

    Ensuite, placez deux boîtes Fluid Box verticales dans le cadre horizontal de droite.

  6. Pour placer l’objet dans la boîte horizontale de droite, sélectionnez la boîte.

  7. Dans la barre d’outils, cliquez sur Fluid Box et choisissez Verticale.

  8. Dans le sous-menu, choisissez la deuxième boîte pour ajouter deux boîtes Fluid Box verticales.

    vertical_fluid_boxsubmenu
  9. Déplacez le curseur pour redimensionner les boîtes verticales.

  10. Testez la réactivité de cette diapositive en déplaçant le Curseur de prévisualisation vers la gauche et vers la droite.

    Vous pouvez aussi choisir les différents appareils dans la liste déroulante Afficher l’aperçu dans.

Ajout d’objets à des boîtes Fluid Box

Dans la section précédente, vous avez appris à ajouter des boîtes Fluid Box horizontales et verticales à une diapositive.

Ajoutons maintenant des objets aux boîtes Fluid Box sur la diapositive.

Remarque :

Vous ne pouvez pas ajouter des objets de survol aux boîtes Fluid Box car ces objets ne fonctionnent pas sur les appareils mobiles.

La diapositive de fin de cette procédure est la suivante :

lunasphere-studios-team
  1. Dans le dossier des fichiers téléchargés, accédez au sous-dossier des échantillons et ouvrez :

    create-responsive-projects-with-fluid.cptx

    Remarque :

    Le téléchargement du fichier de projet fourni avec ce didacticiel n’est pas obligatoire. Vous pouvez toujours suivre les étapes de cette procédure. Cependant, il est recommandé de créer une diapositive similaire à la diapositive affichée au début de la section Ajout de boîtesFluidBox aux diapositives.

  2. Accédez à la diapositive qui contient les boîtes Fluid Box horizontales et verticales.

  3. Pour ajouter une légende dans la boîte horizontale gauche, sélectionnez la boîte sur la diapositive.

  4. Dans la barre d’outils, cliquez sur Texte et choisissez Légende.

    Entrez le texte suivant dans la zone de légende :

    LUNARSPHERE STUDIOS

    Vous faire apporter des modifications de format au texte à l’aide de l’Inspecteur des propriétés. Pour afficher l’Inspecteur des propriétés, cliquez sur Propriétés dans le coin droit de la barre d’outils.

  5. Pour ajouter une légende dans la boîte horizontale verticale inférieure droite, sélectionnez la boîte sur la diapositive.

  6. Dans la barre d’outils,cliquez sur Texte etet choisissez Légende.

    Copiez et collez le texte suivant dans la légende :

    Madison et Robert font partie de l’équipe de formation de Lunarsphere Studios. Tout comme vous, chaque jour, ils sont confrontés à de nouveaux défis et opportunités qui mettent leurs compétences à l’épreuve et les obligent à se dépasser. Aujourd’hui, vous allez découvrir, comme Madison et Robert, comment utiliser Adobe Captivate pour la première fois.

  7. Pour ajouter une image dans la boîte verticale supérieure droite, sélectionnez la boîte sur la diapositive.

  8. Cliquez sur Média dans la barre d’outils, puis choisissez Image.

    Une boîte de dialogue s’affiche pour sélectionner le fichier image sur votre ordinateur.

  9. Dans le dossier des fichiers téléchargés, accédez au sous-dossier Ressources.

  10. Sélectionnez le fichier lunarsphere-studios-team.png et ouvrez-le.

    L’image est placée dans la boîte Fluid Box verticale en haut à droite.

    Observez comment l’image évolue pour s’adapter à la boîte Fluid Box où elle est placée.

  11. Testez la réactivité de cette diapositive en déplaçant le Curseur de prévisualisation vers la gauche et vers la droite.

    Vous pouvez aussi choisir les différents appareils dans la liste déroulante Afficher l’aperçu dans.

Maintenant que nous avons une diapositive avec du contenu, nous allonsprévisualisercomment ces objets apparaissent sur les différents appareils.

Dans la barre d’outils, cliquez sur Aperçu etchoisissez Projet.

 

Pour en savoir plus sur les boîtes Fluid Box, reportez-vous à Fluid Box dans Adobe Captivate.

Ajout de simulations réactives aux projets

Vous pouvez capturer les étapes de simulation d’un projet réactif dans les modes suivants :

  • Démonstration
  • Évaluation
  • Formation

Pour enregistrer les étapes pour créer une présentation PowerPoint, insérez une simulation logicielle courte en mode Démonstration.

  1. Dans le dossier des fichiers téléchargés, accédez au sous-dossier des échantillons et ouvrez :

    create-responsive-projects.cptx

    Remarque :

    Le téléchargement du fichier de projet fourni avec ce didacticiel n’est pas obligatoire. Vous pouvez toujours suivre les étapes de cette procédure.  Cependant, assurez-vous que vous créez un projet réactif dans Adobe Captivate.

  2. Dans la barre d’outils, cliquez sur Diapositives et choisissez Simulation logicielle.

  3. Dans la boîte de dialogue Enregistrer des diapositives supplémentaires, choisissez la diapositive après laquelle vous voulez insérer la simulation logicielle et cliquez sur OK.

  4. La boîte de dialogue vous propose des options pour enregistrer la démonstration. Choisissez les options suivantes :

    • Dans la liste déroulante, sélectionnez PowerPoint.
    • Dans la liste déroulante Mode, assurez-vous que le mode Démonstration est sélectionné.
    software_simulationinsertstartup
  5. Cliquez sur Enregistrer.

    Une fois que le compteur est à 1, l’application PowerPoint passe au premier plan.

  6. Effectuez les étapes suivantes dans PowerPoint :

    1. Sélectionnez le menu Fichier.
    2. Choisissez Nouveau.
    3. Sélectionnez un thème.
    4. Dans la boîte de dialogue, cliquez sur Créer.
  7. Pour terminer la simulation :

    • Sous Windows, appuyez sur la touche Fin de votre clavier.
    • Sous MAC, cliquez sur l’icône Adobe Captivate dans la barre supérieure.

    Une fois que vous avez terminé la simulation, Adobe Captivate revient au premier plan.

    Les diapositives de démonstration sont insérées dans votre projet.

  8. Les diapositives enregistrées sont ajoutées au projet Captivate. Notez qu’un rectangle bleu apparaît sur chacune desdiapositives de simulation. Le rectangle bleu est la zone d’intérêt principal de la simulation. Il est uniquement visible dans la zone de modification,et disparaît quand vous prévisualisez ou publiez le projet. Notez que la taille de ce rectangle correspond à la taille d’appareil minimale prise en charge pour des projets réactifs Captivate.

    responsive-simulation-slide

    Chaque diapositive de la simulation contient aussi un cadre de sélection bleu. Cette zone de la diapositive s’affiche pour l’appareil de taille minimale. Vous pouvez déplacer ce cadre dans la diapositive si vous voulez afficher une zone différente de la sélection faite par Adobe Captivate, par défaut.

Pour plus d’informations sur les simulations logicielles dans Adobe Captivate, consultez Création de simulations logicielles.

Nous allons maintenant afficher un aperçu de lasimulation réactive.

Dans la barre d’outils, cliquez sur Aperçu etchoisissez Projet.

Ajout des quiz réactifs aux projets

Quand vous ajoutez une diapositive de quiz à un projet réactif, Adobe Captivate ajoute des boîtes Fluid Box pour garantir la réactivité du contenusurla diapositive.

Pour tester ce comportement, créons un quiz simple avec une seule question Vrai/Faux.

  1. Dans le dossier des fichiers téléchargés, accédez au sous-dossier des échantillons et ouvrez :

    create-responsive-projects.cptx

    Remarque :

    Le téléchargement du fichier de projet fourni avec ce didacticiel n’est pas obligatoire. Vous pouvez toujours suivre les étapes de cette procédure. Cependant, assurez-vous que vous créez un projet réactif dans Adobe Captivate.

  2. Dans la barre d’outils, cliquez sur Diapositives et choisissez Diapositive de question.

  3. Dans la boîte de dialogue Insérer des questions , sélectionnez la case à cocher Vrai/Fauxetcliquez sur OK.

    Une diapositive de question est insérée après le titre de la diapositive Résumé.

    De plus, après la diapositive de question, Adobe Captivate insère une diapositive Résultats du quiz.

    Lorsque vous ajoutez une diapositive de question à un projet réactif, Adobe Captivate place tous les objets de la question dans des boîtes Fluid Box pour garantir la réactivité :

    responsive-question-slide

    Notez aussi les options du curseur de prévisualisation qui vous permettent de vérifier rapidement la réactivité de la diapositive.

  4. Dans la diapositive de question, saisissez la question suivante dans la zone de texte (en remplaçant le texte de l’espace réservé) :

    Vous ne pouvez pas créer des projets réactifs avec Adobe Captivate.

  5. Parmi les choix, sélectionnez Faux.

Pour plus d’informations sur les quiz dans Adobe Captivate, consultez Création de quiz.

Nous allons prévisualiser et essayer le quiz.

Dans la barre d’outils, cliquez sur Aperçu, puis choisissez Projet.

Conversion de projets non réactifs en projets réactifs

Si votre projet Adobe Captivate n’est pas réactif, Adobe Captivate vous propose une méthode simple pour le convertir en projet réactif.

Prenons un projet non réactif et convertissons-le en projet réactif.

Avant de convertir le projet, nous allons visualiser l’apparence de ce projet.

Dans la barre d’outils, ouvrez l’Aperçu, puis choisissez Projet.

  1. Dans le dossier des fichiers téléchargés, accédez au sous-dossier des échantillons et ouvrez :

    non-responsive-project.cptx

    Remarque :

    Le téléchargement du fichier de projet fourni avec ce didacticiel n’est pas obligatoire. Vous pouvez toujours suivre les étapes de cette procédure. Cependant, assurez-vous que vous créez un projet réactif dans Adobe Captivate.

    Notez que le curseur de prévisualisation qui s’affiche au-dessus des diapositives dans un projet réactif n’apparaît pas au-dessus des diapositives d’un projet non réactif. Il s’agit donc d’une indication visuelle utile pour vérifier si un projet est réactif ou non.

  2. Dans le menu Fichier, choisissez Enregistrer en tant que projet réactif.

    Dans la mesure où tous les objets Adobe Captivate ne sont pas pris en charge dans les projets réactifs, la boîte de dialogue suivante s’affiche :

    responsive-project-unsupported-objectes
  3. Cliquez sur Afficher les éléments non pris en charge.

    responsive-project-unsupported-objects-list

    Le panneau Dispositif de suivi HTML5 affiche la liste des objets et des diapositives non pris en charge.

  4. Cliquez pour ouvrir un objet non pris en charge dans le panneau.

    Vous êtes redirigé vers la diapositive contenant l’objet. De plus, l’objet est sélectionné sur la diapositive.

    Si, par exemple, un utilisateur visualise le résultat sur un appareil mobile, votre projet ne doit pas contenir d’objets de survol.

  5. Supprimez la légende de survol sélectionnée de la diapositive.

    Notez que l’objet n’est actuellement pas affiché dans le panneau Dispositif de suivi HTML5.

  6. Une fois que vous avez supprimé les objets non pris en charge, dans le menu Fichier, sélectionnez Enregistrer en tant que projet réactif.

  7. Dans la boîte de dialogue, cliquez sur Enregistrer.

  8. Dans la boîte de dialogue Enregistrer sous, choisissez un emplacement de fichier sur votre ordinateur et le nom du projet réactif converti.

    Notez que le Curseur de prévisualisation est maintenant affiché au-dessus des diapositives dans le projet converti.

Une fois le projet converti, nous allons prévisualiser l’apparence du projet réactif converti.

Dans la barre d’outils, cliquez sur Aperçu, puis choisissez Projet.

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