Como fazer com que uma animação Flash ocupe o ecrã completo
ActionScript, CSS, Flash, HTML
por nunof, 12:01 14-03-2008 (actualizado em 21:40 17-12-2008)
Explicamos como é possível tornar uma animação Flash em ecrã completo: tanto a nível da janela do browser como também em modo verdadeiramente de ecrã completo.
Introdução - Flash: ecrã completo no browser e 100% ecrã completo
Deparou-se com uma situação em que necessita que um ficheiro Flash suporte modo de ecrã completo? Eu estive nesta situação ainda não faz muito tempo e na altura o melhor que consegui foi fazer com que o SWF ocupasse toda a janela do browser - depois usei o modo de ecrã completo do Firefox (F11) para tornar o Flash o mais ecrã completo possível (só precisava disto para uma apresentação específica). Não é um mau resultado, mas recentemente encontrei uma solução ainda melhor.
Neste artigo exploraremos duas abordagens diferentes:
- Como tornar o Flash fullscreen relativamente à janela do browser
- Como usar um modo verdadeiramente de ecrã completo
Há várias situações onde precisamos ou queremos este tipo de funcionalidade: jogos, vídeos, apresentações, etc.
Como fazer com que o Flash ocupe a janela toda do browser
Esta é a mais fácil das duas de fazer. Só precisamos de trabalhar com HTML e um pouco de CSS para conseguir isto.
Primeiro removemos a margem e o espaçamento interno do body. Também temos de nos certificar que toda a altura da janela do browser é usada.
A segunda coisa a fazer é dizer ao objecto Flash para ocupar toda a largura e altura. Definimos um id para o objecto Flash e especificamos no CSS uma altura e largura de 100%.
O código para obter isto está disponível de seguida:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Flash Fullscreen</title> <style> html, body { height: 100%; margin: 0; padding: 0; } #flashFullscreen { width: 100%; height: 100%; } </style> </head> <body> <object type="application/x-shockwave-flash" data="flashFullscreen.swf" id="flashFullscreen" width="640" height="480"> <param name="movie" value="flashFullscreen.swf" /> <param name="allowFullScreen" value="true" /> </object> </body> </html>
Podem ver um exemplo disto a funcionar no ecrã seguinte:
Como fazer um Flash com 100% de ecrã completo.
A partir da versão 9.0.28.0 o Flash Player permite o uso do modo fullscreen. Para colocar isto em acção precisamos de ter um pouco mais de trabalho do que na solução anterior e precisamos de usar ActionScript.
Vou fornecer um exemplo onde faremos uma movieclip em Flash com um botão que permite alternar em modo de ecrã completo e modo normal. Convém mencionar que existe um requisito para que o utilizador possa entrar em modo de ecrã completo - só podemos iniciar o modo fullscreen em resposta a um botão do rato ou a uma tecla pressionada, noutras situações uma excepção será lançada.
Comecemos por criar um novo projecto Flash (fiz isto com o Flash CS3 Professional). Coloque alguns elementos de fundo. Em seguida, crie um botão e defina a sua identificação (instance name) na janela de propriedades. Este botão irá permitir-nos alternar entre o modo de ecrã completo e o modo de ecrã normal.
Agora crie um novo layer e chame-lhe actions. Seleccione o primeiro frame e abra o painel de ActionScript.
Em seguida definimos o código para quando o botão do rato é usado no botão. Chamei ao meu botão fullscreen_btn e depois adicionei um event listener para a acção de mouse release.
Depois precisamos de determinar qual o estado actual de visionamento para que possamos alternar entre os dois. Também mudei a forma de escalonamento do stage, para fazer com que este estique os conteúdos até ao máximo - isto não é preciso, se não tivesse colocado esta linha os conteúdos adaptar-se-iam a modo de ecrã completo da mesma forma, mas manteriam o mesmo aspect ratio, o que neste caso eu não desejava (este efeito é mais óbvio quando usamos um monitor widescreen, mas a animação tem um aspect ratio de 4:3).
this.fullscreen_btn.addEventListener(MouseEvent.MOUSE_UP, toggleFullscreen); stage.scaleMode = "exactFit"; function toggleFullscreen(event:MouseEvent) { if (stage.displayState == "fullScreen") { stage.displayState = "normal"; } else { stage.displayState = "fullScreen"; } }
Ainda temos de fazer mais um passo. É preciso uma nova etiqueta no código HTML quando inserimos o SWF do Flash. Se quiser publicar directamente para HTML pode fazer isto na caixa de diálogo Publish Settings.
Vá à opção File > Publish Settings. Mude para a divisão HTML. Na caixa de selecção Template escolha o valor correcto - Flash Only - Allow Full Screen.
O Flash irá agora produzir o código HTML com o parâmetro allowFullScreen definido para true. Também podemos fazer isto manualmente. Vejam a imagem seguinte com ajuda sobre que valores alterar no código gerado automaticamente pelo Flash. Ao mesmo tempo também define a largura e altura como 100% para obter o mesmo efeito conseguido na primeira parte deste tutorial (fazer com que o Flash ocupe a janela toda do browser).
A sua aplicação Flash deverá agora suportar modo de ecrã 100% completo. Este efeito pode ser observado de seguida. Sigam a ligação definida na imagem para verem o resultado final em acção.
Conclusões e Limitações
Além das já mencionadas limitações existem outros contratempos quando usamos o modo de ecrã completo. Este modo introduz alguns riscos de segurança e a Adobe quis certificar-se que estes problemas fossem minimizados.
Um dos problemas aparece-se quando a animação entre em modo de ecrã completo e aparece uma caixa a dizer ao utilizador como poderá sair do modo fullscreen (esta caixa depois desaparecerá).
Outro problema mais sério é que o utilizador não poderá introduzir texto em campos de input enquanto em modo de ecrã completo - todo o input do teclado torna-se desactivo (excepto para sair do modo de ecrã completo).
Um último problema que poderá surgir é quando o utilizador desactiva o modo de fullscreen para todos os seus vídeos Flash. Este deverá ser de menor importância já que requer uma configuração mais avançada do Flash Player.
Recursos
Comentários
10:25 23-04-2008nunof
The first part is simple HTML and CSS, independent of where you do it. I do not want it to be tied to specific applications.The second part can only be done through ActionScript.
16:43 24-04-2008YESS
yes works for me... i little tricky but yes i was looking for this script so long really thx01:34 02-05-2008Dylan
Been looking for this forever! THKS! :-)11:20 01-02-2009Anaky
Finally a code that really works !!!Great job and thank you for the help.
10:40 08-03-2009kreviii
what if you need to have a minimum height in which scrolling (in html ) kicks in01:00 25-03-2009hendrik1
I hope i like this12:32 08-05-2009Ronnie
Hi, could you please tell me how do i play a flash stream (flv) video on this full screen browser!12:45 08-05-2009Ronnie
Hello again, i just don't want the toggle btn, when ever the file executed that will be open in full screen mode, so that i can put my flv video file into it. please help me pal!02:50 14-09-2009Michael
Hey Your script is good but why my Internet Explorer do not want to open my html file?Thanks
15:13 14-09-2009nunof
Hi Michael,Do you have more information about your issue?
Maybe it is related to security settings, if you're trying to open up the file locally.
01:55 29-09-2009Diego
Great article, thanks!But I really need my users to be able to chat while playing in full screen.
Is there a way I can do this?
01:48 01-10-2009pissed
THIS DOESN'T WORK AT ALL... I've fkt with it for hours... nothing I do makes it right..... I even ripped this .swf back to a an .fla only to see he has some fkt up .as file controlling it all. DUDE if you want to show us.. give source .fla file. Backwards engineering is the only way I'm gonna figure this out.18:08 03-10-2009nunof
Have you tried downloading the source code that is available through the download link that has always been at the top?12:05 15-11-2009domi7777
a huge thx for ur great tutorials !they've been really usefull to me
19:44 09-12-2009Cole
Awesome. Thanks for the example here!Oh and don't you just love the comment by 'pissed' lol.
05:20 10-12-2009Cole
I am wanting to add a 'fullscreen' capability to an existing site. The existing site is flash ver. 9.0 and actionscript 2.0. I tried and tried and cannot get this to work.I found the event.MOUSE_UP needed to be MouseUp event for using actionscript 2.0.
Does this code need to be different to work with as2.0 ?
help please thank you
08:36 10-12-2009nunof
Yes, you will probably need to adapt this for different versions of ActionScript.I do not know the exact requirements but it shouldn't be too different.
21:41 26-12-2009Ejiro
Interesting, but how can i make a flash movie full screen( in flash player i.e taking over my desktop)....'thanks.22:05 26-12-2009nunof
That should be achieved with the second part of this tutorial.12:09 21-01-2010DUkati
Great tutorial.Is there a way to scale properly? My image height and with in 500 pixels. However in full screen mode it looks out of proportion. Image stretches too much. Anyway to avoid that? I want to keep 1:1 scale.
Thank you
16:30 21-01-2010nunof
Dear DUkati,You have to do something similar as specified in:
http://blog.fryewiles.com/design/07-14-2008/proportional-image-scaling-in-full-browser-flash
http://www.ultrashock.com/forums/flash-professional/full-screen-proportional-87096.html
Best regards,
Nuno Freitas
00:55 23-05-2010pirco
saw the two links about scaling in proportion... but I'd like to set the Stage.scaleMode according to fullscreen mode.so when fullScreen is on, I'd like the content to be in scaleMode="showAll" but when it's NOT in fullScreen, the content should be in scaleMode="noScale".
I have a toggle button that does this great (sets fullscreen mode and scalemode) but when the user hits the escape button (in full screen mode) the window minimizes but scaleMode stays the same.
I use a listener function to check fullScreen mode but somehow it's not working right. after 3 hours of trying, I thought I ask for help.
can you?
06:37 23-04-2008Sam_Animal
I saw this referenced at http://www.SubliminalMessages.Com and just wanted to add that in FP, Expression Web or DW, there is a 100% width and height option that is probably muhch easier than what is stated above.