Comment utiliser une bibliothèque externe dans vos projets Flash

Vous avez donc lu des articles sur une bibliothèque, un moteur ou une API Flash impressionnants et vous souhaitez les utiliser dans votre propre projet. Vous le téléchargez? mais c'est soit un fichier étrange que vous ne savez pas utiliser (un SWC), soit un million de dossiers de fichiers AS - rien qui dit "double-cliquez pour m'installer". Que diable?

Une bibliothèque est simplement un ensemble de classes ActionScript conçues pour ne pas être liées à un seul projet et pouvant être utilisées dans tout ce que vous construisez. Ces fichiers de classe peuvent être regroupés dans un seul fichier SWC, qui ressemble à un zip..

Je prendrai comme exemple l’excellent MinimalComps de Keith Peters, car il est disponible au format SWC et au format de dossier. La même chose s'applique à toutes les bibliothèques AS3, API et moteurs, cependant; Box2DFlash et la plate-forme Greensock Tweening sont d’autres exemples intéressants..

Commençons par regarder quoi faire si vous ouvrez le zip et que vous êtes confronté aux fichiers de classe bruts:


Un million de dossiers de fichiers AS

Comme vous le savez, chaque fichier AS contient une classe (bon, il contient éventuellement plusieurs classes, ou une interface, mais travaillez avec moi ici). Vous devez pouvoir accéder à ces classes à partir de votre projet, mais vous devez également pouvoir accéder les unes aux autres, car nombre d'entre elles hériteront presque certainement d'autres classes de la bibliothèque ou en seront composées. Cela signifie que vous ne pouvez pas simplement récupérer quelques classes, les extraire dans votre dossier de projet et vous attendre à ce qu'elles fonctionnent..

Ouvrez l’un des fichiers et jetez un coup d’œil à la paquet déclaration. Par exemple, dans le zip minimalcomps, dans le fichier /src/com/bit101/components/Accordion.as, la déclaration du paquet est:

 package com.bit101.components

Voir comment cela correspond à la structure du dossier? / src /com / bit101 / composants/Accordion.as. (Et la classe dans le fichier s'appelle Accordéon.)

Keith Peters n’est pas le seul à être bien rangé. Lorsque vous tapez une ligne comme:

 import com.bit101.components.Accordion;

? Flash cherche un fichier appelé Accordéon.as dans la structure du dossier / com / bit101 / composants /. Le package doit correspondre à la structure du dossier afin que Flash puisse trouver le fichier. si vous avez déménagé Accordéon.as dans un autre dossier, comme / com / bit101 / charts /, et essayé de faire:

 import com.bit101.charts.Accordion;

? vous obtiendrez un message d'erreur:

 5001: Le nom du package 'com.bit101.components' ne correspond pas à l'emplacement de ce fichier. Modifiez le nom de la définition de package dans ce fichier ou déplacez-le..

Logique. Ainsi, le paquet de la classe vous indique quel dossier est le dossier racine de la bibliothèque; c'est le premier mot avant le premier point du nom du paquet -- com dans ce cas. Cela signifie que vous devriez déplacer le / com / dossier, et tous ses sous-dossiers, dans le répertoire de code principal de votre projet.


Quel est le répertoire de code principal?

Pointe: Vous constaterez souvent que le dossier racine de la bibliothèque s'appelle / com / ou /net/ ou / org /, car c'est une convention courante d'utiliser votre nom de domaine (en sens inverse) en tant que structure de package. Par exemple, nous sommes http://active.tutsplus.com Donc, si nous sortions une bibliothèque, le paquet commencerait com.tutsplus.active. Si tout le monde s'en tient à son propre nom de domaine, personne ne s'inquiète de la création accidentelle d'une bibliothèque avec les mêmes noms de paquetages que la bibliothèque de quelqu'un d'autre. Cependant, ce n'est pas une convention universelle; ni les bibliothèques Box2D ni les bibliothèques Greensock ne l'utilisent.

Le répertoire de code principal est le terme que j'utilise pour désigner le dossier dans lequel Flash recherche vos fichiers AS (et les dossiers contenant des fichiers AS)..

Si vous utilisez Flash Professional, il s’agit par défaut du dossier dans lequel se trouve votre FLA. Vous pouvez toutefois le modifier. voir le conseil de Daniel Apt, Comment organiser vos fichiers de projet Flash, pour plus d'informations.

Si vous utilisez un autre éditeur Flash, le dossier peut s'appeler n'importe quoi - mais il y aura probablement un dossier appelé / src / ou /la source/ ou /code/ ou quelque chose de similaire, pour que vous puissiez le comprendre. (Si tout échoue, créez simplement un nouveau fichier AS et examinez l'emplacement de sauvegarde par défaut.)

Essayez-le - téléchargez MinimalComps, extrayez le zip et copiez le dossier approprié dans le répertoire de code principal de votre projet. ensuite, import com.bit101.components.Accordion; et créer un nouvel accordéon () quelque part dans votre projet. Si vous ne voyez pas un message d'erreur, alors vous l'avez bien fait!


Classpaths globaux

Et si vous trouviez une bibliothèque tellement utile que vous souhaitiez la rendre disponible par défaut pour tous vos projets, sans avoir à copier et coller le dossier racine dans le répertoire de code principal de chaque nouveau projet?

Pour cela, vous pouvez utiliser classpaths globaux. Si vous spécifiez un dossier sur votre disque dur en tant que chemin de classe global, vous indiquez à Flash de toujours y rechercher des classes., aussi bien que dans le répertoire de code principal du projet.

Supposons que vous créez un répertoire C: \ FlashLibraries \ (Utilisateurs Mac: pensez Bibliothèques HD / Flash Macintosh à la place), avec un sous-répertoire MinimalComps, et copier le / com / dossier du zip MinimalComps à cette MinimalComps annuaire. Le fichier de classe d'accordéon serait à C: \ FlashLibraries \ MinimalComps \ com \ bit101 \ components \ Accordion.as. Vous pourriez alors définir C: \ FlashLibraries \ MinimalComps \ en tant que classpath global, et à partir de là, chaque projet Flash que vous avez ouvert pourra être exécuté:

 import com.bit101.components.Accordion;

? sans aucun problème. De plus, étant donné que Flash ne compile que les classes réellement utilisées dans votre projet, il ne remplit pas votre fichier SWF avec les bibliothèques de votre chemin de classe global. ne pas utilisation.

Vous pouvez même extraire toutes les classes de code racine de toutes vos bibliothèques vers le même chemin de classe global - c.-à-d., Vous pouvez définir C: \ FlashLibraries \ en tant que classpath global, puis copiez le / com / dossier de MinimalComps à ce dossier, de sorte que la classe Accordion serait à C: \ FlashLibraries \ com \ bit101 \ components \ Accordion.as. (Cela ne vaut probablement pas la peine, cependant; si vous téléchargiez notre bibliothèque imaginaire Activetuts +, elle resterait inutilisée. C: \ FlashLibraries \ com \ tutsplus \ active \, ce qui signifie que le / com / dossier contiendrait à la fois un / bit101 / dossier et un / tutsplus / dossier. Ce n'est pas un problème, mais cela peut créer des problèmes et rendre très difficile la suppression ultérieure d'une seule bibliothèque.)


Comment définir un classpath global

Dans Flash CS3, cliquez sur Modifier | Préférences, puis cliquez sur le ActionScript catégorie et sélectionnez Paramètres ActionScript 3.0. Vous verrez une liste de dossiers. Cliquez sur le signe Plus pour en ajouter un nouveau. vous pouvez taper l'emplacement ou appuyer sur la cible pour y accéder.

Dans les versions ultérieures de Flash Professional, il y a un peu plus. Cliquez sur Modifier | Préférences, puis choisissez le ActionScript catégorie et clic Paramètres ActionScript 3.0 comme avant. Le formulaire d'inscription est un peu différent:

Cette fois, utilisez le Chemin source section pour définir les classpaths globaux. Utilisez le signe Plus pour ajouter une nouvelle entrée et l'icône du dossier pour accéder au dossier..

Si vous utilisez un environnement de développement différent, les paramètres de chemin d'accès aux classes globaux seront ailleurs. Par exemple, dans FlashDevelop, sélectionnez Projet | Propriétés, puis le Classpaths onglet, et cliquez Editer les Classpaths globaux? .


Classpath au niveau du projet ou du document

Que faites-vous si le développeur de la bibliothèque publie une nouvelle version? Vous pouvez le télécharger sur un chemin de classe global en écrasant la version précédente et commencer à l'utiliser dans votre dernier projet. Mais si vous ouvrez l’un de vos anciens projets - celui qui utilisait la version précédente de la bibliothèque - vous rencontrerez toutes sortes de problèmes d’incompatibilité..

Vous pouvez résoudre ce problème en créant un dossier pour chaque version de la bibliothèque: C: \ FlashLibraries \ MinimalComps \ v1 \, C: \ FlashLibraries \ MinimalComps \ v2 \, C: \ FlashLibraries \ MinimalComps \ v2.5 \, C: \ FlashLibraries \ MinimalComps \ v3 \,? etc. Ensuite, chaque fois que vous ouvrez un projet, vous créez un nouveau chemin de classe global en tant que dossier de la version de la bibliothèque dont votre projet a besoin, puis supprimez tous les autres..

Cela fonctionne, mais c'est un flux de travail horrible. Au lieu de cela, vous pouvez définir un chemin de classe spécifique à un projet..


Comment définir un chemin de classe de projet ou de niveau document

Dans Flash Professional CS3 et versions ultérieures, une fois que vous avez ouvert une FLA, cliquez sur Fichier | Publier les paramètres, puis sélectionnez le Flash onglet, et cliquez Réglages à côté de ActionScript 3.0. Dans Flash CS3, la boîte de dialogue ressemble à ceci:

Tout comme lors de la définition d'un chemin de classe global, vous pouvez utiliser le bouton Plus pour ajouter une nouvelle entrée et l'icône Cible pour accéder à un dossier. Dans les versions ultérieures de Flash, la boîte de dialogue contient plus d'éléments:

Ne vous inquiétez pas pour les autres onglets; juste utiliser le Chemin source onglet pour ajouter votre classpath désiré.

Là encore, différents environnements de développement stockent ces paramètres à différents endroits. Pour ajouter un chemin de classe de projet dans FlashDevelop, sélectionnez Projet | Propriétés, puis le Classpaths onglet, et cliquez Ajouter un chemin de classe? .


Chemins relatifs

Imaginez que vous construisez un jeu Flash comportant des versions légèrement différentes pour différents portails de jeu et un éditeur de niveau séparé. Votre structure de dossier pourrait ressembler à ceci:

 C: \ MyAwesomeGame \ game_core \ C: \ MyAwesomeGame \ game_kongregate \ C: \ MyAwesomeGame \ game_newgrounds \ C: \ MyAwesomeGame \ levelEditor \

Supposons maintenant que vous souhaitiez utiliser MinimalComps dans toutes les versions de votre jeu., et dans votre éditeur de niveau - pas n'importe quelle ancienne version de MinimalComps, mais plus particulièrement la dernière version de chaque projet. En attendant, vous avez un autre projet écrit avec une ancienne version de MinimalComps, vous ne voulez donc pas utiliser un chemin de classe global..

Vous pouvez créer un nouveau dossier dans votre dossier de jeu de base:

 C: \ MyAwesomeGame \ libraries \

? puis copiez le dossier racine de la bibliothèque directement dans celui-ci, de sorte que la classe Accordion serait à C: \ MyAwesomeGame \ libraries \ com \ bit101 \ components \ Accordion.as.

Maintenant, vous savez que vous pouvez définir un chemin de classe de projet ou de niveau document dans chacune des différentes versions du jeu, ainsi que l'éditeur de niveau, C: \ MyAwesomeGame \ libraries \, mais que se passe-t-il si vous devez partager tous les fichiers du jeu avec quelqu'un d'autre - peut-être toute une équipe? Ils devront soit s'assurer que la structure de leurs dossiers correspond exactement au vôtre, ou parcourir chacun des projets et modifier les chemins de classes pour qu'ils correspondent à leur ordinateur, chaque fois qu'ils obtiennent la dernière version. Quelle douleur!

Au lieu de cela, vous pouvez utiliser un chemin de classe relatif. En supposant que le répertoire de code principal de l’éditeur de niveaux soit /éditeur de niveaux/, alors si vous définissez un classpath de ? / bibliothèques / il regardera dans le bon dossier. Pourquoi? Parce que ? / signifie "le répertoire au-dessus du répertoire actuel".

Cela signifie que vous pouvez utiliser ? / bibliothèques / pour toutes les versions de votre jeu, et ils vont tous pointer vers le même répertoire. Et puis, quand vous partagez le code avec vos coéquipiers, vous pouvez leur donner la totalité / MyAwesomeGame / dossier et il contiendra tout ils ont besoin. N'oubliez pas moins de choses à faire - pas besoin de changer les chemins de classes ou de copier chaque nouvelle version de la bibliothèque dans les différents dossiers - et vous avez donc beaucoup moins de chances de faire une simple erreur. Génial!

(Vous pouvez aller encore plus loin et mettre tout le code que les différentes versions du jeu partagent dans le dossier C: \ MyAwesomeGame \ shared \? mais c'est s'éloigner du sujet de cet article!)

Vous pouvez imbriquer la spéciale ? / répertoire aussi: ? /? / monte deux répertoires au lieu d'un, et ainsi de suite. Vous pouvez aussi utiliser ./ faire référence à "le répertoire courant".


Fichiers SWC

Comme je l'ai dit, un fichier SWC est essentiellement un fichier zip contenant des classes ActionScript et d'autres données de ce type. Par exemple, dans mon guide FlashDevelop, j'ai expliqué comment exporter des ressources de bibliothèque créées dans Flash Professional sous forme de fichier SWC afin qu'elles puissent être utilisées dans un autre flux de travail. Il est possible de faire la même chose avec des classes purement basées sur du code.

Je n'expliquerai pas comment créer un tel SWC ici, mais j'expliquerai les deux principaux avantages pour les développeurs de bibliothèques:

  1. L'ensemble de la bibliothèque (y compris les ressources graphiques) peut être contenu dans un seul fichier.
  2. Le contenu des classes individuelles (c'est-à-dire les fichiers AS) ne peut pas être consulté ou modifié..

Vous avez toujours le choix d'utiliser la bibliothèque SWC dans un seul projet, dans tous vos projets ou partagée entre plusieurs d'entre eux, bien que les moyens de les inclure dans vos projets soient légèrement différents de ceux obtenus avec les fichiers de classe réels..


Utilisation de bibliothèques SWC dans vos projets

Flash Professional CS3 impose des restrictions majeures à l’utilisation des bibliothèques SWC: elle ne peut pas utiliser les SWC qui sont simplement une collection de fichiers de classe. Si le SWC contient Composants, vous pouvez le déplacer vers votre /Composants/ répertoire de votre disque dur, puis faites-le glisser (dans Flash) du panneau Composants vers votre bibliothèque ou votre scène. Ce répertoire est à C: \ Program Files \ Adobe \ Adobe Flash CS3 \la langue\ Configuration \ Composants \ par défaut sous Windows, et Macintosh HD / Applications / Adobe Flash CS3 / Configuration / Composants par défaut sur Mac OS X.

Vous pouvez copier des composants SWC dans des dossiers équivalents dans Flash Professional CS4 + si vous souhaitez y accéder via le panneau Composants. Pour les SWC constitués de classes de code, vous pouvez également les définir en tant que classpath global ou classpath au niveau du document ou du projet..

Pour définir un chemin de classe global, cliquez sur Modifier | Préférences, puis choisissez le ActionScript catégorie et clic Paramètres ActionScript 3.0 comme avant. Vous verrez cette boîte de dialogue:

Ajoutez les emplacements de vos SWC au Chemin de la bibliothèque. Comme le suggère la boîte de dialogue, vous pouvez placer plusieurs fichiers SWC dans le même dossier et pointer simplement vers ce dossier..

(Le Chemin de la bibliothèque externe box peut être utilisé pour spécifier les bibliothèques SWC devant être chargées au moment de l'exécution, plutôt que lors de la compilation du composant. Si vous avez d'énormes quantités de code et d'actifs partagés entre vos projets, vous pouvez réduire le temps de chargement de vos utilisateurs en plaçant toutes les ressources partagées dans un fichier SWC et en l'utilisant comme bibliothèque externe. les utilisateurs n'auront alors qu'à le télécharger une fois et pourront ensuite l'utiliser dans chacun de vos autres projets. Ce n'est probablement pas ce que vous voulez faire avec les bibliothèques que vous avez téléchargées, cependant!)

Pour définir un fichier SWC au niveau du document dans Flash Pro CS4 et versions ultérieures, une fois que vous avez ouvert un fichier FLA, cliquez sur Fichier | Publier les paramètres, puis sélectionnez le Flash onglet, et cliquez Réglages à côté de ActionScript 3.0. Basculer vers le Chemin de la bibliothèque languette. Le dialogue ressemble à ceci:

Vous pouvez utiliser des chemins relatifs ici, comme lorsque vous avez les fichiers de classe individuels..

Différents environnements de développement auront différentes manières d'importer des SWC. Pour plus d'informations sur l'utilisation des SWC dans FlashDevelop, consultez mon guide..

J'espère que ça aide! Maintenant, quand un tutoriel dit, "télécharger cette bibliothèque", vous devriez savoir exactement quoi faire :) Faites-moi savoir si quelque chose n'est pas clair et je vais clarifier pour vous.