+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Art, graphisme, audio (https://jeuweb.org/forumdisplay.php?fid=50)
+--- Sujet : Article Dessiner un personnage aux couleurs dynamiques avec Flash (/showthread.php?tid=8225)
Dessiner un personnage aux couleurs dynamiques avec Flash - Xenos - 14-09-2020
[Flash] Dessiner un personnage aux couleurs dynamiques avec Flash
L’objet de ce long tuto (plutôt orienté graphisme même si la dernière partie nécessitera de mettre le nez dans le code ActionScript) est de vous expliquer les principes de création d’un dessin destiné à être modifié dynamiquement grâce à un sélecteur de couleurs. On retrouve par exemple ce principe lors de la création de personnages dans certains jeux online tels que Dofus… et peut-être bientôt dans le vôtre. La technologie la plus propice à la création d’images dynamiques modifiées sur le poste client reste sans doute Flash couplé à son langage de programmation ActionScript. Le logiciel Flash est payant mais une version d’évaluation est téléchargeable sur le site de son éditeur Adobe. Dernière précision : ce tuto est dense et long, je ne m’attarderai donc pas sur la maîtrise de l’outil ou des bases d’ActionScript. Mais avant de commencer, voici l’animation que nous allons réaliser pendant ce tuto :
L'exemple du tutorial
Bonne lecture !
Partie I : le dessin du personnage
A. Les contours
1. Importation du modèle et préparation de l’espace de travail.
Tout d’abord faites un croquis et scannez le pour disposer d’un fichier au format png ou jpeg faisant dans les 500px de largeur. Pour ce tuto, j’ai dessiné un petit capitaine corsaire lapin qui me servira de modèle :
{Image (attachment) /0.png}
Ensuite, ouvrez Flash, créez un nouveau document et sauvegardez le projet .fla avant tout. Ensuite créez un nouveau symbole de type clip que vous nommerez comme vous le souhaitez (ici « lapin »). C’est à l’intérieur de ce clip que nous dessinerons notre petit personnage, ce qui nous permettra de l’importer ensuite dans n’importe quelle autre animation.
Dans le clip nouvellement créé, renommez le calque courant en « Image Fond », importez votre image de modèle sur la scène et verrouillez le calque Image Fond. Créez un nouveau calque Contours. Voici à quoi devrait ressembler votre scène et votre fenêtre de calques :
{Image (attachment) /1.png}
2. Dessin des contours avec l’outil ligne
Nous sommes maintenant prêts à tracer les contours de notre petit lapin corsaire. Contrairement à ce que l’on peut penser, l’outil le plus facile à utiliser n’est pas le crayon ou la plume mais bien l’outil ligne (raccourci : N). En effet, combiné à l’outil de sélection principal (V), on peut pleinement exploiter le rendu propre du vectoriel en traçant des traits que l’on courbe avec l’outil de sélection (attention : le curseur doit prendre la forme d’une flèche et d’une petite courbe). L’aspect est alors très lisse et a le mérite de conserver des lignes et non pas des zones de couleur.
Choisissez donc l’outil ligne avec une épaisseur de 1, par exemple, en rouge pour bien distinguer les traits de l’image de base (la couleur n’a pas d’importance à ce stade du dessin). N’hésitez pas à zoomer et dézoomer régulièrement pour les détails. L’outil s’utilise donc de la manière suivante :
{Image (attachment) /2.png}
Maintenant, à vous de jouer. Cette étape est importante et doit être particulièrement soignée car une retouche du contour deviendra particulièrement compliquée dans les étapes suivantes. Après quelques dizaines de minutes de travail intensif et lorsque vous êtes satisfait de votre contour, vous pouvez supprimer le calque Image Fond colorer les traits en noir. Vous devriez alors avoir un truc dans ce style là :
{Image (attachment) /3.png}
B. La mise en couleurs
1. Application des couleurs statiques
Nous allons maintenant passer à l’une des parties les plus sympas du dessin : la mise en couleurs. L’idée de base est de séparer couleurs et traits. L’intérêt est de pouvoir manipuler les différents éléments du dessin sans effacer le reste. Créez donc un calque Couleurs sous le calque Contours. Copiez ensuite la première image (normalement c’est la seule) de Contours dans le scénario et copiez là sur le calque Couleurs, sur la première image également. Verrouillez le calque Contours.
Prenez alors l’outils Remplissage (le pot de peinture) et remplissez soigneusement chaque zone. Eventuellement, tracez des lignes temporaires (en rouge par exemple) pour fermer certaines zones le temps de les colorer (par exemple, le blanc de l’œil du lapin ici). Choisissez les couleurs neutres de chaque élément, c'est-à-dire sans ombre et sans lumière (ces élément viendront plus tard). En gros, une couleur telle qu’elle apparaîtrait à la lumière du jour lorsque le soleil n’est pas trop fort.
Réfléchissez à des grandes zones de couleurs. Personnellement, je caractérise le personnage avec deux couleurs, une couleur principale et une couleur secondaire. Ces zones de même couleur deviendront des zones de couleur dynamique. Voilà ce que j’ai de mon côté :
{Image (attachment) /4.png}
2. Les clips de couleurs dynamiques
Avec ActionScript, nous avons la possibilité de modifier dynamiquement la couleur d’un script. Malheureusement, la méthode colorise l’ensemble du clip selon la couleur choisie. Nous devrons donc ici créer autant de clip que nous voulons de couleurs dynamiques. Mais tout d’abord, on peut supprimer les lignes du calque Couleurs qui ne nous servent plus (vérifiez bien d’avoir tout rempli vos zones avant !) afin quelles ne faussent pas le rendu final. Pour cela, cliquez sur le calque Couleurs, ce qui sélectionne tout le contenu du calque et, dans le menu couleurs à gauche, sélectionnez la case blanche barrée de rouge qui signifie « pas de couleur » pour les lignes (pas les remplissages).
Ensuite, sélectionnez toutes les zones qui deviendront votre couleur principale (ici, j’ai choisi la veste en vert allemand) et convertissez les en clip (nommé couleurPrincipale) grâce au menu contextuel qui apparaît avec un clic droit. Dans la fenêtre propriétés en bas à gauche, identifiez le clip nouvellement créé en l’appelant couleurPrincipale_mc (mc est l’extension de Movie Clip et permet l’aide à la saisie dans le code).
{Image (attachment) /5.png}
Faites la même chose pour couleurSecondaire_mc et couleurFourrure_mc (en général, je dessine des humains et non pas des lapins^^ et je distingue couleurPeau de couleurCheveux).
Ceci étant fait, nous allons pouvoir verrouiller le calque Couleurs et attaquer les ombres et lumières…
C. Les ombres et la lumière
1. Dessin des ombres principales
Nous allons maintenant nous pencher sur la question des ombres. Evidemment, la maîtrise du placement des ombres en dessin traditionnel est nécessaire mais ne sera pas expliquée ici : faites au mieux ou lisez des cours de dessin. Cette phase est importante car elle va donner du relief au dessin mais elle est un peu difficile à mettre en place car les ombres doivent se modifier en fonction des couleurs dynamiques. Le principe à appliquer est le suivant : plutôt que d’utiliser des ombres opaques correspondant à la couleur de base en plus sombre, nous allons créer un calque Ombres placé sous le calque Contours mais au dessus du calque Couleurs, ainsi nous pourrons affecter une couleur noire avec une opacité de 20 ou 30% (selon le contraste que vous voulez obtenir) pour laisser apparaître les couleurs en transparence mais plus foncées.
Une fois le calque Ombres créé, nous allons copier l’image 1 de Contours pour la coller sur l’image 1 de Ombres. Nous disposons donc normalement des traits sur le calque Ombres qui est le seul à être déverrouillé. Il serait bien sur possible de dessiner les ombres à main levée mais il est plus propre de les tracer grâce au combo outil Ligne + outil Sélection. En choisissant un trait fin rouge, on peut tracer les zones d’ombre à l’intérieur des traits et le remplir de noir 20%. Voici ce que peut par exemple donner le travail des ombres sur la tête du personnage :
{Image (attachment) /6.png}
Lorsque toutes les ombres, sont placée, on peut enfin sélectionner tout le calque pour supprimer l’ensemble des lignes, afin de ne garder que les zones d’ombre. C’est un des moments que je préfère : le dessin apparaît alors dans sa version presque définitive… Verrouillez le calque ensuite. Pour se donner du courage pour continuer, on va également sélectionner le calque Contours (après l’avoir déverrouillé) pour mettre les lignes en noir 50%. Les contours prennent alors la couleur de la zone qu’ils contiennent en plus foncé, ce qui est d’un plus bel effet (très dessin animé). Verrouillons tous les calques et passons à la dernière phase de dessin…
{Image (attachment) /7.png}
2. Lumière et derniers détails
Dernière ligne droite pour le dessin : il nous reste à ajouter quelques détails pour que tout soit parfait. Tout d’abord, nous pouvons rajouter quelques touches de lumière. Là, le principe est que même que pour l’ombre : on crée un calque Lumière, on colle le contour et on s’en sert pour tracer des zones de lumière que l’on remplit de blanc 30% (trouvez votre dosage). Je ne réalise pas toujours cette étape car elle ne s’impose pas forcément mais ici, quelques touches de lumière devraient permettre de faire ressortir le personnage, particulièrement sa tête.
Il est également possible de rajouter d’autres calques d’ombre ou de lumière afin de renforcer de l’ombre à certains endroits (par exemple l’intérieur du manteau) ou de modifier intégralement une couleur dynamique (ici, je pense foncer le pantalon par rapport aux autres éléments rouges).
Ensuite, une légère ombre portée (un simple cercle suffit) peut être placé en arrière plan. C’est une zone de couleur noire d’opacité 30% environ.
Enfin, pour bien faire ressortir le personnage et donner un côté cartoon (comme dans le jeu Dofus), le mieux est de tracer une bordure noire 70% plus épaisse (je fais 3 fois plus gros que les traits normaux, donc 3px) sur le calque Contours. Pour éviter de devoir cliquer partout (avec le risque d’oublier des traits) avec l’outils Encrier, le mieux est de tracer un rectangle VIDE tout autour de la figure sur le calque Contours, de remplir d’une couleur quelconque la zone entre les traits de la figure et le rectangle et de cliquer sur cette couleur avec l’encrier. Ainsi, toutes les lignes qui touchent cette couleur seront épaissies. Il reste ensuite à supprimer la couleur et le rectangle :
{Image (attachment) /8.png}
Et voilà, fin de la partie dessin ! Il nous reste donc à animer les couleurs de notre lapin :
{Image (attachment) /9.png}
Partie 2 : le code ActionScript
A. Le ColorPicker de Kam
1. Téléchargement
Il y a un an ou deux, j’avais entrepris le développement d’un système de changement de couleurs. Je débutais alors en Flash et j’étais parvenu à changer les couleurs en utilisant une palette : un clic sur une couleur transformait alors la teinte de la zone sélectionnée. Je cherchais pourtant à améliorer ma petite animation Flash pour remplacer ma palette par un vrai sélecteur de couleur, comme on peut en trouver dans les logiciels de dessins ou, j’y reviens encore, dans le jeu Dofus (qui est une belle réalisation en Flash, particulièrement bien mise en valeur par les graphistes de l’équipe). Après plusieurs heures de recherche sur la Toile j’ai enfin fini par tomber sur la perle rare : un sélecteur de couleur très simple d’utilisation, développé par … Kam, le lead programer de Dofus. J’en profite pour le remercier au passage d’avoir partagé son composant ColorPicker, dont la source est disponible à l’adresse suivante sur flashkod.com : http://www.flashkod.com/code.aspx?ID=18411.
Téléchargez donc le zip (il faut pour cela créer un compte sur le site) et extrayez-en les fichiers. L’archive contient trois fichiers (en plus de la pub de FlashKod) : ColorPicker.as (le code du composant en fichier externe), test.fla (le composant en situation) et le .swf compilé. Pour que le composant fonctionne il faut maintenant l’installer.
2. Installation
Ouvrez le fichier test.fla en vous assurant que le fichier ColorPicker.as est dans le même répertoire. Puis, dans la bibliothèque, clic droit sur le clip et sélectionnez « Définition du composant ». Dans Classe AS 2.0 (pour Flash 8), tapez ColorPicker (qui correspond au fichier de classe ColorPicker.as) et validez. Ceci étant fait, faites un clic droit sur le ColorPicker qui a maintenant une icône de composant et sélectionnez « Exporter le fichier SWC… ». La fenêtre qui s’ouvre pointe normalement vers le répertoire de vos composants personnalisés. Enregistrez votre composant sous le nom ColorPicker et validez. Relancez Flash.
Ce sélecteur de couleurs sera maintenant disponible dans la fenêtre composant dans tous vos nouveaux projets grâce à un simple glissé-déposé. Pour plus de détails sur l’installation et la création de composants, ce tuto est très bien fait :
http://stephaneey.developpez.com/tutoriel/flashmx2004/composant/ .
B. La danse des couleurs
1. Mise en place des éléments
Revenons à notre fichier lapin.fla… Normalement, la scène est vide et la bibliothèque contient quatre clips : lapin (ou tout autre nom), couleurPrincipale, couleurSecondaire et couleurFourrure. Si vous n’avez pas supprimé l’image modèle de la bibliothèque, c’est le moment de le faire.
Tout d’abord, créons 4 calques : Dessin, Boutons, ColorPicker et AS (pour code en ActionScript). Faites glissez le clip lapin au milieu de la scène et ouvrez la fenêtre composants (CTRL+F7) : dans l’arborescence de la fenêtre ouverte, accédez à picker (« composants standards ») et faites le glisser sur le calque ColorPicker. Dans la fenêtre Propriétés, donnez le nom colorPicker à l’occurrence nouvellement créée. La scène est prête et il nous reste juste quelques boutons à rajouter pour pouvoir sélectionner la couleur principale, secondaire ou la fourrure. Créez donc 3 nouveaux symboles de type bouton que, dans un grand élan d’originalité, nous nommerons principale, secondaire et fourrure.
Ca y est, presque tout est en place : sur la scène principale, faites glisser 3 boutons sur le calque Boutons et nommez les principale_btn, secondaire_btn et fourrure_btn. Enfin, toujours sur le calque Boutons, ajoutez une zone de texte dynamique nommée currentArea_txt : elle nous servira à savoir quelle zone de couleur est actuellement sélectionnée. Allez, je vous montre mon écran avant de passer au code :
{Image (attachment) /10.png}
2. Quand ActionScript s’en mêle
Allez, dernière ligne droite ! Il nous reste à placer quelques lignes de script pour que tout fonctionne.
Tout d’abord, placez-vous sur la première image du calque AS et ouvrez la fenêtre Action (F9). Commençons par initialiser les variables : la zone couleurPrincipale_mc sera sélectionnée par défaut :
//On vide la zone de texte de zone
this.currentArea_txt.text = "Couleur principale";
//La variable contenant la zone à modifier
var colorZone:String = "couleurPrincipale_mc";Ensuite, on doit préciser les événements qui se produisent lorsque l’on clique sur les trois boutons. Rien de bien compliqué, on ne fait que changer le texte de currentArea_txt et on met à jour la variable colorZone qui contient le nom du clip sélectionné :
//On définit les événements en cas de clic sur un bouton
principale_btn.onRelease = function() {
this._parent.colorZone = "couleurPrincipale_mc";
this._parent.currentArea_txt.text = "Couleur principale";
}
secondaire_btn.onRelease = function() {
this._parent.colorZone = "couleurSecondaire_mc";
this._parent.currentArea_txt.text = "Couleur secondaire";
}
fourrure_btn.onRelease = function() {
this._parent.colorZone = "couleurFourrure_mc";
this._parent.currentArea_txt.text = "Couleur fourrure";
}Enfin, on précise ce qui se passe en cas de modification du ColorPicker. Le composant fonctionne avec un écouteur d’événement lié à la séquence en cours. L’événement créé par Kam est onColorChange qui renvoie l’indice de la couleur sélectionnée. Il suffit alors de créer un nouvel objet Color (classe de Flash) sur le clip sélectionné et de lui modifier sa couleur avec setRGB :
//On affecte la zone de couleur en cas de changement dans le colorpicker
this.onColorChange = function(value:Number)
{
new Color(this.lapin_mc[this.colorZone]).setRGB(value) ;
}Enfin, il ne faut pas oublier d’affecter l’écouteur d’événement au composant colorPicker déposé sur la scène :
//Ecouteur d'événement sur le color picker
colorPicker.addListener(this);Voilà, c’est la fin ! Normalement, en compilant votre animation, vous devez avec un superbe dessin dont vous pouvez changer les couleurs majeures… Génial, non ? Et puis ça ouvre des perspectives pour dynamiser la création d’un perso… Après, rien de vous empêche d’exporter juste les infos en XML vers un script PHP qui reconstituera une image physique avec GD… Mais ça, c’est une autre histoire qui pourrait faire l’objet d’un nouveau tutorial. J’espère que tout cela vous a été utile.
Harparine