Decidi escrever este artigo pois vejo que muitas pessoas confundem fullscreen com fullbrowser. E tendo em vista que o arquivo HTML (ou afim) precisa conter um parâmetro específico para que o fullscreen funcione, aproveito para explicar um pouco do SWFObject, que é uma ferramenta muito útil para inserir o arquivo swf na página.
SWFObject
O SWFObject é um arquivo JavaScript que proporciona um jeito mais prático de inserir arquivos swf num arquivo HTML (ou afim). Existem dois métodos de publicação: estático e dinâmico. Cada um tem as suas vantagens, mas particularmente prefiro o método dinâmico porque o código é mais enxuto e permite uma fácil configuração dos parâmetros. Além disso, desaparece com aquele aviso “click here to activate and use this control“.
Exemplo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html> <head> <title>exemplo de uso do SWFObject</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; var params = {}; var attributes = {}; swfobject.embedSWF("index.swf", "inicio", "800", "600", "10.0.0", false, flashvars, params, attributes); </script> </head> <body> <div id="inicio"> <small><a href="http://www.adobe.com/go/getflashplayer">FlashPlayer10 required</small></a> </div> </body> </html> |
Explicação:
O código abaixo faz referência ao arquivo SWFObject que será usado e onde ele está localizado.
1 | <script type="text/javascript" src="swfobject.js"></script> |
O código abaixo contêm as informações do swf, além do id que terá a div que vai mostrar o conteúdo do swf (neste caso, ‘inicio’ é o id).
1 2 3 4 5 6 | <script type="text/javascript"> var flashvars = {}; var params = {}; var attributes = {}; swfobject.embedSWF("index.swf", "inicio", "800", "600", "10.0.0", false, flashvars, params, attributes); </script> |
No código abaixo, a div com id=’inicio’ é quem mostra o conteúdo do swf. Se por alguma razão ele não puder ser mostrado, aparecerá o que estiver dentro da div, neste caso é um link para a pessoa baixar o FlashPlayer.
1 2 3 | <div id="inicio"> <small><a href="http://www.adobe.com/go/getflashplayer">FlashPlayer10 required</small></a> </div> |
Se quiser baixar ou saber mais sobre o SWFObject, clique aqui.
Fullscreen
O fullscreen acontece quando o aplicativo ocupa a tela inteira do monitor. Existem algumas restrições de segurança, mas as mais importantes são: o fullscreen não pode ser ativado automaticamente, somente através da interação do usuário (por exemplo, clique do mouse); no modo fullscreen, os usuários não podem escrever nas caixas de texto porque o teclado fica desabilitado (com exceção dos atalhos que servem para desativar o fullscreen e teclas não imprimíveis, por exemplo: teclas de setas, espaço, Shift e Tab).
Existem duas formas de ativar o fullscreen: usando fscommand() ou usando a propiedade displayState da classe Stage. O fullscreen pelo fscommand() não funciona em navegadores, apenas em aplicações autônomas, como em um projetor (arquivo que pode ser executado de forma independente, sem o FlashPlayer instalado). Por outro lado, trabalhar com a classe Stage é mais recomendável porque oferece uma maior variedade de recursos para o fullscreen. Um deles é a propiedade fullScreenSourceRect, que permite escolher uma área específica a ser usada como fullscreen, ao invés de todo o aplicativo ser ampliado.
Exemplo: crie um MovieClip com nome de instancia mc e use o código abaixo.
1 2 3 4 5 6 7 8 9 10 11 12 | mc.addEventListener(MouseEvent.CLICK, fullscreen) function fullscreen(e:MouseEvent) { switch(stage.displayState) { case "normal": stage.displayState = "fullScreen"; break; case "fullScreen": default: stage.displayState = "normal"; break; } } |
O switch no código acima serve para criar uma condição ao clicar no MovieClip: se o fullscreen estiver desativado, o ativa; se o fullscreen estiver ativado, o desativa.
Ao abrir o swf diretamente pelo FlashPlayer, é possivel ativar o fullscreen. Porém, se o swf estiver em uma página, será preciso inserir no código dela o parâmetro allowFullScreen com o valor true. Usando o exemplo do SWFObject citado neste post, ficaria assim:
1 2 3 4 5 6 | <script type="text/javascript"> var flashvars = {}; var params = { allowFullScreen: true }; var attributes = {}; swfobject.embedSWF("fullscreen.swf", "fullscreen", "500", "375", "10.0.0", false, flashvars, params, attributes); </script> |
Fullbrowser
O fullbrowser acontece quando o conteúdo do SWF ocupa toda a área da página no navegador, independente da resolução do monitor. Geralmente é usado quando o desenvolvedor deseja criar um ‘layout líquido’ (os elementos se acomodam em relação ao tamanho do palco cada vez que a janela é redimensionada).
Para que o fullbrowser se veja melhor, é preciso usar CSS para eliminar possiveis bordas que ficam ‘sobrando’. Além disso, ele permite mostrar o scroll do navegador caso a área do página fique menor que um determinado tamanho. É possível inserir o código diretamente na página, mas o ideal é criar um arquivo de extensão *.css para que ele possa ser reutilizado facilmente, sem ter que ficar copiando todo o código em cada arquivo de página.
Abra o Bloco de Notas ou qualquer outro editor de texto, cole o código abaixo e salve como align.css. Os valores 950 e 600 representam respectivamente a largura e altura mínima para a área da pagina, então, se ao mudar o tamaño da janela essa área ficar menor que algum desses valores, aparecerá o scroll. Se desejar outro tamanho mínimo, mude-os.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!-- body { overflow: auto; } * { margin:0; padding:0; height: 100%; width: 100%; /* for mozilla */ min-width: 950px; min-height: 600px; /* for IE */ width: expression( Math.max(document.body.clientWidth,950) + "px" ); height: expression( Math.max(document.body.clientHeight,600) + "px" ); } --> |
Depois de salvar o arquivo acima, abra um novo documento no editor de texto, cole o código abaixo e salve como fullbrowser.html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <head> <title>fullbrowser</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel='stylesheet' type='text/css' href='align.css'/> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; var params = {}; var attributes = {}; swfobject.embedSWF("fullbrowser.swf", "fullbrowser", "100%", "100%", "10.0.0", false, flashvars, params, attributes); </script> </head> <body> <div id="fullbrowser"> <p><small><a href="http://www.adobe.com/go/getflashplayer">FlashPlayer10 required</small></a></p> </div> </body> </html> |
Já está pronto o fullbrowser! E para completar, se quiser trabalhar com layout líquido, use o Event.RESIZE no stage para detectar quando a janela for redimensionada, e adicione estas linhas no código:
1 2 | stage.align = StageAlign.TOP_LEFT stage.scaleMode = StageScaleMode.NO_SCALE |
Se quiser ver um exemplo de fullbrowser, clique aqui.
em 19 de setembro de 2009
iguu! \o/
cara, eu deveria ter lido, pelo menos, o inicio deste artigo 3h atrás.. ¬¬
já resolvido, mas eu tava quebrando minha cabeça pq eu estava aplicando um CSS numa DIV que passei como parametro, e o site(*.swf) tava tooodo distorcido…
…Eu pensava que a swfObject não usaria esta DIV para o carregamento do *.swf, apenas o conteudo alternativo(caso retorne false o carregamento do *.swf). putz, isso me tomou alguns minutos e me stressou um pouco… ¬¬
E eu pensando que este artigo não iria me somar nada… ;p
Bom artigo igu.
.o_\o.
/\ /\
em 30 de setembro de 2009
Ola amigo parabéns pelo material, esta precisando muito entender como o swfobject e full funcionava e você tiro todas minhas duvidas nesse artigo parabéns.
em 3 de novembro de 2009
Beleza Igor,
to com um problema pra fazer o fullbrowser funcionar. Baixei o swfobject e coloquei todos as linhas de comando que vc passou, mais mesmo assim o swf não redimensiona. Onde é que eu tó errando???
em 10 de novembro de 2009
olá Bruno, nao sei se entendi bem a tua duvida… mas o “stage.scaleMode = StageScaleMode.NO_SCALE” faz com que o swf nao escale, ou seja, nao redimensione. Se nao quiser q isso aconteça, elimine essa linha. Na verdade essa linha serve mais pra quem quer trabalhar com layout liquido, mas você pode fazer o fullbrowser sem ela.
em 6 de janeiro de 2010
Cara! Vlw Mesmo! Muito bom esse tutorial e principalmente: muuuuito simples de ser compreendido e excecutado!
Parabéns!
Grande abraço a todos!
Van
em 25 de fevereiro de 2010
Igor,
eu fiz o seguinte, copiei exatamente sua linha de comando, e fiz o seguinte codigo:
exemplo de uso do SWFObject
var flashvars = {};
var params = {};
var attributes = {};
swfobject.embedSWF(“banner.swf”, “inicio”, “732″, “188″, “10.0.0″, false, flashvars, params, attributes);
FlashPlayer10 required
baixei o swfobject_2.2.zip deste link:
http://code.google.com/p/swfobject/downloads/list
coloquei arquivo swfobject na pasta do codigo acima.
MAS aparece a seguinte mensagem:
“para ajudar a proteger sua segurança, o IE impediu esta pagina da web de executar scripts ou controles activeX que possam acessar seu computador”
um exemplo de site bem tosquinho para exemplicar é este aqui
http://www.northfilm.com.br/
em 25 de fevereiro de 2010
Felipe, esse aviso é normal e acontece quando você testa com o internet explorer localmente.
Basta publicar que este aviso não será mais mostrado.
em 25 de fevereiro de 2010
felipe, aqui nao aparece esse aviso… deve ser isso q o eder comentou.
obrigado, eder! :D
em 18 de abril de 2010
Velhao,
Show de bola essa tuto,
Estou com uma duvida que não sonseguir sanar..
Como faz para deixar o swf “transparent” dentro do script que tu elaborou, apenas consigo fazer isso quando insiro o swf no object ()
valeu abraços, obrigado por esse post…ajudou muito já!!
em 12 de maio de 2010
obrigado, rodrigo! é um prazer poder ajudar…
desculpa pela enorme demora, fui ver so hj o teu recado…
mas em relaçao à tua duvida, ela se resolve nesta linha:
var params = { };
deixe assim:
var params = { wmode: “transparent” };
abraço!