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:
-
// Cambiar a pantalla completa
-
Stage.displayState = "fullscreen";
-
// Cambiar a pantalla normal
-
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:
-
// importamos las clases necesarias
-
import flash.display.Stage;
-
import flash.display.StageDisplayState;
-
-
// Cambiar a pantalla completa
-
stage.displayState = StageDisplayState.FULL_SCREEN;
-
// Cambiar a pantalla normal
-
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:
Ahora si utilizamos SWFObject para insertar flash el código sería de la forma:
-
<script type="text/javascript">
-
var so = new SWFObject("mov.swf", "id", "50", "50", "8", "#fff");
-
so.addParam("allowFullScreen", "true");
-
so.write("movie");
-
</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
Publicado: 04/07/2007 10:47 am
Que interesante… no me imagino de donde lo aprendiste…
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 !!!
Publicado: 14/07/2007 11:12 am
[...] 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. [...]
Publicado: 08/08/2007 10:20 am
es posible que suban el ejemplo en .fla???
de antemano se agradece gracias
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
Publicado: 09/11/2007 12:09 am
[...] to unjimpe I was able to learn more from this. Because only knew the actionscript used in the version 2, I had [...]
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
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
Publicado: 06/12/2007 8:50 am
ahi ta el codigo….
fscommand(“fullscreen”, “true”);
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??????
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
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!!!
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.
Publicado: 19/03/2008 12:39 pm
ok gracias unijimpe. ahora otra pregunta cual es el evento del Stage para controlar el resize ??
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.
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
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
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
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…”
Publicado: 30/06/2008 6:10 pm
Por que mi fullscreen funciona en Explorer pero en Firefox no funciona.
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…
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!
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
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:.
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. ;-)
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…
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
Publicado: 09/10/2008 1:46 am
Ujimpe!!! top, funciona perfecto, no tiene ninguna complicación…
Gracias compadre!!!
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.
Publicado: 18/10/2008 2:37 pm
De casualidad no podrian poner algun ejemplo para usarlo y logico poderlo bajar??
SALUDOS !!
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.
Publicado: 03/02/2009 1:37 pm
my bueno aqui hay un ejemplo q hice
http://www.superrab.com/videos.php
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!
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!!!
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
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.
Publicado: 12/05/2009 5:38 pm
Hola! está muy bien explicado y funciona perfectamente.
Muchas gracias!
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
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.
Publicado: 15/06/2009 2:38 pm
GRACIAS!!
el problema lo tenía en SWFObject…
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….
Publicado: 05/08/2009 11:42 pm
flash 8 solucionado solo hay que usar:
Stage["displayState"]
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!!
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?
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;
}
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
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??????
Publicado: 07/01/2010 4:41 pm
Muchas gracias por tu ayuda y feliz año