Layout líquidos em Flash

Olá Pessoal. Este é meu primeiro artigo no iMasters e espero que gostem!

Falarei a respeito de uma técnica muito útil no Flash para a criação de layouts “líquidos”, ou seja, onde os elementos se ajustam às suas posições, independentemente do tamanho da tela.

Muitos se enganam acreditando que basta inserir seu filme com largura e/ou altura 100% que já terá um layout líquido (esticado, mas líquido). Levaremos em consideração diversos fatores aqui para um verdadeiro layout líquido. Basicamente, o segredo está nas propriedades de tamanho do Stage e em um Listener (ouvinte) para o objeto Stage.

PROJETANDO

O primeiro passo é definir se seu layout será líquido horizontalmente, verticalmente ou ambos. O segundo passo é definir quais elementos do layout serão fixos e suas determinadas posições (topo, rodapé, esquerda, direita). É importante deixar tudo pré-definido, para não haver retrabalho.

No nosso exemplo simularemos uma estrutura HTML dentro do Flash utilizando um topo, um menu lateral esquerdo, um direito e um rodapé com dois sub-elementos, um à esquerda do rodapé, outro à direita, conforme a imagem abaixo:

Neste caso temos um topo cuja largura será sempre a da tela, assim como o rodapé. A barra de menu sempre alinhada a esquerda, a de anunciantes sempre à direita, o texto do miolo acompanhando a largura disponível e, por fim, o copyright sempre à esquerda do rodapé e uma logomarca sempre à direita.

Queremos que este layout seja totalmente líquido na vertical e na horizontal. Então, mão na massa!

PROGRAMANDO

Após ter separado os movieclips e nomeado suas instâncias, configuramos o Stage para que, independente de seu tamanho definido no HTML, não estique os elementos para preencher o tamanho:

Stage.scaleMode = ´noScale´;

Também diremos ao SWF para tomar como base de alinhamento sempre o topo à esquerda usando:

Stage.align = ´TL´; //TL = Top Left

Agora criamos no primeiro frame uma função que chamaremos de Liquido(). Dentro dela sempre colocaremos o código para cada objeto que queremos posicionar.

Para entender melhor o código abaixo, temos os seguintes movieclips instanciados no Stage, auto-explicativos: topo, barra_menu, barra_direita, rodape, bg_rodape, anunciantes_leg, logomarca. Para os elementos topo e bg_rodape, além de posicioná-los, teremos também que esticá-los para preencher sempre a largura total da tela. Para as barras laterais faremos o mesmo, só que esticando-as verticalmente.

function Liquido():Void {

	//Tamanho atual do Stage
	var sh = new Number(Stage.height); 
	var sw = new Number(Stage.width);
	
	//Diferença de altura e largura do rodapé e topo
	var da = new Number(Math.floor(rodape._height + topo._height));
	var dl = new Number(Math.floor(barra_direita._width + barra_menu._width));

	//Ajusta a largura do topo
	topo._width = Math.floor(sw);
	
	//Ajusta o rodape e seus sub-elementos
	rodape._y = Math.floor(sh - rodape._height);
	rodape.bg_rodape._width = Math.floor(sw);
	rodape.logomarca._x = Math.floor(sw - (rodape.logomarca._width + 20));
	
	//Ajusta a altura do menu
	barra_menu._height = Math.floor(sh - da);
	
	//Ajusta a barra direita
	barra_direita._x = Math.floor(sw - barra_direita._width);
	barra_direita._height = Math.floor(sh - da);
	
	//Ajusta a legenda de anunciantes para acompanhar a barra direita
	anunciantes_leg._x = Math.floor(barra_direita._x + (barra_direita._width/2));
 
	//Margem para o miolo
	var margem = new Number(50);
	
	//Ajusta o texto do miolo com a largura tirando as diferenças do topo e rodapé e margens
	texto._width = Math.floor((sw - dl) - margem);
	texto._height = Math.floor((sh - da) - margem);
};

Não tem segredo, é pura matemática, calculando diferenças de margem baseado na largura de elementos e margens.

Pronto, nossa função genérica de posicionamento está pronta para ser disparada pelo Listener (ouvinte). O Listener aguarda uma determinada ação para determinado objeto, disparando funções. Nesse caso criaremos um Listener para o Objeto Stage, que irá disparar nossa função Liquido() quando o mesmo for redimensionado (onResize).

stageList = new Object();
stageList.onResize = function():Void {
	Liquido();
};
Stage.addListener(stageList);

Nosso layout líquido já está quase pronto. Criamos a função e o ouvinte, porém o Listener só irá dispará-la quando o Stage (no caso também a janela do browser) for redimensionado, caso contrário a função ficará lá esquecida. Portanto é necessário executá-la uma primeira vez para que os elementos sejam posicionados assim que o SWF seja exibido.

Chamaremos a execução de Liquido() uma primeira vez, logo temos o código completo finalizado:

//Configurações do Stage
Stage.scaleMode = ´noScale´;
Stage.align = ´TL´;

//Função genérica para posicionar os elementos
function Liquido():Void {

	//Tamanho atual do Stage
	var sh = new Number(Stage.height); 
	var sw = new Number(Stage.width);
	
	//Diferença de altura e largura do rodapé e topo
	var da = new Number(Math.floor(rodape._height + topo._height));
	var dl = new Number(Math.floor(barra_direita._width + barra_menu._width));

	//Ajusta a largura do topo
	topo._width = Math.floor(sw);
	
	//Ajusta o rodape e seus sub-elementos
	rodape._y = Math.floor(sh - rodape._height);
	rodape.bg_rodape._width = Math.floor(sw);
	rodape.logomarca._x = Math.floor(sw - (rodape.logomarca._width + 20));
	
	//Ajusta a altura do menu
	barra_menu._height = Math.floor(sh - da);
	
	//Ajusta a barra direita
	barra_direita._x = Math.floor(sw - barra_direita._width);
	barra_direita._height = Math.floor(sh - da);
	
	//Ajusta a legenda de anunciantes para acompanhar a barra direita
	anunciantes_leg._x = Math.floor(barra_direita._x + (barra_direita._width/2));

//Margem para o miolo
	var margem = new Number(50);
	
	//Ajusta o texto do miolo com a largura tirando as diferenças do topo e rodapé e margens
	texto._width = Math.floor((sw - dl) - margem);
	texto._height = Math.floor((sh - da) - margem);
};

//Listener para o Stage
stageList = new Object();
stageList.onResize = function():Void {
	Liquido();
};
Stage.addListener(stageList);

//Posicionar os elementos uma primeira vez
Liquido();

Agora vamos ao HTML que exibirá o SWF. No nosso exemplo usaremos as propriedades width e height do SWF ambos 100%. Porém isto não é uma regra. Com uma altura 100%, o SWF sempre “espremerá” os elementos verticalmente, e em nosso caso o texto do miolo seria cortado pelo rodapé numa altura pequena. Além disso, alturas 100% não geram barra de rolagem no navegador, o que lhe obriga a usar uma barra de rolagem dentro do próprio SWF.

Pronto, agora é só testar no navegador, reajustando o tamanho da janela e testando o posicionamento automático dos elementos.

Clique aqui para baixar o arquivo FLA completo.

Espero que tenham gostado!