Uno de los dilemas que se le presentan a un diseñador web cuando comienza un proyecto en Flash es el tamaño de la película. Normalmente se define un tamaño objetivo y se trabaja en base a esas dimensiones, el problema suele surgir cuando se visualiza el swf en pantallas que tienen una resolución diferente.

¿No os ha ocurrido nunca esto? Diseñais una web con resolución fija, a 800 x 600px. por ejemplo, y cuando el cliente ve los primeros pantallazos con una resolución de 1024 x 768 o incluso de 1280 x 1024 px. (cada vez más frecuente debido al boom de los TFT de 17'') se queja porque considera que hay un área importante de la pantalla sin utilizar. Llegados a esta situación se presentan dos alternativas:

Alternativa 1. Convencemos a nuestro cliente de que el tamaño es el adecuado, le aconsejamos de la necesidad de no saturar la pantalla, le hablamos de las bondades de usar claros en la composición, le decimos que técnicamene es la única opción, bla, bla, bla.

Alternativa 2. Le diseñamos un website adaptable a la resolución de pantalla (siempre habrá un tamaño mínimo). Si no sabeis como hacerlo, en este tutorial os explicamos nuestra manera de hacerlo, que seguro que no es la única.

La web www.ivi-concept.com está desarrollada empleando el sistema que os vamos a enseñar en este tutorial.

COMO HACERLO.
Aunque queremos que los contenidos de la película se adapten al tamaño de la ventana del navegador, debemos definir un ancho y un alto mínimo para organizar y diseñar la composición. Trabajaremos con estas dimensiones y planificaremos al ajuste para resoluciones mayores. En nuestro ejemplo vamos a trabajar con una película de 600 x 400px. y le asignaremos comportamientos a los elementos que se ejecutarán cuando se detecte un cambio en el área disponible para mostrar la peli, es decir, diseñamos la peli pensando en como se debe reajustar para diferentes tamaños. Todos los elementos ajustables tienen que ser del tipo movieclip y deben tener su origen en su esquina superior izquierda. Si tenemos botones o cajas de texto los meteremos dentro de un movieclip.

Tenemos que incluir el swf en el html con unas dimensiones de 100% de ancho y 100% de alto, además de indicarle en la línea de tiempo principal que no quiero que se reescale, pero sí que se ajuste a la esquina superior izquierda. En el primer frame escribiremos:

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

Si hacemos esto, cuando aumentemos o disminuyamos el tamaño de la ventana estaremos haciendo lo propio con el tamaño del Stage. Todo el mecanismo del tutorial se basa en este tamaño del Stage.

A continuación definimos las dimensiones mínimas:

ancho_minimo = 600;
alto_minimo = 400;

Para almacenar los clips que se tienen que ajustar (que serán todos menos los que se ajustan arriba a la izquierda) vamos a crear un array o matriz:

clips_ajustables = new Array();

Definimos el objeto detector de eventos que va a detectar el cambio de tamaño y lo asociamos al Stage para detectar los cambios:

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

La función rec es la que se va a ejecutar cada vez que detectemos un cambio en el tamaño del Stage:

myListener.onResize = rec;
function rec() {
alto = Stage.height;
if (alto<alto_minimo) {
alto = alto_minimo;
}
ancho = Stage.width;
if (ancho<ancho_minimo) {
ancho = ancho_minimo;
}
for (var g = 0; clips_ajustables[g]; g++) {
clips_ajustables[g].alinear();
}
}

Esta función obtiene en primer lugar el nuevo tamaño del Stage, lo compara con las dimensiones mínimas y si es menor asigna el valor mínimo. Después ejecuta el método alinear() para cada uno de los elementos del array clips_ajustables que son los clips. Con esto lo que hacemos es ajustar cada clip de la manera que le hayamos dicho. ¿cómo se lo decimos? Ahora lo vemos...

Para continuar vamos a definir dos métodos o funciones para todos los movieclips mediante prototipos, los prototipos nos permiten añadir métodos a clases enteras sin tener que hacerlo individualemente, ya publicaremos un tutorial hablando sobre ellos. El primer método que implementaremos será setAjuste(ajuste_x, ajuste_y, ajuste_width, ajuste_height), a través del cual vamos a indicar como queremos que se ajuste cada clip.

// Los valores para ajuste_x son "izquierda", "derecha" y "centrar"
// Los valores para ajuste_y son "arriba", "abajo" y "centrar"
// Los valores para ajuste_width son false, un número de píxeles
// de anchura o el porcentaje de la anchura del clip respecto de la escena
// Lo mismo se aplica para ajuste_height con la 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;
// almaceno la posición y el tamaño
// iniciales de los clips ajustables
this.x0 = this._x;
this.y0 = this._y;
this.w0 = this._width;
this.h0 = this._height;
this.ajustePersonalizado = false;
// almaceno el clip en el array
clips_ajustables.push(this);
this.alinear();
};

Como se ve al final del bloque de código ejecutamos el método alinear() del clip. Esta función la definimos de un modo parecido con otro prototipo. Con alinear() lo que hacemos es ajustar cada clip dependiendo de los ajustes que le hayamos pasado con setAjuste():

M ovieClip.prototype.alinear = function() {
// si se le ha pasado el parámetro ajuste_width en la función
// setAjuste, significa que debo ajustar el ancho del clip
// cuando reescalo la pantalla
if (this.ajuste_width) {
if (this.ajuste_width.indexOf("%") != -1) {
// si el valor de this.ajuste_width es un porcentaje
this._width = (_root.ancho*parseInt(this.ajuste_width))/100;
} else {
// si el valor de this.ajuste_width es un número de píxeles
this._width = this.ajuste_width;
}
}
// lo mismo con el ajuste del alto del clip
if (this.ajuste_height) {
if (this.ajuste_height.indexOf("%") != -1) {
this._height = (_root.alto*parseInt(this.ajuste_height))/100;
} else {
this._height = this.ajuste_height;
}
}
// ajustes de posicion de los clips
if (this.ajuste_x == "izquierda") {
this._x = this.x0;
}
if (this.ajuste_x == "derecha") {
this._x = Math.round(this.x0+(_root.ancho-_root.ancho_minimo));
}
if (this.ajuste_x == "centrar") {
this._x = Math.round((_root.ancho-this._width)*0.5);
}
if (this.ajuste_y == "arriba") {
this._y = this.y0;
}
if (this.ajuste_y == "abajo") {
this._y = Math.round(this.y0+(_root.alto-_root.alto_minimo));
}
if (this.ajuste_y == "centrar") {
this._y = Math.round((_root.alto-this._height)*0.5);
}
// si el clip tiene un ajuste especial ejecuto su función ajustar
// que hemos definido en el onClipEvent(load) del clip
if (this.ajustePersonalizado) {
this.ajustar();
}
};

Como veis al final del código, se comprueba el valor de la propiedad ajustePersonalizado, esta propiedad va a tener un valor igual a true en el caso de que queramos ajustar el clip de un modo personalizado. Es decir, si os habeis fijado en el método setAjuste las opciones que tenemos para ajustar un clip son ajustar a la izquierda, a la derecha o al centro en el plano horizontal, ajustar arriba, abajo o al centro en el plano vertical, y definir ancho y alto dando un número de píxeles o dando un porcentaje del Stage. Estas opciones son básicas, es muy probable que determinados clips queramos ajustarlos de otro modo. Para ello, en el onClipEvent(load) en lugar de ejecutar el método setAjuste, lo que vamos a hacer es asignarle un valor true a su propiedad ajustePersonalizado, incluirlo dentro del array clips_ajustables y definir su funcion ajustar() que es la que le ajustará de manera personalizada. Si aplicais vuestra imaginación y un poco de tiempo en la construcción de las funciones ajustar() podreis ampliar este tutorial y desarrollar sitios donde todo de se ajusta al tamaño de pantalla de un modo impecable. El código de clip de ajuste personalizado del ejemplo es:

onClipEvent (load) {
this.piePagina_txt.autosize = "left";
this.x0 = this._x;
this.y0 = this._y;
// como quiero ajustar el clip
// lo añado al array de clips ajustables
_root.clips_ajustables.push(this);
// este clip va tener un ajuste personalizado,
// va a extender a lo ancho la caja de texto
// que tiene dentro. Para ello definimos su
// ajuste dentro de la función ajustar
ajustePersonalizado = true;
function ajustar() {
this.piePagina_txt._width = _root.tira2_mc._x-_root.tira1_mc._x-26;
this.piePagina_txt._width = _root.tira2_mc._x-_root.tira1_mc._x-26;
this._y = _root.alto-this._height-5;
}
}

En cambio en un clip que se ajusta según los criterios estándar es código sería más sencillo:

onClipEvent (load) {
this.setAjuste("derecha", "arriba", false, false);
}

Seguir esta instrucciones es complejo, así que os recomendamos la descarga del fla con comentarios explicativos.
ejemplo_ajustePantalla.fla