leitura do artigo >

11
set

SWFObject, Fullscreen e Fullbrowser

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.

Comentários (3) Comentários(46) Categorias Action Script3, Soluções

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>

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

«
»
Postado em 11-09-2009 por
em Action Script3, Soluções

Share

Comentários

  • Bruno Monteiro disse:
    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.
    /\ /\

  • cyp disse:
    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.

  • Bruno disse:
    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???

  • Igor Amendola disse:
    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.

  • Vanderson Vieira disse:
    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

  • felipe pestana disse:
    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/

  • Eder Lima disse:
    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.

  • Igor Amendola disse:
    em 25 de fevereiro de 2010

    felipe, aqui nao aparece esse aviso… deve ser isso q o eder comentou.
    obrigado, eder! :D

  • Rodrigo disse:
    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á!!

  • Igor Amendola disse:
    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!

  • jackson disse:
    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.

  • Igor Amendola disse:
    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

  • Jacson Gomes disse:
    em 4 de novembro de 2010

    Gostaria de saber quais as medidas do swf, para que funcione o fullbrowser, att.

  • Igor Amendola disse:
    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/

  • Kioshi disse:
    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.

  • Igor Amendola disse:
    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!

  • Guilherme disse:
    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.

  • Igor Amendola disse:
    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

  • Rafael disse:
    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.

  • Igor Amendola disse:
    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!

  • Thiago S. M. disse:
    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.

  • Igor Amendola disse:
    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?

  • Thiago S. M. disse:
    em 19 de abril de 2011

    Opa!!! tem sim.

    LINK: http://www.tsm-sp.com/rafbrasil

    Obrigado pela atenção.

  • Thiago S. M. disse:
    em 19 de abril de 2011

    to tentando colocar o código, mas não esta saindo corretamente.

  • Igor Amendola disse:
    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.

  • Thiago S. M. disse:
    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?

  • Igor Amendola disse:
    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.

  • Thiago S. M. disse:
    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

  • Igor Amendola disse:
    em 19 de abril de 2011

    qual tamaño minimo vc quer deixar?

  • Thiago S. M. disse:
    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.

  • Igor Amendola disse:
    em 19 de abril de 2011

    digamos q vc quer deixar o tamanho minimo 1280×1600:

    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: 1280px;
	min-height: 1600px;
 
	/* for IE */
	width:  expression( Math.max(document.body.clientWidth,1280) + "px" );
	height: expression( Math.max(document.body.clientHeight,1600) + "px" );
}
-->
  • Thiago S. M. disse:
    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..

  • Igor Amendola disse:
    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).

  • Thiago S. M. disse:
    em 19 de abril de 2011

    acabei de colocar com o codigo alterado..

    http://www.tsm-sp.com/rafbrasil

  • Igor Amendola disse:
    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

  • Thiago S. M. disse:
    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??/

  • Igor Amendola disse:
    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

  • Thiago S. M. disse:
    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…

  • Igor Amendola disse:
    em 20 de abril de 2011

    valeu!! :D
    abraços

  • Felipe disse:
    em 10 de outubro de 2011

    Show de bola! parabéns!

  • Claudia disse:
    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!!

  • Igor Amendola disse:
    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

  • Bruno disse:
    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!!!

  • Igor Amendola disse:
    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!

  • Thallys disse:
    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/

  • Igor Amendola disse:
    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!

Escreva um Comentário

Seu nome

E-mail (não será publicado) (obrigatório)

Website

Comente

Spam protection by WP Captcha-Free