Flash contenido autoajustable a la ventana

Aunque queremos que los contenidos de la película se adapten al tamaño de la ventana del navegador, debemos definir ancho y alto mínimo (en el ejemplo es de 600 x 400px). y le asignaremos comportamientos a los elementos que se ejecutarán al detectar un cambio en el área disponible para mostrar la película. 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) además 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 Stage.scaleMode = "noScale";tamaño de la ventana lo estaremos ha- Stage.align = "TL"; ciendo con el tamaño del Stage. Todo el mecanismo del tutorial se basa en el ta-maño del Stage.

A continuación definimos las dimensiones ancho_minimo = 600;mínimas: alto_minimo = 400;

Para almacenar los clips que se tienen clips_ajustables = new Array();que ajustar (que serán todos menos los que se ajustan arriba a la izquierda) va-mos a crear un array o matriz:

Definimos el objeto detector de eventos myListener = new Object();que va a detectar el cambio de tamaño y Stage.addListener(myListener); lo asociamos al Stage para detectar los cambios:

La función rec es la que se va a ejecutar myListener.onResize = rec;cada vez que detectemos un cambio en function rec() {el tamaño del Stage: 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 funciones para todos los movieclips mediante prototipos, los prototipos nos permiten añadir funciones a clases enteras sin tener que hacerlo individualemente. La primer función 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 ajustablesthis.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 función 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 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 porcentajethis._width = (_root.ancho*parseInt(this.ajuste_width))/100;} else {

// si el valor de this.ajuste_width es un número de píxelesthis._width = this.ajuste_width;}}

// lo mismo con el ajuste del alto del clipif (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 clipsif (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. 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);}