Pour afficher l’article en anglais, activez la case d’option Anglais. Vous pouvez aussi afficher la version anglaise dans une fenêtre contextuelle en faisant glisser le pointeur de la souris sur le texte.
Traduction
Anglais

Ajouter de l’interactivité

Le fait de créer de l'interactivité (l'interaction entre l'utilisateur et une application) montrent les différentes façons dont un utilisateur peut interagir avec une application. Blend for Visual Studio fournit de nombreux autres outils pour illustrer le comportement interactif de votre prototype. Par exemple, vous pouvez effectuer l’une des opérations suivantes :

  • Simuler un comportement interactif en utilisant une animation.

  • Ajouter la navigation aux éléments de votre prototype.

  • Créer des prototypes d’interfaces utilisateur guidés par les données en utilisant des exemples de données et des liaisons de données.

  • Appliquer des comportements aux éléments de votre prototype.

Pour plus d'informations concernant l'ajout d'interactivité à un projet SketchFlow, consultez Mise en route avec SketchFlow.

Il est parfois utile d’ajouter des séquences animées à un prototype pour montrer les possibilités d’interaction. Vous pouvez utiliser des outils d’animation par images clés tels que ceux disponibles dans le panneau Objets et chronologie, ou utiliser le panneau États ou le panneau Animation SketchFlow pour créer une séquence animée simple.

Pour plus d’informations sur l’utilisation des états, voir « États visuels » plus loin dans cette rubrique.

Vous pouvez utiliser les outils d’animation par images clés d’Blend pour créer des séquences animées dans des écrans de votre projet SketchFlow. Vous pouvez utiliser des animations par images clés en liaison avec des états visuels (par exemple, une animation déclenchée lorsqu’un certain état est atteint), ou indépendamment de ces états (par exemple, lorsqu’une animation est déclenchée par une action).

Pour plus d’informations sur la création d’animations dans Blend, voir Animating objects in your application.

Dans les applications Windows Presentation Foundation (WPF), vous pouvez également utiliser des trajectoires pour créer des séquences animées. Pour plus d'informations, consultez Create, modify, or delete a motion path.

Les animations par images clés peuvent être très utiles. Toutefois, les animations par images clés peuvent aussi comporter de nombreux détails dont la mise en œuvre risque de sortir du cadre d’un projet prototype. Les animations SketchFlow sont des séquences basées sur le principe de la table de montage séquentiel qui peuvent être créées rapidement et facilement dans le panneau Animation SketchFlow. Tout comme les animations par images clés et les états, les animations SketchFlow contribuent à montrer les interactions possibles de l’utilisateur.

Dans une animation SketchFlow, vous utilisez le panneau Animation SketchFlow pour créer une séquence d’instantanés en ajoutant une nouvelle image au panneau puis en ajustant la « scène » sur la planche graphique pour cette image. Vous pouvez facilement ajuster la durée de transition et de suspension de chaque image. Vous pouvez lire la séquence d’animation directement dans la fenêtre du document en cliquant sur Lecture dans le panneau Animation SketchFlow, ou vous pouvez générer et exécuter le projet en cliquant sur F5, puis lire l’animation dans le Lecteur SketchFlow.

Voici un exemple d’animation SketchFlow. Dans les images suivantes, le pointeur se déplace du coin inférieur droit à l’image « Halo 2 », puis l’action d’un clic est simulée par une étoile rouge. L’image « Halo 2 » se déplace ensuite vers la gauche et le pointeur se déplace vers la droite.

df44ecfb-df4c-40c8-aefb-16243eeea90b 02c55e22-17c4-404d-90a4-2fd308993ad7 9cd3432b-4dd3-4751-80d3-28bfc57f73b3 914aa328-b7ca-4484-82a6-b6a5b8c24d84 fba8a139-19c5-4a84-b0d2-1bce67266301

Pour créer cette animation SketchFlow

  1. Ouvrez l’écran sur lequel vous voulez ajouter une animation. Dans le panneau Animation SketchFlow, cliquez sur Nouvelle animation SketchFlowB4_SF_AddAnimationFrame pour créer une nouvelle animation SketchFlow. Une nouvelle image s’affiche dans le panneau Animation SketchFlow.

    Remarque Remarque

    Si le panneau Animation SketchFlow n’est pas affiché, dans le menu Fenêtre, cliquez sur Animation SketchFlow.

    Dans cet exemple, l’état Base (l’état normal de l’écran) est celui de la première image.

  2. Ajoutez une image en cliquant sur Ajouter un étatB4_SF_AddAnimationFrameWhite dans la première image.

  3. Sélectionnez l’objet que vous voulez déplacer et faites-le glisser sur l’emplacement souhaité. Dans cet exemple, le pointeur se déplace du coin inférieur droit à la lettre « o » de « Halo ».

    9cd3432b-4dd3-4751-80d3-28bfc57f73b3
  4. Vous pouvez également effectuer l’une des opérations suivantes :

    • Modifier la durée de suspension   Vous pouvez modifier la durée de suspension d’une image (le temps pendant lequel l’état actuel est affiché) en positionnant le pointeur sur l’image jusqu’à ce que la boîte de dialogue Modifier la durée de suspension s’affiche. Double-cliquez à l’intérieur de l’image et taper une nouvelle valeur ou cliquer une fois et utiliser les touches Haut ou Bas pour augmenter ou diminuer la durée de suspension.

    • Pause et reprise   Vous pouvez ajouter des fonctionnalités de suspension et de reprise de votre animation à l’aide du bouton Suspendre dans le panneau Animation SketchFlow. L’animation s’interrompt lorsqu’elle atteint le cadre dans lequel la fonctionnalité de suspension et de reprise a été ajoutée. Vous pouvez reprendre l’animation en cliquant sur le titre de l’animation dans le panneau Naviguer dans le lecteur SketchFlow.

      Le bouton Suspendre apparaît en regard de la zone Modifier la durée de suspension lorsque vous placez votre pointeur sur une image d’animation. Lorsque vous cliquez sur le bouton Suspendre SketchFlow Animation Pause On icon, la zone Modifier la durée de suspension n’est plus disponible.



      Zone EditHoldTime et bouton Suspendre dans une image d’animation

      SketchFlowAnimation Hold Time & Pause On button
    • Modifier la durée de transition   Vous pouvez modifier la durée de la transition entre les images (le laps de temps requis pour passer d’une image à une autre) en cliquant sur la boîte de dialogue Modifier la durée de transition entre les images. Double-cliquez à l’intérieur de l’image et taper une nouvelle valeur ou cliquer une fois et utiliser les touches Haut ou Bas pour augmenter ou diminuer la durée de transition entre les images.

    • Effets de transition   Appliquez un élément TransitionEffect à une animation SketchFlow lorsque la durée de transition est supérieure à 0. Dans le panneau Animation SketchFlow, cliquez sur TransitionEffectsTransition effect icon, puis sélectionnez l'effet de transition souhaité dans la liste déroulante TransitionEffect. Vous pouvez également modifier le temps de transition pour TransitionEffect.

      Pour plus d’informations à ce sujet, voir Apply a transition effect to a visual state change in Blend.

    • Fonction d’accélération   Appliquez également une fonction EasingFunction intégrée en cliquant sur EasingFunction 9718b395-a71d-40b2-9d08-8e29a225151f, puis en sélectionnant la fonction d’accélération de votre choix dans la liste déroulante EasingFunction.

  5. Lorsque votre animation SketchFlow est terminée, vous pouvez en avoir un aperçu en effectuant l’une des actions suivantes :

    • Cliquez sur Lecture dans la barre d’outils SketchFlow.

      Remarque Remarque

      Si vous avez utilisé la fonctionnalité de suspension et reprise dans une animation SketchFlow, la suspension est remplacée par une durée de suspension de 1 seconde lorsque vous prévisualisez votre animation dans le panneau Animation SketchFlow.

    • Cliquez avec le bouton droit sur la planche graphique, cliquez sur Lire l’animation SketchFlow puis sélectionnez l’animation que vous voulez lire.

    • Générez puis exécutez le projet en appuyant sur F5, puis visualisez votre animation dans le Lecteur SketchFlow.

Vous pouvez utiliser la barre d’outils de l’Animation SketchFlow pour effectuer les actions suivantes dans le panneau Animation SketchFlow :

1afe5d56-20d8-400a-b643-13577ae593cd

Accéder à la première image.

0272e62e-0ad4-43ab-b0ac-f0767907e63b

Lire l’animation.

d2d47333-c15d-4aa0-9633-95f39cb96ae0

Ancrer les éditeurs chronologiques.

1ebe2b0a-5891-47f3-be05-fa90157b9312

Activer ou désactiver la présentation fluide.

Pour plus d'informations, consultez Transition between layout changes smoothly in Blend.

3308f172-fdae-40f8-ba84-17b679e94134

Utilisez les flèches pour ouvrir une Animation SketchFlow à partir d’une liste déroulante.

Utilisez l’icône de signe + pour ajouter une table de montage séquentiel.

Utilisez la flèche simple pour créer, supprimer ou fermer des tables de montage séquentiel.

c83900c7-5245-4075-8cbf-99e9015f234b

Utilisez le contrôle ScrollBar pour naviguer dans les images de l’animation.

Vous pouvez également montrer l’interactivité de votre prototype en utilisant des états visuels pour définir plusieurs variantes pour un même écran. Il existe de nombreux scénarios dans lesquels il peut être utile de disposer de plusieurs états d’un même écran pour créer un prototype, notamment dans les exemples suivants :

  • Un écran dans une application peut afficher différentes interface utilisateur (UI) selon que l'utilisateur est connecté ou non. Utilisez les états visuels pour créer deux options d'affichage pour un même écran dans votre prototype : un dans lequel l'utilisateur est connecté, et un autre dans lequel l'utilisateur n'est pas connecté. Il peut exister plusieurs variantes de design pour un écran donné dans un prototype. Vous pouvez créer un état pour chacune de ces variantes du même écran.

  • Étant donné que les états peuvent contenir des animations, vous pouvez créer différent états pour le même écran et inclure des animations. L’animation dans un état peut ensuite être déclenchée en affichant l’état de l’écran qui contient l'animation.

Lorsque vous exécutez un projet SketchFlow dans le Lecteur SketchFlow, les états s’affichent sous forme de commandes distinctes dans le panneau Naviguer. Dans l’image suivante, Transitions    est le groupe d’états, et Fermer et Ouvrir sont deux états différents définis pour l’écran.

c91a4238-54c4-43ac-b09b-3407eaf58d4e

Étant donné que vous pouvez utiliser des commandes pour naviguer entre les états, vous n’avez pas besoin de créer de déclencheurs pour basculer entre les états que vous avez créés sur la planche graphique.

Pour plus d’informations sur les états visuels, voir Defining different visual states for a control in Blend.

Les comportements sont des portions de code prédéfinies que vous pouvez appliquer rapidement et facilement à un élément pour créer l’interactivité. Les comportements peuvent être aussi simples que les actions qui sont déclenchées lorsqu’un événement se produit (par exemple lorsque l’on clique sur un bouton, lorsqu’une animation commence) ou peuvent encapsuler plusieurs événements déclenchés par plusieurs actions.

Les comportements sont des outils puissants pour la création de prototypes. Par exemple, vous pouvez ajouter un contrôle à un écran, puis appliquer un comportement à ce contrôle. Vous pouvez ensuite générer et exécuter le projet (F5) : le contrôle auquel vous avez ajouté le comportement se comportera sur l’écran comme il le ferait dans une application finale.

Les comportements SketchFlow prédéfinis incluent la navigation Arrière et Avant ainsi qu’un comportement Atteindre qui peut être appliqué à un contrôle dans SketchFlow.

Pour plus d'informations, consultez Utilisation des comportements intégrés SketchFlow.

Lorsque vous visualisez un prototype dans le Lecteur SketchFlow, vous pouvez naviguer entre les écrans et déclencher des changements d’état au moyen du panneau Naviguer. Cette fonctionnalité signifie que vous pouvez naviguer dans votre prototype sans avoir à ajouter de code ou d’éléments d’interface utilisateur, même s’il ne contient que quelques croquis sommaires.

Vous pouvez aussi ajouter rapidement et facilement des comportements SketchFlow aux éléments d’interface utilisateur que vous avez dessinés sur votre planche graphique, lesquels vous permettent de naviguer entre les écrans ou de lire des animations que vous avez ajoutées à votre prototype.

Pour ajouter un comportement « Lire l’animation SketchFlow » à un contrôle

  • Cliquez avec le bouton droit sur le contrôle auquel vous voulez ajouter ce comportement, cliquez sur Lire l’animation SketchFlow, puis cliquez sur l’animation que vous voulez lire lorsque l’on clique sur le contrôle.

De nombreuses applications reposent sur des bases de données pour générer des informations. Il peut s’avérer difficile de modéliser un comportement guidé par les données sans disposer de données réelles pour élaborer un prototype. Avec Blend, vous pouvez maintenant créer un exemple de source de données, puis lier ces données aux contrôles. Vous pouvez utiliser des exemples de données dans votre prototype pour modéliser des interfaces utilisateur guidées par les données simulant le caractère dynamique de véritables scénarios utilisateur guidés par les données.

Pour plus d'informations, consultez Creating sample data in Blend.

Afficher: