Accueil | Tutoriaux

Tutoriaux : Découvrir le filtre ColorMatrixFilter
 

1. Introduction
 

Flash 8 propose de nombreuses nouvelles fonctionalités. L'une d'entre elles : la classe ColorMatrixFilter. Dans l'aide de Flash, on peut lire à ce sujet :

"La classe ColorMatrixFilter vous permet d'appliquer une transformation de matrice 4x5 aux valeurs de couleur RVBA et alpha de chaque pixel de l'image d'entrée afin d'obtenir un résultat intégrant un nouvel ensemble de valeurs de couleur RVBA et alpha. Elle permet d'effectuer des modifications de saturation, des rotations de teinte, de définir la luminance de l'alpha et de produire d'autres effets."

L'objet de ce tutoriel est de vous expliquer comment utiliser la classe ColorMatrixFilter pour modifier les couleurs d'une image mais surtout vous trouverez dans les pages suivantes les valeurs numériques de la matrice 4x5 qui permettent de créer les filtres les plus couramment utilisés.
 
2. Comment appliquer un filtre de couleur ?
 
- Ouvrez un document Flash et importez dans la bibliothèque de votre animation une image quelconque.
- Dans votre bibliothèque, créez un nouveau clip et placez une occurrence de l'image précédente sur la scène de votre clip.
- Sur la scène principale de votre animation, placez côte à côte deux occurrences du clip précédent. A l'aide de l'inspecteur de propriétés, nommez l'occurrence de droite "image". Il est inutile de nommez celle de gauche qui ne servira que de témoin. Nous allons appliquer un filtre de couleur à l'occurrence de droite uniquement.
- Dans le panneau action de l'image clé n°1 de la scène principale, placez le code suivant :
  
a = new Array();
 
a = a.concat([-1, 0, 0, 0, 255]);
a = a.concat([0, -1, 0, 0, 255]);
a = a.concat([0, 0, -1, 0, 255]);
a = a.concat([0, 0, 0, 1, 0]);
 
filtre = new flash.filters.ColorMatrixFilter(a);
image.filters = [filtre];
 
- Publiez votre animation et vous devriez obtenir une animation semblable à celle ci-dessous :
 
 
- L'image de gauche est l'image telle que vous pouvez la voir dans la bibliothèque de l'animation. L'image de droite est le négatif de celle de gauche : cet effet est obtenu grâce à ActionScript uniquement ! Merci Flash 8 :=))
 
3. Le code avec ses commentaires
 
Nous créons un tableau. Ce tableau contiendra 20 nombres qui définirons le "style" du filtre.
a = new Array();
 
Nous ajoutons les 5 valeurs suivantes -1, 0, 0, 0, 255 dans le tableau a. Cette première ligne permet de définir la composante rouge de chaque pixel de l'image finale en fonction de la composante rouge de chaque pixel de l'image d'origine (image source).
a = a.concat([-1, 0, 0, 0, 255]);
 
Nous ajoutons les 5 valeurs suivantes 0, -1, 0, 0, 255 dans le tableau a. Cette ligne de code permet de définir la composante vert de chaque pixel de l'image finale.
a = a.concat([0, -1, 0, 0, 255]);
 
Cette ligne permet de définir la composante bleu de chaque pixel de l'image finale.
a = a.concat([0, 0, -1, 0, 255]);
 
Enfin, cette ligne permet de définir l'alpha de chaque pixel de l'image finale. Notre tableau contient maintenant 20 valeurs numériques et ressemble à ceci :
a = [-1,0,0,0,255,0,-1,0,0,255,0,0,-1,0,255,0,0,0,1,0].
J'aime bien utiliser la fonction "concat" car elle permet de saisir les valeurs numériques du tableau a par groupe de 5 ce qui permet à la personne qui saisit le code de mieux anticiper l'effet que produira le filtre.
a = a.concat([0, 0, 0, 1, 0]);
 
Nous créons un filtre de couleur : le tableau a est le seul argument et définit totalement la transformation des couleurs.
filtre = new flash.filters.ColorMatrixFilter(a);
 
Nous appliquons le filtre de couleurs au clip "image".
image.filters = [filtre];
 
4. Comment ça marche ?
 

Comme vous pouvez le remarquer, appliquer un filtre de couleur à une image n'est pas ce qu'il y a de plus compliqué. En revanche, il faut absolument que vous soyez capable d'interpréter les valeurs numériques du tableau afin de pouvoir créer vos propres filtres.

Le filtre ColorMatrixFilter sépare chaque pixel d'origine (la source) en 4 composantes rouge (R), vert (G="green"), bleu (B) et alpha (A) comme suit : srcR, srcG, srcB, srcA, puis il associe de nouveau chaque composant de couleur pour former un pixel unique et renvoie le résultat en suivant les relations mathématiques suivantes :

rouge = a[0] x srcR + a[1] x srcG + a[2] x srcB + a[3] x srcA + a[4]
vert = a[5] x srcR + a[6] x srcG + a[7] x srcB + a[8] x srcA + a[9]
bleu = a[10] x srcR + a[11] x srcG + a[12] x srcB + a[13] x srcA + a[14]
alpha = a[15] x srcR + a[16] x srcG + a[17] x srcB + a[18] x srcA + a[19];

Avec les valeurs numériques du tableau a de l'exemple précédent cela donne :

rouge = - 1 x srcR + 0 x srcG + 0 x srcB + 0 x srcA + 255
vert = 0 x srcR + (- 1) x srcG + 0 x srcB + 0 x srcA + 255
bleu = 0 x srcR + 0 x srcG + (- 1) x srcB + 0 x srcA + 255
alpha = 0 x srcR + 0 x srcG + 0 x srcB + 1 x srcA + 0

Soit en simplifiant les écritures :

rouge = - srcR + 255
vert = - srcG + 255
bleu = - srcB + 255
alpha = srcA

Prenons l'exemple d'un pixel tel que scrR=100, scrG=25, scrB=200, scrA=100 :

rouge = - 100 + 255 = 155
vert = - 25 + 255 = 230
bleu = - 200 + 255 = 55
alpha = 100

Après l'application du filtre de couleur les composantes RGBA de ce pixel seront (155, 230, 55, 100). Autrement dit par rapport à la couleur d'origine, il s'agit de la couleur complémentaire. Ce filtre transforme une image en son négatif.
 
5. Présentation statique de quelques filtres de couleurs
 
Voici une animation semblable à la précédente : l'image de gauche est une image témoin. A l'aide d'ActionScript j'ai appliqué un filtre de couleur à l'image de droite. En cliquant sur les flèches vous pouvez modifier les images et les filtres appliqués à ces images mais surtout en cliquant sur l'image témoin vous pourrez voir les valeurs numériques du tableau qui permettent de définir le filtre correspondant.
 
 
6. Présentation dynamique de quelques filtres de couleurs
 

Voici des exemples de filtres qui dépendent de plusieurs paramètres. Je vous propose de faire varier ces paramètres à l'aide de glissières et d'observer les effets du filtre obtenu. Comme précédemment en cliquant sur l'image témoin vous pourrez voir les valeurs de la matrice qui permet de définir le filtre :

• filtre 1 : modification de la luminosité d'une image.
• filtre 2 : filtre en niveaux de gris avec une modification de la luminosité.
• filtre 3 : modifications des 3 composantes R, G et B indépendamment les unes des autres.
• filtre 4 : modifications des 3 composantes R, G et B avec effet de luminosité (cas particulier : le négatif).
• filtre 5 : modification de la saturation et de la luminosité (version n°1).
• filtre 6 : modification de la saturation et de la luminosité (version n°2).
• filtre 7 : modification du contraste.
• filtre 8 : filtre psychédélique...
• filtre 9 : : filtres "threshold" en noir et blanc.
• filtre 10 : filtre aléatoire.
• filtre 11

: colorisation d'une image.
 
7. Vos contributions...
 
Si en faisant vos propres expériences vous trouvez des filtres originaux, n'hésitez pas à m'écrire afin que je puisse compléter ce tutoriel !
 
 
 
 
 
 
Accueil | Tutoriaux