Share
I denna nybörjare till mellanliggande handledning ska jag visa dig hur man spelar HD-video utan den oundvikliga suddning som uppstår när videon förstoras.
Anledningen till detta är att jag blir lite trött på att besöka YouTube eller andra webbplatser som presenterar HD-video med ett fullskärmsalternativ bara för att upptäcka, när jag klickar på Full Screen-knappen, behöver jag plötsligt receptet för mina glasögon ändras.
Problemet är inte videon, men hur Flash Player hanterar processen att gå i fullskärm. Låt oss ta reda på hur man gör saker ordentligt...
När du spelar upp video i Flash Player läggs videon, för alla ändamål, in i scenen. Klicka på helskärmsknappen och scenen blir större. När scenen blir större tar det med sig videon. Förstora en 720 x 480-video till 1280 vid 720 och det är konstigt att videon blir fuzzy?
Adobe brottades med den här frågan när de introducerade möjligheten att spela full HD-video via Flash Player. Deras lösning, introducerad i Flash Player 9.0.115.0, var extremt elegant. I stället för att förstora scenen, varför inte "sväva" viden i en rektangel "ovan" scenen och få designaren eller utvecklaren att bestämma om man vill förstora scenen eller bara en del av det. Detta uppnås genom en annan smart design på Adobes del: Hårdvaruacceleration och skalning.
Hårdvaruacceleration tillämpas via Flash Player. Om du högerklickar (PC) eller ctrl-klickar (Mac) på en swf-spelning på en webbsida öppnar du snabbmenyn för Flash Player. Välj inställningar och du kommer att presenteras med inställningsfönstret som visas i Bild 1. Om du väljer Aktivera maskinvaruacceleration Du kan se HD-video på helskärm. Om du lämnar den avmarkerad, resulterar i att klicka på en helskärmsknapp resulterar i spelaren med hjälp av Scaling API som används när en FLV-fil tas ut till helskärm. Det snygga med detta är även om du har valt hårdvaruacceleration, används den bara vid behov. Så när en helskärmsknapp klickas bara rektangeln och innehållet - en video i det här fallet - skalas till helskärm och hårdvaruacceleration tar över för att spela upp videon.
Efter att ha informerat dig om hur vi fick dig att läsa den här handledningen följer du dessa steg för att skapa en full HD-videoupplevelse:
Inkluderat med nedladdningen är en .mp4-fil - Vultures.mp4. Det är ett klipp från en tv-serie producerad av min högskola, Humber tekniska institut och avancerad lärande. Vi använder den här filen för projektet, även om mov, f4v och fysiskt stora FLV-filer kan användas.
Du kanske har hört mycket "buzz" kring HD-video och .mp4-format under de senaste åren och undrade vad chattaren handlar om. Här är en kort "lift pitch":
Nyckeln till .mp4-formatet är AVC / H.264-videostandarden introducerad till Flash Player i augusti 2007. .mp4-standarden, som är exakt, kallas MPEG-4 vilket är en internationell standard som utvecklats av Motion Pictures Expert Group (MPEG) och formatet har också ISO-erkännande.
Vad som gör dessa filer så attraktiva för Flash-designers och utvecklare är att MPEG-4-filer inte är beroende av enheter. De kan lika lika enkelt spelas på en HD-TV, iPod eller Playstation eftersom de kan spelas i en webbläsare. Tack vare hårdvaruacceleration och multithreading-stöd som är inbyggda i Flash Player kan du spela upp video vid alla upplösningar och bitdjup upp till och inklusive den fullständiga HD 1080p-upplösningen du tittar på på HD-TV: n.
Den ena aspekten av MPEG-4-standarden som jag tycker är ganska spännande är att, precis som XFL-formatet som bara kommer att användas i CS4-suite, är det ett "behållar" -format. Vad menas med detta är .mp4-filer kan lagra flera typer av data på ett antal spår i filen. Vad det gör är att synkronisera och interfoliera de data som betyder en .mp4-fil kan även innehålla metadata, konstverk, textning etc. som potentiellt kan nås av Flash. Det är de goda nyheterna. Den dåliga nyheten är även om MPEG-4-behållaren kan innehålla flera ljud- och videospår. Flashspelaren spelar för närvarande bara en av varje och ignorerar resten. Den andra delen av dåliga nyheter är att detta format inte stöder öppenhetens mening, om du vill lägga till en alfakanal, är du tillbaka till FLV-formatet.
Slutligen kräver H.264 .mp4-filer kraftig bearbetningskraft. Adobe har varit ganska tydligt att låta oss veta att detta innehåll ses bäst på dual core-datorer och Mac-datorer. Växlingen till dessa processorer har pågått under några år men det kommer fortfarande att vara några år innan alla datorer kommer att kunna hantera processorn kräver att detta format kräver.
Jag har knappt skumrat ytan av detta format. Om du vill ta en "djupdyk" i det här formatet, kolla H.264 för resten av oss, skrivet av Kush Amerasinghe på Adobe. Det är en enorm primer för dig som är ny på denna teknik.
Öppna BigItUp.fla fil som finns i hämtningen. Om det här är första gången du arbetar med en H264-fil eller går i fullskärm, kan du hitta Flash-scenens dimensioner - 1050 med 500 - för att vara ganska massiv. Vi behöver scenrummet för att rymma videon som har en fysisk storlek på 854 x 480 och att lämna utrymme för knappen i det övre vänstra hörnet av scenen.
Lägg till följande ActionScript i åtgärdslaget:
importera flash.geom. *; importera flash.display.Stage; var mySound: SoundTransform; var myVideo: Video; var nc: NetConnection = ny NetConnection (); nc.connect (null); var ns: NetStream = ny NetStream (nc); ns.client = this; btnBig.buttonMode = true;
Vi börjar med att föra in geometriska paketet och klassen Stage för att ta "sväva" videon till helskärm. De två följande variablerna - mySound och myVideo - kommer att användas för att ställa in ljudets ljudnivå och skapa ett videobjekt.
Med den hushållningen ur det sätt vi satt upp NetConnection och NetStream objekt som låter videon spela. Slutlinjen sätter filmklippet för att få videon till helskärmen button.
Lägg till följande ActionScript:
Accentsconagua
ns.addEventListener (NetStatusEvent.NET_STATUS, netStatusHandler); funktion netStatusHandler (evt: NetStatusEvent): void if (evt.info.code == "NetStream.FileStructureInvalid") trace ("MP4: s filstruktur är ogiltig."); annars om (evt.info.code == "NetStream.NoSupportedTrackFound") trace ("MP4 innehåller inga stödda spår"); funktion påMetaData (md: Objekt): void myVideo.width = md.width; myVideo.height = md.height; Den första funktionen låter oss göra en viss felkontroll. Inte alla mp4-filer skapas lika och om videon inte spelar skulle det vara trevligt att veta vad problemet kan vara. I det här fallet kommer vi att lyssna på några felmeddelanden från NetStream-klassen som är tyska till mp4-filer. Den första är en kontroll för att säkerställa att filen inte är korrumperad eller är ett format som inte stöds. Bara för att en fil spelas i Quicktime-spelaren betyder det inte att det kommer att spela i Flash.
Nästa kontrollerar att ljud- och videospåren stöds. Om till exempel om H.264-kodningen inte används på videospåret eller AAC-kodningen inte tillämpas på ljudspåret, har du problem.
Nästa funktion går in i videofilens metadata för att få bredd- och höjdvärdena för videobjektet.
Ange följande ActionScript:
funktion goFullScreen (evt: Objekt): void var scalingRect: Rektangel = ny rektangel (myVideo.x, myVideo.y, myVideo.width, myVideo.height); scen ["fullScreenSourceRect"] = scalingRect; om (stage.displayState == StageDisplayState.NORMAL) stage.displayState = StageDisplayState.FULL_SCREEN; else stage.displayState = StageDisplayState.NORMAL; ; btnBig.addEventListener (MouseEvent.CLICK, goFullScreen);<
Det här är där "magiken" händer. Denna funktion skapar rektangeln som används för att hålla videon och dess storlek är inställd så att den matchar de av videobjektets dimensioner som dras ut från den andra funktionen i det föregående kodblocket. Nästa rad anger fullScreenSourceRect egenskapen till scenen till dimensionerna av rektangeln som just skapats.
Det villkorliga uttalandet som utgör resten av kodblocket kontrollerar nuvarande tillstånd för scenstorleken från normal till helskärm eller vice versa. Så här går videon till helskärm. Videoobjektet läggs i denna källa rekt, inte scenen, vilket innebär att det kan expandera eller kontrakt utan att scenen gör detsamma och "fuzzing" videon.
Den sista raden använder knappen på scenen för att gå i fullskärm.
Ange följande 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;
Det första kodblocket berättar Flash för variabeln "myVideo" är namnet på ett videobjekt som ligger 185 pixlar framför den vänstra kanten av det enorma scenen och är 5 pixlar nerifrån toppen. De addChild () Metoden sätter videobjektet på scenen och de återstående två linjerna kopplar videobjektet till NetStream och börja spela videon.
Det sista kodblocket tittar in i videos ljudspår som matas in i projektet via NetStream och sänker ljudvolymen till 80%.
Spara filen i samma mapp som videon.
Normalt, i detta skede av handledningen skulle jag också berätta för dig att testa swf. Du kan, men knappen fungerar inte. Det bästa du kan förvänta dig är att se videospelet i swf-filen. Funktionen Full Screen är driven av HTML-omslaget för din swf, inte Flash. Låt oss ta itu med den där.
Välj Arkiv> Publicera inställningar. När dialogrutan Publiceringsinställningar öppnas väljer du alternativen SWF och HTML.
Klicka på fliken Flash. Välj Flash Player 9 eller Flash Player 10 i spelaren. Kom ihåg HD-video kan bara spelas i Flash Player 9 eller senare.
Klicka på fliken HTML. På snabbmenyn Mall väljer du Endast Flash-Allow Full Screen.
Klicka på knappen Publicera för att skapa SWF och HTML-filen.
Spara filen, avsluta Flash och öppna HTML-sidan i en webbläsare. Fortsätt, klicka på "Stora upp det!" knapp.
Vad sägs om det? Real Flash-designers och utvecklare använder inte några "steenking" -komponenter.
I december 2007 släppte Adobe tyst upp Update 3 för Flash Player 9. Jag använder ordet "tyst" eftersom de blandade sig med vanliga buggfixar och tweaks, de släppte in en uppdaterad version av FLVPlayback-komponenten som gjorde det möjligt att spela HD video. Här är hur:
Öppna ett nytt Flash ActionScript 3.0-dokument och spara det i samma mapp som Vultures-videon.
Välj Fönster> Komponenter och i videokomponenterna drar du en kopia av FLVPlayback komponent till scenen.
Öppna komponentinspektören. Du måste göra två saker här. Välj SkinUnderAllNoCaption.swf i hudområdet, navigera i källområdet till Vultures.mp4 fil och lägg till den i dialogrutan Innehållsruta. Markera kryssrutan Matchkälla och klicka på OK. Flash går in i videon och tar tag i metadata. När det är klart stängs dialogrutan och komponenten växer till videoens dimensioner. Stäng komponentinspektören.
Välj Ändra> Dokument och klicka på Innehåll knappen för att ändra storlek på scenen till storleken på komponenten ... typ av. När scenen är inställd på komponentens storlek ändras den bara till storleken på videon. Huden kommer att lämnas hängande i botten av scenen vilket betyder att det inte kommer att synas på en webbsida. Ändra höjdsvärdet till 525 pixlar för att passa huden. Klicka på OK för att acceptera ändringen.
Naturligtvis, nu när du har ändrat scendimensionerna hänger komponenten av scenen. Välj komponenten och i Egenskaperpanelen ställer X och Y-koordinaterna till 0.
Välj Arkiv> Publiceringsinställningar och välj SWF- och HTML-filtyperna.
Klicka på fliken Flash och välj Flash Player 9.
Klicka på fliken HTML och välj Endast Flash - Tillåt fullständig skärm i popup-menyn Mallar.
Klicka på knappen Publicera. När SWF och HTML-filen publiceras klickar du på OK. Spara filen och avsluta Flash.
Öppna HTML-filen i en webbläsare. Klicka på knappen Full Screen för att starta i helskärmsläge.
I denna handledning har jag visat dig två sätt att smidigt gå in i helskärmsläge med Flash. Den första metoden använde ActionScript för att göra det möjligt och nyckeln skapade en rektangel som "svängde" över scenen och användes för att hålla videon.
Det andra exemplet visade dig hur du använder FLVPlayback-komponenten för att gå i fullskärm.
Som du har upptäckt, var nyckeln för båda projekten inte ActionScript men HTML-omslaget som aktiverade uppspelning av hela skärmen.
Dessa handledning fungerar alltid lokalt men jag är säker på att du undrar om de faktiskt skulle arbeta online. Jag har lagt upp båda för att bevisa att "Ja, det kan verkligen ske."
Kodmetoden i det första exemplet finns här. Videon tillhandahålls vänligt av Adobe och Red Bull och är en full 1080p-produktion.
Gåsarna visas i ett exempel som använder komponenten här.
