¡Saludos!
Alguna vez nos ha tocado (o nos tocará) hacer un site en Flash líquido con video de fondo. Ahora, siempre está el problema de los márgenes incómodos al ensanchar el video, y deformarlo no debe ser opción. Lo mejor en esos casos es que el video sangre (término de impresión) para llenar toda la pantalla.
En este tutorial paso a paso, conseguirás como hacerlo de forma sencilla!
Para hacer este estiramiento con un video FLV en pantalla sin bordes molestos ni distorsiones en el video, es necesario seguir los siguientes pasos:
- Inserta el componente FLVPLayback en escena, en el MovieClip que lo necesites. Para encontrar éste y otros componentes, tienes que mostrar el panel “Components”, si no lo ves, debes buscar en el menú de Flash a Windows/Components, en Windows el atajo de teclado es Ctrl+F7.
- Modifica los parámetros del componente:
- Coloca la ruta a tu archivo, para la mayoría de los casos lo mejor es que sea relativa a la ubicación del swf. Flash CS5 hace ésto para tí, solo asegúrate que coloques bien la ruta a tu swf en las opciones de publicación.
- En scaleMode, coloca “exactFit”
- En align, “center”
- Haz click en “skin”, y dentro del cuadro emergente que te aparece busca “None” dentro de “skin”. Acepta.
- Dale un nombre de instancia al componente, para éste ejemplo lo llamaremos “miVideo”.
- Selecciona el primer frame del MovieClip, Abre el panel de acciones, e inserta el siguiente código:
//Importando las clases a utilizar import flash.events.Event; import fl.video.VideoEvent; import flash.display.StageScaleMode; import flash.display.StageAlign; function redimensionarVideo(){ //Para una manipulación sencilla, //introducimos ancho y alto del stage en variables. //Observa que estamos usando las propiedades //stageWidth y stageHeight de stage, éstas representan //el ancho y alto Real del stage var anchoStage=stage.stageWidth; var altoStage=stage.stageHeight; //Calculamos si el video tiene proporción "wide" //es decir, que el ancho es mayor que el alto. //Usamos preferredWidth y preferredHeight para obtener //el ancho y alto original del video var isVideoWide:Boolean = miVideo.preferredWidth > miVideo.preferredHeight; if ((isVideoWide)) { //Si el video es "wide", estiramos al alto del stage miVideo.registrationHeight = altoStage; //Acomodamos la proporción a lo ancho de acuerdo a scaleY miVideo.registrationWidth = miVideo.preferredWidth * miVideo.scaleY; if (miVideo.registrationWidth < anchoStage) { //Si el ancho queda muy corto, calulamos cuánto sobra, //luego se lo sumamos a la altura y luego acomodamos proporción miVideo.registrationHeight += anchoStage-miVideo.registrationWidth; miVideo.registrationWidth = miVideo.preferredWidth * miVideo.scaleY; } }else if (!isVideoWide) { //Si por el contrario el video no es wide, //estiramos el video al ancho, ajustamos el alto miVideo.registrationWidth = anchoStage; miVideo.registrationHeight = miVideo.preferredHeight * miVideo.scaleX; if (miVideo.registrationHeight < altoStage) { //Y si sobra un margen arriba y abajo, //calculamos cuanto sobra, se lo sumamos al ancho //y ajustamos proporcion al alto miVideo.registrationWidth += altoStage - miVideo.registrationHeight; miVideo.registrationHeight = miVideo.preferredHeight * miVideo.scaleX; } } //Centramos el video miVideo.x=(anchoStage-miVideo.width)/2; } function stageResized(evt:Event){ if(miVideo.preferredHeight!=-1){ redimensionarVideo(); } } function videoListo(evt:VideoEvent){ redimensionarVideo(); } //Le decimos al stage que no escale y se alinee //arriba y a la izquierda, Ojo, esto es necesario para //todo site líquido básico stage.scaleMode=StageScaleMode.NO_SCALE; stage.align=StageAlign.TOP_LEFT; //Agregamos un listener al video del evento READY //del VideoEvent, que indica que el video esta listo para //recibir órdenes, si escuchamos este evento, //el valor de preferredWidth y preferredHeight sería -1 miVideo.addEventListener(VideoEvent.READY,videoListo); //Agregamos otro listener al stage del evento RESIZE //de la clase Event this.stage.addEventListener(Event.RESIZE,stageResized);
El código esta muy bien comentado, así que si se pierden, pregunten!
Hasta la próxima!
