Share
În acest tutorial începător până la intermediar, vă voi arăta cum să redați un videoclip HD fără neclaritatea inevitabilă care apare atunci când videoclipul este lărgit.
Motivul pentru asta este că mă obișnuiesc să vizitez YouTube sau alte site-uri care prezintă video HD cu o opțiune de ecran complet numai pentru a descoperi, când fac clic pe butonul Full Screen, că am nevoie brusc de prescripție pentru ochelarii mei schimbat.
Problema nu este videoclipul, ci modul în care Flash Player se ocupă de procesul de accesare a întregului ecran. Să aflăm cum să facem lucrurile cum se cuvine...
Când redați un clip video în Flash Player, videoclipul este pus în scenă în toate scopurile și scopurile. Faceți clic pe butonul complet al ecranului, iar scena devine mai mare. Când scena devine mai mare, ea aduce video împreună cu ea. Măriți un videoclip de 720 x 480 la 1280 de 720 și este de mirare că videoclipul devine fuzzy?
Adobe a luptat cu această problemă atunci când au introdus posibilitatea de a reda video complet HD prin Flash Player. Soluția lor, introdusă în Flash Player 9.0.115.0, a fost extrem de elegantă. În loc să măriți scena, de ce să nu "mușcați" vidul într-un dreptunghi "deasupra" scenei și să decideți dacă proiectantul sau dezvoltatorul să mărească scena sau doar o bucată din ea. Acest lucru este realizat printr-o altă piesă de inginerie inteligentă din partea Adobe: accelerarea hardware și scalarea.
Accelerarea hardware se aplică prin Flash Player. Dacă dați clic dreapta (PC) sau ctrl-clic (Mac) pe o redare SWF într-o pagină Web, veți deschide meniul contextual Flash Player. Selectați Setări și veți fi prezentat cu fereastra de setări din Imaginea 1. Dacă selectați Activați accelerarea hardware puteți viziona videoclipul HD pe ecran complet. Dacă lăsați-o deselectată, făcând clic pe un buton complet pe ecran, rezultă playerul utilizând API-ul de scalare utilizat atunci când un fișier FLV este scos pe ecran complet. Lucrul perfect despre asta este chiar dacă ați selectat accelerația hardware, este utilizată numai atunci când este necesar. Astfel, când un buton pe ecran complet face clic doar la dreptunghi și conținutul - un videoclip în acest caz - este scalat pe ecran complet și accelerarea hardware preia pentru a reda videoclipul.
După ce v-ați dat informarea cu privire la modul în care ați citit acest tutorial, urmați acești pași pentru a crea o experiență video pe ecran complet HD:
Inclus cu descărcarea este un fișier .mp4 - Vultures.mp4. Este un clip dintr-o serie de televiziune produsă de colegiul meu, institutul de tehnologie și învățare avansată din Humber. Vom folosi acest fișier pentru proiect, deși fișierele mov, f4v și fișierele mari FLV fizice pot fi, de asemenea, folosite.
Este posibil să fi auzit o mulțime de "buzz" în jurul valorii de HD video și format. Mp4 în ultimii ani și sa întrebat ce este vorba despre chatter. Iată un scurt "pitch lift":
Cheia pentru formatul .mp4 este standardul video AVC / H.264 introdus în Flash Player în august 2007. Standardul .mp4, pentru a fi precis, este cunoscut sub numele de MPEG-4, un standard internațional dezvoltat de Motion Pictures Grupul de experți (MPEG) și formatul au de asemenea recunoaștere ISO.
Ceea ce face ca aceste fișiere să fie atât de atractive pentru designerii Flash și dezvoltatori este că fișierele MPEG-4 nu sunt dependente de dispozitiv. Ele pot fi redate la fel de ușor pe un televizor HD, iPod sau Playstation, deoarece pot fi redate într-un browser. De asemenea, datorită accelerării hardware și suportului multithreading încorporat în Flash Player, puteți reda video la orice rezoluție și adâncime până la, și inclusiv rezoluția Full HD 1080p pe care o vizionați pe televizoarele HD.
Singurul aspect al standardului MPEG-4 pe care îl consider destul de interesant este faptul că, la fel ca formatul XFL care tocmai a intrat în utilizare în întreaga suită CS4, este un format "container". Ce se înțelege prin acest lucru este fișierele .mp4 pot stoca mai multe tipuri de date pe un număr de piste din fișier. Ceea ce face este sincronizarea și intercalarea datelor, ceea ce înseamnă că un fișier .mp4 poate include și metadate, opere de artă, subtitrare și așa mai departe, care pot fi accesate de Flash. Asta e vestea bună. Vestea proastă este că, deși containerul MPEG-4 poate conține mai multe piste audio și video, Flash Player în prezent joacă doar unul din fiecare și ignoră restul. Celălalt fragment de veste proastă este că acest format nu acceptă sensul de transparență, dacă doriți să adăugați un canal alfa, vă întoarceți la formatul FLV.
În cele din urmă, fișierele H.264 .mp4 necesită o putere de procesare de mare capacitate. Adobe a fost destul de clar în a ne informa că acest conținut este cel mai bine văzut pe PC-urile dual core și Mac. Trecerea la aceste procesoare a fost în derulare pentru câțiva ani, dar va fi încă cu câțiva ani înainte ca toate computerele să poată gestiona cerințele de procesor pe care acest format le cere.
Abia am scazut suprafata acestui format. Dacă doriți să faceți o "adâncă scufundare" în acest format, verificați H.264 pentru restul de noi, scris de Kush Amerasinghe la Adobe. Este un primer extraordinar pentru cei dintre voi care sunt noi în această tehnologie.
Deschide BigItUp.fla fișier situat în descărcare. Dacă aceasta este prima dată când lucrați cu un fișier H264 sau mergeți pe ecran complet, este posibil ca dimensiunile scenei Flash - 1050 cu 500 - să fie destul de masive. Avem nevoie de spațiul de scenă pentru a găzdui videoclipul cu o dimensiune fizică de 854 x 480 și pentru a lăsa loc pentru butonul din colțul din stânga sus al scenei.
Adăugați următorul ActionScript în stratul de acțiuni:
import flash.geom. *; import flash.display.Stage; var mySound: SoundTransform; var myVideo: Video; var nc: NetConnection = noul NetConnection (); nc.connect (null); var ns: NetStream = noul NetStream (nc); ns.client = aceasta; btnBig.buttonMode = adevărat;
Începem prin aducerea pachetului de geometrie și a clasei Stage, pentru a face ca videoclipul să se afle pe ecran complet. Următoarele două variabile - mySound și myVideo - vor fi utilizate pentru a seta nivelul volumului audio și pentru a crea un obiect video.
Cu gospodăria aia din drumul pe care l-am înființat NetConnection și NetStream obiecte care vor permite redarea videoclipului. Linia finală pune piesa de filmare folosită pentru a accesa ecranul video buttonMode.
Adăugați următorul ActionScript:
Accentsconagua
ns.addEventListener (NetStatusEvent.NET_STATUS, netStatusHandler); funcția netStatusHandler (evt: NetStatusEvent): void if (evt.info.code == "NetStream.FileStructureInvalid") trace ("Structura fișierului MP4 este nevalidă"); altfel dacă (evt.info.code == "NetStream.NoSupportedTrackFound") trace ("MP4 nu conține piese acceptate"); onMetaData (md: Object): void myVideo.width = md.width; myVideo.height = md.height; Prima funcție ne permite să facem o verificare a erorilor. Nu toate fișierele mp4 sunt create la fel și dacă videoclipul nu se joacă, ar fi frumos să știm ce ar putea fi problema. În acest caz, vom asculta câteva mesaje de eroare din clasa NetStream, care sunt germane la fișiere mp4. Prima este o verificare pentru a vă asigura că fișierul nu este corupt sau este un format care nu este acceptat. Doar pentru că un fișier va juca în playerul Quicktime nu înseamnă că va juca în Flash.
Următoarea vă asigură că sunt acceptate piste audio și video. De exemplu, dacă codificarea H.264 nu este utilizată pe piesa video sau codificarea AAC nu este aplicată piesei audio, veți avea probleme.
Următoarea funcție intră în metadatele fișierului video pentru a obține valorile de lățime și înălțime ale obiectului video.
Introduceți următorul ActionScript:
funcția goFullScreen (evt: Object): void var scalingRect: Rectangle = nou dreptunghi (myVideo.x, myVideo.y, myVideo.width, myVideo.height); etapa ["fullScreenSourceRect"] = scalingRect; dacă (stage.displayState == StageDisplayState.NORMAL) stage.displayState = StageDisplayState.FULL_SCREEN; altceva stage.displayState = StageDisplayState.NORMAL; ; btnBig.addEventListener (MouseEvent.CLICK, goFullScreen);<
Aici se întâmplă "magia". Această funcție creează dreptunghiul folosit pentru a ține videoclipul, iar dimensiunea acestuia este setată astfel încât să corespundă dimensiunilor obiectului video scos din cea de-a doua funcție din blocul de coduri anterioare. Următoarea linie stabilește fullScreenSourceRect proprietatea scenei la dimensiunile dreptunghiului creat.
Declarația condiționată care compune restul blocului de cod verifică starea curentă a dimensiunii scenei de la normal la ecran complet sau invers. Acesta este modul în care videoclipul trece pe ecran complet. Obiectul video este pus în această rectă sursă, nu în scenă, ceea ce înseamnă că se poate extinde sau se poate contracta fără ca scenă să facă același lucru și să "fuzze" videoclipul.
Ultima linie utilizează butonul de pe scenă pentru a merge pe ecran complet.
Introduceți următorul ActionScript:
myVideo = nou videoclip (); myVideo.x = 185; myVideo.y = 5; addChild (MyVideo); myVideo.attachNetStream (ns); ns.play ( "Vultures.mp4"); mySound = ns.soundTransform; mySound.volume = .8; ns.soundTransform = mySound;
Primul bloc de codare spune Flash că variabila "myVideo" este numele unui obiect video care este situat la 185 de pixeli de la marginea din stânga a scenei enorme și este de 5 pixeli în jos de sus. addChild () metoda pune obiectul video pe scenă, iar celelalte două linii conectează obiectul video la NetStream și începeți redarea video.
Blocul final de cod examinează piesa audio a videoclipului care este introdusă în proiect prin intermediul NetStream și reduce volumul audio la 80%.
Salvați fișierul în același folder ca și videoclipul.
În mod normal, în această etapă a tutorialului vă spun și tu să testați SWF-ul. Poți, dar butonul nu va funcționa. Cel mai bun lucru pe care îl puteți aștepta este să vedeți redarea video în swf. Funcția Full Screen este condusă de pachetul HTML al SWF, nu de Flash. Să ne ocupăm de asta.
Selectați Fișier> Setări publicare. Când se deschide caseta de dialog Setări publicare, selectați opțiunile SWF și HTML.
Faceți clic pe fila Flash. Selectați Flash Player 9 sau Flash Player 10 din player. Amintiți-vă că videoclipul HD poate fi redat numai în Flash Player 9 sau o versiune ulterioară.
Faceți clic pe fila HTML. În meniul derulant Șablon selectați Numai Flash-Permiteți ecran complet.
Faceți clic pe butonul Publicare pentru a crea fișierul SWF și fișierul HTML.
Salvați fișierul, închideți Flash și deschideți pagina HTML într-un browser. Mergeți mai departe, dați clic pe butonul "Ridică-te!".
Ce e cu asta? Designerii și dezvoltatorii Real Flash nu folosesc componente "steenking".
În decembrie 2007, Adobe a lansat liniștit Update 3 pentru Flash Player 9. Folosesc cuvântul "liniștit" pentru că a fost amestecat cu corecțiile de bug-uri și trucurile obișnuite, au alunecat într-o versiune actualizată a componentei FLVPlayback care i-a permis să redea HD video. Iată cum:
Deschideți un nou document Flash ActionScript 3.0 și salvați-l în același folder ca și videoclipul Vultures.
Selectați Fereastră> Componente și în componentele Video, trageți o copie a FLVPlayback componentă a scenei.
Deschideți Inspectorul de componente. Trebuie să faceți două lucruri aici. Selectează SkinUnderAllNoCaption.swf în zona pielii, în zona sursă navigați la Vultures.mp4 fișier și adăugați-l în caseta de dialog Calea de conținut. Dați clic pe caseta de selectare a dimensiunii sursă de potrivire și faceți clic pe OK Flash va intra în videoclip și va apuca metadatele. Când se termină, caseta de dialog se va închide și componenta va crește la dimensiunile videoclipului. Închideți Inspectorul de componente.
Selectați Modificați> Document și faceți clic pe Cuprins buton pentru a redimensiona scena la dimensiunea componentei ... un fel de. Când stadiul este setat la dimensiunea componentei, acesta se redimensionează numai la dimensiunea videoclipului. Pielea va fi lăsată agățată de fundul scenei, ceea ce înseamnă că nu va fi vizibilă într-o pagină web. Modificați valoarea înălțimii la 525 de pixeli pentru a acoperi pielea. Faceți clic pe OK pentru a accepta modificarea.
Bineînțeles, acum că ați schimbat dimensiunile scenei, componenta este suspendată de pe scenă. Selectați componenta și în panoul Proprietăți setați coordonatele X și Y la 0.
Selectați Fișier> Setări publicare și alegeți tipurile de fișiere SWF și HTML.
Faceți clic pe fila Flash și selectați Flash Player 9.
Faceți clic pe fila HTML și selectați Numai Flash - Permiteți afișarea întregului ecran în șabloane.
Faceți clic pe butonul Publicați. Când fișierele SWF și fișierul HTML sunt publicate, faceți clic pe OK. Salvați fișierul și închideți Flash.
Deschideți fișierul HTML într-un browser. Faceți clic pe butonul Ecran complet pentru a lansa în modul Full Screen.
În acest tutorial v-am arătat două moduri de a intra fără probleme în modul ecran complet cu Flash. Prima metodă a folosit ActionScript pentru a face acest lucru posibil și cheia a fost crearea unui dreptunghi care "plutea" peste scenă și a fost folosit pentru a ține videoclipul.
Cel de-al doilea exemplu v-a arătat cum să utilizați componenta FLVPlayback pentru a merge pe ecran complet.
După cum ați descoperit, cheia pentru ambele proiecte nu a fost ActionScript, ci pachetul HTML care a permis redarea pe ecran complet.
Aceste tutoriale lucrează întotdeauna în mod local, dar sunt sigur că vă întrebați dacă ar lucra efectiv online. Am postat atât pentru a dovedi că "Da într-adevăr, se poate face."
Abordarea codului din primul exemplu poate fi găsită aici. Videoclipul este oferit de Adobe și Red Bull și este o producție completă de 1080p.
Vulturile apar într-un exemplu care utilizează componenta aici.
