Virtualize Interatividade Digital

Reposicionando elementos após redimensionamento da janela

O layout de uma página de internet ou de uma aplicação desktop em flash deve ser projetado tendo em mente uma resolução mínima. Caso não tratemos a possibilidade de várias resoluções (ou mesmo o redimensionamento da área disponível no navegador), é possível que o usuário do produto veja barras de rolagem horizontais e verticais (em aplicações WEB), ou que parte do seu conteúdo seja cortado.

Barras de rolagem (principalmente a horizontal) afetam a usabilidade e a estética do site. Para evitar esse tipo de problema em aplicações Flash, podemos estabelecer que o nosso conteúdo SWF ocupará 100% da área disponível no navegador, conforme explicado no tutorial “Fazendo o site ocupar toda a área do navegador”.

Entretanto, quando adotamos essa abordagem, o conteúdo Flash é redimensionado de acordo com a resolução e área disponível no navegador do visitante, o que pode resultar em efeitos indesejados na aparência final (redimensionamentos que não seguem proporção por exemplo).

Para evitar esse tipo de efeito, podemos gerenciar o redimensionamento do conteúdo em Flash, reposicionando e redimensionado o conteúdo conforme desejarmos.

Podemos ter, por exemplo, um website composto de um menu esquerdo, um conteúdo central, e um espaço na lateral direita reservado para banners. Eu desejo que o menu esquerdo fique sempre a 20 pixels da margem esquerda do navegador (centralizado verticalmente), que o conteúdo central fique sempre no centro (vertical e horizontal), e que o espaço de banners fique a 20 pixels da margem direita (centralizado verticalmente). Desejo também que o conteúdo não seja rediomensionado de acordo com o tamanho da área do navegador.

Tendo em vista essas especificações, devemos definir os pontos de registro dos movieclips correspondentes de acordo com os respectivos alinhamentos. Exemplo, se eu quero que o menu esquerdo fique alinhado a esquerda horizontalmente e ao centro verticalmente, o ponto de registro do seu movieclip deverá estar alinhado a esquerda e centralizado verticalmente, conforme a figura a seguir:

Essa configuração do ponto de registro não é obrigatória, mas facilitará o nosso trabalho ao alinhar o elemento. A mesmo lógica se aplica a outros tipos de alinhamento. Por exemplo, se desejo alinhar um elemento ao centro (horizontalmente e verticalmente), seu ponto de registro deve estar no centro.

Após definirmos corretamente os pontos de registro, precisamos dizer ao flash que não desejamos que ele redimensione o conteúdo de acordo com a área disponível. Precisamos também, definir uma orientação para o stage, quando o arquivo flash estiver em tamanhos superiores ou inferiores ao tamanho original do stage. Para isso, usamos o código a seguir:

// Indica que o conteúdo não dever ser redimensionado.
stage.scaleMode = StageScaleMode.NO_SCALE;

// Indica que caso a área do flash (no navegador por exemplo) seja
// maior ou menor que o stage, o ponto 0,0 do stage deve-se posicionar
// no canto superior (TOP) esquerdo (LEFT) da área.
stage.align		= StageAlign.TOP_LEFT;

Feito isso, podemos tratar o redimensionamento da área de conteúdo com facilidade. Para exemplificar, vou utilizar 3 conteúdos, um que será alinhado a 10 pixels da margem superior esquerda, outro que será alinhado ao centro e outro que será alinhado a 10 pixels da margem inferior direita, conforme a figura a seguir (o código fonte deste tutorial encontra-se no fim do texto):

Nesse exemplo, nomearei os movieclips dos quadrados como quadEsqTop_mc, quadCent_mc e quadDirBaixo_mc (respectivamente da esquerda para direita).

Para realizar o reposicionamento dos elementos a partir do redimensionamento do stage criamos um ouvinte para o evento “Event.RESIZE”. O evento “Event.RESIZE” sempre que o conteúdo flash é redimensionado. Veja:

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align		= StageAlign.TOP_LEFT;

// Criamos um ouvinte para o evento Event.RESIZE (redimensionamento).
stage.addEventListener(Event.RESIZE, Redimensionamento);
function Redimensionamento(evt)
{
	// Alinhamento a 10 pixels da margem superior esquerda.
	quadEsqTop_mc.x = 10;
	quadEsqTop_mc.y = 10;

	// Alinhamento ao centro.
	quadCent_mc.x	= stage.stageWidth 	/ 2;
	quadCent_mc.y	= stage.stageHeight	/ 2;

	// Alinhamento a 10 pixels da margem inferior direita.
	quadDirBaixo_mc.x = stage.stageWidth 	- 10;
	quadDirBaixo_mc.y = stage.stageHeight 	- 10;
}

// Chamamos a função inicialmente para que os quadrados posicionem-se
// nas margens desejadas.
Redimensionamento(null);

Na linha 05, associamos o evento de redimensionamento à função Redimensionamento, que irá tratar esse evento. Nas linhas 09 a 18 posicionamos os quadrados de acordo com o desejado. Utilizamos as propriedades stage.stageWidth e stage.stageHeight para saber a largura e altura atuais do stage.

Na linha 23 realizamos uma chamada à função, para assegurar que assim que o site seja carregado a função seja disparada, e a distribuição dos elementos seja aplicada.

Experimente rodar esse exemplo no flash e redimensionar a janela do .SWF. Veja que as margens se mantêm as mesmas, e quadrado central permanece sempre no centro.

Dúvidas, é só perguntar! Até o próximo artigo!

Tutorial actionscript – Reposicionando elementos após redimensionamento da janela

Tags: actionscript 3, criação de sites, tutorial action script, tutorial actionscript