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();
}
}
Usuarios que han visto este tema también han visto...
- Máscaras en Flash
- Cómo hacer botón en Flash
- Imprimir desde Flash con ActionScript 1.0
- Separar en Flash
- Versión imprimible de este documento
- Enviar por e-mail este documentoInformació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.