En determinadas ocasiones, sobre todo cuando se crea directamente desde el editor de flash, se echa en falta poder definir estilos para los movieclips de manera similar a como se hace en html con los css.

Para ayudar en esta tarea he hecho esta clase, con ella se pueden crear estilos para aplicar a un grupo de movieclips que tengamos distribuidos por nuestra aplicación.

La forma de uso es sencilla, se define un objeto con los parámetros del estilo, se añade a la clase y se ordena actualizar.

Un objeto estilo es un simple Object al que se le setean una serie de parámetros:

• clip(MovieClip): Es el clip padre por donde se empezará a rastrear recursivamente para encontrar los movieclips sobre los que se debe aplicar el filtro.
• prefix(String): Es el prefijo con el que están nombrados los movieclips destino (no se pueden llamar igual).
• mc(Object): Es un nuevo objeto del que se leerán todos sus parámetros y se setearán al movieclip destino.
• update(Function): Es la función que se llamará cuando se encuentre cada movieClip destino, y que recibe el movieclip para poder actuar sobre él.

Aunque solo con estos parámetros sería suficiente, por facilitar la tarea de crear bordes que es algo más compleja, se ha ampliado la clase con estos otros parámetros.

• borderWidth(Number): Es el ancho del borde.
• borderColor(Number): Es el color del borde.
• borderAlpha(Number): Es la transparencia del borde.
• borderFill(Boolean): Si es true, indica que el borde es un cuadrado por detrás, si es false, es solo un marco.
• updateBorder(Function): Es la función que se llamará después de crear cada borde y que recibe el clip del borde, para poder actuar sobre él.

Se pueden añadir todos los estilos que se quieran, y se puede ordenar actualizar (update) cuando se quiera y las veces que se quiera.

A continuación pongo unos ejemplos de los que se puede consultar el código y bajar en un zip el ejemplo completo.

ejemplo

Borde simple Aplica un borde simple a todos los movieClips que su nombre empiece por "item_". En el escenario de flash hay 4 cuadrados llamados item_1, item_2, item_3 e item_4. Ejemplo de uso. (Ver código) (Descargar ejemplo completo) Fichero DRAWCssEmulator.as (Ver código)

ejemplo

Borde con sombra Con un escenario como el anterior ejemplo, se aplica un estilo con un filtro de sombra sobre el borde, haciendo uso de la función de actualización del borde. Ejemplo de uso. (Ver código) (Descargar ejemplo completo) Fichero DRAWCssEmulator.as (Ver código)

ejemplo

Parámetros simples del movieclip Con un escenario como el anterior ejemplo, se aplica un estilo con parámetros seteados sobre el objeto "mc" del estilo, que se aplicará a cada uno de los movieclips. Ejemplo de uso. (Ver código) (Descargar ejemplo completo) Fichero DRAWCssEmulator.as (Ver código)

ejemplo

Función de actualización del movieclip Con un escenario y un estilo como el del anterior ejemplo, se amplia el estilo con una función que se aplicará a cada movieclip, en este caso se le aplicará un filtro de desenfoque. Ejemplo de uso. (Ver código) (Descargar ejemplo completo) Fichero DRAWCssEmulator.as (Ver código)

ejemplo

Eventos del movieclip Con un escenario como el anterior ejemplo, además de aplicar unos parámetros simples sobre el movieclip, se aplican los eventos personalizados de onRollOver y onRollOut. Ejemplo de uso. (Ver código) (Descargar ejemplo completo) Fichero DRAWCssEmulator.as (Ver código)

ejemplo

Dos estilos a la vez y almacenados en ficheros independientes Este es un ejemplo completo donde se han definido dos estilos en dos ficheros. Después en el fichero principal se incluyen para que los movieclips del escenario se formateen usándolos. En el escenario de flash hay 4 cuadrados llamados item_1, item_2, elem_1 e elem_2. Ejemplo de uso. (Ver código) (Descargar ejemplo completo) Fichero estilo_borde_sombra.as (Ver código) Fichero estilo_rotado_blur.as (Ver código) Fichero DRAWCssEmulator.as (Ver código)

---

Esta obra está bajo una licencia de Creative Commons.

---