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():
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 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
Usuarios que han visto este tema también han visto...
- El time line en Flash
- Ajuste y encaje en Flash
- Efecto zoom sobre un mapa en Flash
- Tutorial para rotar objetos simulando 3D en Flash
- Enderezar y suavizar en Flash
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.