Share
Aquí está, la parte final de nuestro tutorial de reproductor de video! Todo lo que tenemos que hacer ahora es hacer que funcione el indicador de tiempo, agregar nuestra función de hacer clic con el botón de inicio, ubicar y dimensionar el video actual y obtener la barra destacada llena de videos junto con su depurador. Empecemos!
Primero debemos agregar un oyente a la etapa llamada videoTimeEnterFrame que actualiza el tiempo de video cada fotograma. Agregue esta línea a la función videoItemClick.
stage.addEventListener (Event.ENTER_FRAME, videoTimeEnterFrame); // ejecuta esta función cada vez que ingresamos un nuevo marco
Ahora vamos a agregar la función videoTimeEnterFrame.
function videoTimeEnterFrame (event: Event): void var totalSeconds: Number = ns.time; // variable para mantener ns.time var totalSeconds2: Number = duration; // variable para mantener la duración var minutes: Number = Math.floor (totalSeconds / 60); // variable para mantener el total redondeado de Segundos dividido por 60 var. minutos2: Número = Math.floor (total de Segundos2 / 60); // variable para mantener el total redondeado de Segundos2 dividido por 60 var segundos = Math.floor (totalSegundos)% 60; // variable para obtener el 60 por ciento del total de segundos var seconds2 = Math.floor (totalSeconds2)% 60; // variable para obtener el 60 por ciento del totalSegundo2 si (segundos < 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.
Agregar el detector de clics al botón de inicio nos permitirá volver al nivel superior de la galería actual en la que nos encontramos. Agregue esto a la parte superior de nuestro código debajo de nuestras otras funciones que tenemos en el inicio.
homeBtn.addEventListener (MouseEvent.CLICK, homeBtnClick); // oyente para cuando se hace clic en el botón de inicio
function homeBtnClick (evento: MouseEvent): void if (currentGallery == 0) // si currentGallery variable es igual a 0 Tweener.addTween (container_mc, alpha: 0, time: .5, transition: "easOut", onComplete : removeGallery0); // interpolar el container_mc y ejecutar la función removeGallery0 if (currentGallery == 1) Tweener.addTween (container_mc, alpha: 0, time: .5, la transición: "easeOut", onComplete: removeGallery1); if (currentGallery == 2) Tweener.addTween (container_mc, alpha: 0, time: .5, transition: "easeOut", onComplete: removeGallery2);
Pruebe su película, haga clic en una galería para ver la lista de videos. Ahora haga clic en el botón de inicio. Su reproductor ahora desaparecerá de los videos actuales y los reemplazará con los elementos de la categoría actual.
Para configurar videoWidth & videoHeight necesitamos agregar algo de código para obtener primero los valores. Necesitamos agregar este código a videoItemClickFunction sobre la línea ns.play.
videoWidth = xml.GALLERY [currentGallery] .CATEGORY [categoryItemName] .ITEM [videoItemName] .file_width; // obtiene el ancho del video de xml videoHeight = xml.GALLERY [currentGallery] .CATEGORY [categoryItemName] .ITEM [videoItemName] .file_height; // obtiene la altura del video del xml video.width = videoWidth; // establece el ancho del video a la variable videoWidth video.height = videoHeight; // establece la altura del video a la variable videoHeight
Ahora tenemos el video configurado a la anchura y altura correctas. Lo último que debe hacer es colocarlo en el centro del área de visualización. Agregue esta línea al videoItemClickFunction sobre el ns.play (currentVideo): línea vacía.
positionVideo ();
Luego agregue la función para manejar el evento positionVideo.
function positionVideo (): void video.x = 0; // establece la x del video en 0 video.y = 0; // establece la y del video en 0 var vidWidthDif = videoBlackBox.width - videoWidth; // obtenga la diferencia entre el ancho de videoBlackBox y el ancho de video - manténgalo en esta variable var vidHeightDif = videoBlackBox.height - videoHeight; // obtener la diferencia entre la altura de videoBlackBox y la altura de video - manténgala en esta variable video.x = vidWidthDif / 2; // posiciona el video x del video.y = vidHeightDif / 2; // posiciona el video y
Corta y pega esta línea en la parte inferior de la función positionVideo.
ns.play (currentVideo);
Ahora, si prueba su archivo, el video obtendrá el ancho y la altura que configuramos en el XML y cambiará sus dimensiones, luego reproducirá el video.
Estas variables crearán y mantendrán nuestros elementos destacados en un movieclip.
var FeatureContainer: MovieClip; // crear un nuevo movieclip para contener los elementos de los videos presentados var featureThumbLoader: Loader; // crea un nuevo cargador para cargar los videos destacados var FeaturedItemName; // crear una nueva variable de featureItemName para mantener el nombre del elemento destacado en el que haremos clic
Para verificar los videos destacados en el xml, agregue este código a la función myXmlLoaded. Recorrerá todos los videos y devolverá los que están configurados como verdaderos.
checkForFeaturedVids (); // ejecuta esta función cuando se carga el xml
Esta función es igual que la función makeGalleryItems que configuramos en la parte 2. Crearemos los elementos de artículos destacados para el contenido destacado basado en el xml, los distribuiremos y los espaciaremos correctamente, cargaremos la imagen en miniatura y eliminaremos el precargador con una función abajo.
Nota del editor: Bueno, aquí estamos de nuevo ... Aquellos de ustedes que usan FireFox habrían encontrado la página congelada gracias a este pequeño bloque de ActionScript. Para que todo funcione sin problemas, aquí está el código para descargar. Lo siento por los inconvenientes ocasionados.
Ahora necesitamos configurar un oyente para manejar lo que sucede cuando hacemos clic en un elemento de película destacado. Agregue esta línea a la instrucción if en la función checkForFeaturedVids debajo de los escuchas de myFeaturedItems btnOver & btnOut.
myFeaturedItem.addEventListener (MouseEvent.CLICK, myFeaturedItemClick);
Esto es lo que sucede cuando hacemos clic en un elemento destacado:
function myFeaturedItemClick (event: MouseEvent): void featureItemName = event.target.name; // obtenga el elemento actual y configúrelo en la variable FeaturedItemName currentVideo = xml.GALLERY.CATEGORY.ITEM.file_path [FeatureItemName]; // establezca nuestra variable currentVideo en el video destacado en xml videoTitleTxt.text = xml.GALLERY.CATEGORY.ITEM.file_title [FeaturedItemName]; // establece el nombre del título del video videoWidth = xml.GALLERY.CATEGORY.ITEM.file_width [FeaturedItemName]; // obtener el ancho del video videoHeight = xml.GALLERY.CATEGORY.ITEM.file_height [FeatureItemName]; // obtener la altura del video video.width = videoWidth; // establece el ancho del video video.height = videoHeight; // establecer la altura de video positionVideo (); // ejecuta esta función stage.addEventListener (Event.ENTER_FRAME, videoTimeEnterFrame); // cambiar el tiempo de reproducción del video
Primero agregue una variable para mantener los nombres de los nombres cortos de los clips de video.
var FeaturedScrollTrack: MovieClip = FeaturedBox_mc.featuredScrollbar_mc.featuredScrollbarTrack_mc; var FeaturedScrollThumb: MovieClip = FeaturedBox_mc.featuredScrollbar_mc.featuredScrollbarThumb_mc; var FeaturedScrollMask: MovieClip = FeaturedBox_mc.featuredScrollbar_mc.featuredMasker_mc; var xOffset: Número; var xMin: Número = 0; var xMax: Número; var FeaturedThumbDif: Number;
Luego, agregue estas líneas en la parte superior de nuestro código debajo de los otros oyentes que comienzan cuando se abre el archivo.
FeaturedScrollThumb.addEventListener (MouseEvent.MOUSE_OVER, btnOver); FeaturedScrollThumb.addEventListener (MouseEvent.MOUSE_OUT, btnOut); FeaturedScrollThumb.buttonMode = true; FeaturedScrollThumb.mouseChildren = false;
Aquí haremos algo muy similar a la función checkFeaturedContainerWidth en la parte 2.
función checkFeaturedContainerWidth (): void if (FeaturedContainer.width> FeaturedScrollMask.width) linkFeaturedScroller (); FeaturedScrollThumb.addEventListener (MouseEvent.MOUSE_DOWN, FeaturedScrollbarThumbDown); stage.addEventListener (MouseEvent.MOUSE_UP, FeaturedScrollbarThumbUp); FeaturedScrollThumb.visible = true; FeaturedScrollThumb.alpha = 0; Tweener.addTween (FeaturedScrollThumb, alfa: 1, hora: .5, transición: "easeOut"); else FeaturedScrollThumb.removeEventListener (MouseEvent.MOUSE_DOWN, sideScrollbarThumbDown); stage.removeEventListener (MouseEvent.MOUSE_UP, FeaturedScrollbarThumbUp); Tweener.addTween (FeaturedScrollThumb, alpha: 0, time: .5, la transición: "easeOut", onComplete: hideFeaturedScrollbarThumb); función hideFeaturedScrollbarThumb (): void FeaturedScrollThumb.visible = false;
Agregue las funciones para acompañar a los oyentes en la función checkFeaturedContainerWidth.
Accentsconagua
function linkFeaturedScroller (): void FeaturedScrollThumb.x = 0; FeaturedContainer.mask = FeaturedScrollMask; xMax = FeaturedScrollTrack.width - FeaturedScrollThumb.width; function featureScrollbarThumbDown (evento: MouseEvent): void FeaturedScrollThumb.removeEventListener (MouseEvent.MOUSE_OVER, btnOver); FeaturedScrollThumb.removeEventListener (MouseEvent.MOUSE_OUT, btnOut); stage.addEventListener (MouseEvent.MOUSE_MOVE, FeaturedScrollbarThumbMove); xOffset = mouseX - FeaturedScrollThumb.x; function featureScrollbarThumbUp (evento: MouseEvent): void FeaturedScrollThumb.addEventListener (MouseEvent.MOUSE_OVER, btnOver); FeaturedScrollThumb.addEventListener (MouseEvent.MOUSE_OUT, btnOut); FeaturedScrollThumb.gotoAndStop ("over"); Tweener.addTween (FeaturedContainer, _Blur_blurX: 0, tiempo: 1, transición: "easeOut"); stage.removeEventListener (MouseEvent.MOUSE_MOVE, FeaturedScrollbarThumbMove); function featureScrollbarThumbMove (evento: MouseEvent): void FeaturedScrollThumb.x = mouseX - xOffset; si (destacadoScrollThumb.x <= xMin) featuredScrollThumb.x = xMin; else if(featuredScrollThumb.x >= xMax) FeaturedScrollThumb.x = xMax; FeatureThumbDif = FeaturedScrollThumb.x / xMax; Tweener.addTween (FeaturedContainer, x: ((- apareceThumbDif * (FeaturedContainer.width - apareceScrollMask.width)) +25), _Blur_blurX: 5, tiempo: 1, transición: "easeOut")); event.updateAfterEvent (); Así que ahí lo tienes, date una palmada en la espalda si terminas y comienza a poner algunos videos en la web!
!
