Build en Dynamic Video Player med Actionscript 3: Del 3 av 3
to
Del
Del

Del
Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Her er det, den siste delen av vår videospiller tutorial! Alt vi trenger å gjøre nå er å få tiden indikatoren arbeids, legge vårt hjem knapp klikk-funksjon, plassering og størrelse gjeldende video og få er utvalgt bar fylt med videoer sammen med sin skrubber. La oss komme i gang

Trinn 1:! Video Tid

Først må vi legge en lytter til det stadiet kalles videoTimeEnterFrame at oppdateringer video tid hver ramme. Legg denne linjen til videoItemClick funksjon
stage.addEventListener (Event.ENTER_FRAME, videoTimeEnterFrame.); //Kjører denne funksjonen hver gang vi går inn i en ny ramme

Nå la oss legge den videoTimeEnterFrame funksjon
funksjon videoTimeEnterFrame (hendelse: Hendelse): void {var totalSeconds: Number = ns.time;. //Variabel for å holde ns.time Var totalSeconds2: Number = varighet; //Variabel for å holde varigheten Var minutter: Antall = Math.floor (totalSeconds /60); //Variabel for å holde avrundet ned totalSeconds delt på 60 Var minutes2: Number = Math.floor (totalSeconds2 /60); //Variabel for å holde rundet ned totalSeconds2 delt på 60 Var sekunder = Math.floor (totalSeconds)% 60; //Variabel for å få 60 prosent av totalSeconds Var sekunder2 = Math.floor (totalSeconds2)% 60; //Variabel for å få 60 prosent av totalSecond2 hvis (sekunder < 10) //hvis sekunder variabelen er mindre enn 10 da ... {sekunder = "0" + sekunder; //Den sekunder variabelen er lik 0: sekunder} if (sekunder2 < 10) //hvis sekunder2 variabelen er mindre enn 10 da ... {sekunder2 = "0" + sekunder2; //Det sekunder2 variabelen er lik 0: sekunder} videoTimeTxt.text = minutter + ":" + sekunder + "/" + minutes2 + ":" + sekunder2; //Oppdatere videoTimeTxt feltet med den totale tiden og gjeldende klokkeslett. }
Trinn 2: Knapp

Ved å legge til klikk lytteren for hjem-knappen tillate oss å gå tilbake til øverste nivå i dagens galleriet vi er på. Legg dette til toppen av vår koden under våre andre funksjoner vi har ved oppstart
homeBtn.addEventListener (MouseEvent.CLICK, homeBtnClick.); //Lytteren for når hjemmet knappen klikkes
Trinn 3: homeBtnClick Funksjon
funksjon homeBtnClick (event: MouseEvent): void {if (currentGallery == 0) //hvis currentGallery variabelen er lik 0 {Tweener. addTween (container_mc, {alfa: 0, tid: 0,5, overgang: "easeOut", onComplete: removeGallery0}); //Tween av container_mc og kjør removeGallery0 funksjon} if (currentGallery == 1) {Tweener.addTween (container_mc, {alfa: 0, tid: 0,5, overgang: "easeOut", onComplete: removeGallery1}); } If (currentGallery == 2) {Tweener.addTween (container_mc, {alfa: 0, tid: 0,5, overgang: "easeOut", onComplete: removeGallery2}); }}

Test filmen, klikk på et galleri for å se listen over videoer. Nå klikker på hjem-knappen. Spilleren vil nå visne av tilgjengelige filmer og erstatte dem med de aktuelle kategorien elementer

Trinn 4:.

Hvis du vil angi videoWidth & videoHeight vi trenger å legge noen kode å først få verdiene. Vi må legge til denne koden til videoItemClickFunction over ns.play linje
videoWidth = xml.GALLERY [currentGallery] .CATEGORY [categoryItemName] .ITEM [videoItemName] .file_width.; //Får video bredde fra xml videoHeight = xml.GALLERY [currentGallery] .CATEGORY [categoryItemName] .ITEM [videoItemName] .file_height; //Får video høyden fra xmlvideo.width = videoWidth; //Sette videoen bredde til videoWidth variablevideo.height = videoHeight; //Sette videoen høyde til videoHeight variable
Trinn 5: positionVideo Ener & Funksjon

Nå har vi video satt til riktig bredde og høyde. Den siste tingen å gjøre er å plassere det i midten av visningsområdet. . Legg denne linjen til videoItemClickFunction over ns.play (currentVideo): void linje
positionVideo ();

Deretter legger funksjon for å håndtere positionVideo hendelsen
funksjon positionVideo (): void {video.. x = 0; //Satt videoens x til 0 video.y = 0; //Satt videoens y til 0 Div vidWidthDif = videoBlackBox.width - videoWidth; //Få forskjellen på videoBlackBox bredde og video bredde - hold den i denne variabelen Var vidHeightDif = videoBlackBox.height - videoHeight; //Få forskjellen på videoBlackBox høyde og video høyde - hold den i denne variabelen video.x = vidWidthDif /2; //Posisjon videoens x video.y = vidHeightDif /2; //Posisjon videoens y}
Trinn 6: Flytt ns.play en gang

Klipp og lim denne linjen til bunnen av positionVideo funksjon
ns.play (currentVideo); <. p> Nå hvis du teste filen du vil ha videoen får bredden og høyden vi satt i XML og endre sine dimensjoner, og deretter spille av videoen

Trinn 7:. Legg Utvalgte Element Variabler
< p> Disse variablene vil skape og holde våre omtalt itmes i en MovieClip
Var featuredContainer:. MovieClip; //Oppretter en ny MovieClip å holde anbefalte videoer itemsvar featuredThumbLoader: Loader; //Oppretter et nytt lasteren å laste utvalgt videosvar featuredItemName; //Oppretter et nytt featuredItemName variabel for å holde navnet på verdig element vi vil klikke
Trinn 8: Featured Videos

For å se etter anbefalte videoer i xml, legge til denne koden til myXmlLoaded funksjon . Det vil sløyfe gjennom alle videoene og returnere de som er satt til å true
checkForFeaturedVids (.); //Kjøre denne funksjonen når xml er lastet
Trinn 9: checkForFeaturedVids Funksjon

Denne funksjonen er akkurat som makeGalleryItems funksjon vi setter opp i del 2. Vi skal skape de featuredItem movieclips for featuredContainer basert på xml, legge dem ut og plass dem riktig, last i miniatyrbilde, og fjern preloader med en egen funksjon under

Red.anm. Vel, her er vi igjen .. De av dere bruker FireFox ville har funnet på siden iskaldt takket være denne lille blokk med Actionscript. For å holde ting knirkefritt, her er koden for nedlasting. Beklager det inntrufne

Trinn 10:. Klikk List

Nå må vi sette en lytter til å håndtere hva som skjer når vi klikker på en verdig element MovieClip. Legg til denne linjen hvis setningen i checkForFeaturedVids funksjon under myFeaturedItems btnOver & . btnOut lyttere
myFeaturedItem.addEventListener (MouseEvent.CLICK, myFeaturedItemClick);
Trinn 11: myFeaturedItemClick funksjon

Dette er hva som skjer når vi klikker på en verdig element:
funksjon myFeaturedItemClick (event: MouseEvent): void {featuredItemName = event.target.name; //Få gjeldende element og sett den til featuredItemName variable currentVideo = xml.GALLERY.CATEGORY.ITEM.file_path [featuredItemName]; //Setter vår currentVideo variabel til utvalgt video i xml videoTitleTxt.text = xml.GALLERY.CATEGORY.ITEM.file_title [featuredItemName]; //Satt videotitler nevne videoWidth = xml.GALLERY.CATEGORY.ITEM.file_width [featuredItemName]; //Få videoen bredde videoHeight = xml.GALLERY.CATEGORY.ITEM.file_height [featuredItemName]; //Få videoen høyde video.width = videoWidth; //Sette videoen bredde video.height = videoHeight; //Sette videoen høyde positionVideo (); //Kjøre denne funksjonen stage.addEventListener (Event.ENTER_FRAME, videoTimeEnterFrame); //Endre videoavspilling tid}
Trinn 12: Utvalgte scrollbar Variabler

Først legge variabel for å holde navnene for korte navn på 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: Number; Var xMin: Antall = 0; Var xMax: Number; Var featuredThumbDif: Number;
Trinn 13: Utvalgte Slider Button Lyttere

Så legge disse linjene til toppen av koden vår under de andre lyttere som starter når filen åpnes
featuredScrollThumb.addEventListener (MouseEvent.MOUSE_OVER, btnOver.); featuredScrollThumb.addEventListener (MouseEvent.MOUSE_OUT, btnOut); featuredScrollThumb.buttonMode = true; featuredScrollThumb.mouseChildren = false;
Trinn 14: checkFeaturedContainerWidth

Her vil vi være å gjøre noe veldig lik den checkFeaturedContainerWidth funksjon i del 2.
funksjon 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, tid: 0,5, overgang: "easeOut"}); } Else {featuredScrollThumb.removeEventListener (MouseEvent.MOUSE_DOWN, sideScrollbarThumbDown); stage.removeEventListener (MouseEvent.MOUSE_UP, featuredScrollbarThumbUp); Tweener.addTween (featuredScrollThumb, {alfa: 0, tid: 0,5, overgang: "easeOut", onComplete: hideFeaturedScrollbarThumb}); }} Funksjon hideFeaturedScrollbarThumb (): void {featuredScrollThumb.visible = false; }
Trinn 15: Funksjoner

funksjon linkFeaturedScroller () Legg funksjonene til å gå med lytterne i checkFeaturedContainerWidth funksjon. void {featuredScrollThumb.x = 0; featuredContainer.mask = featuredScrollMask; xMax = featuredScrollTrack.width - featuredScrollThumb.width;} funksjon 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;} funksjon 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, tid: 1, overgang: "easeOut"}); stage.removeEventListener (MouseEvent.MOUSE_MOVE, featuredScrollbarThumbMove);} funksjon 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, tid: 1, overgang: "easeOut"}); event.updateAfterEvent ();}
Konklusjon

Så det du har det, gi deg selv et klapp på ryggen hvis du er ferdig og begynne anbringer noen videoer opp på nettet

jeg! håper du likte denne opplæringen, og jeg håper du har lært et par ting som du kan bruke i dine egne prosjekter. Hvis noen ønsker å se en fjerde opplæringen, vil jeg gjøre en som bringer fullskjerm funksjonalitet til spilleren. Gi meg beskjed i kommentarfeltet. Takk for lesing!