Ajouter de l'interactivité

Le fait de créer de l'interactivité (l'interaction entre l'utilisateur et une application) contribue à montrer les divers moyens utilisables par l'utilisateur pour interagir avec une application. Microsoft Expression Blend fournit de nombreux outils différents pour montrer 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 sur l'ajout d'interactivité à un projet SketchFlow, voir Getting.

Animation

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.

Animation par images clés

Vous pouvez utiliser les outils d'animation par images clés d'Expression 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 Expression Blend, voir Animation d'objets.

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, voir Créer, modifier ou supprimer une trajectoire.

Animation SketchFlow

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 d'affichage 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.

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 SketchFlow pour créer une nouvelle animation SketchFlow. Une nouvelle image s'affiche dans le panneau Animation SketchFlow.

   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 état 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 ».

   

4. 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. Vous pouvez double-cliquer à l'intérieur de l'image et taper une nouvelle valeur ou cliquer une fois et utiliser les touches Haut et Bas pour augmenter ou diminuer la durée d'affichage de l'image.

5. 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. Vous pouvez double-cliquer à l'intérieur de l'image et taper une nouvelle valeur ou cliquer une fois et utiliser les touches Haut et Bas pour augmenter ou diminuer la durée de transition.

6. 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.

   • 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.

Barre d'outils de l'animation SketchFlow

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

	Accéder à la première image.
	Lire l'animation.
	Ancrer les éditeurs chronologiques.
	Activer ou désactiver la présentation fluide. Pour plus d'informations, voir Transition douce entre les changements de disposition.
	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.
	Utilisez le contrôle ScrollBar pour naviguer dans les images de l'animation.

États visuels

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érents éléments d'interface utilisateur (IU) selon qu'un utilisateur est connecté ou non. Vous pouvez utiliser des états visuels pour créer deux options d'affichage d'un même écran dans votre prototype : une dans laquelle l'utilisateur est connecté, et une autre dans laquelle l'utilisateur n'est pas connecté. Dans un prototype, il peut y avoir plusieurs variantes d'apparence pour un écran donné. 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 des états, et Fermer et Ouvrir sont deux états différents définis pour l'écran.

É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 Définition d'états visuels différents pour un contrôle.

Comportements

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, voir Ajout de comportements aux objets.

Navigation et changements d'état

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.

Exemple de données

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 Expression 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, voir Création d'un échantillon de données.