FlashFullScreen

/ Tutoriais

Fazendo o site ocupar toda a área do navegador

Um tutorial Flash

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.

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:

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



Arivan Bastos

Analista de sistemas, desenvolvedor Web e de games. Possui domínio de PHP, SQL e ActionScript 3. Possui conhecimentos avançados em Starling Framework, Corona SDK e Yii Framework. Atua na Virtualize na criação de sites, desenvolvimento de jogos, desenvolvimento de aplicativos mobile e desenvolvimento de aplicativos para redes sociais.