Share
Eccolo, la parte finale del nostro tutorial per i video player! Tutto quello che dobbiamo fare ora è far funzionare l'indicatore del tempo, aggiungere la funzione di clic del tasto home, posizionare e dimensionare il video corrente e ottenere la barra in primo piano piena di video insieme al suo scrubber. Iniziamo!
Per prima cosa dobbiamo aggiungere un listener allo stage chiamato videoTimeEnterFrame che aggiorna il tempo del video ogni fotogramma. Aggiungi questa linea alla funzione videoItemClick.
stage.addEventListener (Event.ENTER_FRAME, videoTimeEnterFrame); // esegue questa funzione ogni volta che entriamo in un nuovo frame
Ora aggiungiamo la funzione videoTimeEnterFrame.
function videoTimeEnterFrame (event: Event): void var totalSeconds: Number = ns.time; // variabile per contenere ns.time var totalSeconds2: Number = duration; // variabile per contenere la durata var minutes: Number = Math.floor (totalSeconds / 60); // variabile per contenere il totale arrotondato di tutti i secondi diviso per 60 var minutes2: Number = Math.floor (totalSeconds2 / 60); // variabile per contenere il totale arrotondato di TotalSeconds2 diviso per 60 secondi = Math.floor (totalSeconds)% 60; // variabile per ottenere il 60 percento del totaleSecondi var seconds2 = Math.floor (totalSeconds2)% 60; // variabile per ottenere il 60 percento del totale 2 se (secondi < 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.
L'aggiunta del listener di clic per il pulsante home ci consentirà di tornare al livello più alto della galleria corrente su cui ci troviamo. Aggiungi questo nella parte superiore del nostro codice sotto le nostre altre funzioni che abbiamo all'avvio.
homeBtn.addEventListener (MouseEvent.CLICK, homeBtnClick); // listener per quando viene fatto clic sul pulsante home
function homeBtnClick (event: MouseEvent): void if (currentGallery == 0) // se la variabile currentGallery è uguale a 0 Tweener.addTween (container_mc, alpha: 0, time: .5, transition: "easeOut", onComplete : removeGallery0); // interrompe il contenitore_mc ed esegue la funzione removeGallery0 if (currentGallery == 1) Tweener.addTween (container_mc, alpha: 0, time: .5, transition: "easeOut", onComplete: removeGallery1); if (currentGallery == 2) Tweener.addTween (container_mc, alpha: 0, time: .5, transition: "easeOut", onComplete: removeGallery2);
Metti alla prova il tuo film, clicca su una galleria per vedere l'elenco dei video. Ora fai clic sul pulsante Home. Il tuo lettore ora dissolverà i video correnti e li sostituirà con gli articoli della categoria corrente.
Per impostare il videoWidth e videoHeight, è necessario aggiungere del codice per ottenere i valori. Abbiamo bisogno di aggiungere questo codice al videoItemClickFunction sopra la linea ns.play.
videoWidth = xml.GALLERY [currentGallery] .CATEGORY [categoryItemName] .ITEM [videoItemName] .file_width; // ottiene la larghezza del video da xml videoHeight = xml.GALLERY [currentGallery] .CATEGORY [categoryItemName] .ITEM [videoItemName] .file_height; // ottiene l'altezza del video da xml video.width = videoWidth; // imposta la larghezza del video sulla variabile video Width video.height = videoHeight; // imposta l'altezza del video sulla variabile videoHeight
Ora abbiamo il video impostato sulla larghezza e altezza corrette. L'ultima cosa da fare è posizionarlo nel mezzo dell'area di visualizzazione. Aggiungi questa linea al videoItemClickFunction sopra ns.play (currentVideo): void line.
positionVideo ();
Quindi aggiungi la funzione per gestire l'evento positionVideo.
function positionVideo (): void video.x = 0; // imposta l'x del video su 0 video.y = 0; // imposta il valore del video su 0 var vidWidthDif = videoBlackBox.width - videoWidth; // ottieni la differenza tra la larghezza del video BlackBox e la larghezza del video: tienilo in questa variabile var vidHeightDif = videoBlackBox.height - videoHeight; // ottieni la differenza tra altezza del video e altezza del videoBlackBox - tienilo in questa variabile video.x = vidWidthDif / 2; // posiziona il video x video.y = vidHeightDif / 2; // posiziona il video y
Taglia e incolla questa linea nella parte inferiore della funzione positionVideo.
ns.play (currentVideo);
Ora se esegui il test del tuo file, il video avrà la larghezza e l'altezza impostate nell'XML e cambierà le sue dimensioni, quindi riprodurrà il video.
Queste variabili creeranno e manterranno i nostri temi in primo piano in un Movie Clip.
var featuredContainer: MovieClip; // crea un nuovo Movie Clip per contenere gli elementi dei video in primo piano var featuredThumbLoader: Loader; // crea un nuovo loader per caricare i video in primo piano var featuredItemName; // crea una nuova variabile featuredItemName per contenere il nome dell'elemento in primo piano su cui faremo clic
Per verificare la presenza di video in primo piano nell'xml, aggiungi questo codice alla funzione myXmlLoaded. Circolerà tutti i video e restituirà quelli impostati su true.
checkForFeaturedVids (); // esegue questa funzione quando viene caricato xml
Questa funzione è proprio come la funzione makeGalleryItems che abbiamo impostato nella parte 2. Creeremo i clip animati in primo piano per il featureContainer basato su xml, li disporrai e li spazio in modo corretto, caricherò l'immagine di anteprima e rimuoverò il preloader con un altro funzione di seguito.
Nota dell'editore: Bene, eccoci di nuovo ... Coloro che utilizzano FireFox avrebbero trovato la pagina congelata grazie a questo piccolo blocco di ActionScript. Per mantenere le cose senza intoppi, ecco il codice per il download. Ci dispiace per l'inconvenienza.
Ora abbiamo bisogno di impostare un listener per gestire cosa succede quando clicchiamo su un clip animato in primo piano. Aggiungi questa riga all'istruzione if nella funzione checkForFeaturedVids sotto gli myFeaturedItems btnOver & btnOut listener.
myFeaturedItem.addEventListener (MouseEvent.CLICK, myFeaturedItemClick);
Questo è ciò che accade quando facciamo clic su un elemento in primo piano:
function myFeaturedItemClick (event: MouseEvent): void featuredItemName = event.target.name; // recupera l'elemento corrente e lo imposta sulla variabile featuredItemName currentVideo = xml.GALLERY.CATEGORY.ITEM.file_path [featuredItemName]; // imposta la nostra variabile video corrente sul video in primo piano in xml videoTitleTxt.text = xml.GALLERY.CATEGORY.ITEM.file_title [featuredItemName]; // imposta il nome dei titoli video videoWidth = xml.GALLERY.CATEGORY.ITEM.file_width [featuredItemName]; // ottiene la larghezza del video videoHeight = xml.GALLERY.CATEGORY.ITEM.file_height [featuredItemName]; // ottiene l'altezza del video video.width = videoWidth; // imposta la larghezza del video video.height = videoHeight; // imposta l'altezza del video positionVideo (); // esegue questa funzione stage.addEventListener (Event.ENTER_FRAME, videoTimeEnterFrame); // cambia il tempo di riproduzione del video
Per prima cosa aggiungi una variabile per contenere i nomi dei nomi brevi dei Movie Clip.
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: Number; var xMin: Number = 0; var xMax: Number; var featuredThumbDif: Number;
Quindi aggiungi queste righe nella parte superiore del nostro codice sotto gli altri listener che iniziano quando si apre il file.
featuredScrollThumb.addEventListener (MouseEvent.MOUSE_OVER, btnOver); featuredScrollThumb.addEventListener (MouseEvent.MOUSE_OUT, btnOut); featuredScrollThumb.buttonMode = true; featuredScrollThumb.mouseChildren = false;
Qui faremo qualcosa di molto simile alla funzione checkFeaturedContainerWidth nella parte 2.
function 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, alpha: 1, time: .5, transition: "easeOut"); else featuredScrollThumb.removeEventListener (MouseEvent.MOUSE_DOWN, sideScrollbarThumbDown); stage.removeEventListener (MouseEvent.MOUSE_UP, featuredScrollbarThumbUp); Tweener.addTween (featuredScrollThumb, alpha: 0, time: .5, transition: "easeOut", onComplete: hideFeaturedScrollbarThumb); function hideFeaturedScrollbarThumb (): void featuredScrollThumb.visible = false;
Aggiungi le funzioni per andare con gli ascoltatori nella funzione checkFeaturedContainerWidth.
function linkFeaturedScroller (): void featuredScrollThumb.x = 0; featuredContainer.mask = featuredScrollMask; xMax = featuredScrollTrack.width - featuredScrollThumb.width; function featuredScrollbarThumbDown (event: 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 featuredScrollbarThumbUp (event: MouseEvent): void featuredScrollThumb.addEventListener (MouseEvent.MOUSE_OVER, btnOver); featuredScrollThumb.addEventListener (MouseEvent.MOUSE_OUT, btnOut); featuredScrollThumb.gotoAndStop ( "over"); Tweener.addTween (featuredContainer, _Blur_blurX: 0, time: 1, transition: "easeOut"); stage.removeEventListener (MouseEvent.MOUSE_MOVE, featuredScrollbarThumbMove); function featuredScrollbarThumbMove (event: MouseEvent): void featuredScrollThumb.x = mouseX - xOffset; if (featuredScrollThumb.x <= xMin) featuredScrollThumb.x = xMin; else if(featuredScrollThumb.x >= xMax) featuredScrollThumb.x = xMax; featuredThumbDif = featuredScrollThumb.x / xMax; Tweener.addTween (featuredContainer, x: ((- featuredThumbDif * (featuredContainer.width - featuredScrollMask.width)) + 25), _Blur_blurX: 5, time: 1, transition: "easeOut"); event.updateAfterEvent ();
Quindi ecco fatto, datti una pacca sulla spalla se hai finito e inizia a mettere alcuni video sul web!
!
Accentsconagua