redimensao

/ Tutoriais

Reposicionando elementos após redimensionamento da janela em Actionscript 3

Tutorial

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:

Definindo corretamente o ponto de registro

Definindo corretamente o ponto de registro

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:

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

Estrutura do exemplo apresentado nesse tutorial

Estrutura do exemplo apresentado nesse tutorial

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:

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



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.