He preparado un pequeño ejemplo con el código de ActionScript que utilizamos para crear algunos de los sitios web que desarrollamos en Flash hace ya algún tiempo.
¿Cómo funciona la demo?
La demo intenta demostrar como funcionan los diferentes posicionamientos líquidos en Flash. He utilizado diferentes logos de nuestra empresa para posicionarlos relativamente en diferentes puntos de la ventana. Al hacer resize de la ventana veréis que las imágenes se reposicionan solas.
Podéis encontar una demo online aquí.
El código de posicionamiento es bastante simple.
public function onLoad() {
var lman:CLayoutManager=
CLayoutManager.getGlobal("sequence");
lman.add(this["logo_conductiva"],new LiquidLayout(new SmoothLayoutTransition())
.addConstrain(new BasicConstrain("top","10"))
.addConstrain(new BasicConstrain("left","10")));
lman.add(this["logo_facturadirecta"],new LiquidLayout(new SmoothLayoutTransition())
.addConstrain(new BasicConstrain("top","10"))
.addConstrain(new BasicConstrain("right","10"))
.addConstrain(new BasicConstrain("leftlimit","400")));
lman.add(this["logo_lonelydrops"],new LiquidLayout(new SmoothLayoutTransition())
.addConstrain(new BasicConstrain("bottom","10"))
.addConstrain(new BasicConstrain("left","10"))
.addConstrain(new BasicConstrain("toplimit","400")));
lman.add(this["logo_lonelyid"],new LiquidLayout(new SmoothLayoutTransition())
.addConstrain(new BasicConstrain("bottom","10"))
.addConstrain(new BasicConstrain("right","10"))
.addConstrain(new BasicConstrain("leftlimit","200"))
.addConstrain(new BasicConstrain("toplimit","400")));
lman.add(this["logo_tubespark"],new LiquidLayout(new SmoothLayoutTransition())
.addConstrain(new BasicConstrain("middle","100")) // también puede tomar valores negativos
.addConstrain(new BasicConstrain("center","0"))
.addConstrain(new BasicConstrain("toplimit","50")));
lman.add(this["background"],new LiquidLayout(new SmoothLayoutTransition())
.addConstrain(new BasicConstrain("centerInScale")));
lman.invalidate();
}
Cada elemento (MovieClip) se añade a CLayoutManager asociándole un LiquidLayout con una serie de restricciones que permiten fijar por ejemplo, el MovieClip siempre a 10 pixels de la zona derecha de la pantalla .addConstrain(new BasicConstrain("right","10")), o hacer que el MovieClip nunca llegue a menos de 400 pixels de la zona izquierda de la pantalla .addConstrain(new BasicConstrain("leftlimit","400")), para permitir que una imagen puede redimensionarse en función del tamaño de la ventana, basta con añadir al MovieClip que contiene la imagen, la restricción siguiente: .addConstrain(new BasicConstrain("centerInScale")).
Podéis mirar directamente en la clase: LiquidLayout en el paquete net.conductiva.framework.ui.layouts.* para conocer con más detalle los diferentes posicionamientos que permite el layout: topbottom, top, middle, cmiddle, leftright, left, center, ccenter, right, fitWidth, fitHeight, exactScale, centerInScale, centerOutScale, fitInScale, fitOutScale, toplimit, bottomlimit, leftlimit, rightlimit.
Documentación del framework
Lamentablemente, no tengo mucha documentación para la utilización del framework en Flash y tampoco puedo asegurar que el código que escrito en Flash tenga continuidad. Si alguien está interesado en mantener el código o utilizarlo para crear su propio framework de Flash con las nuevas versiones de ActionScript que vayan saliendo es totalmente libre de usar nuestro trabajo para lo que quiera.
Descarga
Podéis descargar la demo entera.
La demo está preparada para funcionar con AS2 y funciona de forma completamente autónoma solo descargando el archivo anterior.
Por si os puede ser de interés, también hay disponible una versión del framework implementada sobre AS3. El código en ActionScript del framework "completo" para AS2 y AS3 la podéis descargar aquí
Licencia
Si crees que el código del framework puede serte útil utilízalo libremente de la forma que mejor prefieras.
