Comunidad de diseño web y desarrollo en internet online

Diag líquida: ajustar video al área visible del navegador

Citar            
MensajeEscrito el 06 Ago 2010 05:23 pm
Hola, soy nueva en el foro y necesito vuestra ayuda. Estoy trabajando en una web con diagramación líquida en AS3, quiero que al redimensionar la ventana del navegador, en alto o en ancho el video se escale y no deje bandas arriba, abajo o en ambos lados como me ocurre ahora. No me importa que se pierda imagen a lo ancho o a lo largo, solo pretendo que cubra toda el área visible. He utilizado un if () para que el video no se escale a menos de 800x600, pero el máximo quiero que no tenga tope. No sé si me explico bien.

El link para ver el ejemplo es éste: http://www.cecilia.herobo.com/boceto_web.html

Abajo a la derecha, si pasas con el ratón, tienes un controlador para play/mute/fullscreen, creo que no tiene nada que ver con mi problema, pero lo comento por las dudas.

Muchas gracias a quien pueda ayudarme. :)

Por cecilia_

11 de clabLevel



 

msie8
Citar            
MensajeEscrito el 06 Ago 2010 08:24 pm
¿Estás igualando el objeto video al alto/ancho del Stage cuando camia de tamaño? ¿Que código usas?

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 06 Ago 2010 08:56 pm
Hola! este es el código, gracias de antemano!

Código ActionScript :

//IMPORT
import gs.TweenMax
import gs.easing.*
import fl.video.*

/////////////////////////////////////////////////////
/////////////////////////////////////////////////////

//STAGE PROPS
stage.scaleMode = StageScaleMode.NO_SCALE
stage.align = StageAlign.TOP_LEFT
stage.displayState=StageDisplayState.NORMAL

//STAGE EVENTOS
stage.addEventListener ( Event.RESIZE, on_resize )
stage.showDefaultContextMenu = false      

//VARS Y PROPS CONTROLADOR
var controlador:Controlador = new Controlador ()
addChild(controlador)
//
var hot_area:Hot_area=new Hot_area ()
controlador.addChild (hot_area)
hot_area.alpha=0
//
var botonera:Botonera=new Botonera ()
controlador.addChild (botonera)
botonera.visible=false
//
var tamaño_fondo_indicador:Number = 100;

//FUNCION RESIZE CONTROLADOR, MENU Y VIDEO
on_resize ( new Event ( Event.RESIZE ) )
function on_resize ( e:Event ) {
   //
   hot_area.width=stage.stageWidth
   botonera.x=hot_area.width-(350)
   if (botonera.x < 640) {botonera.x = 640}
   //
   hot_area.y=stage.stageHeight-hot_area.height
   botonera.y=stage.stageHeight-(65)
   if (botonera.y < 480) {botonera.y = 480}

   video_player.height = stage.stageHeight
   video_player.width = stage.stageWidth
   
   //tamaño minimo de visualización en x
   if (video_player.width < 800) {video_player.width = 800}
   //tamaño minimo de visualización en y
   if (video_player.height < 600) {video_player.height = 600}
}

/////////////////////////////////////////////////////
/////////////////////////////////////////////////////

//PROPS VIDEO Y CONTROLADOR
video_player.source = "ansaldo_cooparaiso_polet_ioec.flv"
video_player.autoPlay = true
video_player.fullScreenTakeOver = false
//
botonera.btn_play.mouseChildren = false
botonera.btn_mute.mouseChildren = false
botonera.btn_screen.mouseChildren = false

botonera.btn_play.texto.text="play"
botonera.btn_mute.texto.text="on"
botonera.btn_screen.texto.text="full"

botonera.indicador_fondo.width = tamaño_fondo_indicador
botonera.indicador.y = botonera.indicador_fondo.y
botonera.indicador.width = 1

//EVENTOS VIDEO_BACKGROUND
video_player.addEventListener(VideoEvent.COMPLETE, play_again)
controlador.addEventListener ( MouseEvent.MOUSE_OVER, controlador_over) 
controlador.addEventListener ( MouseEvent.MOUSE_OUT, controlador_out) 

//FUNCIONES VIDEO_BACKGROUND
function play_again (e:VideoEvent) {
   e.target.play()
}
//
function controlador_over (e:MouseEvent) {
   TweenMax.to ( botonera, 0.2, {alpha:1, visible:true, easing:Cubic.easeOut } )
}
//
function controlador_out (e:MouseEvent) {
   TweenMax.to ( botonera, 0.2, {alpha:0, visible:false, easing:Cubic.easeOut } )
}

//BARRA INDICADORA
video_player.playheadUpdateInterval = 10;
video_player.addEventListener ( VideoEvent.PLAYHEAD_UPDATE,  video_player_update );

function video_player_update ( e:VideoEvent ) {
   botonera.indicador.width = ( video_player.playheadTime / video_player.totalTime ) * tamaño_fondo_indicador
}

//EVENTOS BOTONES
botonera.btn_play.buttonMode = true
botonera.btn_mute.buttonMode = true
botonera.btn_screen.buttonMode = true

botonera.btn_play.addEventListener( MouseEvent.CLICK, btn_play_click )
botonera.btn_mute.addEventListener( MouseEvent.CLICK,  btn_mute_click )
botonera.btn_screen.addEventListener( MouseEvent.CLICK, btn_screen_click )

//
botonera.btn_play.addEventListener( MouseEvent.MOUSE_OVER, over )
botonera.btn_mute.addEventListener( MouseEvent.MOUSE_OVER,  over )
botonera.btn_screen.addEventListener( MouseEvent.MOUSE_OVER,  over )

//
botonera.btn_play.addEventListener( MouseEvent.MOUSE_OUT, out )
botonera.btn_mute.addEventListener( MouseEvent.MOUSE_OUT,  out )
botonera.btn_screen.addEventListener( MouseEvent.MOUSE_OUT,  out )

//
function over ( e:MouseEvent ) {
   TweenMax.to (e.target.getChildAt (1), 0.3, { tint: 0x888888 } )
}
function out ( e:MouseEvent ) {
   TweenMax.to ( e.target.getChildAt (1), 0.3, { tint: null } )
}
//
function btn_play_click ( e:MouseEvent ) {
   if ( e.target.texto.text == "play" ) {
      video_player.pause ();
      e.target.gotoAndPlay (2)
      e.target.texto.text = "pause";
   } else {
      video_player.play ();
      e.target.gotoAndPlay (1)
      e.target.texto.text = "play";
   }
}
//
function btn_mute_click ( e:MouseEvent ) {
      if ( e.target.texto.text == "on" ) {
      video_player.volume = 0
      e.target.gotoAndPlay (2)
      e.target.texto.text = "off"
   } else {
      video_player.volume = 1
      e.target.gotoAndPlay (1)
      e.target.texto.text = "on"
   }
}
//
function btn_screen_click ( e:MouseEvent ) {
      //
      if ( e.target.texto.text == "full" ) {
      stage.displayState=StageDisplayState.FULL_SCREEN

      e.target.gotoAndPlay (2)
      e.target.texto.text = "normal";
   } else {
      stage.displayState=StageDisplayState.NORMAL  
      e.target.gotoAndPlay (1)
      e.target.texto.text = "full";
   }
}

Por cecilia_

11 de clabLevel



 

firefox
Citar            
MensajeEscrito el 06 Ago 2010 11:05 pm
Si video_player es un FLVPlayback. entonces tiene siu propia rutina de resize, es decir cuando lo reescalas, internamente reescala el video según los parámetros que tenga seteados, revisa la documentación del FLVPlayback, si es otro tipo de componentes, busca en las propiedades. Creo que había alguna propiedad de proporcionalidad que respetaba. Luego para que el tamaño pueda ser totalmente arbitrario, deberías trabajar a mas bajo nivel, es decir usar un object Video con un NetStream attachado

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 07 Ago 2010 12:00 am
Muchas gracias Jorge, creo que mejor voy a hacerlo con un object video como me dices, tengo que investigar un poco el tema y si tengo problemas volveré a molestarte! Otra vez muchas gracias!!

Por cecilia_

11 de clabLevel



 

msie7
Citar            
MensajeEscrito el 09 Ago 2010 09:42 pm
Hola, ya lo he solucionado usando el componente fl.video.FLVPlayback:

var video_player:fl.video.FLVPlayback=new fl.video.FLVPlayback()
addChild (video_player)
video_player.scaleMode = VideoScaleMode.EXACT_FIT

function on_resize ( e:Event ) {
video_player.height = stage.stageHeight;
video_player.width = video_player.height * (4/3)

if (stage.stageWidth > video_player.width)
{video_player.width = stage.stageWidth;
video_player.height = video_player.width / (4/3)}

if (video_player.width < 1024) {video_player.width = 1024; video_player.height = 1024 / (4/3) }
}

No sé si es la mejor solución pero funciona. :D

Por cecilia_

11 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.