- Guide de l’utilisateur de Captivate
- Présentation de Captivate
- Nouveautés d’Adobe Captivate
- Configuration requise d’Adobe Captivate
- Mises à jour d’Adobe Captivate
- Télécharger Adobe Captivate
- Foire aux questions
- Ajout d’une diapositive
- Navigateur de diapositives dans Adobe Captivate
- Ajout d’une diapositive de conversation
- Ajout de personnages à votre projet Adobe Captivate
- Modification de l’image d’arrière-plan d’une diapositive
- Ajout d’une marge intérieure dans les blocs de contenu et composants
- Création d’un projet à défilement long
- Options de conception dans Adobe Captivate
- Ajouter des blocs de texte
- Ajouter des blocs de média
- Composants interactifs
- Ajout de blocs d’identité visuelle
- Widgets
- Création de questionnaires
- Ajout d’une question à choix multiples
- Ajout d’une question de type vrai ou faux
- Ajout d’une question d’association de la colonne
- Ajout d’une question à réponse courte
- Ajout d’une question de séquence
- Ajout de groupes de questions et de diapositives de questions aléatoires
- Importation de questions au format CSV
- Ajout de l’audio à un projet
- Interactions
- Animations
- Accessibilité
- Personnalisation du montage chronologique
- Personnalisation de la table des matières et de la barre de lecture
- Modification des propriétés d’un projet
- Création d’un projet de simulation
- Prévisualisation d’un projet
- Partage d’un projet pour révision
- Publication d’un projet
- Mise à niveau de projets dans Adobe Captivate
Découvrez comment modifier une option de conception personnalisée dans Adobe Captivate.
Présentation
Cet article contient les étapes à suivre pour modifier une option de conception personnalisée à l’aide de styles CSS, ainsi que quelques exemples. Avant toute chose, découvrez comment créer une option de conception personnalisée et familiarisez-vous avec les éléments d’un fichier d’options de conception.
Sujets de cette page :
Présentation de la structure des options de conception
Conteneurs : il s’agit du conteneur le plus externe qui contient plusieurs composants, tels que les titres, les sous-titres, le corps du texte, les cartes et les images. La personnalisation d’un conteneur externe, tel qu’une carte contenant d’autres composants, aura également un impact sur le style et l’apparence des composants qu’il contient.
Balises d’élément : ces balises identifient chaque composant d’un conteneur. Pour modifier les styles de chaque conteneur, vous devez d’abord comprendre la convention de balisage dans un conteneur et la façon dont chaque diapositive ou bloc de contenu est structuré. Cela vous aidera à naviguer vers les bonnes sections dans le fichier d’options de conception, en utilisant les balises de l’éditeur de texte pour modifier les propriétés de style.
Telechargement
Voici un exemple de bloc de contenu d’image, avec ses composants ainsi que les balises correspondantes. À l’aide de ces balises, vous pouvez localiser les sections dans le fichier JSON de l’option de conception et ajouter vos styles CSS ou modifier les propriétés CSS.
Nom de la clé | Valeurs | Description | Requis |
"tag" | Chaîne | Chaque conteneur et élément de diapositive possède un identifiant unique appelé « tag » (« balise »). Il est utilisé pour appliquer les paramètres prédéfinis, customStyles et appearanceProps sur les conteneurs ou l’élément de diapositive correspondants. | Oui |
"preset" | Chaîne | Valide uniquement pour les blocs de texte. Nom du paramètre prédéfini qui doit être appliqué à l’élément | Non |
"designOptionId" | Chaîne | Nom de l’option de conception à appliquer à un élément. Notez que cela s’applique uniquement aux éléments qui sont des nœuds enfants ou à l’un des composants de l’interface utilisateur, comme les boutons. | Non |
"customStyles" | Objet Exemple : "customStyles": { "all": { /* Toutes les propriétés CSS. */ /* Exemple : "flexDirection": "rowReverse" */ }, "desktop": { /* Toutes les propriétés CSS. */ /* Propriétés à appliquer en plus des propriétés répertoriées dans la section all */ } , "tablet": { /* Toutes les propriétés CSS. */ /* Propriétés à appliquer en plus des propriétés répertoriées dans la section all */ } , "mobile": { /* Toutes les propriétés CSS. */ /* Propriétés à appliquer en plus des propriétés répertoriées dans la section all */ }, "mobile_landscape": { /* Toutes les propriétés CSS. */ /* Propriétés à appliquer en plus des propriétés répertoriées dans la section all */ }, } |
Utilisé pour appliquer le style CSS directement sur l’élément ou le conteneur. Notez que le nom du style CSS doit être en casse mixte. Par exemple, flex-direction deviendrait flexDirection. Aucun sélecteur CSS n’est autorisé. Les styles mentionnés ici sont appliqués directement en tant que styles CSS à l’élément HTML correspondant. Ils ne sont pas mappés aux propriétés visuelles du conteneur associé. En raison de cette nature même, certaines propriétés, telles que « margin », peuvent ne pas être synchronisées avec les propriétés visuelles, telles que « content-width ». À titre indicatif, si quelque chose peut être contrôlé via les propriétés visuelles, déclarez ces propriétés sous « customProperties » et le reste sous « customStyles » en tant que propriétés CSS. |
Non |
"customProperties" | Objet Reportez-vous à la table customProperties pour plus de détails. |
Entrées présentes dans les propriétés visuelles. Elles sont mappées aux propriétés visuelles du conteneur correspondant. Dans l’exemple à gauche, la propriété « fill » peut par exemple être utilisée pour modifier la couleur du conteneur. En outre, « customProperties » peut avoir différentes valeurs pour différents blocs de contenu. Par exemple, un conteneur de boutons pourrait avoir une propriété nommée « nb-de-boutons », qui permet de contrôler le nombre de boutons à afficher dans le conteneur. | Non |
Nom de la clé | Sous-propriétés | Description |
"appearanceProps" | Génériques à la fois pour la carte et les blocs de contenu. Ajoutez cette propriété dans le fichier JSON d’options de conception si vous souhaitez ajouter un remplissage, une bordure ou une ombre sur le conteneur. | |
"cornerRadius" | Propriété de conteneur de cartes uniquement. "cornerRadius": { "type": 1, "value": { "topLeft": 4, "bottomLeft": 4, "bottomRight": 4, "topRight": 4 } }, |
|
"fill" | Pour ajouter un arrière-plan à un conteneur, utilisez la propriété fill. Elle comprend les informations suivantes :
Structure JSON de fond uni "fill": { Structure JSON de fond image "fill": { Structure JSON de dégradé linéaire/radial
"fill": { "type": <Type de fond (3 pour un dégradé linéaire, 4 pour un dégradé radial)>, La propriété fill et les attributs associés vous permettent de définir différents styles d’arrière-plan pour les conteneurs. |
|
"shadow" | Vous pouvez ajouter des ombres aux éléments de type conteneur (blocs de contenu ou conteneurs de cartes, par exemple) à l’aide de la propriété shadow. Les attributs suivants définissent l’apparence de l’ombre : Propriétés de l’ombre
Ombre sur un conteneur de blocs de contenu Les propriétés suivantes sont utilisées pour appliquer une ombre au conteneur :
Exemple : "shadow": { "x": 1, "y": 2, "blur": 4, "color": "#b3b3b3", "type": 1, "alpha": 0.5, "enabled": false } Ombre sur un conteneur de cartes Les propriétés suivantes sont utilisées pour ajouter une ombre au conteneur de cartes :
Exemple : "shadow": { "x": 0, "y": 0, "blur": 10, "color": "#666666", "enabled": true }
|
|
"border" | Les bordures peuvent être appliquées aux éléments de conteneur, tels que les blocs de contenu ou les cartes, à l’aide de la propriété border. Les attributs suivants définissent l’apparence de la bordure : Propriétés de la bordure :
Exemple : "border": { "enabled": false, "color": "cp-color-c4", "width": 8, "type": 0 } Propriétés de bordure pour le conteneur de cartes
Exemple : "border": { "enabled": true, "color": "#666666", "width": 5, "type": 1 }
|
|
"components" | Modification de l’alignement des composants
Contrôle de la visibilité des cartes
Exemple : Le conteneur de cartes contient des composants ou des éléments de diapositive. Vous pouvez personnaliser leur alignement et leur visibilité à l’aide de la propriété components. Modification de l’alignement des composants
Contrôle de la visibilité des cartes
Exemple "components": { |
|
"cardPadding" | La propriété de conteneur de cartes vous permet d’ajouter un marge intérieure au conteneur de cartes. Elle accepte les valeurs en pixels, et la marge intérieure est appliquée à tous les côtés du conteneur | |
"alignmentAndSpacing" | "padding" | Vous pouvez définir la marge intérieure de tout objet, conteneur de cartes ou bloc de contenu à l’aide de la propriété padding de la section alignAndSpacing. Propriétés de marge intérieure
Exemple : "alignmentAndSpacing": { "padding": { "left": 10, "right": 10, "top": 50, "bottom": 50, "isDTMLinked": false, "tablet": { "top": 80 }, "mobile": { "top": 80 } } }
|
« autoFit" | Ajustement automatique : s’applique uniquement aux blocs de contenu. Ils s’adaptent automatiquement à l’espace disponible. Exemple : "alignmentAndSpacing": { "autoFit": false, "padding": { "left": 10, … } }, |
|
"textProps" | S’applique uniquement aux blocs de texte. Exemple : "customProperties":{ "textProps": { "listProps":{ "listDepth":4, "listColor": "#EB2699", "listSize":"120%", "listType":"OrderedListRoman1" } } } |
|
"imageHeight" "imageAspectRatio" "imageBehavior" |
S’applique uniquement aux blocs de contenu d’image et aux blocs de contenu de grille d’image. Si « imageBehavior » est défini sur « IG_SCALE », « imageAspectRatio » est respecté pour mettre l’objet à l’échelle dans différentes fenêtres d’affichage. Mais, s’il est défini sur « IG_FIXED_HEIGHT », c’est la propriété « imageHeight » qui est suivie. Exemple : { "customProperties": { "alignmentAndSpacing": { … "imageHeight": 768, "imageAspectRatio": 3.415, "imageBehavior": "IG_SCALE" } |
|
"videoHeight" | S’applique uniquement aux conteneurs de cartes vidéo. Définit la hauteur de l’objet vidéo dans le bloc de contenu. Exemple : {"tag": "videoCard", "customStyles": { … }, "customProperties": {… "videoHeight": 400 } }
|
|
"imageHeight" "minImageHeight" | S’applique uniquement aux blocs de contenu de caractère et de scénario.
{ "tag": "character-block-container", "customStyles": { … "customProperties": { "imageHeight": 600, "minImageHeight": 200 } }
|
|
"Position" | S’applique uniquement aux objets de sous-titres des diapositives de questions. Définit la position des légendes dans la diapositive de question :
Exemple : { "tag": "slide-item-question-caption", "customProperties": { "position": 1 }, }
|
Exemples d’options de conception personnalisées
Modification de la mise en page à l’aide de la grille CSS
Pour utiliser la grille CSS, commencez par localiser l’élément conteneur parent (dans ce cas, container-image-card (étiquette b)) et modifiez son type d’affichage en sélectionnant le type grille.
-
Depuis l’emplacement d’installation, copiez \content_blocks\Image\Single Image Default Design Option dans le dossier personnalisé dans eLearning Assets et nommez le dossier en conséquence. Dans cet exemple, le nouveau nom est Custom Single Image design.
-
Ouvrez ce dossier à l’aide de n’importe quel éditeur de texte et mettez à jour les valeurs des champs de nom et de description dans le fichier localized.json.
{ "en-US": { "name": "Test personnalisé 123", "description": "Option de conception personnalisée pour une seule image" }, "fr-FR": {} }
-
Ajoutez un nom unique à designOptionID et définissez « isDefault » sur false.
{ "type": "image", "name": "$$name", "description": "$$description", "version": "1.0", "isDefault": false, "designOptionId": "Test personnalisé 123",
-
Localisez la balise « container-image-card ».
-
Définissez le flux du conteneur sur grid.
"tag": "container-image-card", "customStyles": { "all": { "display": "grid", "gridTemplateColumns": "1fr 1fr", "gap": "50px" },
-
Maintenant, pour positionner les composants dans la grille pour le bloc de contenu d’image, localisez la balise « slide-item-image » et placez le conteneur d’images à gauche dans la grille. Notez que tout style appliqué au conteneur d’images est fourni sous les styles personnalisés de l’objet image avec la clé « imageContainerStyles ».
"tag": "slide-item-image", "customStyles": { "all": { "imageContainerStyles": { "minWidth": "100%", "maxWidth": "100%", "gridArea": "1 / 1 / span 1 / span 1" } }, "tablet": {}, "mobile": {} }
Remarque :L’ajout de styles sous « all » les applique à toutes les fenêtres d’affichage d’appareil. Vous pouvez également choisir de les ajouter spécifiquement sous les affichages tablette ou mobile.
-
Modifiez la position du conteneur de texte à l’intérieur de la grille. Localisez la balise « container-image-text » et ajoutez les styles suivants :
"tag": "container-image-text", "customStyles": { "all": { "gap": "8px", "gridArea": "1 / 2 / span 1 / span 1" }, "tablet": {}, "mobile": {} }
-
Placez les boutons dans la balise « container-image-card » sur la ligne suivante.
{ "tag": "container-image-card", "customStyles": {.. }, "customProperties": {… }, "childNodesCustomStyles": { "slide-item-buttons": { "all": { "gridArea": "2 / 1 / span 1 / span 2" }, "tablet": {}, "mobile": {} } } }
-
Définissez les paramètres prédéfinis de texte. Les paramètres prédéfinis font partie d’un thème dans Captivate qui peut être configuré dans l’éditeur de thème.
Localisez la balise « slide-item-caption » et remplacez le paramètre prédéfini Caption par « Heading4 ».
"preset": "text-heading-4", "tag": "slide-item-caption",
Localisez la balise « slide-item-subtitle » et remplacez le paramètre prédéfini Subtitle par « Detail 1 ».
"preset": "text-detail-1", "tag": "slide-item-subtitle",
Voici une comparaison de l’aspect de la conception personnalisée par rapport à l’option de conception par défaut après l’application des modifications de la grille CSS :
Relancez Captivate pour voir les modifications apportées aux options de conception personnalisées. Celles-ci apparaîtront sous la section Options de conception du panneau Propriétés visuelles.
Définition de propriétés personnalisées
Les propriétés personnalisées sont accessibles et ajustées dans le panneau Propriétés visuelles pour tout bloc de contenu ou objet. En outre, ces propriétés peuvent être modifiées à l’aide du fichier d’options de conception. Dans cet exemple de conception personnalisée pour le bloc de contenu d’image, nous allons mettre à jour quelques propriétés personnalisées.
-
Activez l’ajustement automatique en définissant le paramètre autoFit sur true. Lorsque l’ajustement automatique est activé, le contenu s’étend pour occuper toute la hauteur de la diapositive. Nous vous recommandons d’activer l’ajustement automatique pour les blocs de contenu utilisés dans les diapositives de mise en page, tels que les blocs de contenu image et texte. Il est appliqué à toutes les fenêtres d’affichage d’appareil.
Localisez la balise « container-image », puis, sous « customProperties », définissez autoFit sur true.
"tag": "container-image", "customStyles": { … } "customProperties": { "alignmentAndSpacing": { … "autoFit": true } }
-
Sous la même balise : « container-image », puis, sous « customProperties », définissez imageHeight et imageBehavior.
"imageBehavior": "IG_TILE_CENTRE", "imageHeight": 768,
-
Alignez le texte de la légende et du sous-titre au centre en modifiant les customProperties de « container-image-card », le conteneur parent qui contient ces éléments de texte. Pour ce faire, repérez la balise « container-image-card » dans le fichier d’options de conception. Sous la section customProperties, recherchez les composants et mettez à jour leurs paramètres d’alignement sur center.
"tag": "container-image-card", "customStyles": { "all": { "display": "grid", "gridTemplateColumns": "1fr 1fr", "gap": "50px" }, "tablet": {}, "mobile": {} }, "customProperties": { "components": { "image": { "alignment": "left" }, "caption": { "alignment": "center" }, "subtitle": { "alignment": "center"
Voici un aperçu de la conception personnalisée après l’application des modifications aux propriétés personnalisées. Démarrez un nouveau projet dans Captivate. Vous remarquerez que l’ajustement automatique en hauteur est activé par défaut, ce qui permet au contenu d’occuper toute la hauteur de la diapositive. En outre, les composants de texte tels que Caption et Subtitle sont centrés.
-
Localisez "tag": "container-image-card" dans le fichier designOption.json et ajoutez des styles personnalisés pour tablette et mobile.
-
Définissez les modes mobile et tablet sur flexDirection.
"tag": "container-image-card", "customStyles": { "all": {…}, "tablet": { "display": "flex", "flexDirection": "column" }, "mobile": { "display": "flex", "flexDirection": "column" } }
Voici un aperçu de la conception personnalisée pour l’affichage tablette après avoir défini flexDirection sur « column ». Démarrez un nouveau projet dans Captivate et appliquez l’option de conception personnalisée pour afficher tout le contenu aligné sur une seule colonne.
Réutilisation des options de conception
L’un des principaux avantages de la création d’options de conception personnalisées est la possibilité de réutiliser des conceptions existantes dans vos nouvelles options de conception personnalisées. Dans cet exemple, l’option de conception de bloc de contenu d’image personnalisée créée lors des étapes précédentes sera utilisée comme image pour la mise en page de la diapositive Introduction.
-
Depuis l’emplacement d’installation, copiez layouts\Introduction\Introduction default dans le dossier personnalisé dans eLearning Assets et nommez le dossier en conséquence. Dans cet exemple, le nouveau nom est Diapositive d’introduction personnalisée.
-
Ouvrez l’option de conception de la mise en page de l’introduction personnalisée à l’aide d’un éditeur de texte et mettez à jour les valeurs des champs name et description dans le fichier localized.json.
{ "en-US": { "name": "Diapositive d’introduction personnalisée", "description": « Option de conception personnalisée pour l’introduction" }, "fr-FR": {} }
-
Ajoutez un nom unique à designOptionID.
{ "type": "Introduction", "name": "$$name", "description": "$$description", "designOptionId": "Diapositive d’introduction personnalisée", "isDefault": false, "version": "1.0", "thumbnail": "thumbnail.png", "styles": [ { "tag": "image", "designOptionId": "INTRODUCTION_SINGLE_IMAGE_OPTION" } ] }
-
Définissez « isDefault » sur false.
-
Réutilisez l’option de conception du bloc de contenu d’image créé précédemment et ajoutez son ID designOption unique.
{ "type": "Introduction", "name": "$$name", "description": "$$description", "designOptionId": "Diapositive d’introduction personnalisée", "isDefault": false, "version": "1.0", "thumbnail": "thumbnail.png", "styles": [ { "tag": "image", "designOptionId": "Test personnalisé 123" } ] }
-
Démarrez un nouveau projet dans Captivate et ajoutez une diapositive d’introduction.
-
Sélectionnez la nouvelle option de conception personnalisée pour la diapositive d’introduction dans le panneau Propriétés visuelles.