Advertisement
  1. Code
  2. Workflow

Cómo usar una biblioteca externa en tus proyectos de Flash

Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called GreenSock Tweening Platform.

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Entonces has estado leyendo acerca de una impresionante biblioteca, motor o API de Flash, y quieres usarlo en tu propio proyecto. Lo descargas ... pero es un archivo extraño que no sabes cómo usar (un SWC) o un millón de carpetas de archivos AS, nada que diga "haz doble clic para instalarme". ¿Qué diablos?

Una biblioteca es solo una colección de clases de ActionScript que se ha diseñado para que no estén vinculadas a ningún proyecto y se puedan usar en todo lo que esté creando. Estos archivos de clase se pueden agrupar en un único archivo SWC, que es como un archivo zip.

Usaré MinimalComps excelente de Keith Peters como ejemplo, porque está disponible tanto en formato SWC como en formato de carpeta. Lo mismo se aplica a todas las bibliotecas, API y motores AS3; algunos otros excelentes ejemplos son Box2DFlash y Greensock Tweening Platform.

Comencemos por ver qué hacer si abre el archivo comprimido y se enfrenta a los archivos de clase sin formato:


Un millón de carpetas de archivos AS

Cada archivo AS, como usted sabe, contiene una clase (está bien, posiblemente contiene varias clases o una interfaz, pero trabaje conmigo aquí). Debes poder acceder a estas clases desde tu proyecto, pero también necesitas las clases para poder acceder entre ellas, ya que muchas de ellas heredarán o estarán compuestas de otras clases en la biblioteca. Esto significa que no puede simplemente tomar algunas de las clases, extraerlas a su carpeta de proyecto y esperar que funcionen.

Abra uno de los archivos y eche un vistazo a la declaración del package. Por ejemplo, en el zip de minimalcomps, en el archivo /src/com/bit101/components/Accordion.as, la declaración del paquete es:

¿Ves cómo esto corresponde a la estructura de la carpeta? /src/com/bit101/components/Accordion.as. (Y la clase en el archivo se llama Accordion).

No es solo que Keith Peters esté limpio y ordenado. Cuando escribe una línea como:

...Flash busca un archivo llamado Accordion.as en la estructura de la carpeta /com/bit101/components/. El paquete debe coincidir con la estructura de la carpeta, de modo que Flash pueda encontrar el archivo; si movió Accordion.as a otra carpeta, como /com/bit101/charts/, e intentó hacer:

...obtendrías un mensaje de error:

Tiene sentido. Entonces, el paquete de la clase le dice qué carpeta es la carpeta raíz de la biblioteca; es la primera palabra antes del primer punto en el nombre del paquete - com en este caso. Esto significa que debe mover la carpeta /com/ y todas sus subcarpetas al directorio de código principal de su proyecto.


¿Cuál es el Directorio de Código Principal?

Consejo: a menudo encontrará que la carpeta raíz de la biblioteca se llama /com/ o /net/ o /org/, porque es una convención común usar su nombre de dominio (al revés) como la estructura del paquete. Por ejemplo, somos http://active.tutsplus.com así que si lanzamos una biblioteca, el paquete comenzaría com.tutsplus.active. Si todos se apegan a sus propios nombres de dominio, entonces no hay que preocuparse de que alguien cree accidentalmente una biblioteca con los mismos nombres de paquete que la biblioteca de otra persona. Sin embargo, esta no es una convención universal; ni Box2D ni las bibliotecas Greensock lo usan.

El directorio de código principal es el término que utilizo para referirme a la carpeta donde Flash busca sus archivos AS (y carpetas que contienen archivos AS).

Si está utilizando Flash Professional, de manera predeterminada, esta será la carpeta en la que esté su FLA. Sin embargo, puede cambiar esto; vea la sugerencia rápida de Daniel Apt, How to Organize Your Flash Project Files (Cómo organizar sus archivos de proyecto de Flash), para obtener más información.

Si está usando otro editor de Flash, entonces la carpeta podría llamarse cualquier cosa, pero probablemente habrá una carpeta llamada /src/ o /source/ o /code/ o algo similar, para que pueda resolverlo. (Si todo lo demás falla, simplemente cree un nuevo archivo AS y observe cuál es la ubicación predeterminada para guardar).

Pruébelo: descargue MinimalComps, extraiga el archivo comprimido y copie la carpeta correcta en el directorio de código principal de su proyecto. Luego, importe import com.bit101.components.Accordion; y crea new Accordion() en algún lugar de tu proyecto. Si no ve un mensaje de error, ¡lo hizo bien!


Global Classpaths

¿Qué sucede si encuentra una biblioteca tan útil que desea que esté disponible para todos sus proyectos de manera predeterminada, sin tener que copiar y pegar la carpeta raíz en el directorio principal de cada proyecto nuevo?

Para esto, puedes usar classpaths globales. Si especifica una carpeta en su disco duro como una ruta de clase global, le está diciendo a Flash que siempre busque las clases allí, así como también en el directorio de código principal del proyecto.

Supongamos que crea un directorio C:\FlashLibraries\ (Usuarios de Mac: piense en Macintosh HD / FlashLibraries en su lugar), con un subdirectorio MinimalComps, y copie la carpeta /com/ del archivo MinimalComps.zip a este directorio MinimalComps. El archivo de la clase Accordion estaría en C:\FlashLibraries\MinimalComps\com\bit101\components\Accordion.as. A continuación, podría establecer C:\FlashLibraries\MinimalComps\ como una ruta de clases global, y desde ese momento, cada proyecto de Flash que haya abierto podrá ejecutarse:

...sin ningún problema. Y dado que Flash solo compila las clases que realmente se usan en su proyecto, no rellenará su SWF con las bibliotecas en su classpath global que no usa.

Incluso podría extraer todas las clases de código raíz de todas sus bibliotecas en la misma ruta de clases global, es decir, podría establecer C:\FlashLibraries\ como una ruta de clase global, y luego copiar la carpeta /com/ de MinimalComps a esta carpeta , por lo que la clase Accordion se encontraría en C:\FlashLibraries\com\bit101\components\Accordion.as. (Sin embargo, probablemente esto no valga la pena, si descargó nuestra biblioteca imaginaria de Tuts+, se ubicaría en C:\FlashLibraries\com\tutsplus\active\, lo que significa que la carpeta /com/ contendría tanto un la carpeta bit101/ y a /tutsplus/. Eso no es un problema, pero se vuelve complicado y puede hacer que sea muy difícil eliminar una sola biblioteca más adelante).


Cómo establecer un Classpath global

En Flash CS3, haga clic en Editar | Preferencias, luego haga clic en la categoría de ActionScript y seleccione Configuración de ActionScript 3.0. Verás una lista de carpetas. Haga clic en el signo Más para agregar uno nuevo; puede escribir la ubicación en, o presionar el objetivo para buscarlo.

En versiones posteriores de Flash Professional, hay un poco más. Haga clic en Edit | Preferences, luego elija la categoría de ActionScript y haga clic en Configuración de ActionScript 3.0 como antes. El formulario de entrada es un poco diferente:

Esta vez, use la sección Ruta de origen para establecer los classpaths globales. Use el signo más para agregar una nueva entrada y el ícono de la carpeta para buscar la carpeta.

Si usa un entorno de desarrollo diferente, la configuración de la ruta de clase global estará en otro lugar. Por ejemplo, en FlashDevelop, seleccione Project | Properties, luego la pestaña Classpaths y haga clic en Edit Global Classpaths....


Classpaths a nivel de proyecto o de documento

¿Qué haces si el desarrollador de la biblioteca lanza una nueva versión? Puede descargarlo en un classpath global, sobrescribiendo la versión anterior y comenzar a usarlo en su último proyecto. Pero si abre uno de sus proyectos más antiguos, uno que usó la versión anterior de la biblioteca, se encontrará con todo tipo de problemas de incompatibilidad.

Puede resolver esto teniendo una carpeta para cada versión de la biblioteca: C:\FlashLibraries\MinimalComps\v1\, C:\FlashLibraries\MinimalComps\v2\, C:\FlashLibraries\MinimalComps\v2.5\, C:\FlashLibraries\MinimalComps\v3\,... y así sucesivamente. Luego, cada vez que abriera un proyecto, crearía una nueva ruta de clase global como la carpeta para la versión de la biblioteca que su proyecto necesita, y eliminará todas las demás.

Eso funciona, pero es un flujo de trabajo horrible. En cambio, puede establecer un classpath que sea específico para un proyecto.


Cómo establecer un Classpath de proyecto o de nivel de documento

En Flash Professional CS3 y superior, una vez que haya abierto un FLA, haga clic en File | Publish Settings, luego seleccione la pestaña Flash y haga clic en Settings al lado de ActionScript 3.0. En Flash CS3, el diálogo se ve así:

Al igual que cuando se establece una ruta de clase global, puede usar el botón Más para agregar una nueva entrada y el ícono Destino para buscar una carpeta. En versiones posteriores de Flash, el diálogo tiene más que ver con esto:

No te preocupes por las otras pestañas; solo use la pestaña Source path para agregar su ruta de clases deseada.

Una vez más, diferentes entornos de desarrollo almacenarán esta configuración en diferentes lugares. Para agregar una ruta de clase de proyecto en FlashDevelop, seleccione Project | Properties, luego la pestaña Classpaths, y haga clic en Add Classpath...


Caminos relativos

Imagine que está construyendo un juego Flash que tiene versiones ligeramente diferentes para diferentes portales de juegos y un editor de niveles por separado. La estructura de tu carpeta puede verse así:

Ahora supongamos que quiere usar MinimalComps en todas las versiones de su juego, y en su editor de niveles, no solo cualquier versión anterior de MinimalComps, pero específicamente la versión más reciente, en cada proyecto. Mientras tanto, tiene otro proyecto que está escrito con una versión anterior de MinimalComps, por lo que no desea utilizar un classpath global.

Puedes crear una nueva carpeta dentro de tu carpeta de juego base:

... y luego copie la carpeta raíz de la biblioteca directamente en ella, para que la clase Accordion esté en C:\MyAwesomeGame\libraries\com\bit101\components\Accordion.as.

Ahora, usted sabe que puede establecer un classpath de proyecto o de documento en cada una de las diferentes versiones del juego, y el editor de niveles, para apuntar a C:\MyAwesomeGame\libraries\, pero ¿qué sucede si necesita compartir todo el juego? archivos con otra persona, ¿quizás un equipo completo? Tendrán que asegurarse de que la estructura de su carpeta coincida exactamente con la suya, o revisar cada uno de los proyectos y modificar los classpaths para que coincidan con su computadora, cada vez que obtengan la última versión. ¡Que dolor!

En cambio, puede usar una ruta relativa de clase. Suponiendo que el directorio de código principal del editor de niveles es /levelEditor/ entonces si establece un classpath de ../libraries/ se verá en la carpeta correcta. ¿Por qué? Porque ../ significa "el directorio sobre el actual".

Esto significa que puede usar ../libraries/ para todas las versiones de su juego, y todos apuntarán al mismo directorio. Y luego, cuando comparte el código con sus compañeros de equipo, puede darles la carpeta completa /MyAwesomeGame/ y contendrá todo lo que necesitan. Hay menos que recordar que hacer, no es necesario cambiar los classpaths ni copiar cada nueva versión de la biblioteca en las diferentes carpetas, por lo que hay muchas menos posibilidades de cometer un error simple. ¡Estupendo!

(Podrías llevar esto aún más lejos y poner todo el código que comparten las diferentes versiones del juego en la carpeta C:\MyAwesomeGame\shared\... ¡pero eso se está alejando del tema de este artículo!)

También puede anidar el directorio especial ../: ../../ sube dos directorios en lugar de uno solo, y así sucesivamente. También puede usar ./ ​​para referirse a "el directorio actual".


Archivos SWC

Como dije, un archivo SWC es básicamente un archivo zip que contiene clases de ActionScript y otros datos similares. Por ejemplo, en mi guía de FlashDevelop, expliqué cómo exportar activos de la biblioteca, creados en Flash Professional, como SWC para que puedan ser utilizados en otro flujo de trabajo. Es posible hacer lo mismo con clases puramente basadas en código.

No explicaré cómo crear un SWC aquí, pero explicaré los dos principales beneficios para los desarrolladores de bibliotecas:

  1. Toda la biblioteca (incluidos los recursos gráficos) puede estar contenida en un solo archivo.
  2. El contenido de las clases individuales (es decir, los archivos AS) no se puede ver ni modificar.

Todavía tiene la opción de utilizar la biblioteca SWC en un único proyecto, en todos sus proyectos, o compartido entre algunos de ellos, aunque los medios para incluirlos en sus proyectos son ligeramente diferentes a cuando tiene los archivos de clase reales.


Uso de bibliotecas SWC en sus proyectos

Flash Professional CS3 tiene algunas restricciones importantes cuando se trata de usar bibliotecas SWC: no puede usar SWC que son simplemente una colección de archivos de clase. Si el SWC contiene componentes, puede moverlo a su directorio /Components/ en su disco duro, y luego (dentro de Flash) arrástrelo del panel Componentes a su biblioteca o escenario. Este directorio se encuentra en C:\Program Files\Adobe\Adobe Flash CS3\{language}\Configuration\Components\de forma predeterminada en Windows, y en Macintosh HD / Applications / Adobe Flash CS3 / Configuration / Components de forma predeterminada en Mac OS X.

Puede copiar los componentes SWC en las carpetas equivalentes en Flash Professional CS4 + si desea acceder a ellos a través del panel Componentes. Para los SWC que están compuestos por clases de código, también puede establecerlos como un classpath global o un documento o classpath de nivel de proyecto.

Para establecer una ruta de clase global, haga clic en Edit | Preferences, luego elija la categoría de ActionScript y haga clic en ActionScript 3.0 Settings  como antes. Verás este diálogo:

Agregue las ubicaciones de sus SWC a la ruta de la Biblioteca. Como sugiere el cuadro de diálogo, puede colocar varios SWC en la misma carpeta y simplemente señalar esa carpeta.

(El cuadro de ruta de la biblioteca externa se puede utilizar para especificar las bibliotecas SWC que se deben cargar en tiempo de ejecución, en lugar de cuando se compila el componente. Si tiene grandes cantidades de código y activos compartidos entre sus proyectos, puede reducir el tiempo de carga para sus usuarios al poner todos los recursos compartidos en un archivo SWC y usarlo como biblioteca externa, los usuarios solo tendrán que descargarlo una vez y luego podrán usarlo en cada uno de sus otros proyectos. Probablemente esto no sea lo que sin embargo, ¡desea hacer con las bibliotecas que ha descargado!)

Para establecer un SWC a nivel de documento en Flash Pro CS4 y superior, una vez que haya abierto un FLA, haga clic en File | Publish Settings, luego seleccione la pestaña Flash y haga clic en Settings al lado de ActionScript 3.0. la pestaña Library path. El cuadro de diálogo tiene este aspecto:

Aquí puede usar rutas relativas, al igual que cuando tiene los archivos de clase individuales.

Los diferentes entornos de desarrollo tendrán diferentes formas de importar SWC. Para obtener información sobre el uso de SWC en FlashDevelop, consulte mi guía.

¡Espero que ayude! Ahora, cuando un tutorial dice, "descarga esta biblioteca", debes saber exactamente qué hacer :) Avísame si algo no está claro y te lo aclararé.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.