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.
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.