|
|
||||||||||
| Tutoriaux : Déterminer la couleur d'un pixel | ||||||||||
|
1. Introduction |
||||||||||
|
Incroyable ! Désormais avec la nouvelle version du flash player, il est possible de déterminer la couleur d'un pixel... Pour voir l'animation ci-dessous vous devez disposer de cette nouvelle version téléchargeable sur le site de Macromedia. A l'aide de Flash MX 2004, dans le panneau "paramètres de publication" du menu "fichier", vous devrez sélectionner "Flash Player 8" pour définir la version du flash player pour laquelle vous allez publier. |
||||||||||
| 2. Dans la bibliothèque | ||||||||||
- Dans votre bibliothèque, créez un nouveau symbole en sélectionnant "nouveau symbole" dans le menu "insertion". Nommez ce symbole "photo" et sélectionner le comportement "clip". Dans le menu "fichier", sélectionnez la commande "importer - importer dans la scène" et parcourez votre disque dur à la recherche d'une image (colorée, si possible). Si vous êtes du genre fainéant vous avez également la possibilité de télécharger l'image qui se trouve dans l'animation ci-dessus. Utilisez le panneau de conception graphique "aligner" (ctrl+K) pour placer le coin supérieur gauche de l'image au centre de la scène. |
||||||||||
| 3. Sur la scène principale | ||||||||||
| - Déposez sur la scène principale une occurrence du clip que nous avons appelé "photo" dans la bibliothèque. Dans le panneau "propriétés", nommez cette occurrence "clip". - Déposez sur la scène principale une occurrence du clip que nous avons appelé "carré" dans la bibliothèque. Dans le panneau "propriétés", nommez cette occurrence "carre" (sans accent). - Créez un champ de texte dynamique et dans le panneau "propriétés" nommez cette occurrence "texte". - Rappels : les noms que nous venons de donner aux occurrences doivent être rigoureusement respectés (orthographe, accent, casse,...) car ils vont intervenir dans le code. Le carré prendra la couleur du pixel qui se trouve sous la souris lorsque celle-ci survolera la photo tandis que le champ de texte permettra d'afficher la référence de la couleur au format hexadécimal. |
||||||||||
| 4. Le code | ||||||||||
| Dans le panneau "action" de l'image clé n°1, placez le code ci-dessous. | ||||||||||
bmp = new flash.display.BitmapData(400, 300, true); bmp.draw(clip); texte0 = "Survolez la photo pour déterminer la couleur d'un pixel"; texte.text = texte0; this.onMouseMove = function() { var c = bmp.getPixel(clip._xmouse, clip._ymouse); if(c != 0) { texte.text = "0x" + c.toString(16).toUpperCase(); new Color(carre).setRGB(texte.text); } else { texte.text = texte0; new Color(carre).setRGB(0xFFFFFF); } } |
||||||||||
| 5. Le code avec ses commentaires | ||||||||||
| Une grande part de la nouveauté réside dans ces deux lignes de code ! Dans la première on crée un objet BitmapData de 400 pixels de largeur et de 300 pixels de hauteur (valeurs qui correspondent aux dimensions de notre photo) puis dans la seconde on trace à l'aide la fonction draw() une image de notre photo dans l'objet BitmapData. | ||||||||||
| bmp = new flash.display.BitmapData(400, 300, true); bmp.draw(clip); |
||||||||||
| texte0 est une chaîne de caractères correspondant au message par défaut qui sera affiché dans notre champ de texte dynamique dans le cas où la souris ne survole pas la photo. | ||||||||||
| texte0 = "Survolez la photo pour déterminer la couleur d'un pixel"; texte.text = texte0; |
||||||||||
| Lorsque la souris se déplace... | ||||||||||
| this.onMouseMove = function() { | ||||||||||
| Génial ! La fonction getPixel permet de déterminer la couleur du pixel défini par les coordonnées passées en argument. | ||||||||||
| var c = bmp.getPixel(clip._xmouse, clip._ymouse); | ||||||||||
| Dans le cas où c n'est pas nul, on affiche dans le champ de texte dynamique la référence de la couleur au format hexadécimal, en MAJUSCULES et on modifie la couleur de l'occurrence "carre" à l'aide de la fonction setRGB(). | ||||||||||
| if(c != 0) { texte.text = "0x" + c.toString(16).toUpperCase(); new Color(carre).setRGB(texte.text); } |
||||||||||
| Dans le cas contraire (si c est nul), on affiche dans le champ de texte dynamique le texte par défaut et on colorie le carré en blanc. | ||||||||||
| else { texte.text = texte0; new Color(carre).setRGB(0xFFFFFF); } |
||||||||||
| Fin de la fonction onMouseMove. | ||||||||||
| } | ||||||||||
| 6. Remarques | ||||||||||
Je viens tout juste de découvrir aujourd'hui cette nouvelle possibilité offerte par flash et je vous laisse imaginer les nombreux délires graphiques que l'on peut faire avec un tel outil !!! En faisant de légères modifications du code précédent, voici quelques effets sympathiques dont le résultat final évoque les tableaux impressionnistes ou pointillistes : |
||||||||||
|
||||||||||
|
|