Filmes Flash que se adaptam ao tamanho da janela

Como criar filmes Flash que se adaptem ao tamanho da janela do navegador.

Por Tutoriales-flash.com


Publicado em: 31/7/08
Valorize este artigo:
Um dos dilemas que se apresentam a um web designer quando começa um projeto em Flash é o tamanho do filme. Normalmente se define um tamanho objetivo e se trabalha em base a essas dimensões, o problema costuma surgir quando se visualiza o swf em tela que têm uma resolução diferente.

Nunca lhe aconteceu isto? Você desenha uma web com resolução fixa, a 800 x 600px. por exemplo, e quando o cliente vê as primeiras telas com uma resolução de 1024 x 768 ou inclusive de 1280 x 1024 px. (cada vez mais freqüente devido ao boom dos TFT de 17'') se queixa porque considera que há uma área importante da tela sem utilizar. Chegados a esta situação se apresentam duas alternativas:

Alternativa 1. Convencemos a nosso cliente de que o tamanho é o adequado, lhe aconselhamos sobre a necessidade de não saturar a tela, falamos das bondades de usar claros na composição, dizemos que tecnicamente é a única opção, blá, blá, blá.

Alternativa 2. Desenhamos um website adaptável à resolução da tela (sempre haverá um tamanho mínimo). Se não souber como fazê-lo, neste tutorial explicaremos nossa maneira de fazê-lo, que certamente não é a única.

A web www.ivi-concept.com está desenvolvida empregando o sistema que vamos mostrar neste tutorial.

COMO FAZER.
Mesmo querendo que os conteúdos do filme se adaptem ao tamanho da janela do navegador, devemos definir uma largura e uma altura mínima para organizar e desenhar a composição. Trabalharemos com estas dimensões e planejaremos o ajuste para resoluções maiores. Em nosso exemplo vamos trabalhar com um filme de 600 x 400px. e lhe atribuiremos comportamentos aos elementos que se executarão quando se detecte uma mudança na área disponível para mostrar o filme, ou seja, desenhamos o filme pensando em como se deve reajustar para diferentes tamanhos. Todos os elementos ajustáveis têm que ser do tipo movieclip e devem ter sua origem em sua esquina superior esquerda. Se tivermos botões e caixas, serão colocados dentro de um movieclip.

Temos que incluir o swf no html com umas dimensões de 100% de largura e 100% de altura, além de indicar na linha de tempo principal que não queremos que se escale novamente, mas sim que se ajuste à esquina superior esquerda. No primeiro frame escreveremos:

Stage.scaleMode = "noScale";
Stage.align = "TL";


Se fizermos isto, quando aumentarmos ou diminuirmos o tamanho da janela, estaremos fazendo o próprio com o tamanho do Stage. Todo o mecanismo do tutorial se baseia neste tamanho do Stage.

A seguir definimos as dimensões mínimas:

largura_minima = 600;
altura_minima = 400;


Para armazenar os clips que têm que se ajustar (que serão todos menos os que se ajustam acima à esquerda) iremos criar um array ou matriz:

clips_ajustaveis = new Array();

Definimos o objeto detector de eventos que vai detectar a mudança de tamanho e o associamos ao Stage para detectar as mudanças:

myListener = new Object();
Stage.addListener(myListener);


A função rec é a que se executará cada vez que detectarmos uma mudança no tamanho do Stage:

myListener.onResize = rec;
function rec() {
altura = Stage.height;
if (altura<altura_minima) {
altura = altura_minima;
}
largura = Stage.width;
if (largura<largura_minima) {
largura = larugra_minima;
}
for (var g = 0; clips_ajustaveis[g]; g++) {
clips_ajustaveis[g].alinhar();
}
}


Esta função obtém em primeiro lugar o novo tamanho do Stage, o compara com as dimensões mínimas e se for menor atribui o valor mínimo. Depois executa o método alinhar() para cada um dos elementos do array clips_ajustaveis que são os clips. Com isto o que fazemos é ajustar cada clip da maneira que tivermos dito. E como dissemos? Agora veremos...

Para continuar vamos definir dois métodos ou funções para todos os movieclips mediante protótipos, os protótipos nos permitem adicionar métodos a classes inteiras sem ter que fazê-lo individualmente, já publicaremos um tutorial falando sobre eles. O primeiro método que implementaremos será setAjuste(ajuste_x, ajuste_y, ajuste_width, ajuste_height), através do qual vamos indicar como queremos que se ajuste cada clip.

// Os valores para ajuste_x são "esquerda", "direita" e "centralizar"
// Os valores para ajuste_y são "acima", "abaixo" e "centralizar"
// Os valores para ajuste_width são false, um número de pixels
// de largura ou a porcentagem da largura do clip com respeito à cena
// O mesmo se aplica para ajuste_height com a altura
MovieClip.prototype.setAjuste = function(ajuste_x, ajuste_y, ajuste_width, ajuste_height) {
this.ajuste_x = ajuste_x;
this.ajuste_y = ajuste_y;
this.ajuste_width = ajuste_width;
this.ajuste_height = ajuste_height;
// armazeno a posição e o tamanho
// iniciais dos clips ajustáveis
this.x0 = this._x;
this.y0 = this._y;
this.w0 = this._width;
this.h0 = this._height;
this.ajustePersonalizado = false;
// armazeno o clip no array
clips_ajustaveis.push(this);
this.alinhar();
};


Como se vê no final do bloco de código executamos o método alinhar() do clip. Esta função será definida de um modo parecido com outro protótipo. Com alinhar() o que fazemos é ajustar cada clip dependendo dos ajustes que tivermos passado com setAjuste():

MovieClip.prototype.alinhar = function() {
// se passamos o parâmetro ajuste_width na função
// setAjuste, significa que devo ajustar a largura do clip
// quando escalo novamente a tela
if (this.ajuste_width) {
if (this.ajuste_width.indexOf("%") != -1) {
// se o valor de this.ajuste_width é uma porcentagem
this._width = (_root.largura*parseInt(this.ajuste_width))/100;
} else {
// se o valor de this.ajuste_width for um número de pixels
this._width = this.ajuste_width;
}
}
// o mesmo com o ajuste da altura do clip
if (this.ajuste_height) {
if (this.ajuste_height.indexOf("%") != -1) {
this._height = (_root.altura*parseInt(this.ajuste_height))/100;
} else {
this._height = this.ajuste_height;
}
}
// ajustes de posição dos clips
if (this.ajuste_x == "esquerda") {
this._x = this.x0;
}
if (this.ajuste_x == "direita") {
this._x = Math.round(this.x0+(_root.largura-_root.largura_minima));
}
if (this.ajuste_x == "centralizar") {
this._x = Math.round((_root.largura-this._width)*0.5);
}
if (this.ajuste_y == "acima") {
this._y = this.y0;
}
if (this.ajuste_y == "abaixo") {
this._y = Math.round(this.y0+(_root.altura-_root.altura_minima));
}
if (this.ajuste_y == "centralizar") {
this._y = Math.round((_root.altura-this._height)*0.5);
}
// se o clip tiver um ajuste especial executo sua função ajustar
// que definimos no onClipEvent(load) do clip
if (this.ajustePersonalizado) {
this.ajustar();
}
};


Como se pode ver no final do código, se comprova o valor da propriedade ajustePersonalizado, esta propriedade terá um valor igual a true no caso em que quisermos ajustar o clip de um modo personalizado. Ou seja, se observarem no método setAjuste as opções que temos para ajustar um clip são ajustar à esquerda, à direita ou ao centro no plano horizontal, ajustar acima, abaixo ou ao centro no plano vertical, e definir largura e altura dando um número de pixels ou dando uma porcentagem do Stage. Estas opções são básicas, por isso é muito provável que queiramos ajustar determinados clips de outra forma. Para isso, no onClipEvent(load) ao invés de executar o método setAjuste, o que vamos fazer é atribuir um valor true a sua propriedade ajustePersonalizado, incluir dentro do array clips_ajustaveis e definir sua função ajustar() que é a que lhe ajustará de maneira personalizada. Se aplicar sua imaginação e um pouco de tempo na construção das funções ajustar() poderá ampliar este tutorial e desenvolver sites onde tudo se ajustará ao tamanho da tela de um modo impecável. O código de clip de ajuste personalizado do exemplo é:

onClipEvent (load) {
this.rodapePagina_txt.autosize = "left";
this.x0 = this._x;
this.y0 = this._y;
// como quero ajustar o clip
// adiciono ao array de clips ajustaveis
_root.clips_ajustaveis.push(this);
// este clip vai ter um ajuste personalizado,
// vai estender a largura da caixa de texto
// que tem dentro. Para isso definimos seu
// ajuste dentro da função ajustar
ajustePersonalizado = true;
function ajustar() {
this.rodapePagina_txt._width = _root.tira2_mc._x-_root.tira1_mc._x-26;
this.rodapePagina_txt._width = _root.tira2_mc._x-_root.tira1_mc._x-26;
this._y = _root.altura-this._height-5;
}
}


Em compensação, em um clip que se ajusta segundo os critérios padrão este código seria mais simples:

onClipEvent (load) {
this.setAjuste("direita", "acima", false, false);
}


Seguir estas instruções é complexo, portanto recomendamos o download do fla com comentários explicativos.
exemplo_ajustePantalla.fla





Comentários do artigo
Foram enviados 5 comentários ao artigo
4 comentários não revisados
1 comentário revisado:
Por: July
31/7/08
Show de bola!!!!

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato