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