Ajout d’effets pour enrichir l’expérience de l’utilisateur

Les effets permettent d’attirer rapidement l’attention des utilisateurs sur des zones ou objets spécifiques d’une diapositive. Dans cette section, nous allons appliquer des effets aux objets du projet.

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 :

Ajout d’effets aux objets

Les effets dans Captivate vont du triangle vert, représenté ci-dessous, jusqu’au carré rouge. L’effet se termine au centre de l’objet.

Dans l’exemple de projet fourni avec ce didacticiel, nous utilisons la diapositive suivante pour appliquer des effets aux flèches gauche et droite :

  • La flèche droite doit venir du côté droit de la diapositive.
  • La flèche gauche doit venir du côté gauche de la diapositive.

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

    apply-effects.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, vous devez créer un nouveau projet dans Captivate avec une diapositive similaire à celle présentée ci-dessus.

  2. Dans la Bande de film accédez à la diapositive intitulée Résumé.

  3. Pour appliquer des effets à la flèche gauche, cliquez avec le bouton droit de la souris sur la flèche sur la diapositive, puis sélectionnez Appliquer l’effet.

  4. Dans la section Effets, choisissez la catégorie Entrée depuis la troisième liste déroulante.

    Les effets disponibles pour l’entrée sont affichés dans le panneau ci-après.

    Pour afficher l’effet sur un objet d’une diapositive, placez le curseur au-dessus de l’effet.

  5. Choisissez l’effet Accélération droite.

  6. Pour la flèche droite, définissez l’effet sur Accélération gauche.

    Lorsque vous ajoutez des effets, il est conseillé de prévisualiser vos progrès fréquemment. De cette manière, vous aurez une meilleure idée de ce à quoi ressemblent les effets sur la diapositive à mesure que vous avancez.

  7. Cliquez sur Aperçu dans la barre d’outils, puis choisissez Lire la diapositive.

Visualisons la procédure que nous avons réalisée.

Dans la barre d’outils, cliquez sur Aperçu, puis choisissez Projet pour prévisualiser le projet en entier.

Applications d’effets basés sur les événements

Vous pouvez appliquer aux objets des effets déclenchés par les actions de l’utilisateur (événement). Vous pouvez appliquer à un objet un effet qui est déclenché uniquement si vous effectuez une action sur l’objet.

Dans notre exemple de projet, nous avons appliqué un effet pour mettre en valeur le bureau de Samantha dans le plan d’étage. La diapositive de fin de cette procédure est la suivante :

Si l’utilisateur clique sur le bouton avec la légende Où est le bureau de Sam ?, cela déclenche un effet de surbrillance bleue sur le bureau de Sam sur le plan d’étage.

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

    apply-effects.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, vous devez créer un nouveau projet dans Captivate avec une diapositive similaire à celle présentée ci-dessus.

  2. Dans la Bande de film, accédez à la diapositive intitulée Samantha.

    Sur cette diapositive, mettons en surbrillance bleue le bureau de Sam dans le plan d’étage.

  3. Dans la barre d’outils, cliquez sur Formes et choisissez la forme rectangulaire.

  4. Dessinez une forme rectangulaire sur le bureau de Sam dans le plan d’étage.

  5. Dans l’Inspecteur des propriétés, entrez les propriétés suivantes pour le rectangle :

    Nom : bureau_sam (nous utiliserons plus tard le nom quand nous appliquerons un effet sur cet objet)

    Opacité : 0 % (permet que l’image du bureau de Sam soit visible en-dessous de cet objet)

    Si l’Inspecteur des propriétés n’est pas visible à droite de la zone de travail, cliquez surPropriétés dans l’angle supérieur droit de la barre d’outils.

  6. Dans la barre d’outils, cliquez sur Interactions et choisissez Bouton.

    L’objet Bouton est placé sur la diapositive.

  7. Dans l’Inspecteur des propriétés, entrez les propriétés suivantes pour le bouton :

    Où se trouve le bureau de Sam ?

  8. Accédez à l’onglet Actions.

  9. Dans la liste déroulante En cas de réussite, choisissez Ajouter l’effet.

  10. Dans la liste déroulante Nom de l’objet, choisissez bureau_sam, puis cliquez sur  .

  11. Dans la section Effets, choisissez Emphase dans la liste déroulante.

  12. Dans la liste des effets, sélectionnez Agrandir et tourner.

Visualisons la procédure que nous avons réalisée.

Dans la barre d’outils, cliquez sur Aperçu, puis choisissez Projet pour prévisualiser le projet en entier.

Utilisation des objets de survol

Les objets de survol dans Captivate vous permettent d’afficher le contenu sous certaines conditions lorsqu’un utilisateur place le curseur sur une zone de survol prédéfinie d’une diapositive. Les objets de survol sont similaires aux info-bulles dans la plupart des applications de bureau. Toutefois, en plus du texte, vous pouvez afficher des images et même des diapositives (appelées mini-diapositives) avec des objets de survol dans Captivate.

Ajout de légendes de survol

Remarque :

La sortie HTML5 pour la procédure décrite dans cette section est disponible ici [NOTE INTERNE : Hébergement en attente ]. Vous pouvez l’utiliser comme référence lorsque vous suivez les étapes de la procédure suivante :

Nous allons maintenant ajouter une légende qui s’affiche au survol par un utilisateur de l’image du plan d’étage dans la diapositive suivante :

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

    apply-effects.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, vous devez créer un nouveau projet dans Captivate avec une diapositive similaire à celle présentée ci-dessus.

  2. Ouvrez le projet et dans la Bande de film, accédez à la diapositive intitulée Samantha.

  3. Dans la barre d’outils, cliquez sur Objets et choisissez Légende de survol.

    Lorsque vous ajoutez une légende de survol à une diapositive, cet objet a deux parties :

    Légende de survol : la légende qui s’affiche sous condition (comme une info-bulle)

    Zone de survol : zone redimensionnable au-dessus de laquelle les utilisateurs passent le curseur pour afficher la légende.

  4. Dans la légende, saisissez le texte suivant :

    LUNARSPHERE STUDIOS, 4e étage, plan d’étage

  5. Utilisez les poignées pour repositionner et redimensionner la zone de survol afin qu’elle couvre l’image du plan d’étage sur le côté droit de la diapositive.

  6. Repositionnez la légende dans la partie inférieure gauche de l’image, comme indiqué au début de cette procédure.

  7. Prévisualisons maintenant l’affichage de la légende de survol.

    Cliquez sur Aperçu dans la barre d’outils, puis choisissez Projet pour prévisualiser le projet en entier.

Visualisons la procédure que nous avons réalisée.

Dans la barre d’outils, cliquez sur Aperçu et choisissez Projet pour prévisualiser le projet en entier.

Ajout d’images de survol

Remarque :

La sortie HTML5 pour la procédure décrite dans cette section est disponible ici [NOTE INTERNE : Hébergement en attente ]. Vous pouvez l’utiliser comme référence lorsque vous suivez les étapes de la procédure suivante :

L’objet image de survol affiche une image lorsque l’utilisateur place le curseur sur la zone de survol d’une diapositive.

Nous allons maintenant ajouter une forme rectangulaire à la diapositive suivante. Ensuite, nous allons ajouter une image de survol qui affiche une image de l’équipe de Samantha, si un utilisateur passe le curseur sur la forme :

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

    apply-effects.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, vous devez créer un nouveau projet dans Captivate avec une diapositive similaire à celle présentée ci-dessus.

  2. Dans la Bande de film, accédez à la diapositive intitulée Samantha.

  3. Dans la barre d’outils, cliquez sur Formes et choisissez la forme rectangulaire.

  4. Dessinez la forme rectangulaire comme indiqué ci-dessus.

  5. Cliquez deux fois sur la forme et entrez le texte suivant :

    Passez le curseur ici pour voir l’équipe de Samantha

    Ensuite, nous allons ajouter une image de survol au-dessus de cette forme.

  6. Cliquez sur Objets et choisissez Image de survol.

    Une boîte de dialogue s’affiche pour vous permettre de sélectionner un fichier image à partir de votre ordinateur.

  7. Dans le dossier zip téléchargé, accédez au sous-dossier Ressources.

  8. Sélectionnez le fichier sams_team et cliquez sur Ouvrir.

    Lorsque vous ajoutez une image de survol à une diapositive, l’objet a deux parties :

    Image de survol : image qui s’affiche sous condition.

    Zone de survol : zone redimensionnable au-dessus de laquelle les utilisateurs passent le curseur pour afficher l’image.

  9. Utilisez les poignées pour repositionner et redimensionner la zone de survol pour qu’elle couvre la forme ajoutée à l’étape 3 ci-dessus.

  10. Repositionnez l’image de survol comme indiqué au début de cette procédure.

Visualisons la procédure que nous avons réalisée.

Dans la barre d’outils, cliquez sur Aperçu et choisissez Projet pour prévisualiser le projet en entier.

Ajout de mini-diapositives de survol

Remarque :

La sortie HTML5 pour la procédure décrite dans cette section est disponible ici [NOTE INTERNE : Hébergement en attente ]. Vous pouvez l’utiliser comme référence lorsque vous suivez les étapes de la procédure suivante :

Les mini-diapositives de survol permettent d’ajouter des objets Captivate à un objet de survol. Ainsi, lorsqu’un utilisateur passe le curseur au-dessus de la zone de survol, la mini-diapositive s’affiche en entier. Cette fonction est utile si vous souhaitez afficher sous condition plus qu’un simple texte ou des images.

Nous allons maintenant ajouter une mini-diapositive de survol pour afficher plus de détails à propos de Samantha lorsque les utilisateurs passent le curseur sur son image dans la diapositive suivante :

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

    apply-effects.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, vous devez créer un nouveau projet dans Captivate avec une diapositive similaire à celle présentée ci-dessus.

  2. Ouvrez le projet et dans la Bande de film, accédez à la diapositive intitulée Samantha.

  3. Dans la barre d’outils, cliquez sur Objets et choisissez Mini-diapositive de survol.

    Lorsque vous ajoutez une mini-diapositive de survol à une diapositive, cet objet a deux parties :

    Mini-diapositive : conteneur d’objet Captivate affiché sous condition.

    Zone de survol : zone redimensionnable au-dessus de laquelle les utilisateurs passent le curseur pour afficher le contenu de la mini-diapositive.

    Nous allons maintenant ajouter une forme rectangulaire à la mini-diapositive.

    Remarque :

    Vous pouvez ajouter d’autres objets à une mini-diapositive. Pour simplifier, nous ajoutons uniquement une forme rectangulaire.

  4. Sélectionnez la mini-diapositive, cliquez sur Formes et choisissez la forme rectangulaire.

  5. Dessinez la forme rectangulaire dans la mini-diapositive.

  6. Copiez et collez le texte suivant dans la forme rectangulaire :

    À propos de moi : je suis avec Lunarsphere Studios depuis le début. Je n’aime pas qu’on me dise « non » et je veux qu’on me présente des solutions, pas juste des problèmes. 

    Mon film préféré : Casablanca

    Mes meilleurs vacances : Le Caire pour découvrir les pyramides de Gizeh

    Sur ma liste de choses à faire : prendre une leçon de cuisine avec Gordon Ramsay

  7. Utilisez l’Inspecteur des propriétés pour modifier la couleur du texte en blanc et la couleur de la forme en rouge.

  8. Utilisez les poignées pour repositionner et redimensionner la zone de survol pour qu’elle couvre l’image de Samantha à gauche de la diapositive.

Visualisons la procédure que nous avons réalisée.

Dans la barre d’outils, cliquez sur Aperçu et choisissez Projet pour prévisualiser le projet en entier.

Aperçu et publication

Cette section présente de nombreuses informations sur les effets disponibles dans Captivate.

Nous avons appliqué des effets aux objets. Nous avons créé des effets basés sur des événements et ajouté des objets de survol pour afficher sous condition le contenu d’une diapositive.

Nous allons prévisualiser nos progrès.

Cliquez sur Aperçu dans la barre d’outils, puis choisissez Projet pour prévisualiser le projet en entier.

Si vous trouvez un élément manquant, accédez à la section concernée de cet article et faites les mises à jour utiles à votre projet.

Si tout à l’air bon, nous allons publier le projet.

  1. Dans la barre d’outils, cliquez sur Publier et sélectionnez Publier sur ordinateur.

    La boîte de dialogue Publier sur mon ordinateur s’affiche.

  2. Dans la liste déroulante Publier en tant que, assurez-vous que le format HTML5/SWF est sélectionné.

  3. Dans l’option Format de sortie, assurez-vous que le format HTML5 est sélectionné.

  4. Cliquez sur Publier.

Pour plus d’informations, consultez Effets d’objet.

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?

Adobe MAX 2024

Adobe MAX
La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

Adobe MAX

La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

Adobe MAX 2024

Adobe MAX
La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne

Adobe MAX

La conférence sur la créativité

Du 14 au 16 octobre à Miami Beach et en ligne