Guide d'utilisation Annuler

Création d’une option de conception personnalisée

  1. Guide de l’utilisateur de Captivate
  2. Présentation de Captivate
    1. Nouveautés d’Adobe Captivate
    2. Configuration requise d’Adobe Captivate
    3. Mises à jour d’Adobe Captivate
      1. Notes de mise à jour d’Adobe Captivate (mise à jour 12.5)
      2. Notes de mise à jour d’Adobe Captivate (mise à jour 12.4)
      3. Notes de mise à jour d’Adobe Captivate (mise à jour 12.3)
      4. Notes de mise à jour d’Adobe Captivate (mise à jour 12.2)
      5. Notes de mise à jour d’Adobe Captivate (mise à jour 12.1)
    4. Télécharger Adobe Captivate
    5. Foire aux questions
  3. Ajout d’une diapositive
    1. Navigateur de diapositives dans Adobe Captivate
    2. Ajout d’une diapositive de conversation
    3. Ajout de personnages à votre projet Adobe Captivate
    4. Modification de l’image d’arrière-plan d’une diapositive
    5. Ajout d’une marge intérieure dans les blocs de contenu et composants
    6. Création d’un projet à défilement long
  4. Options de conception dans Adobe Captivate
    1. Présentation des options de conception
    2. Éléments d’une option de conception
    3. Création d’options de conception personnalisées
    4. Modification d’une option de conception personnalisée
    5. Exportation d’une option de conception personnalisée
    6. Importation d’une option de conception personnalisée
  5. Ajouter des blocs de texte
    1. Ajout de texte dans un projet
    2. Ajout de polices Adobe à un projet
  6. Ajouter des blocs de média
    1. Ajout d’images dans un projet
    2. Ajout de vidéos dans un projet
    3. Ajout de citations
    4. Ajout de fichiers SVG dans un projet
    5. Ajout d’objets Web à un projet
  7. Composants interactifs
    1. Ajout d’un bouton
    2. Ajouter un champ de saisie
    3. Ajouter un groupe de boutons radio
    4. Ajout d’une liste déroulante
    5. Ajout d’une case à cocher
  8. Ajout de blocs d’identité visuelle
    1. Ajout d’un en-tête à un projet
    2. Ajout d’un pied de page à un projet
  9. Widgets
    1. Ajout d’une carte
    2. Ajout d’onglets
    3. Ajout d’un certificat
    4. Ajout d’une liste
    5. Ajout d’une zone réactive
    6. Ajout d’un élément de glisser-déposer
    7. Ajout d’un montage chronologique
    8. Ajout d’un élément Cliquer pour afficher
    9. Ajout d’un accordéon
  10. Création de questionnaires
    1. Ajout d’une question à choix multiples
    2. Ajout d’une question de type vrai ou faux
    3. Ajout d’une question d’association de la colonne
    4. Ajout d’une question à réponse courte
    5. Ajout d’une question de séquence
    6. Ajout de groupes de questions et de diapositives de questions aléatoires
    7. Importation de questions au format CSV
  11. Ajout de l’audio à un projet
    1. Ajout d’audio
    2. Ajout de sous-titres
  12. Interactions
    1. Ajout d’interactions dans un projet
    2. Création d’une vidéo interactive avec incrustation
    3. Création d’une interaction au niveau de la diapositive
    4. Création d’une interaction au niveau de l’objet
  13. Animations
    1. Ajout d’animations dans un projet
  14. Accessibilité
    1. Rendre un projet accessible
  15. Personnalisation du montage chronologique
    1. Montage chronologique dans Adobe Captivate
  16. Personnalisation de la table des matières et de la barre de lecture
    1. Table des matières dans Adobe Captivate
  17. Modification des propriétés d’un projet
    1. Variables dans Adobe Captivate
    2. Préférences
    3. Dimensions du projet
    4. Thèmes
  18. Création d’un projet de simulation
    1. Simulation
  19. Prévisualisation d’un projet
    1. Aperçu
  20. Partage d’un projet pour révision
    1. Partage à des fins de révision
    2. FAQ et guide de dépannage pour le partage de projets à des fins de révision   
  21. Publication d’un projet
    1. Publication de votre projet
  22. Mise à niveau de projets dans Adobe Captivate
    1. Passez à la dernière version pour vos projets 

Présentation

Les options de conception d’Adobe Captivate offrent aux utilisateurs la possibilité de modifier la mise en page et le style du contenu pour les diapositives, les blocs de contenu, les diapositives de questions et les widgets. Sélectionnez un bloc de contenu ou un composant à l’intérieur pour voir la multitude d’options de conception disponibles. Découvrez plus en détail les options de conception disponibles dans Adobe Captivate.

Toutefois, si vous devez mettre en œuvre vos conceptions et mises en page ou celles de votre organisation, vous pouvez créer des options de conception personnalisées. Cet article explique comment créer, personnaliser et réutiliser ou partager des options de conception personnalisées dans Adobe Captivate. Il couvre les modifications de mise en page à l’aide de propriétés de grille CSS, la mise à jour des mises en page pour différentes fenêtres d’affichage et la personnalisation du style des objets.

Sujets de cette page :

Conseil :

Pour gagner du temps, créez une copie d’une option de conception par défaut dans Captivate et enregistrez-la dans un emplacement séparé (<eLearningAssets>\12.0\).

Par exemple, si vous souhaitez créer une conception personnalisée pour un bloc d’image, copiez une option de conception de bloc d’image par défaut et utilisez-la comme base pour vos personnalisations.

Copier ce dossier du chemin C:\Program Files\Adobe\Adobe Captivate\DesignOptions\content_blocks\Image\Single Image Default Design Option vers l’emplacement utilisateur <elearning>.

Emplacement des options de conception installées

Emplacement d’installation :

  • Windows : C:\Program Files\Adobe\Adobe Captivate\DesignOptions
  • macOS : /Applications/Adobe Captivate/DesignOptions/

Vous pouvez localiser les dossiers des options de conception installées pour différents types de contenu, notamment les blocs de contenu, les diapositives de mise en page, les diapositives de questions, les widgets et les composants interactifs. Ces dossiers contiennent des fichiers d’options de conception que vous pouvez copier et personnaliser pour créer vos propres conceptions. Ouvrez chaque dossier pour explorer les différents types de blocs de contenu, diapositives de mise en page, widgets, diapositives de questions et composants interactifs disponibles.

Remarque :

Vous pouvez utiliser n’importe quel éditeur de texte ou HTML pour ouvrir et modifier les fichiers JSON.  Assurez-vous que le dossier contient les fichiers suivants : designOption.json, localized.json et Thumbnail.png.

Création d’un dossier d’options de conception personnalisées

Les utilisateurs peuvent charger un fichier JSON d’options de conception ici pour incorporer une option de conception créée en externe. Une fois le fichier ajouté, l’option de conception apparaît dans le panneau Propriétés visuelles quand un bloc de contenu ou un composant est sélectionné lors des lancements suivants de Captivate.

  1. Créez un dossier distinct dans eLearning Assets, destiné spécifiquement aux options de conception personnalisées. Captivate peut lire les options de conception du dossier eLearning Assets, ce qui permet aux utilisateurs d’y créer des conceptions personnalisées afin de distinguer les options de conception par défaut des options de conception personnalisées.

    S’il n’existe pas déjà, créez un dossier nommé designOptions dans <eLearningAssets>\12.0\. 

    • Windows : C:\Users\Public\Documents\Adobe\eLearning Assets\12.0\designOptions
    • macOS : /Users/<utilisateur>/Documents/Adobe/eLearning Assets/12.0/designOptions/
    Remarque :

    Le nom du dossier de l’option de conception personnalisée commence par un « d » minuscule pour le différencier des options de conception installées.

  2. Renommez les dossiers d’options de conception personnalisées pour chaque type de bloc de contenu ou de mise en page de diapositive dans le dossier eLearning Assets.

  3. Ouvrez n’importe quel éditeur de texte et naviguez pour sélectionner l’option de conception personnalisée à partir d’eLearning Assets. Les fichiers sont chargés automatiquement dans l’éditeur. 

    Exemple de fichiers d’options de conception chargés dans un éditeur de texte

Modification des champs essentiels du fichier JSON

  1. Les options de conception se trouvent dans un fichier JSON. Accédez au fichier designOption.json afin d’ajouter un ID unique pour cette conception personnalisée. Voici un exemple :

      "designOptionId": "Custom Paragraph style 1"

    Alerte :

    Attribuez un ID unique à « designOptionID » pour la distinguer des autres options de conception personnalisées.

  2. Dans le fichier designOption.json, définissez la valeur « isDefault » sur false. Cela permet de s’assurer qu’il n’y a pas de conflit avec l’option de conception installée. Il s’agit d’une étape obligatoire.

  3. Modifiez le fichier localized.json et mettez à jour les valeurs des champs de nom et de description. Ce nom s’affiche sous forme d’info-bulle pour cette conception personnalisée dans Captivate, lorsque vous passez le curseur de la souris sur sa vignette dans le panneau Propriétés visuelles.

    "en-US": {

        "name": "Option de conception de paragraphe par défaut",

        "description": "Option de conception par défaut pour le paragraphe"

      },

  4. Mettez à jour la vignette de l’option de conception personnalisée. Enregistrez cette image dans le dossier des options de conception personnalisées et renommez le nouveau fichier PNG de vignette. La taille limite de la vignette doit être de 130 × 78 px.

    Remarque :

    Veillez à mettre à jour le nom de la vignette dans le fichier designOption.json à l’aide d’un éditeur de texte.

    Mise à jour du nom de la vignette dans designOption.json
    Mise à jour du nom de la vignette dans le fichier JSON de l’option de conception

Style et propriétés CSS

Adobe Captivate prend en charge les propriétés CSS (feuilles de style en cascade), ce qui vous permet de modifier facilement des variables prédéfinies pour personnaliser les options de conception. Cette fonctionnalité simplifie le processus de conception et permet de créer des projets de formation en ligne professionnels et visuellement attrayants, adaptés à votre marque ou thème de projet.

Les propriétés CSS contrôlent l’apparence et le comportement des éléments HTML et XML. Ils offrent un contrôle précis des couleurs, des polices, des mises en page, de l’espacement et plus encore, garantissant ainsi que les conceptions s’alignent avec le style souhaité.

Propriétés personnalisées

Captivate comprend des propriétés personnalisées CSS intégrées qui suivent un système de mise en page en grille avec des lignes et des colonnes, idéal pour créer des conceptions réactives. Voici toutes les propriétés répertoriées sous le panneau Propriétés visuelles. Vous pouvez également modifier ces propriétés à partir du fichier d’options de conception. 

Propriétés personnalisées répertoriées sous le panneau Propriétés visuelles
Propriétés personnalisées répertoriées sous le panneau Propriétés visuelles

Styles personnalisés

La section customStyles du fichier designOptions.json définit vos propriétés de style CSS. Utilisez cette section pour créer des éléments de conception uniques, offrant flexibilité et liberté créative pour personnaliser vos projets de formation en ligne.

  • Les styles personnalisés prennent en charge toutes les propriétés CSS. Utilisez le formatage en casse mixte au lieu des attributs CSS séparés par des traits d’union.
    Exemple : utilisez flexDirection au lieu de flex-direction.

  • Les propriétés CSS peuvent également être appliquées en fonction de la taille de l’écran de l’appareil.

Restrictions

Lorsque vous stylisez et mettez en page du contenu à l’aide des options de conception, les contraintes suivantes s’appliquent :

  1. Personnalisation de l’apparence :

    • L’apparence des éléments de contenu (par exemple les couleurs et les polices) ne peut être modifiée qu’à l’aide de thèmes prédéfinis. Les valeurs codées en dur doivent être évitées.
    • Si une propriété visuelle est prise en charge dans Propriétés personnalisées, ne l’incluez pas dans Styles personnalisés. Cela coderait la valeur en dur, ce qui la rendrait non modifiable via le panneau Propriétés.
    • Cependant, des propriétés telles que les marges peuvent être ajoutées à l’aide de la clé customStyles dans le fichier JSON.
  2. Conteneurs parents :

    • Le parent d’un conteneur ou d’un élément ne peut pas être modifié.
  3. Conteneurs masqués :

    • Les conteneurs masqués (non sélectionnables dans Captivate), tels que les boutons, doivent être transmis en tant que nœuds enfants dans customStyles.
    • Étant donné que ces conteneurs ne prennent pas en charge les propriétés personnalisées, ils doivent être inclus à l’aide d’une balise object comme clé. Reportez-vous aux exemples de customStyles de nœuds enfants pour obtenir des conseils.
  4. Composants de l’interface utilisateur (UIC) :

    • Les propriétés pour les UIC comme les boutons radio et les listes déroulantes seront disponibles dans une prochaine version. Actuellement, un ensemble fixe d’options de conception est pris en charge pour les UIC.
    • Lorsque ces composants font partie d’un bloc de contenu, l’ensemble du bloc de contenu peut être stylisé. Les auteurs peuvent utiliser la structure modulaire des options de conception (cf. ci-dessus) via un fichier d’options de conception externe.

En comprenant ces limitations, vous pouvez concevoir et styliser efficacement le contenu tout en respectant les contraintes de la plateforme.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?