Création d’un projet réactif

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

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.

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

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.

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

create-responsive-projects.cptx

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. 

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

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

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.

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.

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

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

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

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

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.

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

create-responsive-projects-with-fluid.cptx

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

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

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.

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

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.

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

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.

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

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.

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.

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

create-responsive-projects.cptx

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

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.

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é.

Cliquez sur Enregistrer.

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

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.

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.

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.

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.

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

create-responsive-projects.cptx

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

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é :

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

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.

Parmi les choix, sélectionnez Faux.

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

non-responsive-project.cptx

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.

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 :

Cliquez sur Afficher les éléments non pris en charge.

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

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.

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.

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.

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

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.