leitura do artigo

Procurando algo?

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(8) 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:

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

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

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:

<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’. O CSS permite 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.

Para o exemplo do fullbrowser, abra o Bloco de Notas ou qualquer outro editor de texto, cole o código abaixo e salve como align.css:

<!--
body {
	overflow: auto;
}
* {
	margin:0;
	padding:0;
}
-->

Depois de salvar o arquivo acima, abra um novo documento no editor de texto, cole o código abaixo e salve como fullbrowser.html:

<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 Igor Amendola
em Action Script3, Soluções

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