Share
In questo tutorial da principiante ad intermedio ho intenzione di mostrarti come riprodurre video HD senza l'inevitabile sfocatura che si verifica quando il video viene ingrandito.
La ragione di questo è che mi sto stancando di visitare YouTube o altri siti che presentano video HD con un'opzione a schermo intero solo per scoprire, quando faccio clic sul pulsante Schermo intero, che improvvisamente ho bisogno della prescrizione per i miei occhiali cambiati.
Il problema non è il video ma il modo in cui Flash Player gestisce il processo di visualizzazione a schermo intero. Scopriamo come fare le cose propriamente...
Quando riproduci video in Flash Player, il video, a tutti gli effetti, viene posto sul palco. Fare clic sul pulsante a schermo intero e il palco si ingrandisce. Quando la scena diventa più grande, porta il video insieme ad essa. Ingrandisci un video da 720 a 480 a 1280 per 720 e c'è da meravigliarsi che il video diventi sfocato?
Adobe ha affrontato questo problema quando stava introducendo la possibilità di riprodurre video Full HD tramite Flash Player. La loro soluzione, introdotta in Flash Player 9.0.115.0, era estremamente elegante. Invece di ingrandire il palcoscenico, perché non "passa sopra" il vid in un rettangolo "sopra" il palco e chiedi al progettista o allo sviluppatore di decidere se ingrandire il palco o solo un pezzo di esso. Ciò è ottenuto attraverso un altro pezzo di ingegnosa ingegneria da parte di Adobe: accelerazione e scalabilità hardware.
L'accelerazione hardware viene applicata tramite Flash Player. Se fai clic con il pulsante destro del mouse (PC) o ctrl-clic (Mac) su un swf in esecuzione in una pagina Web, apri il menu di scelta rapida di Flash Player. Selezionare impostazioni e ti verrà presentata la finestra delle impostazioni mostrata in Immagine 1. Se selezioni Abilita l'accelerazione hardware sei in grado di visualizzare video HD a schermo intero. Se lo si lascia deselezionato, facendo clic su un pulsante a schermo intero, il lettore utilizza l'API di scalabilità utilizzata quando un file FLV viene portato a schermo intero. La cosa bella di questo è anche se hai selezionato l'accelerazione hardware, è usato solo quando necessario. Quindi, quando si fa clic su un pulsante Schermo intero, solo il rettangolo e il contenuto - un video in questa istanza - vengono ridimensionati a schermo intero e l'accelerazione hardware prende il sopravvento per riprodurre il video.
Dopo averti dato il briefing su come ti abbiamo portato a leggere questo tutorial, segui questi passaggi per creare un'esperienza video HD a schermo intero:
Incluso con il download è un file .mp4- Vultures.mp4. È una clip di una serie TV prodotta dal mio college, l'istituto Humber of Technology e Advanced Learning. Utilizzeremo questo file per il progetto anche se è possibile utilizzare anche i file MOV, F4V e FLV di dimensioni fisiche.
Potresti aver sentito un sacco di "buzz" nei video HD e nel formato .mp4 negli ultimi due anni e ti sei chiesto di cosa si trattasse. Ecco un breve "elevator pitch":
La chiave del formato .mp4 è lo standard video AVC / H.264 introdotto in Flash Player nell'agosto 2007. Lo standard .mp4, per essere precisi, è noto come MPEG-4, uno standard internazionale sviluppato da Motion Pictures. Expert Group (MPEG) e il formato ha anche il riconoscimento ISO.
Ciò che rende questi file così interessanti per i designer e gli sviluppatori di Flash è che i file MPEG-4 non dipendono dal dispositivo. Possono essere riprodotti con facilità su un televisore HD, iPod o Playstation in quanto possono essere riprodotti in un browser. Inoltre, grazie all'accelerazione hardware e al supporto multithreading integrato in Flash Player, è possibile riprodurre video a qualsiasi risoluzione e profondità di bit fino a, e includendo la risoluzione Full HD 1080p che si guarda su TV HD.
L'unico aspetto dello standard MPEG-4 che trovo piuttosto intrigante è che, come il formato XFL appena entrato in uso nella suite CS4, è un formato "contenitore". Ciò che si intende per questo è che i file .mp4 possono memorizzare diversi tipi di dati su un numero di tracce nel file. Ciò che fa è sincronizzare e interlacciare i dati, il che significa che un file .mp4 può anche includere metadati, immagini, sottotitoli e così via che possono essere accessibili da Flash. Questa è la buona notizia. La cattiva notizia è che anche se il contenitore MPEG-4 può contenere più tracce audio e video, attualmente il Flash Player ne riproduce solo uno e ignora il resto. L'altro bit di cattiva notizia è che questo formato non supporta il significato di trasparenza, se si desidera aggiungere un canale alfa, si torna al formato FLV.
Infine, i file H.264 .mp4 richiedono una potenza di elaborazione intensiva. Adobe è stato abbastanza chiaro nel farci sapere che questo contenuto è meglio visualizzato su PC dual core e Mac. Il passaggio a questi processori è in corso da un paio d'anni ma ci vorranno ancora un paio di anni prima che tutti i computer siano in grado di gestire le richieste del processore che questo formato richiede.
Ho appena sfiorato la superficie di questo formato. Se vuoi fare un "tuffo" in questo formato, dai un'occhiata a H.264 For The Rest Of Us scritto da Kush Amerasinghe di Adobe. È un ottimo primer per quelli di voi nuovi in questa tecnologia.
Apri il BigItUp.fla file che si trova nel download. Se è la prima volta che lavori con un file H264 o a schermo intero, puoi trovare le dimensioni dello stage Flash - 1050 per 500 - piuttosto grandi. Abbiamo bisogno dello spazio scenico per ospitare il video che ha una dimensione fisica di 854 x 480 e di lasciare spazio per il pulsante nell'angolo in alto a sinistra del palco.
Aggiungi il seguente codice ActionScript al livello azioni:
import flash.geom. *; import flash.display.Stage; var mySound: SoundTransform; var myVideo: video; var nc: NetConnection = new NetConnection (); nc.connect (null); var ns: NetStream = new NetStream (nc); ns.client = this; btnBig.buttonMode = true;
Iniziamo introducendo il pacchetto geometry e la classe Stage per portare il video "in bilico" a schermo intero. Le prossime due variabili - mySound e myVideo - verranno utilizzate per impostare il livello del volume dell'audio e per creare un oggetto video.
Con quel servizio di pulizia fuori dal modo in cui impostiamo il NetConnection e NetStream oggetti che permetteranno al video di giocare. La linea finale mette il Movie Clip utilizzato per ottenere il video a schermo intero in buttonMode.
Aggiungi il seguente codice ActionScript:
Accentsconagua
ns.addEventListener (NetStatusEvent.NET_STATUS, netStatusHandler); function netStatusHandler (evt: NetStatusEvent): void if (evt.info.code == "NetStream.FileStructureInvalid") trace ("La struttura del file MP4 non è valida."); else if (evt.info.code == "NetStream.NoSupportedTrackFound") trace ("L'MP4 non contiene alcuna traccia supportata"); function onMetaData (md: Object): void myVideo.width = md.width; myVideo.height = md.height; La prima funzione ci consente di eseguire un controllo degli errori. Non tutti i file mp4 sono creati allo stesso modo e se il video non viene riprodotto sarebbe bello sapere quale potrebbe essere il problema. In questo caso ascolteremo un paio di messaggi di errore dalla classe NetStream che sono pertinenti ai file mp4. Il primo è un controllo per assicurarsi che il file non sia corrotto o che sia un formato non supportato. Solo perché un file verrà riprodotto nel player Quicktime non significa che verrà riprodotto in Flash.
Il prossimo si assicura che le tracce audio e video siano supportate. Ad esempio se la codifica H.264 non viene utilizzata sulla traccia video o la codifica AAC non viene applicata alla traccia audio, avrai problemi.
La funzione successiva entra nei metadati del file video per ottenere i valori di larghezza e altezza per l'oggetto video.
Immettere il seguente codice ActionScript:
function goFullScreen (evt: Object): void var scalingRect: Rectangle = new Rectangle (myVideo.x, myVideo.y, myVideo.width, myVideo.height); stage ["fullScreenSourceRect"] = ridimensionamentoRetto; if (stage.displayState == StageDisplayState.NORMAL) stage.displayState = StageDisplayState.FULL_SCREEN; else stage.displayState = StageDisplayState.NORMAL; ; btnBig.addEventListener (MouseEvent.CLICK, goFullScreen);<
Qui è dove avviene la magia. Questa funzione crea il rettangolo utilizzato per contenere il video e le sue dimensioni sono impostate per corrispondere a quelle delle dimensioni dell'oggetto Video estratte dalla seconda funzione nel blocco di codice precedente. La riga successiva imposta il fullScreenSourceRect proprietà dello stage alle dimensioni del rettangolo appena creato.
L'istruzione condizionale che costituisce il resto del blocco di codice controlla lo stato corrente della dimensione dello stage da normale a schermo intero o viceversa. Questo è il modo in cui il video va a schermo intero. L'oggetto video è inserito in questa sorgente rect, non nel palcoscenico, il che significa che può espandersi o contrarsi senza che il palco faccia altrettanto e "spari" il video.
L'ultima riga utilizza il pulsante sul palco per andare a schermo intero.
Immettere il seguente codice ActionScript:
myVideo = new 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;
Il primo blocco di codice dice a Flash che la variabile "myVideo" è il nome di un oggetto video che si trova a 185 pixel dal bordo sinistro dell'enorme palco e 5 pixel in basso dalla parte superiore. Il addChild () metodo mette l'oggetto video sullo stage e le due linee rimanenti collegano l'oggetto video al NetStream e inizia la riproduzione del video.
Il blocco di codice finale esamina la traccia audio del video che viene inserita nel progetto attraverso il NetStream e abbassa il volume audio all'80%.
Salva il file nella stessa cartella del video.
Normalmente, in questa fase del tutorial ti dirò anche di testare la swf. Puoi, ma il pulsante non funzionerà. Il meglio che puoi aspettarti è vedere il video riprodotto in swf. La funzione Schermo intero è guidata dal wrapper HTML del tuo swf, non da Flash. Affrontiamo quello.
Seleziona File> Impostazioni pubblicazione. Quando si apre la finestra di dialogo Impostazioni pubblicazione, selezionare le opzioni SWF e HTML.
Fare clic sulla scheda Flash. Selezionare Flash Player 9 o Flash Player 10 nel lettore pop-down. Ricorda che i video HD possono essere riprodotti solo in Flash Player 9 o versioni successive.
Fai clic sulla scheda HTML. Nel menu a discesa Modello selezionare Solo Flash-Consenti schermo intero.
Fare clic sul pulsante Pubblica per creare il file SWF e il file HTML.
Salva il file, esci da Flash e apri la pagina HTML in un browser. Vai avanti, fai clic su "Big it up!"pulsante.
Che ne pensi? I progettisti e gli sviluppatori di Real Flash non usano componenti "steenking".
Nel dicembre del 2007, Adobe ha rilasciato tranquillamente l'aggiornamento 3 per Flash Player 9. Uso la parola "quietly" perché combinato con le solite correzioni e modifiche apportate ai bug, sono stati inseriti in una versione aggiornata del componente FLVPlayback che consentiva di riprodurre HD video. Ecco come:
Aprire un nuovo documento Flash ActionScript 3.0 e salvarlo nella stessa cartella del video di Vultures.
Selezionare Finestra> Componenti e nei componenti Video, trascinare una copia di FLVPlayback componente allo stadio.
Apri la finestra di ispezione dei componenti. Devi fare due cose qui. Seleziona il SkinUnderAllNoCaption.swf nell'area della pelle, nell'area di origine vai al Vultures.mp4 file e aggiungerlo alla finestra di dialogo Percorso contenuto. Fare clic sulla casella di controllo delle dimensioni dell'origine della corrispondenza e fare clic su OK. Flash andrà nel video e acquisirà i metadati. Al termine, la finestra di dialogo si chiuderà e il componente crescerà fino alle dimensioni del video. Chiudi la finestra di ispezione dei componenti.
Seleziona Modifica> Documento e fai clic su Contenuto pulsante per ridimensionare il livello alla dimensione del componente ... una specie di. Quando lo stage è impostato sulla dimensione del componente, viene ridimensionato alla dimensione del video. La pelle verrà lasciata appesa al fondo del palco, il che significa che non sarà visibile in una pagina web. Modificare il valore di altezza a 525 pixel per adattarsi alla pelle. Fare clic su OK per accettare la modifica.
Ovviamente, ora che hai cambiato le dimensioni dello stage, il componente è sospeso sul palco. Selezionare il componente e nel pannello Proprietà impostare le coordinate X e Y su 0.
Seleziona File> Impostazioni pubblicazione e scegli i tipi di file SWF e HTML.
Fare clic sulla scheda Flash e selezionare Flash Player 9.
Fare clic sulla scheda HTML e selezionare Solo Flash- Consenti schermo intero nei modelli a comparsa.
Fai clic sul pulsante Pubblica. Quando vengono pubblicati il file SWF e HTML, fare clic su OK. Salva il file ed esci da Flash.
Apri il file HTML in un browser. Fare clic sul pulsante Schermo intero per avviare la modalità Schermo intero.
In questo tutorial ti ho mostrato due modi per passare senza problemi alla modalità a schermo intero con Flash. Il primo metodo utilizzava ActionScript per renderlo possibile e la chiave stava creando un rettangolo che "si librava" sul palco e veniva usato per contenere il video.
Il secondo esempio mostra come utilizzare il componente FLVPlayback per andare a schermo intero.
Come hai scoperto, la chiave per entrambi i progetti non era ActionScript ma il wrapper HTML che consentiva la riproduzione a schermo intero.
Queste esercitazioni funzionano sempre localmente, ma sono sicuro che ti starai chiedendo se effettivamente funzionerebbero online. Ho pubblicato entrambi per dimostrare che "Sì, si può fare".
L'approccio al codice nel primo esempio può essere trovato qui. Il video è gentilmente fornito da Adobe e Red Bull ed è una produzione full 1080p.
Gli avvoltoi appaiono in un esempio che usa il componente qui.
