Share
A medida que ActionScript 3 se convierte en un lenguaje más popular y las funciones de Flash Player se vuelven más avanzadas y accesibles, es importante crear un flujo de trabajo común dentro de su empresa para que los proyectos se vuelvan más ágiles y, lo que es más importante, se entreguen a tiempo. Un problema importante con ActionScript 2 fue cerrar la brecha entre el diseñador y el desarrollador. Esto a menudo dejaba a los desarrolladores lidiando con FLAs que contenían cientos de elementos de bibliotecas mal nombrados y a nadie le gustaba eso..
Con los avances de ActionScript 3 y la capacidad de codificar fuera de la línea de tiempo, los SWC se han convertido en elementos de uso común en grandes proyectos, pero todavía hay muchas personas que no saben qué son o cómo crearlos o usarlos..
Empecemos por ver qué son realmente los SWC. A SWC [Componente ShockWave acrónimo decir:Sw ~ iCK] :) es simplemente un paquete comprimido de archivos generados por el IDE de Flash. Contienen recursos visuales (como MovieClips, botones, gráficos y fuentes), así como código. Los SWC han existido desde Flash MX 2004, pero solo han despegado desde que apareció ActionScript 3 porque antes, como dije, solo se podía mantener todo en la FLA..
En este tutorial, le mostraré cómo puede incrustar y utilizar recursos visuales, fuentes y código ActionScript..
Existe un argumento simple y sólido para usar SWC: separa el diseño del desarrollo. Flash tiene la capacidad de influir en el diseño de elementos visuales programados a través de 'CSS' como las hojas de estilo (al igual que con Flex), pero la mayoría de los diseñadores de tiempo (no todos) son rechazados por cualquier cosa que tenga que ver con el código, incluido el CSS simple. Otro punto es que los diseñadores diseñan. Por lo general, reciben marcos de escritura simulados a partir de los cuales luego crean interfaces de usuario en programas como Photoshop e Illustrator. Si luego tenían que codificar la interfaz, entonces crear las maquetas en Photoshop podría haber sido solo una pérdida de tiempo. Además, puede llevar mucho tiempo y esfuerzo codificar interfaces que se pueden crear fácilmente en IDE visuales como Photoshop e Illustrator.
De vuelta a mi punto principal, el SWC permite a los diseñadores diseñar la interfaz, cortarla y luego pasar un SWC al desarrollador que lo une todo, esto crea un flujo de trabajo simple sin que la gente pise los dedos de los demás para lograr el diseño correcto.
Digamos que mañana se le informa sobre un nuevo proyecto en el que trabajará con un equipo de diseño. Será responsabilidad del equipo de diseño construir la interfaz, incluida la creación de todos los detalles, como los estados de activación del botón, las animaciones del cargador, las esquinas redondeadas y los iconos. Es responsabilidad del equipo de desarrollo construir el proyecto y vincular también todos los elementos de la interfaz de usuario. El tiempo de diseño creará todos los elementos que necesitan, los colocará en un SWC y luego pasará ese archivo al equipo de desarrollo. El equipo de desarrollo puede codificar los elementos de la interfaz de usuario sin tener que preocuparse por importar fuentes, jugar con hojas de estilo o sentarse con el diseñador y programar la interfaz..
Como señala el excelente artículo de Mario Santos, Adobe ha lanzado recientemente Flash Catalyst, un IDE que le permite importar archivos PSD o AI y convertirlos en objetos vectoriales basados en XML, FXG. Este es definitivamente un paso en la dirección correcta, pero es algo que solo se implementa en Flash Player 10, del cual solo hay una tasa de penetración del 75%. Esto significa que cuando se trabaja en proyectos en vivo necesitamos usar Flash Player 9, por lo que hasta que más personas adopten Flash Player 10, los SWC son una buena manera de hacerlo..
Basta de hablar, vamos a crear un SWC. Voy a crear algunos gráficos en Photoshop e Illustrator y los incluiré en el IDE de Flash, donde los configuraré para la codificación ActionScript mediante el uso de SWC. También voy a hablar sobre un concepto llamado "división de cuadrícula 9", así que encienda su editor de imágenes favorito y cree un nuevo archivo:
Tomemos algunas de las formas personalizadas predeterminadas que proporciona Adobe y las pegemos en el tablero artístico:
Entonces, para que no solo tengamos bitmaps negros sólidos, vamos a agregarles algo de color:
De acuerdo, tenemos algunas estrellas bonitas, ahora queremos tomarlas y ponerlas en nuestro IDE de Flash..
Arranque el IDE de Flash y cree un nuevo archivo ActionScript 3:
Ahora, si usted es un veterano del IDE de Flash, recordará que ha podido importar archivos PSD desde CS3, ellos introdujeron una interfaz muy agradable cuando se trata de importar PSD que irían a través de sus capas en lugar de importando un gran mapa de bits. Vaya a Archivo> Importar> Importar a biblioteca, navegue a su PSD y haga clic en Importar a biblioteca. Aparecerá una ventana emergente similar a esta:
En mi caso, dejaré todo marcado como telón de fondo, ya que es solo un fondo blanco. Ahora que tenemos nuestras capas PSD como elementos dentro de nuestra biblioteca, podemos comenzar a prepararlos para los desarrolladores. Saque una de las estrellas de la biblioteca y simplemente suéltela en el escenario, así:
Luego tomamos la estrella y la convertimos en un MovieClip. Cuando aparezca la ventana, llámela "BlueStarAsset", marque "Exportar para ActionScript". Verás que los dos cuadros de entrada de abajo se pueden editar. No necesita tocarlos, pero nos permiten especificar a qué clase se llamará este recurso y qué tipo de clase se extenderá, nos quedaremos con "MovieClip":
Ahora tenemos un activo en nuestra biblioteca que podemos exportar a ActionScript. Antes de continuar, intentemos esto. En primer lugar, vaya a Archivo> Configuración de publicación. Haga clic en la pestaña "Flash", seleccione "Player" versión 9 y marque "Exportar SWC":
Haga clic en "Ok". Ahora estamos listos para exportar nuestro SWC. Depure la FLA presionando CTRL / CMD + Retorno y verá un archivo SWF y un archivo SWC. ¡Suero! Has creado un SWC, ahora vamos a usarlo rápidamente. Inicie su IDE de codificación favorito y cree un nuevo proyecto ActionScript 3. Configure los ajustes del compilador para incluir el SWC que acaba de crear en la ruta de compilación. Cree un nuevo archivo base de ActionScript 3 llamado "App.as" y use el siguiente código:
paquete import flash.display.MovieClip; importar flash.display.Sprite; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] clase pública App extiende Sprite función pública App () var star: MovieClip = new BlueStarAsset (); addChild (estrella);
Verás algo como esto:
Así que ese es nuestro activo estrella..
Solo hablaré rápidamente sobre un concepto llamado "escala de cuadrícula 9". Este es simplemente un método que nos permite dividir un activo visual, de modo que cuando se trata de redimensionarlo, cosas como las esquinas redondeadas pueden permanecer en proporción. Por ejemplo, si tuviéramos un rectángulo redondeado como este, si cambiamos su ancho, veremos que las esquinas redondeadas ya no son proporcionales:
Para superar esto, utilizamos el método de división de cuadrícula de la escala 9 para establecer un rectángulo en la parte superior de nuestro activo que se redimensionará, por lo que todo lo que se encuentre fuera del rectángulo permanece en proporción, por ejemplo:
El rectángulo rojo en el medio es lo que se escalará, pero las cosas fuera no lo harán. Creamos una cuadrícula de 9 vías, la fila superior tiene 3, la mitad tiene 3 y la inferior tiene 3. Así es como lo hacemos en un sentido práctico, volvemos al IDE de Flash y solo dibujamos un rectángulo redondeado simple. Cree un nuevo clip de vídeo a partir de él y asegúrese de marcar la casilla "exportar para ActionScript" (he llamado mío "SimpleRoundedRect") y espero que tenga algo similar a esto:
Ahora vamos a tomar este activo recién creado, volver a exportar el SWC (depurando la película) y volver a nuestro IDE de ActionScript 3, donde actualizaremos nuestra clase, por lo que:
paquete import flash.display.MovieClip; importar flash.display.Sprite; import flash.geom.Rectangle; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] public class App extiende Sprite función pública App () var rect: MovieClip = new SimpleRoundedRect (); rect.scale9Grid = nuevo Rectángulo (10, 10, rect.width - 20, rect.height - 20); rect.width = stage.stageWidth; addChild (rect);
Simplemente estamos agregando nuestro rectángulo al escenario, pero antes de eso estamos dibujando un rectángulo que es x: 10, y: 10 y tiene 20 píxeles menos de ancho y alto en nuestro rectángulo redondeado. Esto será definir el rectángulo del medio para nuestro corte de escala. Ahora verá que el rectángulo va a lo ancho del escenario sin que las esquinas se vuelvan desproporcionadas. Solo para ver la diferencia, comente la línea 15 (comienza con "rect.scale9Grid") y vea cómo se estiran las esquinas.
Sé exactamente lo que está pensando "si el diseñador debe hacer todo el trabajo activo, entonces ¿por qué el desarrollador tiene que establecer el rectángulo para el corte en rodajas?" Bueno, el desarrollador no tiene que hacerlo, como el diseñador puede! Haga clic con el botón derecho en el recurso en la biblioteca y seleccione propiedades. Luego marque la casilla "Habilitar guías para la escala de 9 divisiones", y verá esto:
Ahora el diseñador puede reposicionar esas guías para que el desarrollador no tenga que preocuparse por crear un rectángulo para la cuadrícula de la escala 9. Si deja la línea 15 comentada y reexporta este SWC, verá que las esquinas ahora son nuevamente proporcionales. Simple eh?
Los SWC pueden contener más que solo recursos visuales, ya sean gráficos planos o animaciones de línea de tiempo / guiones. También pueden contener bibliotecas de código completo. Los SWC son una muy buena manera de distribuir su código. Es una tarea bastante difícil, pero no imposible de descodificar SWC. Sin embargo, significa que puede publicar un SWC en lugar de tener que preocuparse por muchos archivos y directorios. También son más fáciles para el usuario. Yo, por ejemplo, tengo una carpeta donde vuelco las bibliotecas de código ActionScript que uso o creo, pero luego tengo una carpeta separada para SWC útiles que he venido a usar. Me resulta más fácil seleccionar un SWC y vincularlo al proyecto en lugar de incluir toda la carpeta de scripts compartidos, y también es más rápido!
Para crear SWC basados en código, estoy usando Flash Builder: puedes descargar la versión beta de Adobe. Dentro de Flash Builder, deberá crear un nuevo "Proyecto de biblioteca flexible" como:
Asígnele un nombre y asegúrese de seleccionar el compilador Flex 3.4:
Haga clic en siguiente y luego marque la casilla junto a "src", aquí es donde pondremos nuestras clases:
Ahora podemos comenzar a escribir código para nuestra biblioteca, así que cree una nueva clase de ActionScript, llámela "Prueba" y establezca el nombre del paquete en "com.flashtuts.swc" y coloque el siguiente código allí:
package com.flashtuts.swc import flash.display.Sprite; Prueba de clase pública extiende Sprite prueba de función pública () init (); función privada init (): void var sprite: Sprite = new Sprite (); sprite.graphics.beginFill (0xFF0000); sprite.graphics.drawRoundRect (0, 0, 100, 100, 5, 5); sprite.graphics.endFill (); addChild (sprite);
Como puede ver, acabamos de crear un cuadro rojo, así que incorporémoslo a nuestro proyecto ActionScript 3.
Ahora deberá cambiar el compilador Flex para que pueda recoger los nuevos activos SWC que acaba de crear. Una vez que hayas hecho eso, puedes cambiar el código de tu aplicación para que se vea así:
paquete import com.flashtuts.swc.Test; importar flash.display.MovieClip; importar flash.display.Sprite; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] public class App extiende Sprite función pública App () var rect: MovieClip = new SimpleRoundedRect (); //rect.scale9Grid = new Rectangle (10, 10, rect.width - 20, rect.height - 20); rect.width = stage.stageWidth; addChild (rect); var redRect: Sprite = new Test (); addChild (redRect);
¡Ahí verás tu rectángulo rojo! Simple eh?
Ahora mucha gente puede argumentar que los SWC no son necesarios, pero ayudan a los diseñadores y desarrolladores a trabajar en sincronía sin pisar los dedos de los demás. Protegen su código y son una buena manera de compartir activos visuales como precargadores y gráficos. Si bien los FXG son mucho mejores, hasta que Flash Player 10 se recupera, los SWC son el estándar cuando se trata de crear sitios web de producción que deben ser escalables, tanto en términos de plazos de proyectos como de componentes visuales..
Accentsconagua