Contrôler des éléments multimédias à l’aide de déclencheurs dans une chronologie

Un élément multimédia peut contenir une référence à un fichier audio (format WAV et autres formats) ou à un fichier vidéo (format WMV). Vous pouvez utiliser des déclencheurs d’événements dans la chronologie d’une animation afin de contrôler la lecture d’un élément multimédia.

L’exemple suivant montre comment contrôler la lecture vidéo en déclenchant la chronologie de la vidéo lorsque le pointeur de la souris entre dans la zone d’affichage vidéo et lorsqu’il en sort. Pour plus d’informations sur la façon de modifier les chronologies, voir Animation, Déclencheurs et interactivité avec l’utilisateur et Gestion des événements et interactivité utilisateur. Cet exemple définit des déclencheurs sur les événements MouseEnter et MouseLeave d’un objet de la planche graphique. Pour connaître la liste des autres événements sur lesquels vous pouvez définir des déclencheurs, voir Référence rapide des événements WPF.

Remarque :

Les déclencheurs ne sont pas disponibles dans les projets Microsoft Silverlight 1.0. En outre, lorsque vous ajoutez un fichier audio ou vidéo à un projet Silverlight 1.0, aucune chronologie n’est créée. Pour obtenir des instructions sur la procédure à suivre pour contrôler les tables de montage séquentiel dans un projet Silverlight 1.0, voir Contrôler la lecture d’un média dans un projet Silverlight.

Attention :
Pour utiliser des médias dans Microsoft Expression Blend, vous devez installer le Lecteur Windows Media 10 sur votre ordinateur. Vous pouvez télécharger le Lecteur Windows Media 10 sur le site Windows Media.

Pour contrôler la lecture vidéo avec le pointeur de la souris

1. Pour donner davantage d’espace au panneau Interaction dans l’espace de travail d’Expression Blend, basculez vers l’Espace de travail d’animation (F6). Cette action entraîne le déplacement du panneau Interaction sous la planche graphique.

2. Sous Objets et chronologie, activez l’objet dans lequel vous souhaitez ajouter la vidéo en double-cliquant sur cet objet. Par exemple, pour ajouter la vidéo à la racine de votre application, double-cliquez sur LayoutRoot.

3. Ajoutez le fichier vidéo à la planche graphique : pour ce faire, vous devez ajouter au préalable le fichier vidéo à votre projet (Ctrl+I), puis double-cliquer sur le fichier vidéo dans le panneau Projet. Un élément multimédia est créé sous Objets et chronologie avec la propriété Source ayant pour valeur le chemin d’accès à votre fichier vidéo.

   • Si une chronologie est sélectionnée avant que vous n’ajoutiez le fichier multimédia à la planche graphique, l’élément multimédia est inséré dans cette chronologie ; par ailleurs, l’élément multimédia est planifié pour démarrer à la position actuelle du curseur de lecture.

   • Si aucune chronologie n’est sélectionnée, une chronologie d’élément multimédia est créée et l’élément multimédia est ajouté à cette nouvelle chronologie à la position correspondant à 0 seconde.

   Pour une procédure complète qui vous montre comment ajouter des éléments multimédias à la planche graphique, voir la rubrique Insérer un fichier image, audio ou vidéo dans le document actif.

4. Sous Déclencheurs, dans le panneau Interaction, un nouveau déclencheur d’événements a été ajouté pour l’événement Window.Loaded. Cliquez sur Window.Loaded pour voir l’action déclenchée par l’événement Window.Loaded. Par défaut, la chronologie de la vidéo démarre. Nous voulons que la vidéo soit lue lorsque le pointeur de la souris passe au-dessus de la zone d’affichage vidéo et que la lecture s’arrête lorsque le pointeur de la souris quitte la zone d’affichage vidéo. La première tâche consiste à suspendre la lecture de la vidéo dès son démarrage lors du chargement de la fenêtre de l’application.

5. Sous Déclencheurs, cliquez sur le bouton Ajouter une nouvelle action  situé en regard de Quand Window.Loaded se déclenche. Une seconde action par défaut apparaît dans la liste, ce qui entraîne l’appel de la méthode timeline.Begin.

6. Cliquez sur la zone de liste déroulante de méthode et sélectionnez Suspendre. Le panneau Interaction doit ressembler l’image suivante. La vidéo va démarrer, puis s’arrêter dès le chargement de la fenêtre de l’application.

   Ajout d’une autre action au déclencheur d’événements Window.Loaded

   

7. Pour connecter la chronologie du film à un événement de souris, vous devez ajouter un nouveau déclencheur d’événements. Cliquez sur le bouton Ajouter un déclencheur d’événements  sous Déclencheurs. Un nouveau déclencheur d’événements par défaut s’affiche dans la liste lorsque l’événement Window.Loaded se déclenche.

8. Cliquez dans la liste déroulante de l’objet pour modifier la sélection en remplaçant Window par le nom de votre élément multimédia. Par exemple, dans l’image précédente, le nom de l’élément multimédia est SampleMovie_wmv.

   Conseil :
   Si vous ne voyez pas le nom de votre élément multimédia, sélectionnez-le sous Objets et chronologie, puis recommencez cette étape.

9. Cliquez sur la liste déroulante de la méthode pour modifier la sélection en remplaçant Loaded par MouseEnter. L’événement MouseEnter se trouve dans la catégorie UIElement. Le déclencheur doit désormais indiquer Quand element.MouseEnter se déclenche. Aucune action n’a encore été créée.

   Conseil :

   Si vous utilisez un fichier audio au lieu d’un fichier vidéo, vous pouvez sélectionner l’événement MouseEnter pour l’élément multimédia qui contient le fichier vidéo. Toutefois, les utilisateurs ne sauront pas où placer le pointeur car l’élément multimédia ne sera pas visible dans votre application. Vous pouvez également ajouter un bouton à la planche graphique et créer un déclencheur pour l’événement Click du bouton.

10. Cliquez sur le bouton Ajouter une nouvelle action  situé en regard de Quand element.MouseEnter se déclenche. Une action par défaut apparaît dans la liste, ce qui entraîne l’appel de la méthode timeline.Begin.

11. La chronologie a déjà commencé lorsque la fenêtre a été chargée, par conséquent changez la méthode en timeline.Pause. À présent, la lecture du film est suspendue lorsque le pointeur de la souris passe au-dessus de la zone d’affichage.

12. Ajoutez un autre déclencheur d’événements () et modifiez-le pour lire Quand element.MouseLeave se déclenche.

13. Ajoutez une nouvelle action () appelant la méthode timeline.Resume. À présent, la lecture du film reprend lorsque le pointeur de la souris quitte la zone d’affichage. Vous pouvez également choisir d’arrêter et de redémarrer la lecture du film au lieu de la suspendre et de la reprendre.

    Ajout des déclencheurs d’événements MouseEnter et MouseLeave et d’actions pour suspendre et reprendre la lecture du film

    

14. Afin de vous assurer que l’élément multimédia vidéo est redimensionné dans la fenêtre, définissez les propriétés suivantes dans le panneau Propriétés :

    • Dans la section avancée de la catégorie Média du panneau Propriétés, affectez à la propriété Stretch de votre élément multimédia la valeur Uniform. Ce paramètre permet de conserver les proportions de la zone d’affichage vidéo.

    • Dans la catégorie Disposition du panneau Propriétés, affectez aux propriétés Width et Height de votre élément multimédia la valeur Auto. Ce paramètre permet de redimensionner la zone d’affichage vidéo en même temps que la fenêtre de l’application. Si votre zone d’affichage vidéo n’est pas redimensionnée en même temps que la fenêtre de l’application, vérifiez si l’élément multimédia ne se trouve pas dans un élément du panneau ayant une taille spécifique.

15. Testez votre application (F5). Observez le comportement de la zone d’affichage vidéo lorsque vous la survolez à l’aide du pointeur.

Voir aussi

Concepts

Créer un bouton qui contrôle une table de montage séquentiel dans une application Silverlight