Share
Voici la dernière partie de notre didacticiel sur les lecteurs vidéo! Tout ce que nous avons à faire maintenant, c’est de faire en sorte que l’indicateur de temps fonctionne, d’ajouter notre fonction de clic sur le bouton d’accueil, de positionner et de dimensionner la vidéo en cours, et de remplir la barre en vedette de vidéos avec son défilement. Commençons!
Nous devons d’abord ajouter à la scène un écouteur appelé videoTimeEnterFrame qui met à jour l’heure de la vidéo à chaque image. Ajouter cette ligne à la fonction videoItemClick.
stage.addEventListener (Event.ENTER_FRAME, videoTimeEnterFrame); // lance cette fonction chaque fois que nous entrons dans un nouveau cadre
Ajoutons maintenant la fonction videoTimeEnterFrame.
function videoTimeEnterFrame (event: Event): void var totalSeconds: Number = ns.time; // variable pour contenir le ns.time var totalSeconds2: Number = duration; // variable pour contenir la durée var minutes: Number = Math.floor (totalSeconds / 60); // variable permettant de diviser le totalSeconds arrondi par 60 var minutes2: Number = Math.floor (totalSeconds2 / 60); // variable pour contenir le total arrondi vers le bas totalSeconds2 divisé par 60 var secondes = Math.floor (totalSeconds)% 60; // variable pour obtenir 60% du totalSeconds var seconds2 = Math.floor (totalSeconds2)% 60; // variable pour obtenir 60% du totalSecond2 if (secondes < 10) // if the seconds variable is less than 10 then… seconds = "0" + seconds; // the seconds variable is equal to 0:seconds if(seconds2 < 10) // if the seconds2 variable is less than 10 then… seconds2 = "0" + seconds2; // the seconds2 variable is equal to 0:seconds videoTimeTxt.text = minutes + ":" + seconds + " / " + minutes2 + ":" + seconds2; // update the videoTimeTxt field with the total time and current time.
Ajouter l’auditeur de clic pour le bouton principal nous permettra de revenir au niveau supérieur de la galerie actuelle. Ajoutez ceci au haut de notre code en dessous de nos autres fonctions que nous avons au démarrage.
homeBtn.addEventListener (MouseEvent.CLICK, homeBtnClick); // écouteur lorsque l'utilisateur clique sur le bouton d'accueil
fonction homeBtnClick (event: MouseEvent): void if (currentGallery == 0) // si la variable currentGallery est égale à 0 Tweener.addTween (conteneur_mc, alpha: 0, heure: .5, transition: "aisance", onComplete : removeGallery0); // interpole le conteneur_mc et exécute la fonction removeGallery0 if (currentGallery == 1) Tweener.addTween (conteneur_mc, alpha: 0, heure: .5, transition: "aisance", onComplete: removeGallery1); if (currentGallery == 2) Tweener.addTween (conteneur_mc, alpha: 0, heure: .5, transition: "aisance", onComplete: removeGallery2);
Testez votre film, cliquez sur une galerie pour voir la liste des vidéos. Maintenant, cliquez sur le bouton d'accueil. Votre lecteur va maintenant effacer les vidéos actuelles et les remplacer par les éléments de la catégorie actuelle.
Pour définir videoWidth & videoHeight, nous devons ajouter du code pour obtenir d’abord les valeurs. Nous devons ajouter ce code à la fonction videoItemClickFunction au-dessus de la ligne ns.play.
videoWidth = xml.GALLERY [currentGallery] .CATEGORY [categoryItemName] .ITEM [videoItemName] .file_width; // récupère la largeur de la vidéo à partir du xml videoHeight = xml.GALLERY [currentGallery] .CATEGORY [categoryItemName] .ITEM [videoItemName] .file_height; // obtient la hauteur de la vidéo à partir du xml video.width = videoWidth; // définit la largeur de la vidéo sur la variable videoWidth video.height = videoHeight; // définit la hauteur de la vidéo sur la variable videoHeight
Nous avons maintenant la vidéo réglée sur la largeur et la hauteur correctes. La dernière chose à faire est de le positionner au milieu de la zone de visualisation. Ajoutez cette ligne à la fonction videoItemClickFunction au-dessus de la ligne ns.play (currentVideo): void.
positionVideo ();
Ajoutez ensuite la fonction pour gérer l'événement positionVideo.
fonction positionVideo (): void video.x = 0; // définit le x de la vidéo sur 0 video.y = 0; // définit la y sur 0 pour la vidéo var vidWidthDif = videoBlackBox.width - videoWidth; // récupère la différence entre la largeur de videoBlackBox et la largeur de la vidéo - conservez-la dans cette variable var vidHeightDif = videoBlackBox.height - videoHeight; // récupère la différence entre la hauteur de la videoBlackBox et la hauteur de la vidéo - conservez-la dans cette variable video.x = vidWidthDif / 2; // positionne la vidéo x de la vidéo.y = vidHeightDif / 2; // positionne la vidéo y
Couper et coller cette ligne au bas de la fonction positionVideo.
ns.play (currentVideo);
Maintenant, si vous testez votre fichier, la vidéo obtiendra la largeur et la hauteur définies dans le code XML et changera ses dimensions, puis lira la vidéo..
Ces variables créeront et maintiendront nos articles en vedette dans un MovieClip.
var en vedetteContainer: MovieClip; // crée un nouveau MovieClip pour contenir les éléments de la vidéo en vedette var selectedThumbLoader: Loader; // crée un nouveau chargeur pour charger les vidéos présentées var featureItemName; // crée une nouvelle variable selectedItemName pour contenir le nom de l'élément présenté sur lequel nous allons cliquer
Afin de rechercher les vidéos en vedette dans le fichier XML, ajoutez ce code à la fonction myXmlLoaded. Il passera en boucle dans toutes les vidéos et retournera celles qui sont définies sur true.
checkForFeaturedVids (); // lance cette fonction quand le XML est chargé
Cette fonction est identique à la fonction makeGalleryItems que nous avons configurée dans la partie 2. Nous allons créer les MovieClips de FeatureItem pour le conteneur FeaturedContainer en fonction du fichier XML, les disposer et les espacer correctement, le charger dans la vignette et supprimer le préchargeur à l’aide d’un fichier séparé. fonction ci-dessous.
Note de l'éditeur: Et bien, nous y revoilà… Ceux qui utilisaient FireFox auraient trouvé la page gelée grâce à ce petit bloc d’ActionScript. Pour que tout fonctionne correctement, voici le code à télécharger. Désolé pour le dérangement.
Nous devons maintenant définir un auditeur pour gérer ce qui se passe lorsque nous cliquons sur un élément sélectionné. Ajoutez cette ligne à l'instruction if dans la fonction checkForFeaturedVids sous les écouteurs myFeaturedItems btnOver & btnOut.
myFeaturedItem.addEventListener (MouseEvent.CLICK, myFeaturedItemClick);
Voici ce qui se passe lorsque nous cliquons sur un élément présenté:
function myFeaturedItemClick (event: MouseEvent): void FeaturedItemName = event.target.name; // récupère l'élément en cours et le définit sur la variable selectedItemName currentVideo = xml.GALLERY.CATEGORY.ITEM.file_path [FeaturedItemName]; // définit notre variable currentVideo sur la vidéo sélectionnée dans le fichier XML videoTitleTxt.text = xml.GALLERY.CATEGORY.ITEM.file_title [FeaturedItemName]; // définition du nom du titre vidéo videoWidth = xml.GALLERY.CATEGORY.ITEM.file_width [FeaturedItemName]; // récupère la largeur de la vidéo videoHeight = xml.GALLERY.CATEGORY.ITEM.file_height [FeaturedItemName]; // récupère la hauteur de la vidéo video.width = videoWidth; // définit la largeur de la vidéo video.height = videoHeight; // définit la hauteur de la vidéo positionVideo (); // lance cette fonction stage.addEventListener (Event.ENTER_FRAME, videoTimeEnterFrame); // changer le temps de lecture vidéo
Ajoutez d'abord une variable pour contenir les noms des noms abrégés de MovieClips.
var selectedScrollTrack: MovieClip = FeaturedBox_mc.featuredScrollbar_mc.featuredScrollbarTrack_mc; var selectedScrollThumb: MovieClip = FeaturedBox_mc.featuredScrollbar_mc.featuredScrollbarThumb_mc; var selectedScrollMask: MovieClip = FeaturedBox_mc.featuredScrollbar_mc.featuredMasker_mc; var xOffset: Number; var xMin: Number = 0; var xMax: Number; var selectedThumbDif: Number;
Ajoutez ensuite ces lignes en haut de notre code sous les autres écouteurs qui commencent lorsque le fichier est ouvert..
selectedScrollThumb.addEventListener (MouseEvent.MOUSE_OVER, btnOver); selectedScrollThumb.addEventListener (MouseEvent.MOUSE_OUT, btnOut); selectedScrollThumb.buttonMode = true; selectedScrollThumb.mouseChildren = false;
Ici, nous allons faire quelque chose de très similaire à la fonction checkFeaturedContainerWidth de la partie 2.
function checkFeaturedContainerWidth (): void if (sélectionnéeContainer.width> sélectionnéeScrollMask.width) linkFeaturedScroller (); sélectionnéeScrollThumb.addEventListener (MouseEvent.MOUSE_DOWN, sélectionnéeScrollbarThumbDown); stage.addEventListener (MouseEvent.MOUSE_UP, selectedScrollbarThumbUp); selectedScrollThumb.visible = true; sélectionnéeScrollThumb.alpha = 0; Tweener.addTween (selectedScrollThumb, alpha: 1, heure: .5, transition: "aisance"); else FeaturedScrollThumb.removeEventListener (MouseEvent.MOUSE_DOWN, sideScrollbarThumbDown); stage.removeEventListener (MouseEvent.MOUSE_UP, selectedScrollbarThumbUp); Tweener.addTween (selectedScrollThumb, alpha: 0, heure: .5, transition: "aisance", onComplete: hideFeaturedScrollbarThumb); function hideFeaturedScrollbarThumb (): void FeaturedScrollThumb.visible = false;
Ajoutez les fonctions à utiliser avec les écouteurs dans la fonction checkFeaturedContainerWidth.
Accentsconagua
function linkFeaturedScroller (): void FeaturedScrollThumb.x = 0; selectedContainer.mask = selectedScrollMask; xMax = selectedScrollTrack.width - selectedScrollThumb.width; function FeatureScrollbarThumbDown (événement: MouseEvent): void FeaturedScrollThumb.removeEventListener (MouseEvent.MOUSE_OVER, btnOver); selectedScrollThumb.removeEventListener (MouseEvent.MOUSE_OUT, btnOut); stage.addEventListener (MouseEvent.MOUSE_MOVE, selectedScrollbarThumbMove); xOffset = mouseX - selectedScrollThumb.x; function FeatureScrollbarThumbUp (événement: MouseEvent): void FeaturedScrollThumb.addEventListener (MouseEvent.MOUSE_OVER, btnOver); selectedScrollThumb.addEventListener (MouseEvent.MOUSE_OUT, btnOut); selectedScrollThumb.gotoAndStop ("terminé"); Tweener.addTween (sélectionnéeContainer, _Blur_blurX: 0, heure: 1, transition: "aisanceOut"); stage.removeEventListener (MouseEvent.MOUSE_MOVE, selectedScrollbarThumbMove); function vedetteScrollbarThumbMove (événement: MouseEvent): void FeaturedScrollThumb.x = mouseX - xOffset; if (selectedScrollThumb.x <= xMin) featuredScrollThumb.x = xMin; else if(featuredScrollThumb.x >= xMax) FeaturedScrollThumb.x = xMax; selectedThumbDif = selectedScrollThumb.x / xMax; Tweener.addTween (FeaturedContainer, x: (- FeaturedThumbDif * (FeaturedContainer.width - FeaturedScrollMask.width)) + 25), _Blur_blurX: 5, heure: 1, transition: "aisance",); event.updateAfterEvent (); Alors voilà, donnez-vous une tape dans le dos si vous avez fini et commencez à mettre des vidéos sur le web!
!
