Fullscreen en Flash

Desde la versión 9 del Flash Player ya se tiene la posibilidad de realizar fullscreen de películas flash de manera transparente sin necesidad de utilizar javascript u otros artificios. Esta es una de las nuevas características de flash que facilitan el desarrollo de nuevas aplicaciones interactivas.

ActionScript 2.0

Si utilizas AS2 ahora esta disponible una nueva propiedad llamada: Stage.displayState el cual tiene dos posibles valores (fullscreen y normal) con los cuales podemos controlar los estados del modo de visualización del movie. Luego tendremos:

  1. // Cambiar a pantalla completa
  2. Stage.displayState = "fullscreen";
  3. // Cambiar a pantalla normal
  4. Stage.displayState = "normal";

De esta forma puedes crear un botón que en el evento onRelease llame a uno de estas opciones, asi de sencillo de utilizar.

ActionScript 3.0

En el caso de utilizar AS3 es semejante el uso, solo que en este caso la propiedad es llamada: flash.display.Stage.displayState el cual tiene dos opciones: StageDisplayState.FULL_SCREEN y StageDisplayState.NORMAL, luego si deseamos hacer uso de esta opción en AS3 tendremos:

  1. // importamos las clases necesarias
  2. import flash.display.Stage;
  3. import flash.display.StageDisplayState;
  4.  
  5. // Cambiar a pantalla completa
  6. stage.displayState = StageDisplayState.FULL_SCREEN;
  7. // Cambiar a pantalla normal
  8. stage.displayState = StageDisplayState.NORMAL;

HTML para modo fullscreen

Para hacer uso de esta nueva propiedad es necesario agregar un nuevo parámetro llamado allowFullScreen el cual tiene dos opciones true o false para permitir o no el acceso al fullscreen. Entonces si utilizamos em metodo embed el código sería de la forma:

  1. <object width="50"  height="50" id="movie">
  2. <param name="allowFullScreen" value="true" />
  3. <param name="movie" value="mov.swf" />
  4. <embed src="mov.swf" allowFullScreen="true"
  5. width="50" height="50" name="movie" />
  6. </object>

Ahora si utilizamos SWFObject para insertar flash el código sería de la forma:

  1. <script type="text/javascript">
  2. var so = new SWFObject("mov.swf", "id", "50", "50", "8", "#fff");
  3. so.addParam("allowFullScreen", "true");
  4. so.write("movie");
  5. </script>

Hay una observación final y es que los evento asociados al teclado (onKeyDown, etc) así como los campos de texto editables se deshabilitan en el modo fullscreen, la verdad no se con que objetivo pero es una de las restricciones.

Posts Relacionados

Comentarios Total 48 comentarios


Giancarlo
Publicado: 04/07/2007 10:47 am

Que interesante… no me imagino de donde lo aprendiste…

Juanin
Publicado: 11/07/2007 8:50 pm

Aun no he tenido la oportunidad de probar el codigo de AS3, pero por lo menos el codigo de AS2, no funciona, lo probe en Flash 8 y no reconoce la propiedad “displayState”.

salu2 !!!


[...] Gracias a unjimpe he podido ilustrarme un poco más acerca de esto. Ya que sólo conocia el actionscript utilizado en la versión 2, pero desconocia totalmente el que se utiliza en la version 3 del actionscript y la del HTML. [...]

gaston
Publicado: 08/08/2007 10:20 am

es posible que suban el ejemplo en .fla???

de antemano se agradece gracias

Gustavo
Publicado: 03/11/2007 1:23 am

Si pudieran subir el ejemplo se los agradeceria o por lo menos todo el codigo del botton porque no lo logra hacer


[...] to unjimpe I was able to learn more from this. Because only knew the actionscript used in the version 2, I had [...]

Tomás Del Bianco
Publicado: 16/11/2007 8:30 am

Juanin says: “no funciona, lo probe en Flash 8 y no reconoce la propiedad “displayState”.”

QUE PARTE DE FUNCIONA A PARTIR DE FLASH 9 NO ENTENDISTE??? xD

Jaime
Publicado: 16/11/2007 5:12 pm

Favor de facilitar el código exacto para incluir en action y el de la página en html, pues tal y como lo muestra no funciona, pues da error

enemy
Publicado: 06/12/2007 8:50 am

ahi ta el codigo….

fscommand(“fullscreen”, “true”);

Carlos
Publicado: 24/01/2008 9:45 am

Y como hago para quitarle ese mensaje que dice “Presione ESC para salir del modo pantalla completa” como elimino ese mensaje??????

ANGEL
Publicado: 05/03/2008 9:18 pm

Hola lo que te falto es decir que al exportar el swf lo hagas en actionscript 1 y funciona perfectamente

Pablo
Publicado: 18/03/2008 2:55 pm

Una pregunta, yo desarrollo en Flash Professional 8, pero no me funciona esta funcionalidad, debo usar el CS3, necesariamente ?? Por favor necesito salir de esto urgentemente, graciass!!!

unijimpe
Publicado: 18/03/2008 9:46 pm

Hola Pablo, no hay problema si lo haces con Flash 8, pero ten en cuenta que el fullscreen no se puede probar directamente en el editor de Flash. El fullscreen se puede probar cuando ya esta en el html final.

Pablo
Publicado: 19/03/2008 12:39 pm

ok gracias unijimpe. ahora otra pregunta cual es el evento del Stage para controlar el resize ??

Alberto
Publicado: 22/04/2008 8:24 am

una preguntilla… es posible ejecutar el FULLSCREEN de un SWF?

Es decir, sin añadir en el código fuente el display, etc…. podría hacer un FULLSCREEN?

Gracias.

Jorge
Publicado: 22/04/2008 10:45 am

Ya lo probe y me funciona perfecto, pero tengo una pregunta… es posible usarlo sin con allowscale false? Para que no se pixelen las imagenes? Gracias

Jhonatan
Publicado: 30/04/2008 11:19 am

Tengom muchas dudas, primero, el AS2 no reconoce el parametro displayState, y los codigos que presentas se colocan en el html o en el flam y si es en el HTML, es en head o en el body?
Gracias

DJBANDIDO
Publicado: 23/05/2008 9:34 pm

MMMM… PERO CO,O HACER PARA QUE SALGA EL JUEGOEN MODO SCREEM MIREN ESTA ES MI WEB

http://djbandido.com/juegos/?q=motos

BYTES

william
Publicado: 01/06/2008 4:05 pm

Don Juanin, por si no leyó bien, el autor dice muy claramente: “DESDE LA VERSION 9 DEL FLASH PLAYER…”

ikpo
Publicado: 30/06/2008 6:10 pm

Por que mi fullscreen funciona en Explorer pero en Firefox no funciona.

Mauricio
Publicado: 02/07/2008 1:24 pm

Supongo que lo de desactivar el campo editable seria para evitar intentos de “Phishing” ya que cualquiera pude crear un flash que se ponga en fullscreen y simule ser otra pagina conocida (la de tu banco, la de hotmail, etc) y llevar a l usuario a que uingrese sus datos de acceso…

Alejandro
Publicado: 05/07/2008 1:49 pm

Wow!!! Estoy muy agradecido por sus aportaciones, impresionante manera de colaborar con el arte mismo…
De todo corazón, gracias!

Vagoneta
Publicado: 08/07/2008 5:46 pm

El otro metodo es usar:
fscommand(“fullscreen”, “true”);
Para activar el modo Pantalla completa y fscommand(“fullscreen”, “false”); para quitarlo.

No recuerdo si este metodo funciona en una pagina HTML.

Saludos :D

ela
Publicado: 10/07/2008 9:28 am

Consulta, yo quiero llevar a fullscreen un flash que tiene varios elementos entre ellos un video, pero quiero agrandar a toda pantalla solo un video, alguien tiene idea como se hace?, lo trabajé llevando el alto y ancho del video al mismo tamaño que el escenario, pero.. puedo volver a restablecer todo desde un boton que cree, NO desde el boton escape.. que obviamente me saca el fullscreen pero me sigue el video a todo tamaño, me explico?. Quisiera el mismo efecto que un youtube.
Gracias!!
Saludos.
.:ela13:.

Juan Anotnio
Publicado: 03/08/2008 2:15 pm

Si no les funciona en Flash 8 el displayState tienen que oncorporar a su codigo esto:
import flash.display.Stage;

y listo. ;-)

vhanla
Publicado: 26/08/2008 10:07 am

Bueno, vi este tutorial en http://www.funky-monkey.nl/blog/2007/09/10/fullscreen-mode-in-as2/ dice que funciona solamente con flash 9, a pesar de que ya implementa AS3, pero con AS2 tambien lo hace, sin embargo no se si sepas como hacer que los videos presenten un suavizado, pues se muestran con pixelado notorio…

Samuel
Publicado: 30/09/2008 2:35 pm

Hola.

He utilizado este tutorial para mi web. Funciona correctamente, pero esto apartir de la función: on (release) {
Stage.displayState = “fullscreen”;
}

Lo que yo quiero, es que al cargar el .swf en web automaticamente se inicie el fullscreen, prove poniendo solo: Stage.displayState = “fullscreen”; en el primer fotograma, peor no sucede nada.

Alguien me pude ayudar.
gracias

Agustin
Publicado: 09/10/2008 1:46 am

Ujimpe!!! top, funciona perfecto, no tiene ninguna complicación…

Gracias compadre!!!

Sergio Arboleda
Publicado: 14/10/2008 6:13 am

Gracias por la informacion que todo el mundo suministra y por la que me puedan suministrar.

Samuel si tienes razón lo explicado en esta pagina funciona con el boton on release. lo pruevo
abriendolo con el explorador pero de una carpeta local y funciona. pero cuando lo subo a internet. y entro normalmente no funciona.
Alguna sugerencia.
Samuel también creo que no se debería poner en full screen cuando empieza no es muy usable, pero si creo que debería haber un botón y si el usuario lo utiliza esta bien.

Israel
Publicado: 18/10/2008 2:37 pm

De casualidad no podrian poner algun ejemplo para usarlo y logico poderlo bajar??

SALUDOS !!

golukas
Publicado: 27/11/2008 12:28 am

Hola la verdad es que no puedo lograr que me funcione, yo soy nuevo en esto, y sinceramente ni siquiera se programar estoy intentandolo, pero de verdad no lo puedo hacer ya intente en el flash y en htmal los codigos que debe llevar pero no me sale, si alguien se apiada y me puede dar el ejemplo con el html y el fla se lo agradeceria bastante, o algun link donde pueda descargar un ejemplo, mil gracias.

Eduardo
Publicado: 03/02/2009 1:37 pm

my bueno aqui hay un ejemplo q hice
http://www.superrab.com/videos.php

Gabriel
Publicado: 10/03/2009 8:32 am

Hola! Gracias por el dato! Bueno Aquí Explico un par de cositas y un método para que funcione tanto en iExplorer como en Firefox. Basicamente para que funcione lo siguiente:
on (release) {
Stage.displayState = “fullscreen”;
}
Tiene que estar Exportado en FlashPlayer 9 y ActionScript 2. y Para que funcione en ambos navegadores debemos agregar el “allowFullScreen” tanto en un como dentro de las propiedades del objeto embebido. Quedaría el código de esta manera.

Espero sirva.
Gracias!

Martin Graglia
Publicado: 19/03/2009 4:04 pm

Hola Gente! primero agradecer el aporte, que me ha sacado de un apuro.
Para seguir compartiendo: les copio el código que incorporé a un botón en mi .fla para evaluar en qué estado está el display y ejecutar la acción conveniente para tener un funcionamiento tipo “switch”.

on(release){
if(Stage.displayState == “normal”){
Stage.displayState = “fullscreen”;
}else{
Stage.displayState = “normal”;
}
}

Gracias Unijimpe!!!

Martin Graglia
Publicado: 19/03/2009 4:07 pm

En los manuales online de Adobe, en esta dirección

http://livedocs.adobe.com/flash/9.0_es/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000352.html

se explican varias cosas que responden a preguntas que se hicieron en este post:

“El código ActionScript que inicia el modo de pantalla completa sólo puede llamarse como respuesta a un evento de ratón o de teclado. Si se llama en otras situaciones, Flash Player emite una excepción.

Los usuarios no pueden introducir texto en los campos de entrada de texto cuando se trabaja en modo de pantalla completa. Todas las entradas del teclado y el código ActionScript relacionado con el teclado se desactivan en el modo de pantalla completa, excepto los métodos abreviados del teclado (como presionar la tecla Esc) que devuelven la aplicación al modo normal.

Cuando se entra en el modo de pantalla completa, aparece un mensaje que indica al usuario cómo puede salir y volver al modo normal. El mensaje aparece durante unos segundos y luego desaparece progresivamente.”

Saludos

goyo
Publicado: 14/04/2009 9:43 pm

pueden usar estas funciones:
function goFullScreen () {
Stage["displayState"] = “fullScreen”;
}
//
function exitFullScreen () {
Stage["displayState"] = “normal”;
}
Te sugiero q las pongas en una capa.
y en un boton en tu lienzo, agregale este codigo:
on (release) {
if (fullscreen != true) {
_root.goFullScreen ();
fullscreen = true;
}
else {
_root.exitFullScreen ();
fullscreen = false;
}
}

Espero les sirva, por cierto, esta probado en flash8 con AS2.0, y SIEMPRE se necesita la intervencion del usuario (teclado o raton), no se puede empezar en pantalla completa al cargar el swf, ya sea interno o externo.

francisco
Publicado: 12/05/2009 5:38 pm

Hola! está muy bien explicado y funciona perfectamente.

Muchas gracias!

Andres
Publicado: 26/05/2009 5:02 am

Bueno aqui mi duda:

Tengo una imagen en el reproductor a modo de logo, ya saben como el de las cadenas de TV.

Pues bien, cuando esta normal se ve como tiene que verse, pero cuando paso a fullscreen tambien me lo redimensiona y no quiero que lo haga, si no que se quede con las mismas dimensiones que esta de normal.

Gracias de antemano

unijimpe
Publicado: 26/05/2009 9:52 pm

Para que no redimensione los elementos puedes colocar al inicio de tu código el siguiente código:

Stage.scaleMode = “noScale”

Esto hará que todos los elementos mantengan su tamaño y tienes que cambiar con código el tamaño de los elementos que tu desees.

batx
Publicado: 15/06/2009 2:38 pm

GRACIAS!!
el problema lo tenía en SWFObject…

osc
Publicado: 05/08/2009 11:31 pm

Bueno pues el codigo muy bueno pero solo para flhas cs3 y cs4, pero en flash 8 no funciona para nada solo da error en el codigo, no reconoce Stage publicarìa el swf para algùn otro pero hay funciones bitmap que no corren en cs3 o cs4, como se corrige esto, sin tener que manejar el fullscreen en javascript, gracias….

osc
Publicado: 05/08/2009 11:42 pm

flash 8 solucionado solo hay que usar:
Stage["displayState"]

Alvaro
Publicado: 12/08/2009 4:46 pm

ANGEL
Publicado: 05/03/2008 9:18 pm

Hola lo que te falto es decir que al exportar el swf lo hagas en actionscript 1 y funciona perfectamente

muy bien gracias!!

Aion
Publicado: 27/10/2009 6:12 pm

Estoy haciendo un interactivo y necesito que un video en flv sea full screen y se adapte a pantalla. ¿me dan alguna pista de programación para ello?

arkitektor
Publicado: 03/12/2009 2:24 pm

Tengo una consulta urgente:
Tengo un sitio entero hecho en Flash AS3 y le he insertado un flv player. Este ultimo con capacidad para ejecutar el fullscreen, pero solo si se encuentra el solo dentro de un html. Si se incrusta dentro de un swf, desactiva esa funcion.
Como puedo hacer para que incrustando el player dentro del swf siempre puedo hacer el fullscreen para en el flv player??
Se que tambien habria que setear el html pero tampoco se como hacerlo.

Estas son las funciones que intervienen en dicha tarea:

function setFullScreen(e){
if(p.used_in_other_flash_file==false){
p.W = stage.stageWidth;
p.H = stage.stageHeight;
}
if(stage.displayState == “fullScreen”){
stage.displayState = “normal”;
p.bg.width = p.W;
p.bg.height = p.H;
p.bg.alpha = 1;
} else {
p.bg.alpha = 1;
stage.displayState = “fullScreen”;
p.bg.width = p.W;
p.bg.height = p.H;
}

p.resizeVideo();
setToolbar(p.bg.width – 20);

p.gallery.x = p.bg.width/2 – p.gallery_width/2;
p.gallery.y = p.bg.height/2 – p.gallery.height/2;

p.big_play_btn.x = p.bg.width/2 – p.big_play_btn.width/2;
p.big_play_btn.y = p.bg.height/2 – p.big_play_btn.height/2;
if(p.contains(p.single_image_holder))p.setSingleImagePosition(p.single_image_holder);
p.video_mask.width = p.bg.width;
p.video_mask.height = p.bg.height;
}

function resizeEvent(e){
if(p.used_in_other_flash_file==false){
p.W = stage.stageWidth;
p.H = stage.stageHeight;
}
p.bg.width = p.W;
p.bg.height = p.H;
p.video_mask.width = p.bg.width;
p.video_mask.height = p.bg.height;
p.bg.alpha = 1;
p.resizeVideo();
setToolbar(p.bg.width – 20);

p.gallery.x = p.bg.width/2 – p.gallery_width/2;
p.gallery.y = p.bg.height/2 – p.gallery.height/2;

p.big_play_btn.x = p.bg.width/2 – p.big_play_btn.width/2;
p.big_play_btn.y = p.bg.height/2 – p.big_play_btn.height/2;

if(p.contains(p.single_image_holder))p.setSingleImagePosition(p.single_image_holder);
}

function setToolbar(w){
if(w>600)w=600;
var btn_gallery_space = 6;
if(btn_gallery.width == 0) btn_gallery_space = 0;
btn_reset.x = btn_pause.x = btn_play.x = 6;
seek_bar_width = w – 6 – btn_reset.width – 6 – 6 – timer_bg.width – 6 – btn_volume.width – 6 – btn_full_screen.width – 6 – btn_gallery.width – btn_gallery_space;
bar_progress.x = bar_loaded.x = seek_bar.x = btn_pause.x + btn_pause.width + 6;
bar_progress.setWidth(seek_bar_width);
bar_loaded.setWidth(seek_bar_width);
seek_bar.setWidth(seek_bar_width);
timer_bg.x = seek_bar.x + seek_bar.width + 6;
player_timer.x = timer_bg.x;
btn_volume.x = timer_bg.x + timer_bg.width + 6;
btn_full_screen.x = btn_volume.x + btn_volume.width + 6;
btn_resize.x = btn_full_screen.x;
btn_gallery.x = btn_full_screen.x + btn_full_screen.width + 6;
bg.drawRectangle(w, 24, 5);

if(p.used_in_other_flash_file == true){
btn_full_screen.visible = false;
btn_resize.bg.visible = false;
btn_resize.y = btn_full_screen.y;
btn_resize.visible = true;
}

x = p.bg.x + p.bg.width/2 – w/2;
y = p.bg.height – 30;

buffer_preloader.x = bg.x + bg.width/2;
buffer_preloader.y = bg.y – 12 ;
}
function resizeVideo(){
_video.width = _video.videoWidth;
_video.height = _video.videoHeight;
////
var sx:Number = 1;
var sy:Number = 1;

if(bg.width != _video.width)sx = bg.width/_video.width;
_video.width = bg.width;
_video.height = _video.height * sx;
if(resizeMode == “fitScreen”){
if(_video.width > bg.width){
sx = bg.width/_video.width;
_video.width = bg.width;
_video.height = _video.height * sx;
}
if(_video.height > bg.height){
sy = bg.height/_video.height;
_video.height = bg.height;
_video.width = _video.width * sy;
}
} else {
if(_video.height < bg.height){
sy = bg.height/_video.height;
_video.height = bg.height;
_video.width = _video.width * sy;
}
}

console.appendText("sx = " + sx.toString()+ " " + " sy= "+ sy.toString() + " video : "+ _video.width );

_video.x = bg.width/2 – _video.width/2;
_video.y = bg.height/2 – _video.height/2;
video_mask.width = bg.width;
video_mask.height = bg.height;
}

Roberti Rivas
Publicado: 03/12/2009 5:50 pm

Era lo que necesitaba, para aclarar un poco.

FLASH CS4:

Reproductor: Flash Player 9 [ * Versión del player no del SOFTWARE]
Script: ActionScript 1.0

Código de mi clip de película:
on(release){
if(Stage.displayState == “normal”){
Stage.displayState = “fullscreen”;
}else{
Stage.displayState = “normal”;
}
}

[ * Cuidado con los mensajes de error al momento de compilar, es posible que te avise de las comillas, y cambiarlas a comillas rectas. Esto era lo que impedia que se ejecutara mi código correctamente, pues copie el código de arriba y lo pegé]

HTML:

Usando el Dreamweaver CS4 seleccioné el objeto, voy a Parámetros, click al botón “+” y agrego: Parámetro: allowFullScreen Value: true

Listo, tienes el fullscreen funcionando.
Si alguien desea ayuda le dejo mi email, orphe@live.com

Saludos
Roberti

Carlitos
Publicado: 29/12/2009 2:46 pm

Y como hago para quitarle ese mensaje que dice “Presione ESC para salir del modo pantalla completa” como elimino ese mensaje??????

ángel
Publicado: 07/01/2010 4:41 pm

Muchas gracias por tu ayuda y feliz año

 

Comentar

En este blog los comentarios están moderados, no aparecerán inmediatamente en la página al ser enviados. Por favor, evita los comentarios ofensivos u obscenos por que no serán aprobados.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)