Build en Dynamic Video Player med Actionscript 3: Del 1 av 3
6
Del
4
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Nesten hver Flash utvikleren har måttet foreta en videospiller på et tidspunkt. Det er ganske mange forskjellige måter å gjøre dette; noen mennesker bruker den innebygde Netstream klasse og noen bruker den FLVPlayback komponent i Flash. Uansett vil fungere, men vi kommer til å bruke Netstream klasse på grunn av hvor mye lettere det er og hva du kan gjøre med det.
Dette er en stor tutorial som vil bli brutt ned til tre deler. Hver del vil bygge ut den forrige før vi har vår endelige resultatet. Vår spiller vil kunne bruke en XML-fil til å fylle tre gallerier med en ubegrenset mengde kategorier, og et ubegrenset antall videoer i hver kategori.
< p> La oss ta en rask titt på hva vi skal bygge i hver del av denne serien.
Del 1
File oppsett, organisere filer og mapper
Forstå hvordan starten filen er satt opp.
Posisjons elementer på scenen for oppstart scenen resize.
Global roll og utrulling funksjoner.
Sett opp vår Net Stream klasse
Sett opp kontrollene.
deg videoen spilles.
Legg preloader funksjonalitet. for videoavspilling. Disse inkluderer en play-knappen, pause knapp, stopp knapp, video tidslinje, og volumet skrubber.
Part 2
Oppsett vår video miniatyrbilder, kategori miniatyrbilder, og inneholdt videominiatyrbilder.
Skriv inn XML-filen.
Legg den XML-fil i Flash.
Opprett kategori elementer i riktig sidepanelet.
Preload kategori element miniatyrbilder.
Galleri knappen funksjonalitet for høyre sidebar.
lage video elementer i høyre sidebar.
Preload Videoelement miniatyrer.
bygge en dynamisk vertikal scrollbar som viser når det er nødvendig og skjuler når det ikke er nødvendig.
Avspillings utvalgte videoer.
Del 3
vise gjeldende klokkeslett og total tid Nedenfor spilleren.
Hjem-knappen funksjonalitet.
Angi vår video bredde og høyde.
Senter vår video i spillervinduet.
Sjekk XML filen for noen omtalt videoer.
Legg kjennetegnet video elementer til Utvalgte sub bar.
Preload omtalt Videoelement miniatyrer.
Legg til en dynamisk horisontal scrollbar for utvalgt sub bar.
Oppsett vår video miniatyrbilder, kategori miniatyrbilder, og inneholdt videominiatyrbilder.
Skriv inn XML-filen.
Legg den XML-fil i Flash.
Opprett kategori elementer i riktig sidepanelet.
Preload kategori element miniatyrbilder.
Galleri knappen funksjonalitet for høyre sidebar.
lage video elementer i høyre sidebar.
Preload Videoelement miniatyrer.
bygge en dynamisk vertikal scrollbar som viser når det er nødvendig og skjuler når det ikke er nødvendig.
Avspillings utvalgte videoer.
Del 3
vise gjeldende klokkeslett og total tid Nedenfor spilleren.
Hjem-knappen funksjonalitet.
Angi vår video bredde og høyde.
Senter vår video i spillervinduet.
Sjekk XML filen for noen omtalt videoer.
Legg kjennetegnet video elementer til Utvalgte sub bar.
Preload omtalt Videoelement miniatyrer.
Legg til en dynamisk horisontal scrollbar for utvalgt sub bar.
Jeg nevner dette i klassene, men jeg vil gjerne takke noen mennesker for deres hjelp med denne opplæringen
DTX Creative -. video
< li> Boise State University - video
John Smith - video
Alex Hackett - video
Brett Baltzer - video
Stan Smith - kode redigere
Trinn 1: Forstå Source Files
knyttneve tingen å gjøre er å laste ned kildefilene jeg følger. Dette er svært viktig som jeg ikke kommer til å gå over hva ting heter og hvordan jeg setter opp filen. Jeg vil imidlertid gi korte oversikter over konkrete ting jeg gjorde (som hvordan jeg gjorde mine knapper og andre ting som er viktig). I utgangspunktet, jeg satt alle objektene på scenen, organisert biblioteket, laget movieclips for alt, riktig navn alle movieclips på scenen og skapte knappen velt for alle nødvendige knapper. Sammen med å skape og eksportere de nødvendige movieclips.
Den neste tingen å merke seg er hvordan jeg setter opp mine mapper for dette prosjektet. Du bør opprette en mappe på skrivebordet som heter hva du vil (eg.my_AS3_Video_Player). Åpner denne mappen, slipp den "flv" mappen du lastet ned, sammen med "playlist.xml" og "theater.fla" filer. Den "theater.fla" filen er startfilen. Den "playlist.xml" filen er den xml-filen som er forhånds skrevet. Inne i "flv" -mappen vil du se alle videoene vi skal bruke, sammen med en "thumbs" -mappen som inneholder 3 andre mapper. Disse tre mapper hver har et miniatyrbilde av alle videoene på forskjellige størrelser.
MERK: Hvis du ikke ønsker å bruke videoene jeg forutsatt at du kan bruke din egen, men sørg for at de har et lydspor i dem eller annet du ikke vil være i stand til å fortelle om lyden scrubber fungerer som den skal. Din start filen skal allerede være knyttet til output-mappen når du åpner opp "theater.fla" fil. Hvis du vet hvordan dette fungerer så ignorere den neste setningen. Hvis du ikke vet hvordan dette fungerer, klikk på fil > publisere setting. Du bør være i kategorien formater. Her legger du inn "../output/theater.swf" for .swf og hvis du ønsker å publisere .html du skriver «../output/theater.html". Du trenger også å gå til kategorien html og velg prosent for dimensjonene. Ellers filen vil ikke fokusere på scenen riktig. Den tredje tingen du trenger å gjøre er å laste ned Caurina Tweener Class. Når denne er lastet ned må du åpne zip-filen og kopier caurina mappen på "src" -mappen, slik at vi kan bruke det til våre animasjoner Nå som du er satt opp med alt på plass er det på tide å se gjennom filen. Det første du må ta til etterretning her er scenen din størrelse 850x580, dette er egentlig ikke så viktig som det vil bli satt avhengig av størrelsen på vinduet. Det er imidlertid minstemål vinduet vil gå før beskjæring del av spilleren. Andre er de 4 lagene på scenen. Det øverste laget er der vi skal skrive vår kode. Det andre laget er der vi vil ha videokontrollene, og videoen. Det tredje laget er der vi vil ha spillelisten med forskjellige gallerier, kategorier og videoer. Det fjerde laget er hvor vi skal plassere de anbefalte videoer som er satt med en enkel sant eller usant i xml. En annen ting jeg ønsker å påpeke er de elementene vi skal legge til denne filen baserte på vår xml. Vi skal fylle dem under kjøring fra vårt bibliotek. Det er 3 ting som er navngitt featuredItem_mc Annet enn det, er knappene sammen med velt og dynamisk tekst som allerede er satt opp for deg. Føl deg fri til å tilpasse hvis du vil, men vi vil gå over disse trinnene senere La oss importere de nødvendige klassene vi vil bruke for våre tweens. Vi vil også sette vår scenen for å justere til venstre og sette den til å ikke skalere. I hovedtidslinjen klikk på AS3 lag og skriver følgende:. Nå la oss legge til noen navne variabler, slik at vi ikke trenger å skrive så lange forekomstnavn under hva vi har skrevet så langt, type: Hvis du nå teste filmen innholdet vil være sentrert i midten av SWF-filen. Men ikke hvis du endrer størrelse .swf. Så la oss ta vare på det Neste vi må ta vare på det som skjer når du endrer .swf bredde og høyde eller nettleseren din størrelse . For å gjøre denne typen følgende kode under setMyStage MERK: Jeg pleier å sette alle mine lyttere sammen nær toppen av koden og alle mine fungerer sammen i bunnen . Noen mennesker gjør dette i revers. Det er ingen perfomance fordel, men det hjelper å holde filen mer organisert. Herfra på når jeg legger en lytter jeg vil være å sette den under siste lytteren på toppen, og når jeg legger til en funksjon jeg vil være å plassere den under siste funksjonen nederst på siden. Oh, og du bør også alltid plassere variablene på toppen etter hverandre Hvis du nå teste SWF-fil det vil fokusere på oppstart og hvis du endrer bredden eller høyden vil det holde fokus så vel Igjen la oss legge til noen vars slik at våre forekomstnavn er ikke så lenge Her vil vi bruke den samme funksjonen for alle våre velt og rollouts. Grunnen til dette er at det reduserer kode, pluss alle de knappene vi skal bruke vil være å gjøre det samme, så hvorfor ikke bare gjøre en funksjon som er gjenbrukbart? La oss legge til de to funksjonene som tillater oss å legge roll og rollouts på noen knapp som er satt opp som beskrevet i neste trinn Hvis du nå teste filmen knappene vil endre seg når du ruller over og gå tilbake til sin opprinnelige tilstand når du ruller ut. La oss ta et sekund å se hvordan jeg lager mine knapper og hvordan alle knapper og movieclips i denne opplæringen er satt opp. Du trenger ikke trenger å utføre dette trinnet, men hvis du ønsker å følge med gå til playBtn_mc Den første tingen å gjøre er å designe din knapp. Neste, konvertere den til en MovieClip og gi den en forekomst navn. Hvis det er en avspillingsknapp vil jeg kalle det noe sånt som "playBtn_mc". Gi den riktige forekomsten navn. Låse disse lagene, slik at du ikke tilfeldigvis plassere symboler på dem. Når du gjør det åpne opp MovieClip og lage to lag på toppen av alt. Nevne ett lag "AS3" og det andre laget "Etiketter" På det første bildet av den AS3 lag åpne Actionscript panel og type. "Stop ();". Gjør det samme på den 10. rammen. På den andre rammen av etiketter lag skaper en keyframe og markere det. Gå til den eiendommer panel og i navnefeltet skriver du "over". Nå gå til den 11. rammen på etiketter laget og opprette en ny keyframe. Velg hvert element separat og konvertere til en MovieClip. Etter fullført, velg alle og separat til lagene. Du kan bruke høyre-klikk (kontekst) menyen, eller sette opp en tastatursnarvei. Siden jeg stadig skille elementer til lag jeg synes det er nyttig å lage en "Ctrl + D" snarvei [Command + D] på en Mac. (Merk:. Navnet på laget vil være basert på navnet du ga hver symbol) Ikke bekymre deg om å gi dem forekomstnavn, siden vi vil bare bli tweening dem. Hvis du ikke konvertere hvert element du vil animere til et symbol, da Flash vil skape tweens i biblioteket som blir rotete. Gå til den 10. rammen av laget du vil tween og lage en keyframe, så gå til den 20. rammen av det samme laget og lage en annen nøkkelbilde. Nå markere alle lagene rammer og høyreklikk. Velg "skape klassisk tween". Ikke fjern markeringen ennå, gå til egenskapspanelet. Velg fanen tween og skriv 100. Nå velger den 10. rammen av laget og gå til egenskapspanelet og velg fanen stil. Her kan du velge hva du vil gjeldende element å gjøre. Det er alt. Du kan også endre hvor lenge animasjonen tar på rollover og utrulling ved å flytte hvor stopp handlinger er og de over /ut label keyframes er. Dette er hvordan alle knappene er satt opp i denne opplæringen, så når som helst du ser en velt eller rulle ut dette er hvordan jeg gjorde det. Med koden fra trinn 7 & 8 og knappen fra dette trinnet kan du opprette en knapp med rollover og utrulling funksjonalitet i ethvert prosjekt La oss legge buttonMode og mouseChildren til våre knapper. Legg dette under variablene på toppen av koden din Nå er alle knappene i player_mc filmklipp bør ha roll og utrulling funksjonalitet når du tester filmen Her vil vi skjule video preloader, sett videoen tittelen dynamisk tekstfelt for å være blank, sammen med nullstilling ut videoen tid dynamisk tekstlag. Skriv inn følgende kode under koden i trinn 10: Her vil vi sette opp en variabel som samler dagens video fra xml og setter det til en streng. Vi vil også sette video høyde og bredde med et nummer som til slutt vil endre seg når vi åpner en ny film. Legg til følgende variabler til listen over variabler på toppen av koden din: Nå som vi har all funksjonaliteten satt opp for spilleren, er det endelig tid for å få en video for å begynne å spille. Vi må først lage en video element, setter sin posisjon og legge den til på scenen i riktig lag. Nedenfor alt i Actionscript lag typen følgende: Nå må vi lage en ny NetConnection og koble den til den nye Netstream forbindelse sammen med noen lyttere for Netstream. Legg dette til koden: Nå la oss legge til funksjoner for å håndtere det som skjer når det er en bestemt video hendelse eller en feil med tilkoblingen. Vi vil også håndtere buffer for video. Legg inn koden under: Til slutt legger denne linjen med kode for å spille av videoen! Nå hvis du teste din video det bør spille. Det blir skalert rart fordi vi ikke har brukt xml fil for å sette bredde og høyde. Ikke bekymre deg for dette ennå, vil vi håndtere det problemet senere. Ingen av knappene vil fungere og statuslinjen vil ikke fungere. Det er fordi vi ikke har knyttet dem ennå, så la oss gjøre det nå Nå la oss legge til noen lyttere for våre knapper, slik at vi kan få noe funksjonalitet jobber . Hvis du nå teste filmen og klikk på pauseknappen, videoen skal evne. Hvis du klikker på stoppknappen videoen skal hoppe til den første rammen og pause. Hvis videoen er satt på pause eller stoppet kan du klikke på play-knappen for å gjenoppta video. Nå la oss få tidslinje og volum scrubbere å jobbe Vi må legge til noen variabler til vår kode, slik at vi kan få vår volum scrubber arbeidsmiljø. La oss legge all koden for å få scrubber å jobbe Test din film nå. Du kan skrubbe volumet tommelen og høre lyden endring Vi må legge til noen flere variabler for video tidslinje. Skriv inn følgende i vars delen av koden din: La oss legge til funksjoner som vil tillate oss å skrubbe tidslinjen og også flytte scrubber barer å spore mengden spilt og mengde lastet Din endelige koden til denne leksjonen skal se slik ut:
Trinn 2:. Tar Note Ditt Stage og elementer
, videoItem_mc
, og categoryItem_mc
. De finnes i mappene i biblioteket og er allerede satt til å bli eksportert når du publiserer.
Trinn 3:.! La oss starte med å skrive noen kode
Import caurina.transitions *; //Importere tweener klasse for våre transitionsimport caurina.transitions.properties.FilterShortcuts; //Importere tweener filter snarveier classstage.scaleMode = StageScaleMode.NO_SCALE; //Fortelle scenen ikke å skalere våre itemsstage.align = StageAlign.TOP_LEFT; //Setter scenen for å sentrere i øverst til venstre i .swf fileFilterShortcuts.init (); //Initialfilter snarveier for vår tweener klasse
Trinn 4: Navn objekter på Stage
Var VideoBox. : MovieClip = player_mc; //Dette vil målrette spilleren mc på hoved stagevar sidebarBox: MovieClip = rightSidebar_mc; //Målrette høyre sidebar mc på hoved stagevar featuredBox: MovieClip = featuredBox_mc; //Målrette utvalgt boksen mc på hoved stagevar featuredBoxBg: MovieClip = featuredBox_mc.featuredBoxBg_mc; //Målrette utvalgt boksens bakgrunn i utvalgt boksen
Trinn 5: Senter innhold på oppstart
setMyStage (); //Lytteren for side startupfunction setMyStage (): void {videoBox.x = stage.stageWidth /2 - (featuredBoxBg.width /2); //Posisjon VideoBox sin x plassering videoBox.y = (stage.stageHeight /2 - videoBox.height /2) - featuredBoxBg.height /2; //Posisjon VideoBox sin y plassering sidebarBox.x = (stage.stageWidth /2 + 92); //Posisjon sidebarBox sin x plassering sidebarBox.y = videoBox.y; //Posisjon sidebarBox sin y plassering basert på VideoBox sin y plassering featuredBox.x = videoBox.x; //Posisjon featuredBox sin x plassering basert på VideoBox sin x plassering featuredBox.y = videoBox.y + videoBox.height + 4; //Posisjon featuredBox sin y plassering basert på VideoBox sin y plassering}
Trinn 6:. Legg Stage Resize List og funksjon
funksjon:
stage.addEventListener (Event.RESIZE, myResizeEvent.); //Legge en lytter til scenen for å kjøre en funksjon når scenen bredden eller høyden changesfunction myResizeEvent (hendelse: Hendelse): void //kjøre funksjonen til å håndtere scenebredde og høyde resize {videoBox.x = stage.stageWidth /2 - (featuredBoxBg.width /2); videoBox.y = (stage.stageHeight /2 - videoBox.height /2) - featuredBoxBg.height /2; sidebarBox.x = (stage.stageWidth /2 + 92); sidebarBox.y = videoBox.y; featuredBox.x = videoBox.x; featuredBox.y = videoBox.y + videoBox.height + 4;.}
< h2> Trinn 7: Variabler for Video Elementer på Stage
Var playBtn:. MovieClip = player_mc.playBtn_mc; //Rettet mot play-knappen i playervar pauseBtn: MovieClip = player_mc.pauseBtn_mc; //Rettet på pauseknappen i playervar stopBtn: MovieClip = player_mc.stopBtn_mc; //Rettet på stoppknappen i playervar videoBlackBox: MovieClip = player_mc.videoBlackBox_mc; //Rettet mot svart bakgrunn boksen i playervar videoPreloader: MovieClip = player_mc.videoPreloader_mc; //Rettet mot video preloader i playervar videoTitleTxt: Textfield = player_mc.VideoTitle_txt; //Rettet mot dynamisk tekst som skal vise video titlevar videoTimeTxt: Textfield = player_mc.videoTime_txt; //Mål den dynamiske tekstlaget som skal vise tiden spilt og total timevar videoThumb: MovieClip = player_mc.videoTrack_mc.videoThumb_mc; //Rettet mot video scrubber thumbvar videoTrackProgress: MovieClip = player_mc.videoTrack_mc.videoTrackProgress_mc; //Rettet mot video fremgang barvar videoTrackDownload: MovieClip = player_mc.videoTrack_mc.videoTrackDownload_mc; //Rettet mot video nedlasting prosent barvar volumeThumb: MovieClip = player_mc.volumeSlider_mc.volumeThumb_mc; //Rettet volumet scrubber thumbvar volumeTrack: MovieClip = player_mc.volumeSlider_mc.volumeTrackFull_mc; //Mål volumet scrubber spor prosent bar
Trinn 8: Button Roll og rollouts
PlayBtn.addEventListener (MouseEvent.MOUSE_OVER, btnOver); playBtn.addEventListener (MouseEvent.MOUSE_OUT, btnOut); pauseBtn.addEventListener (MouseEvent.MOUSE_OVER, btnOver); pauseBtn.addEventListener (MouseEvent.MOUSE_OUT, btnOut); stopBtn.addEventListener (MouseEvent.MOUSE_OVER, btnOver); stopBtn.addEventListener (MouseEvent .MOUSE_OUT, btnOut); videoThumb.addEventListener (MouseEvent.MOUSE_OVER, btnOver); videoThumb.addEventListener (MouseEvent.MOUSE_OUT, btnOut); volumeThumb.addEventListener (MouseEvent.MOUSE_OVER, btnOver); volumeThumb.addEventListener (MouseEvent.MOUSE_OUT, btnOut);
Trinn 9:. Global Funksjoner for Knapper
funksjon btnOver (event : MouseEvent): void {event.currentTarget.gotoAndPlay ("over"); //Targets gjeldende MovieClip når musen beveges over det og forteller det til å gå til de over etiketten keyframe og spille} funksjon btnOut (event: MouseEvent): void //Targets gjeldende MovieClip når musen beveges over det og forteller det til gå til ut etiketten keyframe og spille {event.currentTarget.gotoAndPlay ("ut");}
Trinn 10: Rollover og Utrulling Funksjonalitet
MovieClip i player_mc
MovieClip og åpne den.
Trinn 11:. Gjør movieclips oppføre seg som Knapper
playBtn.mouseChildren = false.; //Gjør elementene inne i målrettet filmklipp unselectableplayBtn.buttonMode = true; //Gir håndpekeren når du holder over movieclippauseBtn.mouseChildren = false; pauseBtn.buttonMode = true; stopBtn.mouseChildren = false; stopBtn.buttonMode = true; videoThumb.mouseChildren = false; videoThumb.buttonMode = true; volumeThumb.mouseChildren = false; volumeThumb.buttonMode = true;
Trinn 12:. Oppstart
videoPreloader.visible = false; videoTitleTxt.text = ""; videoTimeTxt.text = "0:00 /0:00";
Trinn 13: Sette opp Our Netstream Object
Var currentVideo: String; //Denne strengen skal brukes til å spille av gjeldende video selectedvar videoWidth: Nummer = 500; //Dette vil sette bredden på video objektet og kan endres senere onvar videoHeight: Nummer = 400; //Dette vil sette høyden på video objektet og kan endres senere onvar varighet: Number; //Vi vil bruke dette senere for å få varigheten av video som spilles
Trinn 14: Lag en Video Object
Var video: Video = new Video (videoWidth, videoHeight); //Oppretter en ny video element og sette bredden og heightvideo.x = 0; //Posisjon videoens x positionvideo.y = 0; //Posisjon videoens y positionvideoBlackBox.addChild (video); //Legge videoen elementet til videoBlackBox MovieClip i player_mc MovieClip
Trinn 15: NetConnection og Netstream Connection
Var video: Video = new Video (videoWidth, videoHeight); //Oppretter en ny video element og sette bredden og heightvideo.x = 0; //Posisjon videoens x positionvideo.y = 0; //Posisjon videoens y positionvideoBlackBox.addChild (video); //Legge videoen elementet til videoBlackBox MovieClip i player_mc movieclipvar nc: NetConnection = new NetConnection (); //Variabel for en ny NetConnectionnc.connect (null); //Setter nc variabelen til nullvar ns: Netstream = new Netstream (nc); //Oppretter en variabel for en ny Netstream forbindelse & koble den til nc variablens.addEventListener (NetStatusEvent.NET_STATUS, myStatusHandler); //Legge en lytter til Netstream å lytte etter eventuelle endringer som skjer med NetStreamns.addEventListener (AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler); //Legge en lytter til Netstream for eventuelle feil som kan happenvideo.attachNetStream (NS); //Feste Netstream variabelen til video objectvar newMeta: Object = new Object (); //Oppretter et nytt objekt å håndtere metaDatanewMeta.onMetaData = onMetaData; //Når vi mottar metadata, fest den til newMeta objectns.client = newMeta; //Feste NetStream.client til newMeta variablens.bufferTime = 5; //Setter buffer tid til 5 sekunder
Trinn 16: Netstream Funksjoner og Buffer Video
funksjon asyncErrorHandler (Event: AsyncErrorEvent): void {//trace(event.text); //Dette vil håndtere eventuelle feil med videoavspilling} funksjon myStatusHandler (event: NetStatusEvent): void {//trace(event.info.code); //Dette vil håndtere eventuelle hendelser som er avfyrt når videoen spilles av bryteren (event.info.code) //bytte uttalelse for å håndtere de ulike hendelser med NetConnection {case "NetStream.Buffer.Full": //når vår buffer er full brann koden under ns.bufferTime = 10; //Satt buffer tid til 10 sekunder Tweener.addTween (videoPreloader, {alfa: 0, tid: 0,3}); //Tween videoPreloaders alfa til 0 break; case "NetStream.Buffer.Empty": //når vår buffer er tom brann koden under ns.bufferTime = 10; //Satt buffer tid til 10 sekunder Tweener.addTween (videoPreloader, {alfa: 1, tid: 0,3}); //Tween videoPreloaders alfa til en pause; case "NetStream.Play.Start": //da vår video begynner å spille vi fyre koden under ns.bufferTime = 10; //Setter buffer tid til 10 sekunder Tweener.addTween (videoPreloader, {alfa: 1, tid: 0,3}); //Tween videoPreloaders alfa til en pause; case "NetStream.Seek.Notify": //når du søker med scrubber det sender et rette signal av tiden ns.bufferTime = 10; //Setter buffer tid til 10 sekunder Tweener.addTween (videoPreloader, {alfa: 1, tid: 0,3}); //Tween videoPreloaders alfa til en pause; case "NetStream.Seek.InvalidTime": //når du slipper scrubber forkant av video som har blitt lastet, får du denne feilen. det vil hoppe deg tilbake til den siste rammen som er blitt lastet ns.bufferTime = 10; //Setter buffer tid til 10 sekunder Tweener.addTween (videoPreloader, {alfa: 1, tid: 0,3}); //Tween videoPreloaders alfa til en pause; case "NetStream.Play.Stop": //når du kommer til slutten av videoen Tweener.addTween (videoPreloader, {alfa: 0, tid: 0,3}); //Tween videoPreloaders alfa til 0 ns.pause (); //Pause videoen ns.seek (1); //Søke videoen til den første rammen break; }} funksjon onMetaData (newMeta: Object): void {//trace ("Metadata: varighet =" + newMeta.duration + "width =" + newMeta.width + "height =" + newMeta.height + "framerate =" + newMeta.framerate); //Sporer hva det står varighet = newMeta.duration; //Angi varigheten variabelen til newMeta varighet}
Trinn 17: Spill Video
Ns.play ("flv /bsu -fotball-open.flv "); //Fortelle Netstream hva videoen for å spille og spille det
Trinn 18:. Legg Lyttere for knapper
playBtn.addEventListener (MouseEvent.CLICK, playBtnClick); //Legge et klikk lytteren til playBtnpauseBtn.addEventListener (MouseEvent.CLICK, pauseBtnClick); //Legge et klikk lytteren til pauseBtnstopBtn.addEventListener (MouseEvent.CLICK, stopBtnClick); //Legge et klikk lytter til de stopBtn
Trinn 19: Legg avspillingsfunksjoner
funksjon playBtnClick (event: MouseEvent): void {ns.resume (); //Fortelle Netstream å gjenoppta avspillingen} funksjon pauseBtnClick (event: MouseEvent): void {ns.pause (); //Fortelle Netstream å pause avspillingen} funksjon stopBtnClick (event: MouseEvent): void {ns.pause (); //Fortelle Netstream å pause avspillingen ns.seek (0); //Fortelle Netstream å gå til den første rammen i videoen}
Trinn 20:. Legg Volum Scrubber Variabler og Lyttere
Var videoSound: SoundTransform; //Variabel for å kontrollere den globale lyden i dine movievar volumeBounds: rektangel; //Variabel for å stille volumet scrubber boundsvolumeThumb.addEventListener (MouseEvent.MOUSE_DOWN, volumeScrubberDown); legge en MOUSE_DOWN lytter til volumet scrubber tommelen
Trinn 21: Legg Volume Scrubber Kode
videoSound = new SoundTransform ();. //Oppretter et nytt SoundTransform objectvideoSound.volume = 1; //Setter SoundTransform objektet til en som er 100% ns.soundTransform = videoSound; //Knytter video til SoundTranform objectfunction volumeScrubberDown (event: MouseEvent): void {volumeBounds = new rektangel (0,0,75,0); //Setter grensene for scrubber volumeThumb.startDrag (falsk, volumeBounds); //Når du klikker og drar volumeThumb MovieClip det går denne funksjonen stage.addEventListener (MouseEvent.MOUSE_UP, volumeThumbUp); //Legger lytteren til scenen for når musen utgivelser klikket stage.addEventListener (MouseEvent.MOUSE_MOVE, volumeThumbMove); //Legger lytteren til scenen for når musen beveges} funksjon volumeThumbUp (event: MouseEvent): void {volumeThumb.stopDrag (); //Stopper volumeThumb fra å bli dratt stage.removeEventListener (MouseEvent.MOUSE_UP, volumeThumbUp); //Fjerne denne lytteren fra scenen stage.removeEventListener (MouseEvent.MOUSE_MOVE, volumeThumbMove); //Fjerne denne lytteren fra scenen} funksjon volumeThumbMove (event: MouseEvent): void {volumeTrack.width = volumeThumb.x; //Setter den blå linjen i volumeScrubber til bredden på hvor scrubber er videoSound.volume = (volumeThumb.x) /50; //Setter volumet av video til en prosentandel av sporet avhengig av hvor volumeThumb.x Beliggenheten er ns.soundTransform = videoSound; //Faktisk forvandle volumet.}
Trinn 22: Scrubber Variabler og Lyttere
Var videoInterval = setInterval (videoStatus, 100); //Varighet mellom intervallene, i millisecondsvar amountLoaded: Number; //Variabel for å fortelle oss hvor mye av videoen har vært loadedvar scrubInterval; //Variabel for tidslinjen scrubbervideoThumb.addEventListener (MouseEvent.MOUSE_DOWN, videoScrubberDown);
Trinn 23: legge til funksjoner for Video Scrubber
fungere videoStatus (). void {amountLoaded = ns.bytesLoaded /ns.bytesTotal; //Setter vår amountLoaded variabel til et tall som er bytesLoaded delt på bytesTotal av videoen videoTrackDownload.width = amountLoaded * 340; //Setter bredden på videoTrackDownload bar til amountLoaded var og multiplisere det med sporvidde. videoThumb.x = ns.time /varighet * 340; //Flytte videoThumb x stilling til plasseringen på sporet som er knyttet til den aktuelle videoen tidslinjen videoTrackProgress.width = videoThumb.x; //Endrer bredden på videoTrackProgress bar til x plasseringen av videoThumb} funksjon videoScrubberDown (event: MouseEvent): void {var grenser: rektangel = new rektangel (0,0,340,0); //Setter grensene for video scrubber basert på bredden av vaske clearInterval (videoInterval); //Fjerne vårt videoInterval slik at vi kan skrubbe scrubInterval = setInterval (scrubTimeline, 10); //Setter scrubTimeline lytteren å oppdatere video videoThumb.startDrag (falske, grenser); //Begynner å dra videoThumb innenfor grensene vi setter stage.addEventListener (MouseEvent.MOUSE_UP, stopScrubbingVideo); //Legger lytteren til scenen for å lytte etter når vi slipper muse} funksjon scrubTimeline (): void {ns.seek (Math.floor ((videoThumb.x /340) * varighet)); //Søker videoen til rammen knyttet til videoThumb sin x beliggenhet på scrubber sporet} funksjon stopScrubbingVideo (Event: MouseEvent): void {stage.removeEventListener (MouseEvent.MOUSE_UP, stopScrubbingVideo); //Fjerner denne lytteren når vi slipper muse clearInterval (scrubInterval); //Tømmer scrubInterval lytteren så videoen vil gjenoppta avspillingen videoInterval = setInterval (videoStatus, 100); //Setter videoStatus intervall for å flytte videoThumb med videoavspilling prosent videoThumb.stopDrag (); //Forteller videoThumb å stoppe draggin med vår mus}
//////IMPORT KLASSER OG SETT STAGE EGENSKAPER //////import caurina. overganger. *; import caurina.transitions.properties.FilterShortcuts; stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; FilterShortcuts.init (); //////hovedscenen filmklipp //////var VideoBox: MovieClip = player_mc; Var sidebarBox: MovieClip = rightSidebar_mc; Var featuredBox: MovieClip = featuredBox_mc; Var featuredBoxBg: MovieClip = featuredBox_mc.featuredBoxBg_mc; //////VIDEO filmklipp //////Var playBtn: MovieClip = player_mc.playBtn_mc; Var pauseBtn: MovieClip = player_mc.pauseBtn_mc; Var stopBtn: MovieClip = player_mc.stopBtn_mc; Var videoBlackBox: MovieClip = player_mc.videoBlackBox_mc; Var videoPreloader: MovieClip = player_mc.videoPreloader_mc; Var videoTitleTxt: Textfield = player_mc.VideoTitle_txt; Var videoTimeTxt: Textfield = player_mc.videoTime_txt; Var videoThumb: MovieClip = player_mc.videoTrack_mc.videoThumb_mc; Var videoTrackProgress: MovieClip = player_mc.videoTrack_mc.videoTrackProgress_mc; Var videoTrackDownload: MovieClip = player_mc.videoTrack_mc.videoTrackDownload_mc; Var volumeThumb: MovieClip = player_mc.volumeSlider_mc .volumeThumb_mc; Var volumeTrack: MovieClip = player_mc.volumeSlider_mc.volumeTrackFull_mc; //////VIDEO VARS //////Var currentVideo: String; Var videoWidth: Nummer = 500; Var videoHeight: Nummer = 400; Var videoInterval = setInterval (videoStatus, 100); Var amountLoaded: Number; Var varighet: Number; Var scrubInterval; Var videoSound: SoundTransform; Var volumeBounds: rektangel, //////FIL OPPSTART //////videoPreloader.visible = false; videoTitleTxt.text = ""; videoTimeTxt.text = "0:00 /0:00"; playBtn.mouseChildren = false; playBtn.buttonMode = true; pauseBtn.mouseChildren = false; pauseBtn.buttonMode = true; stopBtn.mouseChildren = false; stopBtn.buttonMode = true; videoThumb.mouseChildren = false; videoThumb.buttonMode = true; volumeThumb.mouseChildren = false; volumeThumb.buttonMode = true; //////SET STAGE //////setMyStage (); stadium .addEventListener (Event.RESIZE, myResizeEvent); //////VIDEO hendelsen lyttere //////playBtn.addEventListener(MouseEvent.MOUSE_OVER, btnOver); playBtn.addEventListener (MouseEvent.MOUSE_OUT, btnOut); playBtn.addEventListener (MouseEvent.CLICK, playBtnClick); pauseBtn.addEventListener (MouseEvent.MOUSE_OVER, btnOver); pauseBtn.addEventListener (MouseEvent.MOUSE_OUT, btnOut); pauseBtn.addEventListener (MouseEvent.CLICK, pauseBtnClick); stopBtn.addEventListener (MouseEvent.MOUSE_OVER, btnOver ); stopBtn.addEventListener (MouseEvent.MOUSE_OUT, btnOut); stopBtn.addEventListener (MouseEvent.CLICK, stopBtnClick); videoThumb.addEventListener (MouseEvent.MOUSE_OVER, btnOver); videoThumb.addEventListener (MouseEvent.MOUSE_OUT, btnOut); videoThumb.addEventListener ( gå i stykker; gå i stykker; gå i stykker; gå i stykker; gå i stykker; gå i stykker;