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

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

Cette page s’applique uniquement aux projets WPF

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 des objets etSe connecter à une méthode de gestionnaire d’événements existante. 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 Controls, properties, and events reference (Blend).

Mise en garde Attention

Pour utiliser des médias dans Blend for Visual Studio, vous devez installer le Lecteur Windows Media 12 sur votre ordinateur. Téléchargez le Lecteur Windows Media 12 à partir de Site Web Windows Media.

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

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

  2. Sous le panneau Objets et chronologie, activez l'objet dans lequel vous voulez ajouter la vidéo en double-cliquant sur cet objet. Par exemple, pour ajouter la vidéo à la racine de votre application, 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éé dans le panneau 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 audio ou vidéo dans le document actif.

  4. Sous le panneau Déclencheurs, 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 le panneau Déclencheurs, cliquez sur Ajouter une nouvelle action JJ170348.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(fr-fr,VS.120).png 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 Déclencheurs 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

    JJ170348.eb6a6c52-1702-4c26-a700-a8e7d92e06e5(fr-fr,VS.120).png
  7. Pour connecter la chronologie du film à un événement de souris, vous devez ajouter un nouveau déclencheur d’événements. Cliquez sur ajouter un déclencheur d'événement JJ170348.671c69bb-32e9-4ef9-9837-29403524abd0(fr-fr,VS.120).png dans le panneau 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 Wildlife_wmv.

    Conseil Conseil

    Si vous ne voyez pas le nom de votre élément multimédia, sélectionnez-le dans le panneau 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 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 Ajouter une nouvelle action JJ170348.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(fr-fr,VS.120).png en regard de Quand element.MouseEnter est déclenché. 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 (JJ170348.671c69bb-32e9-4ef9-9837-29403524abd0(fr-fr,VS.120).png) et modifiez-le pour lire Quand element.MouseLeave se déclenche.

  13. Ajoutez une nouvelle action (JJ170348.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(fr-fr,VS.120).png) 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

    JJ170348.526e02a2-01a7-429f-88c4-d7532257c802(fr-fr,VS.120).png
  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 objet 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.

Afficher: