Conception de projets réactifs avec Adobe Captivate

Rechercher

Dernière mise à jour le

Conception de projets réactifs

Concevoir un projet réactif avec Adobe Captivate vous permet de prendre une longueur d’avance sur vos concurrents. Il vous suffit de concevoir votre contenu une seule fois et il s’adaptera à l’écran de vos tablettes et smartphones. Commencez à partir d’un modèle vierge, effectuez un enregistrement depuis un périphérique iOS ou importez un scénarimage avec Adobe Captivate Draft. Proposez une expérience d’apprentissage s’adaptant au système de l’apprenant et spécifique à l’emplacement, sans besoin de programmation.

Créez une expérience d’apprentissage captivante pour vos élèves et rendez la transmission des savoirs intéressante et interactive.

Boîtes Fluid Box dans Adobe Captivate

Qu’est-ce qu’une boîte Fluid Box

Une boîte Fluid Box est un mode de mise en page qui fournit la disposition des objets sur une diapositive de sorte que les objets se comportent de manière prévisible lorsque la diapositive s’adapte aux différentes tailles d’écrans et de périphériques. 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 enfants dans n’importe quelle direction et profiter de la flexibilité pour les adapter sur l’espace d’affichage.

Un conteneur Fluid Box agrandit les objets pour remplir l’espace disponible ou 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.

Utilisation de la boîte Fluid Box dans Captivate

Dans Captivate, vous pouvez insérer une mise en page Fluid Box verticalement ou horizontalement dans un projet réactif. En fonction de la taille de l’écran, les objets dans un conteneur Fluid Box sont agrandis ou réduits sans compromettre la largeur de l’écran.

Vous pouvez ajouter la barre de boutons aux boîtes Fluid Box.

Mise en page Fluid Box horizontale
Mise en page Fluid Box verticale

Mise en page Fluid Box horizontale

Dans cet exemple, vous créez une mise en page avec une boîte Fluid Box avec quatre boules de repérage. L’affichage est modifié en conséquence lorsque vous affichez l’aperçu du projet dans un autre périphérique.

Créez une mise en page horizontale unique. Cette mise en page devient une boîte Fluid Box parent.
Placez les boules de repérage dans la boîte Fluid Box une par une à partir de la bibliothèque.
Dans le panneau Inspecteur des propriétés, les propriétés Fluid Box calculé suivantes sont activées :
1. Statique : si vous cochez cette case , les objets de la boîte Fluid Box se chevauchent et peuvent être déplacés n’importe où à l’intérieur de la boîte.
  
  Facultatif : si vous cochez cette case , un objet disparaît dès que sa largeur est choisie. Facultatif fonctionne uniquement avec un type de renvoi à la ligne, Réduire en une ligne ou Réduire en une colonne.
2. Flux : indique la direction dans laquelle les objets sont placés dans une boîte Fluid Box. Dans un flux horizontal, les objets sont placés horizontalement. De même, dans un flux vertical, les objets sont placés verticalement.
3. Marge intérieure : la marge intérieure permet d’ajouter de l’espace sur tous les côtés d’un objet. Pour ajouter une marge intérieure horizontalement à des objets, saisissez une valeur de marge intérieure en pixels. Les valeurs négatives ne sont pas autorisées.
  
  Répartir les objets de façon égale : cliquez sur ce bouton pour vous assurer que tous les objets d’une boîte Fluid Box sont espacés de façon égale et sont de la même taille. Par exemple,
  
  Objets avant la répartition
  
  Objets après la répartition
4. Point de renvoi à la ligne : un point de renvoi à la ligne est un point qui, lorsqu’il est atteint, renvoi à la ligne ou réorganise les objets à l’aide d’une modification de la largeur du périphérique. Par exemple, lorsque le point de renvoi à la ligne est à 80 %, à 80 % de la largeur du périphérique, un objet est réorganisé dans la boîte Fluid Box selon les propriétés définies dans les options Renvoi à la ligne.
  
  Par exemple, lorsque la largeur de la zone d’aperçu est de 1 024 pixels et que le point de renvoi à la ligne est défini sur 50 %, et lorsque la largeur du périphérique est définie sur 512 pixels, les objets se réorganisent.
5. Renvoi à la ligne : définit le moment et la façon dont les objets d’une boîte Fluid Box sont renvoyés à la ligne ou réorganisés lorsqu’un seuil prédéfini est atteint. Les options suivantes sont disponibles :
  
  Renvoi à la ligne suivante : lorsque le point de renvoi à la ligne atteint le seuil, l’objet descend à la ligne suivante.
  
  Réduire en une ligne : lorsque le point de renvoi à la ligne atteint le seuil, les objets ne changent pas leur position. Les objets ajustent leur taille selon les dimensions du périphérique.
  
  Une ligne/colonne : lorsque le point de renvoi à la ligne atteint le seuil, les objets s’alignent dans une colonne.
  
  Symétrique : lorsque le point de renvoi à la ligne atteint le seuil, les objets se réorganisent selon le nombre d’objets dans la boîte Fluid Box.

Mise en page Fluid Box verticale

Dans le panneau Inspecteur des propriétés, sélectionnez le flux des objets et le type de renvoi à la ligne des objets.

Choisissez l’alignement horizontal des objets : centre, gauche ou droit.

Sélectionnez l’alignement vertical des objets.

Aligner en haut

Aligner au milieu

Aligner en bas

Espace intermédiaire

Espace autour

Création d’un projet Fluid Box avec plusieurs conteneurs

Créez un projet réactif (Fichier > Nouveau projet > Projet réactif ou appuyez sur Ctrl + H).
Sur une diapositive vide, insérez une mise en page Fluid Box, comme indiqué ci-dessous :

Mise en page de la boîte Fluid Box
Après avoir inséré la mise en page verticale, cliquez sur n’importe quelle partie de la mise en page. FB_5 est le parent qui représente le conteneur entier de la diapositive. Dans le panneau Inspecteur des propriétés, vous pouvez afficher la hiérarchie complète des différents conteneurs Fluid Box.

Lorsque vous mettez en surbrillance une boîte Fluid Box sur la scène, la boîte Fluid Box appropriée dans la hiérarchie ci-dessus est également mise en surbrillance, afin que vous sachiez avec quelle Fluid Box vous travaillez.

Boîte Fluid Box parent

Pour modifier les objets, sélectionnez le conteneur approprié.
Sur les conteneurs Fluid Box, faites glisser les poignées bleues pour régler la taille des conteneurs enfant.
Si vous cliquez ailleurs, les poignées bleues disparaîtront. Pour les afficher de nouveau, effectuez l’une des opérations suivantes :
- Cliquez n’importe où en dehors de la zone de scène, puis faites glisser le curseur sur la scène.
- Cliquez n’importe où dans la zone de scène et sélectionnez le Fluid Box parent dans la section Sélecteur de Fluid Box. Les poignées s’affichent alors de nouveau.
Insérez des objets dans les conteneurs comme indiqué ci-dessous :

L’image ci-dessus représente une mise en page pour les bureaux (1024 x 627). Pour vérifier la manière dont cette mise en page se comporte dans d’autres périphériques, déplacez le curseur situé en haut pour afficher les modifications dans la mise en page.

Si vous affichez l’aperçu du projet dans les différents périphériques, vous pouvez voir que les conteneurs Fluid Box s’alignent intelligemment selon la largeur du périphérique.

En cas de périphérique avec une largeur plus petite :

Si le texte spécifié dans une zone de texte déborde pour s’adapter au changement de largeur du périphérique, un bouton s’affiche en bas du conteneur de texte. Cliquez sur ce bouton pour voir la totalité du texte. Par exemple, dans ce cas, le texte s’affiche comme suit :

Remarque :

Vous ne pouvez pas copier une diapositive qui contient des objets dans une boîte Fluid Box et le coller dans un projet vide ou réactif. Pour y remédier, cliquez avec le bouton droit de la souris sur la boîte Fluid Box, sélectionnez Sélectionner tout puis collez les objets dans une diapositive vide ou réactive.

Remarque :

Si un Fluid Box contient un objet, vous ne pouvez pas le redimensionner. Les poignées autour de l’objet s’affichent en rouge, ce qui signifie que l’objet ne peut pas être redimensionné.

Modification de la largeur d’une boîte Fluid Box

Vous pouvez modifier la largeur d’une boîte Fluid Box en modifiant les valeurs du panneau Position dans l’Inspecteur des propriétés.

Par exemple, si la largeur d’une boîte Fluid Box est de 33,3 % de la boîte Fluid Box parent ou de 341 px, vous pouvez la modifier en entrant les valeurs souhaitées et les modifications sont répercutées dans la scène.

Remarque :

Dans le panneau Position, si vous entrez une valeur supérieure à la valeur maximale autorisée, le champ reprend la valeur d’origine.

Aperçu automatique en fonction du périphérique

Appuyez sur le bouton de lecture pour voir la forme et le facteur de forme de votre contenu changer automatiquement sur toute la gamme de tailles de périphérique. Observez la réactivité de votre contenu sur chaque taille d’écran.

Cliquez sur le bouton Aperçu de la mise en page pour observer le renvoi à la ligne, la mise à l’échelle et l’alignement de votre contenu automatiquement selon toutes les tailles de périphérique.

Vous pouvez également utiliser la même option dans les propriétés Renvoi à la ligne. Modifiez la propriété de renvoi à la ligne pour la boîte Fluid Box, puis cliquez sur Aperçu de la mise en page pour vérifier le nouveau comportement de renvoi à la ligne.

Activation du point de renvoi à la ligne pour les boîtes Fluid Box

Comme évoqué dans la section précédente, un point de renvoi à la ligne est le niveau qui, une fois atteint, renvoie à la ligne ou réorganise des objets avec modification de la largeur du périphérique.

Par exemple, lorsque le point de renvoi à la ligne est à 80 %, à 80 % de la largeur du périphérique, un objet est réorganisé dans la boîte Fluid Box selon les propriétés définies dans les options Renvoi à la ligne.

Fréquemment, dans des projets d’e-learning affichés sur des périphériques, vous souhaitez que les objets soient automatiquement renvoyés à la ligne dans plusieurs boîtes Fluid Box. Même s’il est facile de définir un point de renvoi à la ligne dans une boîte Fluid Box, la possibilité de définir des points de renvoi à la ligne dans plusieurs boîtes Fluid Box vous offre plus de souplesse lors du développement des projets de formation en ligne.

Pour configurer un point de renvoi à la ligne dans les boîtes Fluid Box, cliquez sur Édition > Préférences ou appuyez sur les touches Maj + F8 pour ouvrir la boîte de dialogue Préférences.

Cochez la case Point de renvoi à la ligne et cliquez sur OK. Redémarrez Captivate.

Dans le projet, lorsque vous ajoutez plusieurs boîtes Fluid Box et objets à l’intérieur de chaque boîte Fluid Box, vous pouvez activer les points de renvoi à la ligne dans chaque boîte Fluid Box.

Lorsque vous déplacez les curseurs, les objets sont renvoyés à la ligne au point exact où vous avez spécifié le seuil de renvoi à la ligne.

Renvoi à la ligne des objets dans chaque boîte Fluid Box

Capture réactive

Barre de lecture réactive

Rendez les commandes de la barre de lecture réactives. Dans Fenêtre > Éditeur de renvoi à la ligne, vous pouvez créer un habillage personnalisé en modifiant les commandes de la barre de lecture et enregistrer les modifications en tant que thème. Désormais, vous pouvez faire apparaître les commandes de la barre de lecture différemment dans les vues Primary, Tablet et Mobile.

Pour afficher des commandes de barre de lecture différentes dans chaque sortie de vue Primary, Tablet et Mobile, personnalisez la variable cpMobilePlaybar.

Accédez à l’emplacement de la barre de lecture :

C:\Program Files\Adobe\Adobe Captivate 8 x64\fr_FR\Gallery\Playbars\HTML\cpPlaybarMobileStep text

Remarque :

L’emplacement varie en fonction du répertoire d’installation de votre ordinateur.
Créez une sauvegarde pour la barre de lecture que vous souhaitez modifier.

Ouvrez le fichier playbarScript.js

cp.responsiveButtons = { //&quot;ButtonName&quot; : [Primary,Tablet,Mobile], &quot;Rewind&quot; : [true,true,false], &quot;Backward&quot; : [true,true,true], &quot;Play&quot; : [true,true,true], &quot;Slider&quot; : [true,true,false], &quot;Forward&quot; : [true,true,true], &quot;CC&quot; : [true,true,true], &quot;AudioOn&quot; : [true,false,false], &quot;Exit&quot; : [true,true,true], &quot;FastForward&quot; : [true,true,false], &quot;TOC&quot; : [true,true,false]
};

Si vous souhaitez que chacun des boutons de commande de la barre de lecture apparaisse dans les vues Primary, Tablet et Mobile, modifiez le code ci-dessus en tant que [true, true, true] pour tous les boutons. Enregistrez et fermez le fichier.

Par exemple, si vous souhaitez que le curseur (« Slider ») n’apparaisse que dans les vues Tablet et Mobile, modifiez le code comme suit :

"Slider" : [false, true, true]

Remarque :

Si vous souhaitez rendre une autre barre de lecture réactive, suivez la procédure mentionnée ci-dessus mais copiez au préalable la fonction réactive dans le fichier js.

La première préférence est attribuée aux cases à cocher dans l’Editeur d’habillage. Si elles ne sont pas sélectionnées, ce bouton n’apparaît pas dans la barre de lecture, quelle que soit la valeur True ou False.
Redémarrez Captivate pour mettre à jour la barre de lecture.

Capture réactive (simulation réactive)

Créez une capture d’écran unique pouvant être utilisée sur plusieurs écrans et périphériques. Adobe Captivate vous permet de sélectionner la partie de la capture d’écran que vous souhaitez afficher sur des écrans plus petits.

Ouvrez un projet réactif Captivate
Cliquez sur Diapositives > Simulation logicielle

La fenêtre Enregistrer des diapositives supplémentaires s’affiche.
Sélectionnez la diapositive après laquelle vous voulez insérer la diapositive enregistrée et cliquez sur OK.

La fenêtre de capture d’écran s’affiche.
Sélectionnez le type d’enregistrement Automatique, Démonstration vidéo ou Manuel, et cliquez sur Enregistrer pour faire des captures d’écran.

Remarque :

L’enregistrement manuel permet de sélectionner soi-même quelques captures d’écran à enregistrer.

Lorsque vous utilisez la méthode d’enregistrement automatique, Adobe Captivate effectue automatiquement des captures d’écran et les place dans des diapositives distinctes. L’enregistrement automatique est la méthode d’enregistrement la plus courante dans Adobe Captivate.
Dans le projet réactif, cliquez sur la vue Mobile.

La capture d’écran se réaligne et apparaît comme suit :
Vous pouvez constater que l’arrière-plan est incliné.

Vous pouvez utiliser une partie de l’image d’arrière-plan dans la vue Mobile.
Dans l’inspecteur des propriétés, cliquez sur Utiliser une partie de l’image d’arrière-plan. Vous pouvez déplacer la capture de diapositive dans la partie de l’arrière-plan de votre choix.

Désormais, vous pouvez observer la différence par rapport à la vue précédente.

Conversion d’un projet vide en projet réactif

Créez un projet vide comportant des objets, comme illustré ci-dessous.

Nouveau projet vide
Pour convertir le projet en un projet réactif, cliquez sur Fichier > Enregistrer en tant que projet réactif. Un message d’avertissement concernant les objets n’étant pas pris en charge dans un projet réactif peut s’afficher. Pour plus d’informations, voir Objets non pris en charge dans HTML5.

Cliquez sur Enregistrer et enregistrez votre projet en tant que projet réactif. Vous avez un nouveau projet réactif, comme illustré ci-dessous :

Nouveau projet réactif

Faites glisser le curseur pour visualiser votre projet dans les différentes vues.
Si le texte spécifié dans une zone de texte déborde pour s’adapter au changement de largeur de l’appareil utilisé, un bouton Développer s’affiche en bas du conteneur de texte. Cliquez sur ce bouton pour voir la totalité du texte.

Bouton Développer
Dans la diapositive réactive, vous pouvez insérer votre propre mise en page FluidBox (FluidBox > Vertical ou Horizontal) ou cliquer sur Suggérer des boîtes FluidBox pour placer les objets intelligemment dans les conteneurs réactifs. Si vous cliquez sur Suggérer des boîtes FluidBox, vous constatez que la mise en page de projet est modifiée, comme indiqué ci-dessous :

Mise en page FluidBox
Déplacez des objets, placez-les comme vous le souhaitez, puis prévisualisez ou publiez votre projet réactif.

Création d’un aperçu personnalisé en fonction du périphérique

Dans n’importe quel projet réactif, Captivate vous permet de prévisualiser votre projet en fonction de plusieurs périphériques, comme votre ordinateur de bureau, un iPhone, un iPad, etc.

Vous pouvez créer des modes personnalisés en fonction des périphériques en plus de ceux déjà définis par défaut.

Pour créer un mode d’aperçu personnalisé en fonction du périphérique :

Tout d’abord, lancez Captivate en tant qu’administrateur.

Saisissez les dimensions requises, comme indiqué ci-dessous :

Personnaliser les dimensions d’aperçu
Pour ajouter l’aperçu à la liste des modes de prévisualisation, cliquez sur le signe + en regard des champs de dimension. Vous pouvez voir la boîte de dialogue suivante :

Nouvel aperçu personnalisé en fonction du périphérique

Saisissez un nom (Galaxy S8, par exemple) et l’aperçu personnalisé en fonction du périphérique devient un composant de la liste des aperçus en fonction du périphérique.

Pour supprimer un aperçu personnalisé, sélectionnez le périphérique puis cliquez sur - en regard des champs de dimension.

<?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?>
<devicelist>
   <device name=&quot;Desktop&quot; width=&quot;1024&quot; height=&quot;627&quot; candelete=&quot;0&quot;/>
   <device name=&quot;iPhone6&quot; width=&quot;375&quot; height=&quot;667&quot; candelete=&quot;0&quot;/>
   <device name=&quot;iPad&quot; width=&quot;768&quot; height=&quot;1024&quot; candelete=&quot;0&quot;/>
   <device name=&quot;Galaxy S7&quot; width=&quot;360&quot; height=&quot;640&quot; candelete=&quot;0&quot;/>
   <device name=&quot;Nexus 5x&quot; width=&quot;412&quot; height=&quot;732&quot; candelete=&quot;0&quot;/>
   <device name=&quot;Galaxy S8&quot; width=&quot;1000&quot; height=&quot;1000&quot; candelete=&quot;1&quot;/>
</devicelist>

Ajout ou suppression d’un aperçu personnalisé en utilisant les attributs de nom, largeur et hauteur.
Redémarrez Captivate et vous pouvez voir que les modifications sont reflétées dans la liste déroulante Afficher l’aperçu dans de la liste déroulante.

Liste déroulante d’aperçu

Points d’arrêt dans un projet réactif

Créez du contenu avec cinq points d’arrêt :

Ordinateur de bureau avec une fenêtre d’affichage de 1024x627
Tablette en mode paysage avec une fenêtre d’affichage de 896x627
Tablette en mode portrait avec une fenêtre d’affichage de 768x627
Périphérique mobile en mode paysage avec une fenêtre d’affichage de 667x410 et
Périphérique mobile en mode portrait avec une fenêtre d’affichage de 360x460

Affichez un aperçu de la sortie en utilisant la lecture de la diapositive pour les différentes mises en page de périphérique. Publiez le contenu au format HTML5.

Adobe Captivate vous permet de faire glisser et de déposer des objets de manière fluide entre les trois vues de point d’arrêt des projets réactifs.

Pour plus d’informations sur les propriétés Spécifiques de la vue du projet réactif , voir Propriétés Spécifiques de la vue.

Vous pouvez afficher le panneau Aligner en cliquant sur Fenêtre > Aligner.

Création d’un projet réactif

Après le démarrage d’Adobe Captivate, cliquez sur la première vignette sur l’écran d’accueil, Projet réactif, puis cliquez sur Créer.

Vous pouvez également sélectionner Fichier > Nouveau projet > Projet réactif.
Pour parcourir les différents points d’arrêt, cliquez sur les icônes Bureau, Tablette et Mobile dans la mise en page du projet réactif.

Vous pouvez afficher la zone du projet réactif divisée en six points d’arrêt uniques comme l’illustre la capture d’écran ci-dessous. Chaque zone de point d’arrêt est un espace de création unique.

Points d’arrêt disponibles

Conception adaptative (positionnement intelligent)

Des curseurs sont disponibles au début et à la fin de chaque point d’arrêt.

Par défaut, cinq points d’arrêt sont disponibles pour que vous puissiez créer du contenu.

Si vous créez du contenu pour tout périphérique dont la taille supérieure ne s’adapte pas à la fenêtre d’affichage de la mise en page pour périphériques mobiles, vous pouvez augmenter la taille en faisant simplement glisser le curseur.

Remarque :

Toute taille supérieure à celle de la fenêtre d’affichage par défaut implique l’utilisation de la mise en page de fenêtre d’affichage supérieure.
Par exemple, si vous souhaitez afficher la fenêtre d’affichage mobile en 450 x 450 plutôt que les valeurs par défaut. la taille étant supérieure à celle des mobiles et inférieure à celle des tablettes, la mise en page pour tablettes est adoptée.

Le positionnement intelligent est possible entre les points d’arrêt. Adobe Captivate vous permet de prévisualiser les projets de façon harmonieuse entre les points d’arrêt. Autrement dit, les utilisateurs ne subissent aucun délai lors de la prévisualisation de sorties en passant d’une vue à une autre entre les points d’arrêt.

Personnalisation des couleurs de thème

Vous pouvez sélectionner les couleurs de thème prédéfinies ou personnaliser les couleurs de thème afin de créer vos propres modèles de couleurs.

Dans la barre d’outils, cliquez sur Thèmes > Couleurs de thème
Sélectionnez l’une des couleurs de thème prédéfinies dans la liste déroulante Sélectionner une couleur de thème, puis cliquez sur Personnaliser. La fenêtre de personnalisation des couleurs de thème s’affiche comme illustré ci-dessous :
Sélectionnez le composant dont vous voulez modifier les couleurs.
Vous pouvez modifier les couleurs de chaque composant de la diapositive tel que le titre, l’habillage, le sous-titre et l’arrière-plan.
Vous pouvez choisir la couleur à l’aide des outils Nuances ou Nuanciers, Sélecteur de couleurs ou Pipette.
Cliquez sur le titre du thème prédéfini et choisissez votre propre titre.
Cliquez sur Enregistrer.
Désormais, la couleur personnalisée de thème s’affiche dans la liste déroulante.

Vous pouvez utiliser l’icône en forme de roue correspondant aux paramètres pour gérer les couleurs de thème : supprimer, renommer.

Hauteur du périphérique

Paramétrez divers arrière-plans dans différentes vues à l’aide de l’inclusion/exclusion d’objets.

Vous pouvez également définir la hauteur du périphérique pour chaque mise en page en sélectionnant la case Hauteur du périphérique dans l’inspecteur des propriétés. Si la hauteur du périphérique est sélectionnée, la bordure jaune s’affiche pour chaque mise en page, comme le montrent les captures d’écran ci-dessous pour la mise en page Mobile.

device_height — Définition de la hauteur du périphérique

Vous pouvez associer la hauteur de diapositive à la hauteur du périphérique en cliquant sur l’icône de lien en regard de Slide Height dans la fenêtre Propriétés (voir la capture d’écran ci-dessous). Modifier la hauteur de la diapositive pour une vue spécifique ou pour toutes les vues.

Hauteur de la diapositive

Adobe Captivate vous permet également de personnaliser la hauteur de la fenêtre d’affichage en fonction de la hauteur du périphérique.

La hauteur de la fenêtre d’affichage correspond à la hauteur de la mise en page pour les ordinateurs de bureau (Primary), les tablettes (Tablet) et les mobiles (Mobile). Vous pouvez ajuster cette hauteur pour qu’elle s’adapte à tout périphérique spécifique à l’aide de l’option Slide Height dans Propriétés.

Remarque :

Supprimez l’association entre la hauteur de diapositive et la hauteur du périphérique afin de la modifier.

Personnalisation de la hauteur de la diapositive

Partons du principe que la hauteur de la fenêtre d’affichage et du périphérique pour la mise en page mobile est de 415. Imaginez par exemple que la hauteur du périphérique est de 500. Vous pouvez ajuster la hauteur de la fenêtre d’affichage en déplaçant le curseur vertical de hauteur du périphérique jusqu’à 500. Par défaut, la hauteur de périphérique est associée à Slide Height. Vous pouvez supprimer cette association en cliquant sur l’icône de lien située à côté de la valeur de la hauteur de la diapositive dans l’inspecteur de propriétés.

Dans ce cas, tout le contenu situé à l’intérieur de la hauteur de la fenêtre d’affichage est visible par défaut dans le périphérique mobile . Par conséquent, cette fonctionnalité vous permet de développer du contenu correctement en fonction la mise en page, en l’adaptant à la hauteur du périphérique.

Si la hauteur de la fenêtre d’affichage est supérieure à celle du périphérique, le contenu situé au-delà de la hauteur du périphérique peut être visualisé par l’utilisateur final à l’aide d’une barre de défilement dans le périphérique.

Vous pouvez désormais aligner tous les objets au centre de la diapositive dans tous les points d’arrêt des projets réactifs. Les options d’alignement horizontal et vertical centré sont introduites dans Captivate 9.

Insérez n’importe quelle forme intelligente dans la diapositive du point d’arrêt Primary.
Cliquez sur la forme intelligente et affichez l’onglet Position dans l’inspecteur des propriétés .
Cliquez sur Avancé. Vous pouvez voir les options d’alignement horizontal et vertical centré comme illustré dans la capture d’écran.

Alignement d’objets

Vous pouvez désormais aligner n’importe quel objet au centre de la diapositive dans tous les points d’arrêt des projets réactifs à l’aide des options d’alignement central horizontal et vertical de Captivate.

Insérez n’importe quelle forme ou objet dans la diapositive du point d’arrêt Primary.
Sélectionnez-le puis affichez le panneau Position dans l’inspecteur des propriétés. Cliquez sur Avancé.
Cliquez sur Avancé.

Options d’alignement horizontal et vertical de l’image

Vous pouvez voir les options d’alignement horizontal et vertical centré comme illustré dans la capture d’écran.

Options d’alignement
Vous pouvez choisir les options d’alignement central horizontal et vertical en cliquant avec le bouton droit de la souris sur l’objet et en sélectionnant Aligner, comme illustré ici.
Vous pouvez aussi utiliser les icônes du panneau Aligner du menu Fenêtre comme illustré ici.

Remarque :

Activez l’affichage du panneau Aligner en cliquant sur Fenêtre > Aligner.

Alignement central horizontal - Si vous appliquez cet alignement, vous ne pourrez déplacer l’objet dans la diapositive que dans le sens vertical . L’objet ne peut pas être déplacé dans le sens horizontal.

Alignement central vertical - Si vous appliquez cet alignement, la forme peut être déplacée dans la diapositive dans le sens horizontal uniquement. Elle ne peut pas être déplacée dans le sens vertical.

Alignement central horizontal et vertical - Si vous appliquez les deux alignements à la fois, le déplacement n’est disponible ni dans le sens horizontal, ni dans le sens vertical.

Le codage couleur des options d’alignement vertical et centré est pris en charge. La couleur du contour des deux cases à cocher prend la couleur du point d’arrêt auquel les options d’alignement sont choisies.

Remarque :

Si vous avez plusieurs formes, vous pouvez alors aligner un seul objet au centre de la diapositive et lier les autres objets à l’objet centré pour obtenir des organigrammes centrés dans la diapositive pour tous les points d’arrêt.

Si vous désactivez l’option d’alignement horizontal ou vertical centré, l’objet ne revient pas à sa position initiale.

Définition des couleurs de légende par défaut

Vous pouvez définir différentes couleurs de texte de légende par défaut pour les vues des points d’arrêt.

Choisissez Modifier > Gestionnaire des styles d’objet
Sélectionnez Style de légende par défaut
Dans Format texte, cliquez dans la liste déroulante en regard de Points d’arrêt et sélectionnez Bureau, Portrait tablette ou Portrait mobile.
Choisissez la couleur pour chaque point d’arrêt.

Prise en charge de la capture pour les interactions

Vous pouvez capturer les interactions dans toutes les vues et régler l’autofocus pour une zone d’interaction spécifique dans les vues. Définissez une forme intelligente en tant qu’image d’arrière-plan dans Projet réactif pour définir une zone de recadrage pour l’image d’arrière-plan dans différentes vues.

L’ensemble des diapositives de questions et de résultats, ainsi que les diapositives principales, sont pleinement prises en charge dans toutes les vues du projet réactif.

Les propriétés réactives et les thèmes s’appliquent aux diapositives de questions.

Un symbole d’étoile indique un style ignoré dans la zone Exemple de texte de l’inspecteur des propriétés.

Interaction de glisser-déposer

Adobe Captivate prend en charge les interactions de glisser-déposer pour les projets réactifs.

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.

Dans un projet réactif, vous pouvez exécuter l’assistant d’interaction glisser-déposer en choisissant Insérer > Lancer l’assistant d’interaction glisser-déposer. Vous pouvez également sélectionner Interactions > Glisser-déposer comme illustré dans la capture d’écran ci-dessous :

Toutes les fonctionnalités d’interaction glisser-déposer dans les projets réactifs sont similaires à celles des projets vides. Pour plus d’informations sur la création d’une interaction glisser-déposer, sur les différentes fonctionnalités d’interaction et sur les meilleures pratiques, voir Interactions glisser-déposer.

Explications d’un expert : Interaction réactive de glisser-déposer

Allen Partridge

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 :

Articles connexes

Accéder à votre compte

Conception de projets réactifs avec Adobe Captivate