Share
I denne nybegynneren til mellomopplæringen skal jeg vise deg hvordan du spiller HD-video uten den uunngåelige uskarpheten som oppstår når videoen forstørres.
Årsaken til dette er at jeg blir litt lei av å besøke YouTube eller andre nettsteder som presenterer HD-video med et fullskjermalternativ bare for å oppdage, når jeg klikker på Full Screen-knappen, at jeg plutselig trenger resept for brillene mine endret.
Problemet er ikke videoen, men hvordan Flash Player håndterer prosessen med å gå på fullskjerm. La oss finne ut hvordan du gjør ting riktig...
Når du spiller video i Flash-spilleren, legges videoen, for all hensikt, inn i scenen. Klikk på fullskjermknappen og scenen blir større. Når scenen blir større, bringer den videoen sammen med den. Forstørre en 720 x 480 video til 1280 ved 720, og er det rart at videoen blir uklar?
Adobe ble klemt med dette problemet da de introduserte muligheten til å spille full HD-video via Flash Player. Deres løsning, introdusert i Flash Player 9.0.115.0, var ekstremt elegant. I stedet for å forstørre scenen, hvorfor ikke "vri" viden i et rektangel "over" scenen og ha designeren eller utvikleren bestemme om du skal forstørre scenen eller bare et stykke av det. Dette oppnås ved hjelp av et annet smart design på Adobes side: Maskinvareakselasjon og skalering.
Maskinvare akselerasjon blir brukt gjennom Flash Player. Hvis du høyreklikker (PC) eller ctrl-klikker (Mac) på en swf-spilling på en nettside, åpner du hurtigmenyen til Flash Player. Å velge innstillinger og du vil bli presentert med innstillingsvinduet som vises i Bilde 1. Hvis du velger Aktiver maskinvareakselerasjon Du kan se full HD-video på fullskjerm. Hvis du lar det ikke være valgt, klikker du på en fullskjerm-knapp i spilleren ved hjelp av Scaling API som brukes når en FLV-fil tas ut til fullskjerm. Den ryddige tingen om dette er selv om du har valgt maskinvareaccelerasjon, brukes den bare når det er nødvendig. Så når en Full Screen-knapp klikkes, blir kun rektangelet og innholdet - en video i dette tilfellet - skalert til fullskjerm og maskinvareakselerasjonen tar over for å spille av videoen.
Etter å ha gitt deg orienteringen om hvordan vi fikk deg til å lese denne opplæringen, følg disse trinnene for å opprette en full HD-videoopplevelse:
Inkludert med nedlastingen er en .mp4 fil-Vultures.mp4. Det er et klipp fra en TV-serie produsert av College, Humber Institute of Technology og Advanced Learning. Vi bruker denne filen til prosjektet, men mov, f4v og fysisk store FLV-filer kan også brukes.
Du har kanskje hørt mye "buzz" rundt HD-video og .mp4-formatet de siste par årene og lurte på hva snakkeren handler om. Her er en kort "heiskast":
Nøkkelen til .mp4-formatet er AVC / H.264-videostandarden introdusert til Flash Player i august 2007. .mp4-standarden, for å være presis, kalles MPEG-4, som er en internasjonal standard utviklet av Motion Pictures Expert Group (MPEG) og formatet har også ISO-anerkjennelse.
Hva gjør disse filene så attraktive for Flash-designere og utviklere er at MPEG-4-filer ikke er avhengige av enheten. De kan like like enkelt spilles på en HD TV, iPod eller Playstation, ettersom de kan spilles i en nettleser. Takket være maskinvareakselasjon og multithreading-støtte innebygd i Flash Player, kan du også spille av video med hvilken som helst oppløsning og bitdybde til og med full HD 1080p-oppløsning du ser på HD-TV.
Det ene aspektet av MPEG-4-standarden som jeg finner ganske spennende er at, som XFL-formatet bare kommer i bruk i hele CS4-pakken, er det et "container" -format. Hva menes med dette er .mp4-filer kan lagre flere typer data på en rekke spor i filen. Hva det gjør er å synkronisere og interleave dataene som betyr at en .mp4-fil kan også inkludere metadata, kunstverk, teksting og så videre som potensielt kan nås av Flash. Det er de gode nyhetene. Den dårlige nyheten er selv om MPEG-4-beholderen kan inneholde flere lyd- og videospor, spiller Flash Player for øyeblikket bare en av hver og ignorerer resten. Den andre delen av dårlige nyheter er dette formatet støtter ikke gjennomsiktighets mening, hvis du vil legge til en alfakanal, er du tilbake til FLV-formatet.
Til slutt krever H.264 .mp4-filer kraftig prosessorkraft. Adobe har vært ganske tydelig i å fortelle oss at dette innholdet er best sett på dual core PC og Mac. Skiftet til disse prosessorene har vært i gang i et par år, men det vil fortsatt være et par år før alle datamaskiner kan klare prosessoren krever at dette formatet krever.
Jeg har knapt skummet overflaten av dette formatet. Hvis du vil ta en "dyp dykk" i dette formatet, sjekk ut H.264 for resten av oss skrevet av Kush Amerasinghe på Adobe. Det er en enorm primer for de som er ny på denne teknologien.
Åpne BigItUp.fla fil som ligger i nedlastingen. Hvis dette er første gang du arbeider med en H264-fil eller går på fullskjerm, kan du finne dimensjonene Flash-scene - 1050 ved 500 - for å være ganske massiv. Vi trenger scenerommet for å imøtekomme videoen som har en fysisk størrelse på 854 x 480, og å gi plass til knappen i øverste venstre hjørne av scenen.
Legg til følgende ActionScript i handlingslaget:
importer flash.geom. *; importer flash.display.Stage; var minSound: SoundTransform; var myVideo: Video; var nc: NetConnection = ny NetConnection (); nc.connect (null); var ns: NetStream = ny NetStream (nc); ns.client = dette; btnBig.buttonMode = true;
Vi starter med å bringe inn geometriske pakken og sceneklassen for å ta "hovering" -videoen til fullskjerm. De neste to variablene - mySound og myVideo - skal brukes til å angi lydnivået for lyden og for å lage et videobilde.
Med den housekeeping ut av veien vi satt opp NetConnection og NetStream objekter som vil tillate videoen å spille. Den endelige linjen setter filmklippet for å få videoen til full skjerm i buttonMode.
Legg til følgende ActionScript:
Accentsconagua
ns.addEventListener (NetStatusEvent.NET_STATUS, netStatusHandler); funksjon netStatusHandler (evt: NetStatusEvent): void if (evt.info.code == "NetStream.FileStructureInvalid") trace ("MP4s filstruktur er ugyldig."); else if (evt.info.code == "NetStream.NoSupportedTrackFound") trace ("MP4 inneholder ikke støttede spor"); funksjon onMetaData (md: Object): void myVideo.width = md.width; myVideo.height = md.height; Den første funksjonen lar oss gjøre noen feilkontroll. Ikke alle mp4-filer er opprettet like, og hvis videoen ikke spiller, ville det være fint å vite hva problemet kan være. I dette tilfellet skal vi lytte etter et par feilmeldinger fra NetStream-klassen som er germane til mp4-filer. Den første er en sjekk for å sikre at filen ikke er skadet eller er et format som ikke støttes. Bare fordi en fil vil spille i Quicktime-spilleren, betyr det ikke at den vil spille i Flash.
Den neste kontrollerer at lyd- og videosporene støttes. For eksempel hvis H.264-kodingen ikke brukes på videosporet eller AAC-koding ikke blir brukt på lydsporet, har du problemer.
Den neste funksjonen går inn i videofilens metadata for å oppnå bredde- og høydeverdiene for videobjektet.
Skriv inn følgende ActionScript:
funksjon goFullScreen (evt: Objekt): void var scalingRect: Rectangle = nytt rektangel (myVideo.x, myVideo.y, myVideo.width, myVideo.height); scenen ["fullScreenSourceRect"] = scalingRect; hvis (stage.displayState == StageDisplayState.NORMAL) stage.displayState = StageDisplayState.FULL_SCREEN; else stage.displayState = StageDisplayState.NORMAL; ; btnBig.addEventListener (MouseEvent.CLICK, goFullScreen);<
Det er her "magien" skjer. Denne funksjonen lager rektangelet som brukes til å holde videoen, og størrelsen er satt til å passe til de for videoobjektets dimensjoner trukket ut av den andre funksjonen i forrige kodeblokk. Neste linje angir fullScreenSourceRect Egenskapen til scenen til dimensjonene av rektangelet er nettopp opprettet.
Den betingede utsagnet som består av resten av kodeblokken, kontrollerer nåværende tilstand av scenestørrelsen fra normal til fullskjerm eller omvendt. Slik går videoen på fullskjerm. Videoobjektet er lagt inn i denne kilden, ikke scenen, noe som betyr at den kan utvide eller kontrakt uten at scenen gjør det samme og "fuzzing" videoen.
Den siste linjen bruker knappen på scenen for å gå på fullskjerm.
Skriv inn følgende ActionScript:
myVideo = ny video (); myVideo.x = 185; myVideo.y = 5; addChild (MyVideo); myVideo.attachNetStream (ns); ns.play ( "Vultures.mp4"); mySound = ns.soundTransform; mySound.volume = .8; ns.soundTransform = mySound;
Den første kodeblokken forteller Flash variabelen "myVideo" er navnet på et videobilde som ligger 185 piksler fra venstre kant av det enorme scenen og er 5 piksler ned fra toppen. De addChild () Metoden setter videobjektet på scenen og de resterende to linjene knytter videobjektet til NetStream og start videospillet.
Den endelige koden blokk ser på videoens lydspor som blir matet inn i prosjektet gjennom NetStream og senker lydvolumet til 80%.
Lagre filen i samme mappe som videoen.
Normalt, på dette stadiet av opplæringen vil jeg også fortelle deg å teste swf. Du kan, men knappen vil ikke fungere. Det beste du kan forvente er å se videospillet i swf. Fullskjerm-funksjonen er drevet av HTML-omslaget til swf, ikke Flash. La oss håndtere den ene.
Velg Fil> Publiser innstillinger. Når dialogboksen Publiseringsinnstillinger åpnes, velger du alternativene SWF og HTML.
Klikk på Flash-fanen. Velg Flash Player 9 eller Flash Player 10 i spilleren. Husk HD-video kan bare spilles i Flash Player 9 eller senere.
Klikk på HTML-fanen. I rullegardinmenyen Maler velger du Bare Flash-Tillat fullskjerm.
Klikk på Publiser-knappen for å lage SWF og HTML-filen.
Lagre filen, avslutt Flash og åpne HTML-siden i en nettleser. Gå videre, klikk på "Big det opp!"-knappen.
Hva med det? Real Flash-designere og utviklere bruker ikke noen "steenking" -komponenter.
I desember 2007 utgav Adobe stille oppdatering 3 for Flash Player 9. Jeg bruker ordet "stille" fordi det ble blandet inn med de vanlige feilrettingene og tweaks, de gled inn i en oppdatert versjon av FLVPlayback-komponenten som tillot det å spille HD video. Dette er hvordan:
Åpne et nytt Flash ActionScript 3.0-dokument og lagre det i samme mappe som Vultures-videoen.
Å velge Vindu> Komponenter og i videokomponentene, dra en kopi av FLVPlayback komponent til scenen.
Åpne komponentinspektøren. Du må gjøre to ting her. Velg SkinUnderAllNoCaption.swf i hudområdet, naviger i kildeområdet til Vultures.mp4 fil og legg den til i dialogboksen Innholdsvei. Klikk avkrysningsboksen for kampkilde og klikk OK. Flash vil gå inn i videoen og ta tak i metadataene. Når det er ferdig, lukkes dialogboksen og komponenten vil vokse til dimensjonene til videoen. Lukk komponentinspektøren.
Velg Endre> Dokument og klikk på innhold knappen for å endre størrelsen på scenen til størrelsen på komponenten ... slags. Når scenen er satt til størrelsen på komponenten, endres den bare til størrelsen på videoen. Huden blir igjen hengende fra bunnen av scenen, noe som betyr at den ikke kommer til å være synlig på en nettside. Endre høydeverdien til 525 piksler for å imøtekomme huden. Klikk på OK for å godta endringen.
Selvfølgelig, nå som du har endret scenemåttene, er komponenten hengende av scenen. Velg komponenten og i Egenskapspanelet sett X- og Y-koordinatene til 0.
Velg Fil> Publiser innstillinger og velg SWF- og HTML-filtyper.
Klikk på Flash-fanen og velg Flash Player 9.
Klikk på HTML-fanen og velg Bare blits - Tillat fullskjerm i Maler-panelet.
Klikk på Publiser-knappen. Når SWF og HTML-filen publiseres, klikker du OK. Lagre filen og avslutt Flash.
Åpne HTML-filen i en nettleser. Klikk på Fullskjerm-knappen for å starte i fullskjermmodus.
I denne opplæringen har jeg vist deg to måter å gå i fullskjermmodus med Flash. Den første metoden brukte ActionScript for å gjøre dette mulig, og nøkkelen var å lage et rektangel som "hovered" over scenen og ble brukt til å holde videoen.
Det andre eksempelet viste deg hvordan du bruker FLVPlayback-komponenten til å gå i fullskjerm.
Som du har oppdaget, var nøkkelen for begge prosjekter ikke ActionScript, men HTML-omslaget som aktiverte fullskjermspillingen.
Disse veiledningene jobber alltid lokalt, men jeg er sikker på at du lurer på om de faktisk ville jobbe online. Jeg har lagt opp begge for å bevise at "Ja, det kan faktisk gjøres."
Koden tilnærming i det første eksemplet finner du her. Videoen er vennlig gitt av Adobe og Red Bull, og er en full 1080p produksjon.
Gribbene vises i et eksempel som bruker komponenten her.
