Share
Hier is het, het laatste deel van onze video-speler-tutorial! Het enige wat we nu hoeven te doen is de tijdindicator aan het werk krijgen, onze startknopknopfunctie toevoegen, de huidige video positioneren en de grootte ervan aanpassen en de afgebeelde balk gevuld met video's samen met de scrubber. Laten we beginnen!
Eerst moeten we een luisteraar toevoegen aan de fase genaamd videoTimeEnterFrame die de videotijd elk frame bijwerkt. Voeg deze regel toe aan de videoItemClick-functie.
stage.addEventListener (Event.ENTER_FRAME, videoTimeEnterFrame); // wordt deze functie uitgevoerd elke keer dat we een nieuw frame invoeren
Laten we nu de functie videoTimeEnterFrame toevoegen.
function videoTimeEnterFrame (event: Event): void var totalSeconds: Number = ns.time; // variabele om de ns.time var te houden totalSeconds2: Number = duration; // variabele om de duur te behouden var minuten: Number = Math.floor (totalSeconds / 60); // variabele om de afgeronde waarde totalSeconds in te delen gedeeld door 60 var minutes2: Number = Math.floor (totalSeconds2 / 60); // variabele om de afgeronde waarde totalSeconds2 gedeeld door 60 var seconden = Math.floor (totalSeconds)% 60 te houden; // variabele om 60 procent van de totalSeconds var seconds2 = Math.floor (totalSeconds2)% 60 te krijgen; // variabele om 60 procent van de totalSecond2 if (seconden te krijgen < 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.
Door de kliklistener voor de startknop toe te voegen, kunnen we terugkeren naar het hoogste niveau van de huidige galerij waar we ons bevinden. Voeg dit toe aan de bovenkant van onze code onder onze andere functies die we hebben bij het opstarten.
homeBtn.addEventListener (MouseEvent.CLICK, homeBtnClick); // listener voor wanneer op de startknop wordt geklikt
function homeBtnClick (event: MouseEvent): void if (currentGallery == 0) // als currentGallery-variabele gelijk is aan 0 Tweener.addTween (container_mc, alpha: 0, time: .5, transition: "easeOut", onComplete : removeGallery0); // tween uit de container_mc en voer de functie removeGallery0 uit als (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);
Test uw film, klik op een galerij om de lijst met video's te bekijken. Klik nu op de startknop. Uw speler zal nu de huidige video's laten vervagen en vervangen door de huidige categorie-items.
Om de videoWidth & videoHeight in te stellen, moeten we een code toevoegen om eerst de waarden te krijgen. We moeten deze code toevoegen aan de videoItemClickFunction boven de regel ns.play.
videoWidth = xml.GALLERY [currentGallery] .CATEGORY [categoryItemName] .ITEM [videoItemName] .file_width; // haalt de videobreedte uit de xml videoHeight = xml.GALLERY [currentGallery] .CATEGORY [categoryItemName] .ITEM [videoItemName] .file_height; // haalt de video-hoogte uit de xml video.width = videoWidth; // stel de breedte van de video in op de variabele videoWidth video.height = videoHeight; // stel de hoogte van de video in op de videoHeight-variabele
Nu hebben we de video ingesteld op de juiste breedte en hoogte. Het laatste wat u moet doen, is het in het midden van het weergavegebied plaatsen. Voeg deze regel toe aan de videoItemClickFunction boven de ns.play (currentVideo): ongeldige regel.
positionVideo ();
Voeg vervolgens de functie toe om de positionVideo-gebeurtenis af te handelen.
functie positionVideo (): void video.x = 0; // stel de video x in op 0 video.y = 0; // stel de video in op y var vidWidthDif = videoBlackBox.width - videoWidth; // haal het verschil uit de breedte van de videoBlackBox en de videobreedte - houd het in deze variabele var vidHeightDif = videoBlackBox.height - videoHeight; // haal het verschil uit de hoogte en videohoogte van de videoBlackBox - houd deze vast in deze variabele video.x = vidWidthDif / 2; // plaats de video's x video.y = vidHeightDif / 2; // plaats de video's y
Knip en plak deze lijn onder aan de positionVideo-functie.
ns.play (currentVideo);
Als u nu uw bestand test, krijgt u de video de breedte en hoogte die we in de XML hebben ingesteld om de afmetingen te wijzigen en vervolgens de video af te spelen.
Deze variabelen zullen onze featured itmes maken en vasthouden in een filmclip.
var featuredContainer: MovieClip; // maak een nieuwe filmclip om de aanbevolen video-items te bevatten var featuredThumbLoader: Loader; // maak een nieuwe loader om de aanbevolen video's te laden var featuredItemName; // maak een nieuwe featuredItemName-variabele die de naam bevat van het afgebeelde item waarop we klikken
Als u wilt controleren op aanbevolen video's in de XML, voegt u deze code toe aan de functie myXmlLoaded. Het doorloopt alle video's en geeft de video's terug die op true zijn ingesteld.
checkForFeaturedVids (); // voer deze functie uit wanneer de xml is geladen
Deze functie is net als de makeGalleryItems-functie die we in deel 2 hebben ingesteld. We maken de featuredItem-filmclips voor de featuredContainer op basis van de xml, leggen ze op de juiste plaats neer, laden de miniatuurafbeelding in en verwijderen de preloader met een afzonderlijke functie hieronder.
Opmerking van de uitgever: Nou, hier zijn we weer ... Degenen onder u die FireFox gebruiken, zouden de pagina bevriezen dankzij dit kleine blok ActionScript. Om de zaken soepel te laten verlopen, hier is de code om te downloaden. Excuses voor het ongemak.
Nu moeten we een luisteraar instellen om te verwerken wat er gebeurt als we op een filmclip met aanbevolen items klikken. Voeg deze regel toe aan de if-instructie in de functie checkForFeaturedVids onder de luisteraars van myFeaturedItems btnOver & btnOut.
myFeaturedItem.addEventListener (MouseEvent.CLICK, myFeaturedItemClick);
Dit is wat er gebeurt als we op een gekenmerkt item klikken:
function myFeaturedItemClick (event: MouseEvent): void featuredItemName = event.target.name; // haal het huidige item op en zet het op de featuredItemName-variabele currentVideo = xml.GALLERY.CATEGORY.ITEM.file_path [featuredItemName]; // stel onze currentVideo-variabele in op de aanbevolen video in de xml-videoTitleTxt.text = xml.GALLERY.CATEGORY.ITEM.file_title [featuredItemName]; // stel de naam van de videotitels in videoWidth = xml.GALLERY.CATEGORY.ITEM.file_width [featuredItemName]; // haal de videobreedte videoHeight = xml.GALLERY.CATEGORY.ITEM.file_height [featuredItemName]; // haal de video-hoogte op video.width = videoWidth; // stel de video-breedte in video.height = videoHeight; // stel de videohoogtepositieVideo () in; // voer deze functie stage.addEventListener uit (Event.ENTER_FRAME, videoTimeEnterFrame); // verander de afspeeltijd van de video
Voeg eerst de variabele toe om de namen voor korte namen van filmclips te bevatten.
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;
Voeg vervolgens deze regels toe aan de bovenkant van onze code onder de andere listeners die beginnen wanneer het bestand wordt geopend.
featuredScrollThumb.addEventListener (MouseEvent.MOUSE_OVER, btnOver); featuredScrollThumb.addEventListener (MouseEvent.MOUSE_OUT, btnOut); featuredScrollThumb.buttonMode = true; featuredScrollThumb.mouseChildren = false;
Hier zullen we iets doen dat erg lijkt op de checkFeaturedContainerWidth-functie in deel 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;
Voeg de functies toe die bij de luisteraars horen in de functie 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 ();
Dus daar heb je het, geef jezelf een schouderklopje als je klaar bent en begin met het plaatsen van enkele video's op het web!
!
Accentsconagua