Vídeo i Flash FLV | ||||
|
||||
Anteriors versions
de Flash permetien importar vídeo dins de documents fla. La importació era
complicada ja que importava el vídeo fotograma a
fotograma i després havíem de importar el so. La nova versió de Flash (Flash MX 2004) fa servir per visualitzar els continguts generats el reproductor Flash 7, que us permetrà posar vídeos dins de les vostres pel.lícules flash i reproduir-los a un framerate superior al nombre de fotogrames per segon del document fla gracies a que aquesta versió disposa de la possibilitat de importar/exportar vídeo mitjançant el códec de Sorenson Spark. |
||||
Importar so a la línea de temps de la pel.lícula. Sincronització modo Flujo | ||||
![]() |
Per realitzar aquesta
practica necesitareu un arxiu de so anomenat joandelriu.mp3 i
un arxiu de video titol0001.avi. Aquest dos arxius han
estat trets del CD Materials de formació 2003 AUDIOVISUALS. Tambè
els podeu agafar del CD actual. L'arxiu de so està a la carpeta materials/clips/sons i l'arxiu de video està a la carpeta materials/clips/video/dv15-dv31. |
|||
![]() |
||||
Si no teniu a l'abast
el CD actual de Materials de formació, recordeu que està penjat al CDWEB
que es troba en la següent direcció http://www.xtec.net/formaciotic/ |
||||
![]() |
||||
És important saber les dimensions del vídeo que fareu servir. En aquest cas seran de 320 x 240 px. | ||||
![]() |
||||
Obriu el fitxer
muntatge_inical.fla que
es troba dins la carpeta td105\d105m4\mat_m4p4 dels materials del curs
i observeu la seva estructura de capas i les dimensions de la pel.lícula
fla (320 x 240). Aquests dimensions coincidiràn amb les dimensions
del vídeo que
posareu a la capa vídeo de la pel.lícula fla. La música
estarà a la capa música. Proveu la pel.lícula per veure
l'estructura del que es vol aconseguir. |
||||
![]() |
||||
Obriu la biblioteca de la pel.lícula i fixeu-vos tambè en els símbols que ja teniu. | ||||
![]() |
||||
Aneu a Archivo|importar|importar
a biblioteca i seleccioneu joandelriu.mp3.
Obriu la biblioteca de la pel·lícula i comproveu que teniu
l'arxiu importat. Poseu-vos al primer fotograma de la capa musica i,
amb el pannell propiedades seleccioneu
l'arxiu joandelriu.mp3. Fixeu-vos en una cosa molt important, la sincronització ha
de ser de Flujo si no voleu que, al repetir la pel·lícula
comenci una altre vegada el so i es sol.lapi amb el so que encara no ha acabat.
Això és un problema constant quan es col.loca música
a una pàgina web. Feu la prova. Amb la sincronització de Flujo si
l'animació es para, el so també es pararà. |
||||
![]() |
||||
Feu control|probar película i
comproveu el resustat. Si voleu canviar el text que surt a la pel·lícula, simplement haureu d'anar a la biblioteca i assenyalant el símbol, feu doble clic i canvieu el text. Comproveu el resultat. |
||||
Importar un vídeo a la línia de temps d'una pel·lícula | ||||
Aneu al fotograma
165 de la capa vídeo (fotograma clave vacio).
Archivo|importar a escenario.... Quan aparegui la finestra
Importar vídeo premeu el botó siguiente i
podreu definir la compressió que voleu aplicar al vídeo importat.
Premeu el botó Edición
del Perfil de compresión, seleccioneu l'opció Calidad amb
un valor de 95 unitats, fotogramas
clave 0 i activeu la característica
de sincronizar con velocidad de fotogramas del documento de Macromedia
Flash. |
||||
![]() |
||||
Premeu el botó siguiente fins
arribar a la finestra de codificación i
premeu el botó Edición de configuración
avanzada,
establint les dimensions al 100 per 100 i que la importació es faci
a la línia de temps del nostre document fla. Altre cosa molt important.
Si voleu treure el so de fons del vídeo original, escolliu
l'opció Pista
de audio: Ninguno. Recordeu que ja heu posat un so a la capa so
del document fla. |
||||
![]() |
||||
Premeu el botó Siguiente fins
a arribar a la finestra de codificación i premeu
el botó Finalizar per
realitzar la importació. Enregistreu i proveu la pel·lícula Ja teniu un vídeo amb un arxiu fla però, encara queda la part més interessant. |
||||
Edició del so per millorar la qualitat del conjunt | ||||
Mireu en quin fotograma finalitza la pel·lícula Al nostre cas és al fotograma 467. Aneu al primer fotogrames de la capa so. Mireu al pannell Propiedades i premeu el botó Editar per accedir a la envolvente del so. Us sortirà un nou pannell. | ||||
![]() |
||||
![]() |
||||
Si la pel·lícula acaba al fotograma 467 el so haurà de anar decreixent des del fotograma 400 de la pel·lícula més o menys arribant a tenir volum 0 al fotograma final. | ||||
![]() |
||||
És important crear un fotograma clau al fotograma 467 de la pel·lícula i seleccionant el so amb l' opció Detener en la sincronització per que en arribar a aquest fotograma, el so es pari. | ||||
Ja teniu un video col.locat a un document fla i amb la música que vulgueu. | ||||
Exportació del vídeo. "Quicktime (.mov)" o "Windows AVI (.avi)" | ||||
Una vegada que teniu
tota l'animació (títols, vídeo i so) ,
fareu servir les opcions d'exportació que té el Flash per
generar un document de vídeo mov o avi amb la música i els títols
pernonalitzats. Feu Archivo|Exportar|Exportar
película |
||||
![]() |
||||
Seleccioneu com
a format d'exportació
Quicktime (.mov) i doneu-li el nom vídeo al nou fitxer. A la finestra que
surti de configuració de Quicktime premeu el botó Aceptar.
En aquest punt poden passar dues coses: |
||||
|
||||
La raó d'aquest
problema és
que l'opció de Publicación para Quicktime
crea pel.licules en el format de Quicktime que tingueu instal.lat a
la vostra màquina.
La versió actual de Quicktime admet la reproducció de documents
swf de la versió 4 del reproductor de Flash (Exportar
para Flash Player 4) al pannell de Propiedades de
la pel·lícula
Flash. Però, .....si el contingut del fla necessita les versions
del player 6 o player 7 tindreu un problema. Com que no desitgem perdre el vídeo, exportareu en format avi. Archivo|Exportar|Exportar película i seleccionareu l'opció Windows AVI (.avi).Us sortirà un pannell com el de la figura. |
||||
![]() |
||||
Marqueu les opcions
tal com es mostren a la figura (color 24 bits, sonido estéreo
de 16 bits a 22 kHs y formato de video suave). Ja tindreu l'arxiu video.avi |
||||
Creació d'un fitxer de vídeo FLV (Flash Vídeo) | ||||
Una vegada tingueu
el document AVI podreu transformar-lo en altres formats amb un programa
d'edició de vídeo, per
exemple a Quicktime. |
||||
FLV representa les
sigles de Flash Video i és un format comprimit amb el còdec de vídeo Sorenson
Spark i està pensat
per permetre la importació i exportació de vídeo
amb àudio. Creeu un nou document de Flash i feu Archivo|Importar|Importar a escenario. Seleccioneu l'arxiu video.avi. Una altre vegada s'obrirà la pantalla Asistente para importar vídeo. Seleccioneu Editar primero el vídeo i premeu al botó siguiente. Arribareu a una pantalla amb diferents zones. |
||||
|
||||
![]() |
||||
![]() |
||||
2. A la part de dalt de la barra hi trobareu un triangle que indicarà el fotograma actual del vídeo |
||||
3. A sota la barra tindreu dos triangles que us serviran per seleccionar quina part del vídeo voleu exportar. |
||||
4. També disposareu d'un conjunt de botons per reproduir el vídeo i tres de nous. |
||||
Vista previa de clip: mostra el contingut del vídeo entre els dos punts que defineixen el seu inici i el seu final |
||||
Crear clip: permet crear un element de vídeo a la zona esquerra de la pantalla amb el fragment definit per les marques inici i final. Podreu fer varies edicions del mateix vídeo i escolliu la que més us agradi. |
||||
Actualitzar clip: si canvieu la configuració d'alguns del vídeos, premeu aquest botó per actualitzar-lo al pannell de l'esquerra. |
||||
Con que volem importar tot el vídeo premeu al boto Crear clip. Veureu que us apareixerà al pannell de l'esquerra. | ||||
![]() |
||||
Premeu al botó Siguiente per arribar a la finestra de Codificación on treballareu una altre vegada el Perfil de compresión i la Configuración Avanzada. | ||||
|
||||
![]() |
||||
2. Codificación Avanzada: modificareu les dimensions de vídeo per que el fitxer final sigui més lleuger. Fixeu-vos que a Pista de audio agafarem l'opció Integrado. |
||||
![]() |
||||
Una vegada seleccionades les opcions, premeu al botó Siguiente dues vegades fins a arribar a la finestra de Codificación, on heu de prémer el botó Finalizar per importar el vídeo. Us demanarà la creació de fotogrames per que el vídeo càpiga sencer, premeu Aceptar. | ||||
A la Biblioteca de símbolos tindreu el vídeo que heu importat. | ||||
![]() |
||||
Amb el botó dret del ratolí us sortirà la finestra d'opcions i aneu a Propiedades. Arribareu a la finestra Propiedades de video incorporado. | ||||
![]() |
||||
![]() |
||||
Seleccioneu l'opció Exportar i apareixerà una finestra en la que us demanarà el nom per el nou document FLV que es crearà. El posareu el nom video. Premeu Guardar. | ||||
![]() |
||||
Tindreu ja un arxiu video.flv
que pot ser importat dins de documents FLA tenint en conte que
si el vídeo original era de 106 Mb, el vídeo
FLV serà de tan sol de 208 Kb sense pèrdua
de qualitat. |
||||
![]() |
||||
Documents de Flash Video FLV importats dinàmicament | ||||
Després d'haver reduït un vídeo de 106 Mb a un altre de 208 Kb, es queda com treballar amb el llenguatge de programació ActionScript. | ||||
Obriu un nou document de Flash i modifiqueu la velocitat a 24 fps. Guardeu aquest document a la mateixa carpeta on heu guardat video.flv amb el nom video_flv.fla | ||||
![]() |
||||
Accediu a la Biblioteca
de símbolos per
crear un contenidor del vídeo que contindrà el vídeo que carregareu
dinàmicament.
Per fer això
desplegareu el menú contextual de la Biblioteca i seleccionareu Nuevo
vídeo. |
||||
![]() |
||||
Arrossegueu aquest element de vídeo fins l'escenari per crear una instància del mateix al que posarem per nom video_dinamic. | ||||
![]() |
||||
Modifiqueu el tamany
de la instància
en el Panel de Propiedades per que coincideixi amb el
tamany del vídeo que vau exportar anteriorment (272 x 240 píxeles)
i centreu-la a l'escenari fent servir el Pannell de Alinear |
||||
A una capa nova
poseu un requadre de color blau que en servirài de marc de referència
. Poseu-li cantrat i doneu-li les dimensions 272 x 240 píxeles. |
||||
![]() |
||||
Creeu una nova capa a la que posareu
de nom accions i premeu F9 per escriure
el codi ActionScript. Poseu el següent codi al primer fotograma de la capa accions. |
||||
![]() |
conexio = new NetConnection(); conexio.connect(null); stream = new NetStream(conexion); video_dinamic.attachVideo(stream); stream.play("video.flv"); |
|||
Amb aquestes línies el que fem és crear una instància de l'objecte NetConnection que anomenarem conexio i que farem servir per establir una comunicació amb continguts externs. Posteriorment farem servir el seu mètode connect per realitzar la connexió real. | ||||
connect(null) obre
una connexió local amb la qual es poden reproduir arxius de vídeo (FLV) des
d'una direcció HTTP o des del sistema d'arxius local. |
||||
A continuació creareu una instància de l'objecte NetStream que és una mena de "canal" dins d'una connexió definida amb NetConnection i que us permetrà reproduir documents FLV externs. Podeu anomenar stream a aquesta nova instància. | ||||
A continuació relacionareu la instància stremm a la instància video_dinamic que teniu a l'escenari. | ||||
A l'última línia fareu servir el mètode play de l'objecte NetStream posant el camí on està video.flv i que aquest comenci a reproduir-se. | ||||
Exporteu la pel·lícula com Flash 7 ActionScript
2 en el Panel
de Propiedades. Proveu la pel·lícula i observeu con a la
pantalla apareix el vídeo. Aneu a la carpeta on teniu el document fla i veureu com s'ha generat el l'arxiu swf. Observeu que el seu pes és d'.....¡1 kb! |
||||
![]() |
||||
Creació d'una consola per controlar el vídeo | ||||
Agafeu
els botons que controlaran la reproducció del vídeo. Ventana|Otros
paneles|Bibliotecas comunes|botones. |
||||
![]() |
||||
Fareu servir les funcions | ||||
![]() |
but_play.onRelease =
function() {} but_stop.onRelease = function() {} but_tornar_començament.onRelease = function() {} |
|||
but_play, but_stopi but_tornar_començament són els noms de les instàncies dels botons. Mireu la següent imatge | ||||
![]() |
||||
Al primer fotograma de la línia de temps posareu el següent codi | ||||
/*instància de l'objecte NetConnection per poder establir una una comunicació amb continguts externs*/ | ||||
conexio = new NetConnection(); | ||||
/*connect(null) obre una connexió local amb la qual es poden reproduir arxius de vídeo (FLV) des d'una direcció HTTP o des del sistema d'arxius local.*/ | ||||
conexio.connect(null); | ||||
/* A continuació creareu una instància de l'objecte NetStream que és una mena de "canal" dins d'una connexió definida amb NetConnection i que us permetrà reproduir documents FLV externs. Podeu anomenar stream a aquesta nova instància. */ | ||||
stream = new NetStream(conexion); | ||||
/*A continuació relacionareu la instància stremm a la instància video_dinamic que teniu a l'escenari*/. | ||||
video_dinamic.attachVideo(stream); | ||||
En prémer el botó ![]() |
||||
but_play.onPress = function() { stream.play("video.flv"); }; |
||||
En premer el botó ![]() |
||||
but_stop.onPress = function()
{ stream.pause(); }; |
||||
En prémer el botó ![]() |
||||
but_tornar_començament.onPress = function()
{ stream.seek(0); } |
||||
Guardeu i comproveu el resultat. | ||||
![]() |
||||
Fixeu-vos
que quan premeu un dels botons, aquest canvia el seu aspecte i pot quedar
desactivat. Això ho podeu fer fent servir la propietat "_alpha" de
les instàncies dels botons i la propietat enabled. |
||||
![]() |
but_stop.enabled = 1; but_stop._alpha = 100; but_tornar_començament.enabled = 0; but_tornar_començament._alpha = 50; |
|||
Resum de tota la programació que estarà al primer fotograma de la linia de temps | ||||
conexion = new NetConnection(); conexion.connect(null); stream = new NetStream(conexion); video_blank.attachVideo(stream); ///////////////////////////// but_stop.enabled = 0; but_stop._alpha = 50; but_tornar_començament.enabled = 0; but_tornar_començament._alpha = 50; but_anar_final.enabled = 0; but_anar_final._alpha = 50; /////////////////////////////////// but_play.onPress = function() { this.enabled = 0; this._alpha = 50; but_stop.enabled = 1; but_stop._alpha = 100; but_tornar_començament.enabled = 0; but_tornar_començament._alpha = 50; stream.play("video.flv"); }; but_stop.onPress = function() { but_play.enabled = 0; but_play._alpha = 50; //per que al fer la pausa el video torni al començament stream.pause(); but_tornar_començament.enabled = 1; but_tornar_començament._alpha = 100; }; but_tornar_començament.onPress = function() { stream.seek(0); this.enabled = 0; this._alpha = 50; but_play.enabled = 1; but_play._alpha = 100; but_stop.enabled = 0; but_stop._alpha = 50; }; |
||||
Observeu que hem posat en negreta la programació que heu de fer servir per que us funcioni un FLV (Flash vídeo). La resta és opcional i serveix per desactivar o canviar l'aspecte dels botons de control de la reproducció del vídeo. | ||||