Share
Aici este, ultima parte a tutorialului nostru pentru video-player! Tot ce trebuie să facem acum este să lucrăm cu indicatorul de timp, să adăugăm funcția de clic pe butonul de acasă, să poziționăm și să dimensionăm videoclipul curent și să introducem o bară plină cu videoclipuri împreună cu scruber-ul. Să începem!
Mai intai trebuie sa adaugam un ascultator la scena numita videoTimeEnterFrame care actualizeaza timpul video in fiecare cadru. Adăugați această linie la funcția videoItemClick.
stage.addEventListener (Event.ENTER_FRAME, videoTimeEnterFrame); // rulează această funcție de fiecare dată când introducem un nou cadru
Acum, să adăugăm funcția videoTimeEnterFrame.
funcția videoTimeEnterFrame (eveniment: Eveniment): void var totalSeconds: Number = ns.time; // variabilă pentru a menține ns.time var totalSeconds2: Number = duration; // variabilă pentru a menține durata var minute: Number = Math.floor (totalSeconds / 60); // variabilă pentru a ține totalul rotunjitSecunde împărțite la 60 var minute2: Număr = Matematică (totalSeconds2 / 60); // variabilă pentru a ține numărul total rotunjitSeconds2 împărțit la 60 var secunde = Math.floor (totalSeconds)% 60; // variabilă pentru a obține 60% din totalSeconds sec seconds2 = Math.floor (totalSeconds2)% 60; // variabilă pentru a obține 60 la sută din totalul Secundă2 dacă (secunde < 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.
Adăugarea butonului de ascultare a clicurilor pentru butonul de pornire ne va permite să revenim la nivelul superior al galeriei actuale pe care ne aflăm. Adăugați-o în partea de sus a codului nostru sub celelalte funcții pe care le avem la pornire.
homeBtn.addEventListener (MouseEvent.CLICK, homeBtnClick); // ascultător când se face clic pe butonul de acasă
funcția homeBtnClick (eveniment: MouseEvent): void if (currentGallery == 0) // dacă variabila curentGallery este egală cu 0 Tweener.addTween (container_mc, alpha: 0, time: : removeGallery0); // adăugați containerul_mc și executați funcția removeGallery0 dacă (currentGallery == 1) Tweener.addTween (container_mc, alpha: 0, timp: .5, tranziție: "easeOut", onComplete: removeGallery1); dacă (currentGallery == 2) Tweener.addTween (container_mc, alpha: 0, timp: .5, tranziție: "easeOut", onComplete: removeGallery2);
Testați-vă filmul, dați clic pe o galerie pentru a vedea lista de videoclipuri. Acum faceți clic pe butonul Acasă. Playerul dvs. va estompa acum videoclipurile curente și le va înlocui cu elementele din categoria curentă.
Pentru a seta videoWidth & videoHeight trebuie să adăugăm un cod pentru a obține mai întâi valorile. Trebuie să adăugăm acest cod la videoItemClickFunction de deasupra liniei ns.play.
videoWidth = xml.GALLERY [actualGallery] .CATEGORY [categorieItemName] .ITEM [videoItemName] .file_width; // obține lățimea videoclipului din xml videoHeight = xml.GALLERY [currentGallery] .CATEGORY [categoryItemName] .ITEM [videoItemName] .file_height; // obține înălțimea videoclipului din xml video.width = videoWidth; // setați lățimea videoclipului la variabila videoWidth video.height = videoHeight; // setați înălțimea videoclipului la variabila videoHeight
Acum avem setul video la lățimea și înălțimea corecte. Ultimul lucru pe care trebuie să-l faceți este să îl poziționați în mijlocul zonei de vizualizare. Adăugați această linie la videoItemClickFunction deasupra gamei ns.play (curentVideo): linie nevalidă.
positionVideo ();
Apoi adăugați funcția pentru a face față evenimentului positionVideo.
funcțiaVideo (): void video.x = 0; // setați videoclipul la 0 la 0 video.y = 0; // setați videoclipul y la 0 var vidWidthDif = videoBlackBox.width - videoWidth; // obține diferența dintre lărgimea videoBlackBox și lățimea videoclipului - țineți-o în această variabilă var vidHeightDif = videoBlackBox.height - videoHeight; // obține diferența dintre înălțimea și înălțimea videoclipului videoBlackBox - țineți-o în această variabilă video.x = vidWidthDif / 2; // poziționează videoclipul lui x video.y = vidHeightDif / 2; // Poziționați videoclipul y
Taiați și lipiți această linie în partea de jos a funcției Videoclip.
ns.play (currentVideo);
Acum, dacă vă testați fișierul, veți avea videoclipul pentru a obține lățimea și înălțimea pe care le setăm în XML și modificați dimensiunile acestuia, apoi redați videoclipul.
Aceste variabile vor crea și menține temele noastre prezentate într-un film.
var featuredContainer: MovieClip; // creați un nou videoclip pentru a ține piesele de videoclipuri recomandate: featuredThumbLoader: Loader; // crea un încărcător nou pentru încărcarea videoclipurilor recomandate var featuredItemName; // creați o nouă variabilă FeaturedItemName pentru a ține numele elementului recomandat pe care îl vom face clic
Pentru a verifica videoclipurile prezentate în xml, adăugați acest cod la funcția myXmlLoaded. Acesta va trece prin toate videoclipurile și va returna pe cele care sunt setate la adevărat.
checkForFeaturedVids (); // rulați această funcție când xml este încărcat
Această funcție este la fel ca și funcția makeGalleryItems pe care am configurat-o în partea a doua. Vom crea opțiunile de prezentare a obiectelor FeaturedContainer bazate pe xml, le așezăm și le vom dispărea în mod corect, vom încărca imaginea miniatură și vom elimina preloaderul cu o separată funcția de mai jos.
Nota editorului: Ei bine, iată-ne din nou ... Cei dintre voi care folosesc FireFox ar fi găsit înghețarea paginii grație acestui mic bloc de ActionScript. Pentru a menține lucrurile fără probleme, iată codul pentru descărcare. Scuze pentru neplăceri.
Acum trebuie să setăm un ascultător să se ocupe de ceea ce se întâmplă atunci când dăm clic pe un element moviectlip prezentat. Adăugați această linie la instrucțiunea if din funcția checkForFeaturedVids sub ascultătorii myFeaturedItems btnOver & btnOut.
myFeaturedItem.addEventListener (MouseEvent.CLICK, myFeaturedItemClick);
Asta se întâmplă când faceți clic pe un element recomandat:
funcția myFeaturedItemClick (eveniment: MouseEvent): void featuredItemName = event.target.name; // a obține elementul curent și a seta-l la variabila featuredItemName curentVideo = xml.GALLERY.CATEGORY.ITEM.file_path [featuredItemName]; // setați variabila actualăVideo la videoclipul prezentat în fișierul xml videoTitleTxt.text = xml.GALLERY.CATEGORY.ITEM.file_title [featuredItemName]; // setați numele titlurilor video videoWidth = xml.GALLERY.CATEGORY.ITEM.file_width [featuredItemName]; // obțineți lățimea videoclipului videoHeight = xml.GALLERY.CATEGORY.ITEM.file_height [featuredItemName]; // obțineți înălțimea videoclipului video.width = videoWidth; // setați lățimea videoclipului video.height = videoHeight; // setați poziția înălțimii videoVideo (); // executați această funcție stage.addEventListener (Event.ENTER_FRAME, videoTimeEnterFrame); // modificați timpul de redare a videoclipului
Mai întâi adăugați o variabilă pentru a ține numele pentru nume scurte de movieclips.
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: Număr; var xMin: Număr = 0; var xMax: Număr; var featuredThumbDif: Număr;
Apoi adăugați aceste linii în partea de sus a codului nostru sub ceilalți ascultători care încep când se deschide fișierul.
featuredScrollThumb.addEventListener (MouseEvent.MOUSE_OVER, btnOver); featuredScrollThumb.addEventListener (MouseEvent.MOUSE_OUT, btnOut); featuredScrollThumb.buttonMode = true; featuredScrollThumb.mouseChildren = false;
Aici vom face ceva foarte similar cu funcția checkFeaturedContainerWidth din partea 2.
funcția 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, timp: .5, tranziție: "easeOut"); altceva featuredScrollThumb.removeEventListener (MouseEvent.MOUSE_DOWN, sideScrollbarThumbDown); stage.removeEventListener (MouseEvent.MOUSE_UP, featuredScrollbarThumbUp); Tweener.addTween (featuredScrollThumb, alpha: 0, timp: .5, tranziție: "easeOut", onComplete: hideFeaturedScrollbarThumb); functie hideFeaturedScrollbarThumb (): void featuredScrollThumb.visible = false;
Adăugați funcțiile pentru a merge cu ascultătorii în funcția checkFeaturedContainerWidth.
funcția linkFeaturedScroller (): void featuredScrollThumb.x = 0; featuredContainer.mask = featuredScrollMask; xMax = featuredScrollTrack.width - featuredScrollThumb.width; funcția featuredScrollbarThumbDown (eveniment: MouseEvent): void featuredScrollThumb.removeEventListener (MouseEvent.MOUSE_OVER, btnOver); featuredScrollThumb.removeEventListener (MouseEvent.MOUSE_OUT, btnOut); stage.addEventListener (MouseEvent.MOUSE_MOVE, featuredScrollbarThumbMove); xOffset = mouseX - featuredScrollThumb.x; funcția featuredScrollbarThumbUp (eveniment: MouseEvent): void featuredScrollThumb.addEventListener (MouseEvent.MOUSE_OVER, btnOver); featuredScrollThumb.addEventListener (MouseEvent.MOUSE_OUT, btnOut); featuredScrollThumb.gotoAndStop ( "peste"); Tweener.addTween (featuredContainer, _Blur_blurX: 0, timpul: 1, tranziție: "easeOut"); stage.removeEventListener (MouseEvent.MOUSE_MOVE, featuredScrollbarThumbMove); funcția featuredScrollbarThumbMove (eveniment: MouseEvent): void featuredScrollThumb.x = mouseX - xOffset; în cazul în care (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, timp: 1, tranziție: "easeOut"); event.updateAfterEvent ();
Deci, acolo aveți, dați-vă un pic pe spate dacă ați terminat și începeți să puneți niște videoclipuri pe web!
!
Accentsconagua