Aller au menu - Aller au contenu

Icône Dessiner avec Actionscript

Par Avatar SuprazZz
Mise à jour : 08/07/2010
4 613 visites depuis 7 jours, dont 64 sur ce chapitre classé 39/786
Flash est un superbe outil pour la conception et l'animation d'illustrations pour le Web.
Mais savez-vous qu'Actionscript permet aussi de dessiner de façon dynamique ? :D
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Couleurs d'un clip

On ne peut pas vraiment dire que la classe que nous allons étudier maintenant permet de dessiner, mais dans la mesure où elle permet d'attribuer une couleur à un clip, on va la ranger ici. :D

Avant Flash 8, pour colorer un clip, on utilisait ce code :
Code : Actionscript
1
2
var macouleur:Color = new Color(monclip); // On associe macouleur à un clip
macouleur.setRGB(0xFF0000); // On donne une couleur héxadécimal à macouleur

Et ça suffisait pour changer la couleur du clip, et le colorer en rouge, comme dans l'exemple.

Mais si vous allez faire un tour dans l'aide, vous apprendrez que la classe color est obsolète ! :(
J'avoue qu'au départ j'étais un peu déstabilisé. Mais puisque je base ce cours sur Flash 8, je vais vous apprendre à colorer correctement un clip avec ActionScript 2 (et bientôt 3). ;)

Pour colorer un clip, il faut utiliser les classes colortransform et transform. L'une permet de créer la transformation de la couleur, et l'autre de l'appliquer au clip.

Il faut donc penser à rajouter ces deux lignes tout en haut de votre code, pour importer ces deux classes :
Code : Actionscript
1
2
import flash.geom.ColorTransform;
import flash.geom.Transform;


Créer un objet ColorTransform



Pour créer un nouvel objet ColorTransform, on va utiliser cette syntaxe, commune à toutes les classes :

var macouleur:ColorTransform = new ColorTransform();

Avant de continuer, voici une petite information. Vous savez déjà que les couleurs en informatique sont codées en hexadécimaux. Pour avoir du rouge dans un page Xhtml, vous utiliserez par exemple #FF0000. Le # signifie qu'on utilise le système hexadécimal. Les deux premiers "chiffres" correspondent à la quantité de rouge, les deux seconds à la quantité de vert, et les deux derniers à la quantité de bleu. Le minimum est 00, et le maximum est FF (255 en décimal). Ainsi, le blanc s'écrit #FFFFFF (toutes les couleurs à fond les gamelles), et le noir #000000 (aucune couleur).


Eh bien dans Flash, on peut aussi employer l'écriture hexadécimale des couleurs (mais elle n'est pas obligatoire). Par contre, pour préciser à Flash que le nombre qui suit est en hexadécimaux, il ne faut pas utiliser le #, mais 0x.
Le bleu s'écrit donc 0x0000FF.

Mini-récapitulatif pour ceux qui découvriraient la notion :
CouleurXhtml & CSSActionScript
Rouge #FF0000 0xFF0000
Vert #00FF00 0x00FF00
Bleu #0000FF 0x0000FF
Jaune #FFFF00 0xFFFF00


Bref, la pipette de Flash dans la barre d'outils vous donne accès à toutes les couleurs possibles et imaginables, et vous donne le code hexadécimal correspondant. Il faudra juste penser à remplacer le # par 0x, car la pipette de Flash l'affiche avec un # o_O .

Tout ce qu'il faut savoir, c'est que Flash veut des couleurs notées avec #, et que ActionScript veut des couleurs avec 0x.

Image utilisateur


Maintenant qu'on a notre couleur, on va utiliser la variable rgb (rgb = red-Green-blue = rouge - vert - bleu) de la classe ColorTransform pour l'enregistrer, ce qui nous donne :

Code : Actionscript
1
2
3
4
5
import flash.geom.ColorTransform;
import flash.geom.Transform;
 
var macouleur:ColorTransform = new ColorTransform();
macouleur.rgb = 0xFF0000; //Couleur rouge


Application de la transformation couleur



Notre transformation est prête. :D
On a un clip monclip sur la scène, et on souhaite la lui appliquer !

Il faut déjà associer une transformation au clip :

Code : Actionscript
1
var transformation:Transform = new Transform(monclip);


On a créé avec ce code une transformation appelée, en toute originalité ;) : transformation.
On a aussi précisé que cette transformation s'appliquait à monclip.

Eh bien, il ne reste plus qu'à faire le lien entre la couleur et la transformation, grâce à :

transformation.colorTransform = macouleur;

Ce qui nous donne en récapitulant :

Code : Actionscript
1
2
3
4
5
6
7
8
import flash.geom.ColorTransform;
import flash.geom.Transform;
 
var macouleur:ColorTransform = new ColorTransform();
macouleur.rgb = 0xFF0000;
 
var transformation:Transform = new Transform(monclip);
transformation.colorTransform = macouleur;


C'est drôlement plus long que l'ancienne méthode ! Pourquoi ce changement ?


En fait, il y a une logique là-derrière. :p
La classe Transform centralise les transformations qu'on peut effectuer sur un objet. Et la classe colorTransform possède beaucoup plus de possibilités que l'ancienne classe color : vous pouvez ainsi appliquer des coefficients sur les différentes composantes de la couleur, et même sur sa transparence. :D Allez voir l'aide de Flash pour plus d'informations là-dessus.
Retour en haut

Dessinons sur des clips

Première chose à comprendre : on dessine toujours sur un clip !
En effet, toutes les méthodes de dessin que nous allons voir appartiennent à la classe MovieClip.

Et puisqu'on est des codeurs propres, on dessinera le moins possible directement sur la scène principale. :)

Nous allons donc préparer notre zone de dessin comme suit :
Code : Actionscript
1
_root.createEmptyMovieClip('dessin',1);


Et tout ce qu'on dessinera, on le dessinera sur ce clip pour pouvoir :
  • effacer facilement le dessin en supprimant le clip
  • bouger le dessin en bougeant le clip
  • agir sur la transparence du dessin en agissant sur la transparence du clip
  • ...


Bref, énormément d'avantages !
Retour en haut

Gribouillons un peu

Sous ce titre explicite, on découvre les bases du dessin avec Flash : les traits !

public lineStyle(thickness:Number, rgb:Number, alpha:Number) : Void



La première chose à faire quand on dessine un trait, c'est de dire à Flash quel type de trait on veut !
thickness correspond à la largeur en pixel du trait, rgb sa couleur (en hexadécimaux, la plupart du temps), alpha sa transparence.
Flash 8 implémente d'autres arguments pour cette fonction, mais qui ne nous servent pas à grand chose pour l'instant : allez faire un petit tour dans l'aide pour en apprendre plus.

Posons la première ligne de notre code :
Code : Actionscript
1
_root.dessin.lineStyle(4, 0x000000, 100);

Là, on dit à Flash d'utiliser un trait noir de largeur 4 px, et complètement opaque.


public moveTo(x:Number, y:Number) : Void



Cette méthode va vous permettre de placer le point de départ du dessin. Ça n'affiche rien en soi-même.
Si vous commencer directement à dessiner, Flash supposera alors que cette fonction a été appelée avec les arguments (0,0) c'est-à-dire en haut à gauche de votre animation.

Pour l'instant, écrivons :
Code : Actionscript
1
2
_root.dessin.lineStyle(4, 0x000000, 100);
_root.dessin.moveTo(10, 10);

Avec ce code, on place le départ du dessin aux coordonnées (10,10) dans le clip dessin (puisque c'est là qu'on va dessiner).

public lineTo(x:Number, y:Number) : Void



Et voilà la reine des fonctions de dessin, celle qui trace effectivement le trait. Elle ne demande que les coordonnées cibles du trait.
Elle va donc tracer un trait entre les dernières coordonnées où on a dessiné (c'est-à-dire pour l'instant les coordonnées qu'on a passées à moveTo() ) et celles qu'on lui fournit.

Ce qui nous donne en achevant le code :
Code : Actionscript
1
2
3
4
_root.createEmptyMovieClip('dessin',1);
dessin.lineStyle(4, 0x000000, 100);
dessin.moveTo(10,10);
dessin.lineTo(300, 300);


Et voilà un beau trait. :D

Exercice 1


Dessinez un carré.

Secret (cliquez pour afficher)
Code : Actionscript
1
2
3
4
5
6
7
_root.createEmptyMovieClip('dessin',1);
dessin.lineStyle(4, 0x000000, 100);
dessin.moveTo(10,10); // On se place au coin en haut à gauche
dessin.lineTo(300, 10); // Coin en haut à droite
dessin.lineTo(300, 300); // Coin en bas à droite
dessin.lineTo(10, 300); // Coin en bas à gauche
dessin.lineTo(10, 10);// Et on retourne en haut à gauche


Exercice 2


Permettez à l'utilisateur de dessiner avec la souris.

Secret (cliquez pour afficher)
Code : Actionscript
1
2
3
4
5
6
_root.createEmptyMovieClip('dessin',1);
dessin.lineStyle(4, 0x000000, 100);
dessin.moveTo(0,0);
_root.onEnterFrame = function() {
dessin.lineTo(_xmouse, _ymouse);
}


Petit rajout : ne dessinez que si l'utilisateur a le bouton de la souris enfoncé.

Secret (cliquez pour afficher)
Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
_root.createEmptyMovieClip('dessin', 1);
dessin.lineStyle(4, 0x000000, 100);
_root.onMouseDown = function() { // Quand on appuye sur le bouton de la souris
        dessin.moveTo(_xmouse, _ymouse); // On place le début du dessin aux coordonnées de la souris
        _root.onEnterFrame = function() {
                dessin.lineTo(_xmouse, _ymouse); //Et on dessine à chaque image un trait
        };
};
_root.onMouseUp = function() { //Quand on relâche le bouton
        _root.onEnterFrame = null; //On arrête le onEnterFrame
};


Voilà, vous êtes déjà un pro en dessin ;)
Retour en haut

Un peu de coloriage !

Continuons nos gribouillis avec un peu de coloriage !

public beginFill(rgb:Number, [alpha:Number]) : Void



La méthode qui permet de colorier, c'est celle-ci. Il en existe 2 autres plus complexes qui sont :
  • beginBitmapFill() - Colorie avec une image
  • beginGradientFill() - Colorie avec un dégradé


Si vous voulez en savoir plus, allez les voir dans l'aide.

Pour l'instant, reprenons notre cube, et colorions-le en rouge, tout en sachant que pour achever le coloriage, il faut utiliser la méthode MovieClip.endFill() à la fin du dessin :

Code : Actionscript
1
2
3
4
5
6
7
8
9
_root.createEmptyMovieClip('dessin',1);
dessin.lineStyle(4, 0x000000, 100);
dessin.beginFill(0xff0000,100); // On remplit de rouge
dessin.moveTo(10,10); // On se place au coin en haut à gauche
dessin.lineTo(300, 10); // Coin en haut à droite
dessin.lineTo(300, 300); // Coin en bas à droite
dessin.lineTo(10, 300); // Coin en bas à gauche
dessin.lineTo(10, 10);// Et on retourne en haut à gauche  
dessin.endFill(); //On arrête le coloriage


Sympathique, non ?

Et si je ne mets pas dessin.endFill(); ?

Ben ça ne change rien. :D En effet, on ne commence pas de nouvelle figure avec de nouvelles couleurs, donc ce n'est pas bien grave.

Exercice 1



Reprenez le code de votre mini-paint. ;)

Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
_root.createEmptyMovieClip('dessin', 1);
dessin.lineStyle(4, 0x000000, 100);
_root.onMouseDown = function() { // Quand on appuye sur le bouton de la souris
        dessin.moveTo(_xmouse, _ymouse); // On place le début du dessin aux coordonnées de la souris
        _root.onEnterFrame = function() {
                dessin.lineTo(_xmouse, _ymouse); //Et on dessine à chaque image un trait
        };
};
_root.onMouseUp = function() { //Quand on relache le bouton
        _root.onEnterFrame = null; //On arrête le onEnterFrame
};


Et maintenant, faites en sorte que tout ce qu'on colorie soit rempli de rouge !

Secret (cliquez pour afficher)
Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
_root.createEmptyMovieClip('dessin', 1);
dessin.lineStyle(4, 0x000000, 100);
_root.onMouseDown = function() {
        dessin.moveTo(_xmouse, _ymouse);
        dessin.beginFill(0xff0000,100);
        _root.onEnterFrame = function() {
                dessin.lineTo(_xmouse, _ymouse);
        };
};
_root.onMouseUp = function() {
        dessin.endFill();
        _root.onEnterFrame = null;
};


Rien de bien sorcier, suffisait de rajouter le beginFill().

C'est pas très avancé comme Paint, mais c'est déjà suffisant pour dessiner un coeur percé d'une flèche. :honte:
Retour en haut

Gommez moi tout ça !

Il y a deux moyens pour effacer tous ces gribouillis !

Vu que c'est sur un clip dynamique, je pense que vous avez déjà deviné la première :

Effaçons le clip



Créez un clip carré sur la scène que vous appellerez effaceur.

Rajoutez ensuite dans votre paint, à la fin du code :

Code : Actionscript
1
2
3
effaceur.onRelease = function() { // Quand on clique sur "effaceur"
        _root.dessin.removeMovieClip(); // On supprime le clip "dessin"
}


Ça marche, ça efface tout, mais impossible de redessiner ensuite, vu que le clip dessin n'existe plus !

Aller, cogitez un peu et trouvez-moi une solution élégante pour recréer le clip dessin à chaque effacement.
Secret (cliquez pour afficher)

Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//-- Pour dessiner
_root.onMouseDown = function() {        
        dessin.moveTo(_xmouse, _ymouse);
        dessin.beginFill(0xff0000,100);
        _root.onEnterFrame = function() {
                dessin.lineTo(_xmouse, _ymouse);
        };
};
_root.onMouseUp = function() {
        dessin.endFill();
        _root.onEnterFrame = null;
};
//-- Pour effacer
effaceur.onRelease = function() {
        _root.dessin.removeMovieClip();
        _root.creer_espace_de_dessin();
}
//-- Pour commencer
creer_espace_de_dessin = function() {
        _root.createEmptyMovieClip('dessin', 1);
        _root.dessin.lineStyle(4, 0x000000, 100);
}
_root.creer_espace_de_dessin(); //On appelle la fonction qui crée le clip dessin une première fois au lancement de l'animation. Sinon, il faudrait cliquer sur le bouton avant de pouvoir dessiner.


Pas bête, hein ? :D

public clear() : Void



Voici la deuxième solution, beaucoup plus rapide dans notre cas ! Elle efface tout ce qui a été dessiné dans le clip !

Reprenez donc le code précédent, et au lieu d'utiliser removeMovieClip, utilisez moi clear().

Secret (cliquez pour afficher)
Code : Actionscript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
//-- Pour dessiner
_root.onMouseDown = function() {        
        dessin.lineStyle(4, 0x000000, 100);
        dessin.moveTo(_xmouse, _ymouse);
        dessin.beginFill(0xff0000,100);
        _root.onEnterFrame = function() {
                dessin.lineTo(_xmouse, _ymouse);
        };
};
_root.onMouseUp = function() {
        dessin.endFill();
        _root.onEnterFrame = null;
};
//-- Pour effacer
effaceur.onRelease = function() {
        _root.dessin.clear();
}
//-- Pour commencer
_root.createEmptyMovieClip('dessin', 1);


Ça va déjà drôlement plus vite !
Vous remarquerez que dessin.lineStyle(4, 0x000000, 100); a été remonté tout en haut, pour être exécuté à chaque clic de souris. Car si on le laissait à sa place originelle, il serait supprimé en même temps que le dessin.
En effet, clear() efface le dessin, et tout ce qu'on a passé comme paramètres de remplissage, ou de couleur de trait ! Il faut donc que ce soit recréé à chaque fois. :)
Retour en haut

Q.C.M.

Sans copier-coller le code dans Flash, essayez de deviner quelle va être l'effet de ce code :

Code : Autre
1
2
3
4
5
6
7

_root.lineStyle(4, 0x000000, 100);
_root.onMouseDown = function() {
        _root.moveTo(_xmouse, _ymouse);
};
_root.onMouseUp = function() {
        _root.lineTo(_xmouse, _ymouse);
};
Et ce code-là, quel comportement aura-t-il ?

Code : Autre
1
2
3
4
5
6
7
8
9
10
11

_root.lineStyle(4, 0x000000, 100);
_root.onMouseDown = function() {
        _root.moveTo(_xmouse, _ymouse);
        _root.onEnterFrame = function() {
                _root.clear();
                _root.lineTo(_xmouse, _ymouse);
        }
};
_root.onMouseUp = function() {
        _root.lineTo(_xmouse, _ymouse);
};
Et ce code-ci ? :D
Code : Autre
1
2
3
4
5
6
7
8
9
10
11
12
13

_root.onMouseDown = function() {
        premierclic_x = _xmouse;
        premierclic_y = _ymouse;
        _root.onEnterFrame = function() {
                _root.clear();
                _root.lineStyle(4, 0x000000, 100);
                _root.moveTo(premierclic_x, premierclic_y);
                _root.lineTo(_xmouse, _ymouse);
        }
};
_root.onMouseUp = function() {
        _root.onEnterFrame = null;
};
On a un clip monclip bleu sur scène.
Quelle sera la couleur de monclip après l'exécution de ce code ?

Code : Autre
1
2
3
4
5

var macouleur:ColorTransform = new ColorTransform();
macouleur.rgb = 0xFFFF00;

var transformation:Transform = new Transform(monclip);
transformation.colorTransform = macouleur;
Pourquoi les trois derniers codes que je vous ai proposés ne sont-ils pas parfaits dans leur mise en forme ? :D

Statistiques de réponses au QCM

Retour en haut
A priori, les méthodes de dessin en Flash n'ont pas l'air très utiles...
Détrompez-vous ! Vous constaterez vous-mêmes à quel point il est indispensable de bien les connaître dans notre fil rouge. ;)
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
8 commentaires pour "Dessiner avec Actionscript"
Note moyenne : 3.24 / 4 (137 votes)
Pseudo Commentaire
Hors ligne Matx # Posté le 17/05/2009 à 22:26:31
Demain il fera jour.
Avatar

Ville : Paris
Pays : France métropolitaine

 Enorme !! J'ai commencé la lecture du big-tuto hier et je me régale !! Seul comentaire : pour l'histoire de l'utilisateur qui dessine : on pourrait rajouter un choix de couleur, pour complexifier un peu la tâche... Et même une gomme "manuelle" (en utilisant la couleur de fond :P). Et pourquoi ne pas faire de même avec la taille du "stylo" et la transparence du dessin ? C'est un très bon exercice, je trouve (d'ailleurs j'ai un peu galere pour faire... les boutons !! Enfin bon c'est fait maintenant !!)

Aussi, toujours pour le dessin de l'utilisateur, je me disais que onMouseMove était plus adapté que onEnterFrame, qui est actualisé moins fréquemment et dessine donc des choses plus saccadées...

Mes félicitations et merci beaucoup !!
"En ce lieu, à cette époque, je t'ai désirée et tu n'étais pas là."
Albert Camus, La Peste.


"La vie semble plus légère quand on la prend du bon côté."
Mathieu Havard, Reflexions Personelles.
 
Hors ligne YCFX # Posté le 29/07/2009 à 21:58:30
.: ThE OnE " у¢ƒχ " :.
Avatar

Études : USTHB

 Bonsoir a tous ^^
Je cherche un moyen pour détecter la couleur qui passe sous le pointeur de la souris , j'ai essayé avec getPixel sur une image bitmap mai j'ai pas arrivé :(
de préférence j'ai besoin de la méthode ou le pointeur de la souris détecte la couleur sur du vectoriel .
merci d'avance :)
- I'm not a HACKER ,I'm . . . a security professional -

๑۩۞۩๑ .::. ThE OnE " у¢ƒχ " .::. ๑۩۞۩๑
 
Hors ligne marinette # Posté le 01/12/2009 à 15:05:49

Bonjour,

Concernant la méthode ultérieur à flash, je ne constate aucun changement de couleur quand je charge l'animation sur internet. Doit-on spécifier que le texte est lu en html?
Hors ligne toto_toto69 # Posté le 13/03/2012 à 18:57:39

Avis : Très bon

A propos d'une utilisation ratée de Flash : Spiral Connect http://spiralconnect.univ-lyon1.fr/
Ce site est l'exemple typique de ce qu'il ne faut pas faire. Ca rame et c'est moche, l'Université Lyon1 a payé très cher pour un boulet inutilisable.
Hors ligne albert_albert69 # Posté le 26/03/2012 à 15:53:08

Avis : Très bon

Je ne sais pas si le lieu est approprié mais je confirme que c'est un site très moche

Voir tous les commentaires