Fazendo o site ocupar toda a área do navegador
Quando desenvolvemos um Website Full-Flash (completamente em flash) normalmente desejamos que o site ocupe toda a área disponível do browser. Isso, além de nos oferecer mais área para explorar, também apresenta o layout de uma forma mais integrada ao navegador.
Para que nosso site ocupe 100% da área disponível, precisamos fazer duas coisas (os arquivos fontes deste tutorial estão disponíveis ao fim do texto):
1. Adicionar um CSS ao HTML da página que inclui o arquivo .SWF, indicando que não desejamos nenhum tipo de borda no site. O CSS é uma linguagem padrão que trabalha junto ao HTML na formatação/estilização de sites. É uma linguagem cujo conhecimento é importantíssimo para Web Designers. Veja o exemplo a seguir.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Virtualize Interatividade Digital - Tutorial Actionscript</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("exemplo.swf", "exemplo", "100%", "100%", "9.0.0", "expressInstall.swf");
</script>
<style type="text/css">
body
{
height:100%;
margin:0;
padding:0;
}
</style>
</head>
<body bgcolor="#000000">
<div id="exemplo">
<h1>Conteúdo alternativo</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>
2. Precisamos indicar que o flash deve ocupar 100% da altura e largura da página, o que fazemos utilizando os parâmetros da tag object ou do SWFObject. O SWFObject é uma pequena biblioteca em Javascript, que permite a inclusão de conteúdo Flash em páginas HTML, através de um comando Javascript. Essa bibliteca nos livra da preocupação em identificar se o usuário possui Flash player ou Javascript ativado. Aconselho utilizá-la em seus projetos. Veja o código:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Virtualize Interatividade Digital - Tutorial Actionscript</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("exemplo.swf", "exemplo", "100%", "100%", "9.0.0", "expressInstall.swf");
</script>
<p><style type="text/css">
body<
{
height:100%;
margin:0;
padding:0;
}
</style>
</head>
<body bgcolor="#000000">
<div id="exemplo">
<h1>Conteúdo alternativo</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</body>
</html>
Nas linhas 06 a 09, importamos e fazemos uso da biblioteca SWFObject. Na linha 08, está o comando que realiza toda a “mágica” do processo. O 1° parâmetro deste comando é o arquivo .swf a ser exibido. O 2° é o identificador do arquivo, um nome que daremos para nosso conteúdo. O 3° e 4° parâmetros são as dimensões do arquivo, largura e altura, o qual pode ser fornecido em percentagem. O 5° parâmetro é a versão de Flash Player necessária para rodar o arquivo.O 6° parâmetro é um utilitário para instalação automática do Flash Player que já vem com o SWFObject.
Como falei, o SWFObject identifica a versão do Flash do visitante. Caso a versão seja inferior a exigida o conteúdo da div de id correspondente ao 2° parâmetro da chamada “swfobject.embedSWF()”. Caso contrário, o SWF será exibido no lugar da div.
Isso é o suficiente para o seu conteúdo Flash ser executado ocupando toda a área do navegador. Observe que quando definimos tamanho 100% para o conteúdo flash, o conteúdo também cresce, e não apenas o Stage. Isso não é desejado na maioria dos projetos. Nos próximo artigos veremos como evitar isso e também como alinhar os elementos do site de acordo com o redimensioanamento.
Dúvidas, é só perguntar! Até o próximo artigo!
Tutorial actionscript – Fazendo o site ocupar toda a área do navegador
5 Comentários para Fazendo o site ocupar toda a área do navegador
Deixe o seu comentário
Categorias
- Artigos e Tutoriais (19)
- Actionscript 3 (19)
- 1. Básico (10)
- 2. Intermediário (8)
- 3. Avançado (1)
- Actionscript 3 (19)
- Marketing Digital (1)
- Portfólio (22)
- Trabalhe Conosco (6)
Arquivos
- fevereiro 2010 (4)
- novembro 2009 (7)
- outubro 2009 (1)
- setembro 2009 (2)
- agosto 2009 (4)
- julho 2009 (10)
- junho 2009 (13)
- maio 2009 (1)
- abril 2009 (1)
- março 2009 (1)
- fevereiro 2009 (1)
- janeiro 2009 (1)
- dezembro 2008 (1)
- março 2008 (1)
Cara eu tava tentando fazer isso de todas as formas, e não conseguia um resultado legal!!! procurei muito por um tutorial assim….
….+ uma vez vlw!!!!!!!!!
Valeu Marlon! Disponibilizaremos mais tutoriais em breve! Abraços.
ola gostei muito do tutorial, porem tenho uma dúvida, como fazer para as imagens não perder a resolução, por q está ficando com a resolução ruim quando inporto a imagem para o palco do flash de 550×440 e depois no navegador abre com a resolução péssima, o q fazer
Olá Eduardo,
Sugiro que você olhe o artigo http://www.virtualizeid.com.br/blog/2009/07/reposicionando-elementos-apos-redimensionamento-da-janela/ . Lá, explicamos como tratar o redimensionamento do stage. Uma das coisas que você deve fazer é utilizar “stage.scaleMode = StageScaleMode.NO_SCALE;” para assegurar que o conteúdo do seu Stage não seja redimensionado, causando o problema que você reportou. Confira no artigo!
muito intuitivo esse tutorial,explicação nota 10! perfeito, parabéns