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 para navegadores, 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). Para mais detalhes, clique aqui.
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!
em 4 de outubro de 2010
Igor, boa noite!
Como posso fazer funcionar o teclado no fullscreen utilizando o flash, estou quebrando a cabeça à alguns dias.
Valeu.
em 5 de outubro de 2010
Olá, Jackson…
No primeiro paragrafo da parte sobre Fullscreen eu explico isso:
“Existem algumas restrições de segurança para navegadores, 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)“.
Mais detalhes em:
http://help.adobe.com/pt_BR/Flash/CS5/AS3LR/flash/display/Stage.html#displayState
em 4 de novembro de 2010
Gostaria de saber quais as medidas do swf, para que funcione o fullbrowser, att.
em 5 de novembro de 2010
Jacson, qualquer medida. Qnd vc fizer o fullbrowser, o swf vai ocupar a tela inteira pq vc vai definir as medidas em porcentagem (100%) e nao em pixeis. Daí, o jeito q ele vai ocupar toda a tela (com escala ou nao, e alinhamento) vai depender da configuraçao q vc usar no stage.scaleMode e no stage.align.
Dá uma lida no artigo sobre Layout Liquido q talvez te ajude a entender melhor:
http://www.flashpedia.com.br/2010/08/layout-liquido/
em 2 de dezembro de 2010
Igor parabéns pelo post ajudou e com certeza ajuda a muitos que estão começando.
Porém tenho uma dúvida, ja setei o tamanho minimo ( 1024×768 ) para que os scroll ativem somente para esse tamanho, porém o scroll vertical fica sempre la mesmo a pagina estando tomando a tela inteira ( 1920x 1080 ), não sei se é algum problema com a margem top ou bottom.. agradeço se você puder me ajudar.
Valeu.
em 4 de dezembro de 2010
Olá, Kioshi… obrigado pelo comentario!
Do codigo q coloquei neste post… vc modificou alguma parte do CSS, exceto o tamanho das medidas? Pq ja testei esse codigo no Internet Explorer, Firefox e Opera, e nenhum teve esse problema.
Antes eu usava um codigo um pouco diferente e acontecia isso q vc diz, mas com esse acima nao acontece mais.
Valeu!
em 13 de janeiro de 2011
Olá Igor,
Primeiramente parabens pelo post.
Cara, eu achei exatamente o que procuro a semanas.
http://www.flashpedia.com.br/wp-content/uploads/2009/09/fullbrowser.html
Isso.
O que eu quero exatamente?
Seu mc redimensiona ao tamanho do stage.. até ai tudo bem.
O grande lance é a maneira com que ele faz isso.
Você usou uma classe Tween ou algo parecido pra ele redimensionar com efeito certo?
Você poderia dizer como fazer isso nos mc’s e se possível disponibilizar um arquivo fla em AS2 pois estou com um projeto próprio e gostaria de inserir este efeito.
Obrigado.
em 14 de janeiro de 2011
Olá, Guilherme. Muito obrigado pelo comentario.
Nesse exemplo do link de vc citou, a imagem central q diz “fullbrowser” se ajusta à posiçao central cada vez q a janela é redimensionada… mas, isso está relacionado com Layout Liquido:
http://www.flashpedia.com.br/2010/08/layout-liquido/
E sobre o uso do tween, usei TweenLite. Porém, no post sobre Layout Liquido eu nao coloquei efeito de tween pra nao acharem q o uso é obrigatorio.
Sobre disponibilizar em AS2, fico te devendo pq neste blog nao trabalhamos com essa versao, pois queremos encorajar as pessoas a usarem o AS3. Porém, a logica é a mesma… da uma olhada no exemplo de Layout Liquido pra ver como funciona e acho q isso ja te ajudará bastante… vc so precisará ajustar (relativo ao AS2) o codigo do ouvinte e mudar ‘stage’ pra ‘Stage’.
Espero ter ajudado… :D
em 19 de janeiro de 2011
Igor,
primeiramente vc ta de parabens pelo post, super bem explicadinho e talz !! era TUDOO oq eu precisava, porém nao sei oq estou fazendo de errado que me site nao redimenciona. Copiei e colei os codigos certinhos mais nao funciona. Teria como me dar uma força ai quanto a isso ?
Valeu.
Abraço.
em 21 de janeiro de 2011
Olá, Rafael.
Muito obrigado pelos elogios… :D
Em relaçao à duvida, eu acho q tem a ver com o post do Layout Liquido:
http://www.flashpedia.com.br/2010/08/layout-liquido/
Você precisa definir as propiedades scaleMode e align do stage.
Verifique se é isso…
Valeu, outro abraço!
em 19 de abril de 2011
Tive um pequeno problema com o Fullbrowser. Estou fazendo um site para um cliente, só que o site aparece no IE, Chrome, Safari, mas não aparece no FF e no Opera.
Teria alguma sugestão??
obrigado.
em 19 de abril de 2011
Olá, Thiago.
Esse código q citei acima funciona no FF e no Opera.
Tem como vc mostrar o teu link ou código q usou?
em 19 de abril de 2011
Opa!!! tem sim.
LINK: http://www.tsm-sp.com/rafbrasil
Obrigado pela atenção.
em 19 de abril de 2011
to tentando colocar o código, mas não esta saindo corretamente.
em 19 de abril de 2011
Ja olhei o link e pelo link pude ver o codigo.
Abri o link no FF, Opera e IE.. e todos abriram da mesma forma. O q nao funciona é o scroll, mas vi q vc modificou o align.css e nao está como coloco aqui.
em 19 de abril de 2011
pois é… mudei o tamanho minimo do css, mas no Safari, IE e Chrome funciona o scroll, mas no FF e no Opera nao rola.
Será que foi só pq mudei o css?
em 19 de abril de 2011
sim, era isso… ja vi q vc mudou o CSS pra forma original…
pra mudar o tamanho minimo, mude só os numeros… vc tinha adicionado novas linhas q criavam o conflito.
em 19 de abril de 2011
acho que estou me atrapalhando com os códigos, pois mudei para o original, e agora o site fica pela metade em todos os navegadores…
vou tentar fazer do zero…
obrigado
em 19 de abril de 2011
qual tamaño minimo vc quer deixar?
em 19 de abril de 2011
O palco no stage esta 1280 por 1600, mas como eu mudei o css, alterei para o 950 por 1600 com isso pensei q o problema estaria sanado por hora.
Depois eu faria as alterações para reconhecer a resolução dos monitores altomaticamente.
Mas dai me deparei com esse problema no FF e no Opera.
em 19 de abril de 2011
digamos q vc quer deixar o tamanho minimo 1280×1600:
em 19 de abril de 2011
foi exatamente isso que eu fiz… mas dai não rolou no FF e no Opera…
Ja limpei o cache.. acessei de outros computadores.. do meu mac.. e na rola..
alias so não rola no FF e Safari..
em 19 de abril de 2011
sinixtru ^^ nao sei o q poderia ser…
ponha esse codigo acima no css do teu site, pra eu ver o q rola aqui.
atualmente ta com o codigo original (950×600).
em 19 de abril de 2011
acabei de colocar com o codigo alterado..
http://www.tsm-sp.com/rafbrasil
em 19 de abril de 2011
Aqui aparece o scroll no FF, IE e Opera. Tudo normal. :D
só tem um detalhe… no CSS vc colocou:
width: expression( Math.max(document.body.clientWidth,12800) + “px” );
e nao é 12800… sao só 1280 :P
em 19 de abril de 2011
hshahshashas … não pode ser existe outro modo de fazer isso??
ou vc tem alguma coisa que possa me ajudar??/
em 19 de abril de 2011
Limpe o cache… deve ser isso…
No Opera dei reload (F5) e nao vi a mudança… tive q limpar o cache do browser. Mas ta funfando numa boa.
A soluçao em si é essa e aqui rola normal hehehe… se nao é o cache, nao sei o q poderia ser :P
em 19 de abril de 2011
hhahahhsaheahes… mistérios do CSS, é por isso que eu prefiro AS3.
Mesmo assim muuuito obrigado, valeu mesmo pelo tempo que teve atenção com as minhas dúvidas. Isso e raro véi..
o site é referência pra mim e pra mo galera… parabéns..
abraços…
em 20 de abril de 2011
valeu!! :D
abraços
em 10 de outubro de 2011
Show de bola! parabéns!
em 30 de novembro de 2011
Olá!
Muuito bom o tutorial, tô há mo tempo procurando algo mais explicativo e esse daqui ajudou demais pra entender! =] Parabéns!!
Ainda gostaria de saber como faço para fazer um swf, que está inserido em uma célula de tabela no html, se tornar fullscreen ao ser clicado!
Obrigada!!
em 2 de dezembro de 2011
Olá, Claudia!
O codigo é o mesmo usado na parte Fullscreen deste post. Igualzinho.
Obrigado a vc!!
—
E tb obrigado ao Felipe pelo comentário acima!
:D
em 6 de janeiro de 2012
Igor estou tentando fazer o Fullbrowser mas não dá certo, não carrega o swf na página depois de publicar. Me ajuda por favor!!!
em 12 de janeiro de 2012
Bruno,
desculpa pela demora… ja resolveu o problema?
se ainda nao… vc poderia dar mais detalhes? tem link do q ta fazendo?
valeu!
em 19 de janeiro de 2012
Bom, estou fazendo um site de uma festa de 15 anos, minha duvida é o seguinte. eu queria que todo o conteúdo junto com o BG fossem redimensionados quando a tela forem menor, por exemplo, minha tela é de 23 polegadas e os sites aparecem por completo, mas se alguém abrir em um notebook não vera o site todo.
Gostaria de algum arquivo para download qe possa me ajudar, pois já tentei de tudo e não consigo, queria saber também qual a resolução ideal para fazer um site assim.
EXEMPLO DE SITE: http://www.clube.fm/
em 21 de janeiro de 2012
Olá, Thallys… eu reparei q vc ja leu o post sobre “Ajustar o tamanho do fundo proporcionalmente”:
http://www.flashpedia.com.br/2010/08/ajustar-o-tamanho-do-fundo-proporcionalmente/
E vou ajuda-la por la :)) Obrigado!