Flash contenido autoajustable a la ventana

Aunque queremos que los contenidos de la pelcula se adapten al tamao de la ventana del
navegador, debemos definir ancho y alto mnimo (en el ejemplo es de 600 x 400px). y le
asignaremos comportamientos a los elementos que se ejecutarn al detectar un cambio en el rea
disponible para mostrar la pelcula. Todos los elementos ajustables tienen que ser del tipo
movieclip con origen en la 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 100% de ancho y 100% de alto) adems de indicarle en
la peliculal que no reescale, pero s que se ajuste a la esquina superior izquierda.
En el primer frame escribiremos:
Cuando aumentemos o disminuyamos el
tamao de la ventana lo estaremos haciendo con el tamao del Stage. Todo el
mecanismo del tutorial se basa en el tamao del Stage.

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

A continuacin definimos las dimensiones

mnimas:

ancho_minimo = 600;
alto_minimo = 400;

Para almacenar los clips que se tienen

que ajustar (que sern 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 tamao y
lo asociamos al Stage para detectar los
cambios:

myListener = new Object();

Stage.addListener(myListener);

La funcin rec es la que se va a ejecutar

cada vez que detectemos un cambio en
el tamao 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 funcin obtiene en primer lugar el nuevo tamao del Stage, lo compara con las dimensiones
mnimas y si es menor asigna el valor mnimo. Despus ejecuta el mtodo 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. cmo se lo decimos? Ahora lo vemos...
Para continuar vamos a definir dos funciones para todos los movieclips mediante prototipos, los
prototipos nos permiten aadir funciones a clases enteras sin tener que hacerlo individualemente.
La primer funcin ser setAjuste(ajuste_x, ajuste_y, ajuste_width, ajuste_height), a travs
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 nmero de
pxeles // 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 posicin y el tamao // 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, ejecutamos alinear(). Esta funcin la definimos de un modo parecido con otro
prototipo. Con alinear() se ajusta cada clip dependiendo de los ajustes que le hayamos pasado con
setAjuste():
MovieClip.prototype.alinear = function() {
// si se le ha pasado el parmetro ajuste_width en la funcin // 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 nmero de pxeles
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 funcin ajustar // que hemos definido en el
onClipEvent(load) del clip
if (this.ajustePersonalizado) {
this.ajustar();
}
};

Como veis al final del cdigo, 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 mtodo 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 nmero de pxeles o
dando un porcentaje del Stage. Estas opciones son bsicas, es muy probable que determinados
clips queramos ajustarlos de otro modo. Para ello, en el onClipEvent(load) en lugar de ejecutar el
mtodo 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. El cdigo 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 aado 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 funcin 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 segn los criterios estndar es cdigo sera ms sencillo:
onClipEvent (load) {
this.setAjuste("derecha", "arriba", false, false);
}