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:
 
     
 
  1. Que aparegui una finestra amb un missatge d'error anunciant que el controlador de Quicktime no permet exportar el document Flash.
  2. Que el document Quicktime sigui exportat correctament però que a l'hora de visualitzar-lo no aparegui el vídeo.
 
     
 
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.
 
     
 
1. A la part superior dreta hi trobareu el vídeo que voleu importar. Sota tindreu una barra blava de progrés de la reproducció del vídeo.
 
     
 
 
     
 
 
     
 
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.  
     
 
  1. Perfil de compresión: poseu les dades que surten a la imatge
 
     
 
 
     
 
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ó el vídeo començarà a reproduir-se.  
     
  but_play.onPress = function() {
stream.play("video.flv");
};
 
     
  En premer el botó es pararà la reproducció del vídeo.stream.pause() actua com un commutador: la primera vegada atura la reproducció, la següent la reanuda.  
     
  but_stop.onPress = function() {
stream.pause();
};
 
     
  En prémer el botó la reproducció començarà una altre vegada. stream.seek(0) la cabeza lectora es posa al començament de la reproducció del vídeo.  
     
  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.