Share
In deze beginner tot tussentijdse zelfstudie laat ik je zien hoe je HD-video kunt afspelen zonder de onvermijdelijke vervaging die optreedt wanneer de video wordt vergroot.
De reden hiervoor is dat ik een beetje moe word van het bezoeken van YouTube of andere sites die HD-video presenteren met een optie op volledig scherm om te ontdekken, wanneer ik op de knop Volledig scherm klik, dat ik plotseling het recept voor mijn bril moet laten veranderen.
Het probleem is niet de video, maar hoe de Flash Player omgaat met het proces van volledig scherm. Laten we kijken hoe we dingen kunnen doen naar behoren...
Wanneer u video afspeelt in de Flash Player, wordt de video, voor alle doeleinden en doeleinden, in het werkgebied gelegd. Klik op de knop op het volledige scherm en het podium wordt groter. Wanneer het podium groter wordt, brengt het de video mee. Vergroot een 720 bij 480 video tot 1280 bij 720 en is het geen wonder dat de video wazig wordt?
Adobe worstelde met dit probleem toen ze de mogelijkheid introduceerden om Full HD-video af te spelen via de Flash Player. Hun oplossing, geïntroduceerd in Flash Player 9.0.115.0, was buitengewoon elegant. In plaats van het podium te vergroten, zweef je de video in een rechthoek 'boven' het podium en laat de ontwerper of ontwikkelaar beslissen of hij het podium of slechts een stukje ervan wil vergroten. Dit wordt bereikt door een ander stuk slimme techniek van Adobe: hardwareversnelling en schaalvergroting.
Hardwareversnelling wordt toegepast via de Flash Player. Als u met de rechtermuisknop (pc) of ctrl-klik (Mac) op een swf die in een webpagina wordt afgespeeld, opent u het contextmenu van Flash Player. kiezen instellingen en u krijgt het instellingenvenster te zien zoals getoond in afbeelding 1. Als u selecteert Schakel hardwareversnelling in je kunt HD-video op het volledige scherm bekijken. Als u de selectie ongedaan maakt, resulteert het klikken op een knop op volledig scherm erin dat de speler de schaal-API gebruikt die wordt gebruikt wanneer een FLV-bestand op volledig scherm wordt weergegeven. Het mooie hiervan is dat u, hoewel u hardwareversnelling hebt gekozen, deze alleen gebruikt wanneer dat nodig is. Dus wanneer op een knop Volledig scherm wordt geklikt, worden alleen de rechthoek en de inhoud ervan - een video in dit geval - geschaald naar volledig scherm en neemt de hardwareversnelling het over om de video af te spelen..
Nadat je de briefing hebt gegeven over hoe we je deze tutorial hebben laten lezen, volg je deze stappen om een full-screen HD-video-ervaring te creëren:
Bij de download inbegrepen is een .mp4-bestand - Vultures.mp4. Het is een clip van een tv-serie geproduceerd door mijn College, Humber Institute of Technology and Advanced Learning. We zullen dit bestand voor het project gebruiken, hoewel mov, f4v en fysiek grote FLV-bestanden ook kunnen worden gebruikt.
Je hebt de afgelopen paar jaar veel "gezoem" rond HD-video en het .mp4-formaat gehoord en je hebt je afgevraagd waar het allemaal over gaat. Hier is een korte "elevator pitch":
De sleutel tot het .mp4-formaat is de AVC / H.264-videostandaard die in augustus 2007 aan de Flash Player is voorgesteld. De .mp4-standaard, om precies te zijn, staat bekend als MPEG-4, een internationale standaard die is ontwikkeld door de Motion Pictures. Expert Group (MPEG) en het formaat heeft ook ISO-herkenning.
Wat deze bestanden zo aantrekkelijk maakt voor ontwerpers en ontwikkelaars van Flash, is dat MPEG-4-bestanden niet afhankelijk zijn van het apparaat. Ze kunnen net zo goed worden afgespeeld op een HD-tv, iPod of Playstation, omdat ze in een browser kunnen worden afgespeeld. Dankzij de hardwareversnelling en multithreading-ondersteuning die is ingebouwd in de Flash Player, kunt u video afspelen met elke resolutie en bitdiepte tot en met de Full HD 1080p-resolutie die u op HD TV's bekijkt..
Het enige aspect van de MPEG-4-standaard dat ik nogal intrigerend vind, is dat, net zoals het XFL-formaat dat in de CS4-suite wordt gebruikt, het een 'container'-indeling heeft. Dit betekent dat .mp4-bestanden verschillende soorten gegevens kunnen opslaan op een aantal tracks in het bestand. Wat het doet is de gegevens synchroniseren en verweven, wat betekent dat een .mp4-bestand ook metadata, illustraties, ondertitels enzovoort kan bevatten die mogelijk door Flash kunnen worden geopend. Dat is het goede nieuws. Het slechte nieuws is dat hoewel de MPEG-4-container meerdere audio- en videotracks kan bevatten, de Flash Player momenteel slechts een van beide speelt en de rest negeert. Het andere beetje slecht nieuws is dat dit formaat de transparantiebetekenis niet ondersteunt. Als je een alfakanaal wilt toevoegen, ben je terug naar het FLV-formaat.
Ten slotte vereisen H.264 .mp4-bestanden een intensief verwerkingsvermogen. Adobe is vrij duidelijk geweest om ons te laten weten dat deze inhoud het best kan worden bekeken op dual-core pc's en Macs. De overgang naar deze processors is al een paar jaar aan de gang maar het zal nog een aantal jaren duren voordat alle computers de processor kunnen beheren die door dit formaat wordt vereist.
Ik heb amper het oppervlak van dit formaat afgeroomd. Als je een "diepe duik" in dit formaat wilt nemen, bekijk dan H.264 voor de rest van ons geschreven door Kush Amerasinghe bij Adobe. Het is een geweldige inleiding voor degenen onder u die nieuw zijn op deze technologie.
Open de BigItUp.fla bestand in de download. Als dit de eerste keer is dat u met een H264-bestand werkt of op volledig scherm werkt, vindt u de afmetingen van de Flash-stage - 1050 bij 500 - behoorlijk groot. We hebben de podiumruimte nodig voor de video met een fysieke grootte van 854 x 480 en om ruimte te laten voor de knop in de linkerbovenhoek van het werkgebied.
Voeg de volgende ActionScript-code toe aan de actielaag:
import flash.geom. *; import flash.display.Stage; var mySound: SoundTransform; var myVideo: video; var nc: NetConnection = new NetConnection (); nc.connect (null); var ns: NetStream = nieuwe NetStream (nc); ns.client = dit; btnBig.buttonMode = true;
We beginnen met het inbrengen van het geometriepakket en de Stage-klasse om de "zwevende" video naar het volledige scherm te brengen. De volgende twee variabelen - mySound en myVideo - zullen worden gebruikt om het volumeniveau van de audio in te stellen en om een video-object te maken.
Met die schoonmaak uit de weg hebben we de NetConnection en NetStream objecten waarmee de video kan worden afgespeeld. De laatste regel plaatst de filmclip die wordt gebruikt om de video op volledig scherm weer te geven buttonMode.
Voeg de volgende ActionScript toe:
Accentsconagua
ns.addEventListener (NetStatusEvent.NET_STATUS, netStatusHandler); function netStatusHandler (evt: NetStatusEvent): void if (evt.info.code == "NetStream.FileStructureInvalid") trace ("De bestandsstructuur van de MP4 is ongeldig."); else if (evt.info.code == "NetStream.NoSupportedTrackFound") trace ("De MP4 bevat geen ondersteunde nummers"); function onMetaData (md: Object): void myVideo.width = md.width; myVideo.height = md.height; De eerste functie laat ons een aantal foutcontroles uitvoeren. Niet alle mp4-bestanden zijn hetzelfde en als de video niet wordt afgespeeld, zou het leuk zijn om te weten wat het probleem zou kunnen zijn. In dit geval gaan we luisteren naar een aantal foutberichten van de NetStream-klasse die relevant zijn voor mp4-bestanden. De eerste is een controle om te controleren of het bestand niet beschadigd is of een indeling heeft die niet wordt ondersteund. Alleen omdat een bestand in de Quicktime-speler wordt afgespeeld, wil dit nog niet zeggen dat het in Flash wordt afgespeeld.
De volgende zorgt ervoor dat de audio- en videosporen worden ondersteund. Als de H.264-codering bijvoorbeeld niet wordt gebruikt op de videotrack of als AAC-codering niet wordt toegepast op de audiotrack, hebt u problemen.
De volgende functie gaat naar de metagegevens van het videobestand om de waarden voor breedte en hoogte voor het video-object te verkrijgen.
Voer de volgende ActionScript-code in:
function goFullScreen (evt: Object): void var scalingRect: Rectangle = new Rectangle (myVideo.x, myVideo.y, myVideo.width, myVideo.height); stage ["fullScreenSourceRect"] = scalingRect; if (stage.displayState == StageDisplayState.NORMAL) stage.displayState = StageDisplayState.FULL_SCREEN; else stage.displayState = StageDisplayState.NORMAL; ; btnBig.addEventListener (MouseEvent.CLICK, goFullScreen);<
Dit is waar de "magie" plaatsvindt. Met deze functie wordt de rechthoek gemaakt die wordt gebruikt om de video vast te houden en de grootte wordt ingesteld om overeen te komen met die van de afmetingen van het video-object die zijn getrokken uit de tweede functie in het vorige codeblok. De volgende regel stelt de fullScreenSourceRect eigenschap van het werkgebied tot de afmetingen van de zojuist gemaakte rechthoek.
De voorwaardelijke verklaring die de rest van het codeblok vormt, controleert de huidige status van de werkgebiedgrootte van normaal naar volledig scherm of omgekeerd. Dit is hoe de video op volledig scherm wordt weergegeven. Het video-object wordt in deze bron-rect gelegd, niet in de fase, wat betekent dat het kan worden uitgevouwen of inkrimpen zonder dat de scène hetzelfde doet en de video "fuzzingt".
De laatste regel gebruikt de knop op het podium om op volledig scherm te gaan.
Voer de volgende ActionScript-code in:
myVideo = nieuwe 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;
Het eerste codeblok vertelt Flash de variabele "myVideo" is de naam voor een video-object dat zich op 185 pixels van de linkerrand van het enorme podium bevindt en 5 pixels vanaf de bovenkant. De addChild () methode plaatst het video-object op het werkgebied en de resterende twee lijnen verbinden het video-object met het NetStream en begin met het afspelen van de video.
Het laatste codeblok kijkt naar de audiotrack van de video die via de computer in het project wordt ingevoerd NetStream en verlaagt het audiovolume tot 80%.
Sla het bestand op in dezelfde map als de video.
Normaal gesproken zou ik in dit stadium van de tutorial ook zeggen dat je de swf moet testen. Dat kan, maar de knop werkt niet. Het beste wat je kunt verwachten, is om de video in de swf te zien spelen. De functie Volledig scherm wordt aangestuurd door de HTML-omslag van uw swf, niet door Flash. Laten we daarmee omgaan.
Selecteer Bestand> Publicatie-instellingen. Wanneer het dialoogvenster Publicatie-instellingen wordt geopend, selecteert u de SWF- en HTML-opties.
Klik op het tabblad Flash. Selecteer Flash Player 9 of Flash Player 10 in de pop-up Player. Onthoud HD-video kan alleen worden afgespeeld in Flash Player 9 of hoger.
Klik op het HTML-tabblad. Selecteer in het pop-upmenu Sjabloon alleen Flash-Volledig scherm toestaan.
Klik op de knop Publiceren om de SWF en het HTML-bestand te maken.
Sla het bestand op, sluit Flash af en open de HTML-pagina in een browser. Ga je gang, klik op de "Big it up!"knop.
Wat is ermee? Real Flash-ontwerpers en -ontwikkelaars gebruiken geen "steenking" -componenten.
In december 2007 bracht Adobe geruisloos Update 3 uit voor Flash Player 9. Ik gebruik het woord "quietly" omdat het, gemengd met de gebruikelijke bugfixes en tweaks, een bijgewerkte versie van de FLVPlayback-component bevatte die het mogelijk maakte om HD te spelen video. Hier is hoe:
Open een nieuw Flash ActionScript 3.0-document en sla het op in dezelfde map als de Vultures-video.
kiezen Venster> Componenten en sleep in de videocomponenten een kopie van de FLVPlayback component op het podium.
Open de Component Inspector. Je moet hier twee dingen doen. Selecteer de SkinUnderAllNoCaption.swf in het skingebied, in het brongebied, navigeer naar Vultures.mp4 bestand en voeg het toe aan het dialoogvenster Inhoudspad. Klik op het selectievakje match brondimensies en klik op OK. Flash gaat in de video en neemt de metadata. Wanneer dat is voltooid, wordt het dialoogvenster gesloten en groeit de component naar de afmetingen van de video. Sluit de Component Inspector.
Selecteer Wijzigen> Document en klik op de Inhoud om het formaat van het werkgebied aan te passen aan de grootte van het onderdeel ... soort van. Wanneer de stage is ingesteld op de grootte van de component, wordt de grootte van de video alleen aangepast aan de grootte van de video. De huid blijft aan de onderkant van het werkgebied hangen, wat betekent dat het niet zichtbaar zal zijn op een webpagina. Verander de hoogtewaarde in 525 pixels om de skin te accommoderen. Klik op OK om de wijziging te accepteren.
Natuurlijk, nu dat je de afmetingen van de stage hebt veranderd, hangt het component van het podium. Selecteer het onderdeel en stel in het eigenschappenvenster de X- en Y-coördinaten in op 0.
Selecteer Bestand> Publicatie-instellingen en kies de SWF- en HTML-bestandstypen.
Klik op het tabblad Flash en selecteer Flash Player 9.
Klik op het tabblad HTML en selecteer Flash Only-Allow Full Screen in the Templates verschijnt.
Klik op de knop Publiceren. Wanneer de SWF en het HTML-bestand worden gepubliceerd, klikt u op OK. Sla het bestand op en sluit Flash af.
Open het HTML-bestand in een browser. Klik op de knop Volledig scherm om naar de modus Volledig scherm te gaan.
In deze zelfstudie heb ik je twee manieren getoond om soepel over te schakelen naar de modus Volledig scherm met Flash. De eerste methode gebruikte ActionScript om dit mogelijk te maken en de sleutel was het maken van een rechthoek die over het podium 'zweefde' en werd gebruikt om de video vast te houden.
In het tweede voorbeeld zag je hoe je de FLVPlayback-component op het volledige scherm gebruikt.
Zoals u hebt ontdekt, was de sleutel voor beide projecten niet het ActionScript, maar de HTML-wrapper waarmee het volledige scherm kon worden afgespeeld.
Deze tutorials werken altijd locaal, maar ik ben er zeker van dat u zich afvraagt of ze daadwerkelijk online zouden werken. Ik heb beide gepost om te bewijzen dat "Ja inderdaad, het kan worden gedaan."
De codeaanpak in het eerste voorbeeld is hier te vinden. De video wordt vriendelijk aangeboden door Adobe en Red Bull en is een volledige 1080p-productie.
De gieren verschijnen in een voorbeeld dat de component hier gebruikt.
