Share
Un sélecteur de couleurs est une application, généralement utilisée dans les logiciels graphiques et en ligne, utilisée à des fins de gestion des couleurs, de création de combinaisons de couleurs, de sélection des couleurs, etc..
Dans ce tutoriel, je vais vous apprendre à créer un sélecteur de couleurs personnalisé dans Flash à l'aide d'ActionScript 3.0..
À l'aide d'une image existante, nous allons extraire les valeurs de couleur à l'aide de la classe ColorTransform et de la position de la souris, puis appliquer la valeur renvoyée à tout objet DisplayObject..
Ouvrez Flash et créez un nouveau fichier Flash (ActionScript 3)..
Définissez la taille de la scène sur 600x300 et la couleur de fond sur # D2D1D0.
Note de l'éditeur: Belle capture d'écran Carlos: P
Nous allons créer une boîte qui contiendra tous les éléments du sélecteur de couleurs.
Dessinez un rectangle de 217x174 px et remplissez-le avec cette couleur: # A6A6A6.
Maintenant, dupliquez le rectangle (Cmd + D), faites-le 215x172 px et remplissez-le avec: #FAFAFA.
Répétez le processus et remplissez le nouveau rectangle avec: # E0E0E0.
Ce sera le fond du sélecteur de couleurs.
Ce sélecteur de couleurs a deux indicateurs de couleur, l’un affiche la couleur active et l’autre la couleur qui est actuellement renvoyée par le mouvement de la souris..
Sélectionnez l'outil Rectangle (R) et créez deux rectangles de 50x23 px en utilisant n'importe quelle couleur. J'ai utilisé le noir pour contraster avec l'arrière-plan. Convertissez chaque rectangle en MovieClip (F8) et définissez les noms d'occurrence sur "color" et "selectedColor".
Nous voulons connaître la valeur hexadécimale des couleurs affichées par le sélecteur de couleurs. Les champs de texte dynamiques feront l'affaire..
Sélectionnez l'outil Texte (T) et créez deux champs de texte dynamiques à côté de chaque rectangle de couleur. J'ai utilisé ce format de texte: Helvetica Neue 11pt, # 353535. N'oubliez pas d'intégrer les nombres et le signe "#" dans le menu des propriétés..
Nommez les champs "colorHex" pour celui de gauche et "sColor" pour celui de droite.
Nous aurons besoin d'un spectre de couleurs pour créer le sélecteur de couleurs. Dans mon exemple, j'ai utilisé cette image de ColorTools.
Redimensionnez l'image à 200x130 px et tracez un dégradé linéaire du noir au blanc sur le côté pour ajouter une échelle de gris..
Convertissez le spectre complet en MovieClip et nommez-le "spectre".
Convertissez tous les clips en un seul MovieClip et définissez le nom de l'instance sur "colorPicker".
Nous avons maintenant besoin d’un objet pour appliquer les données obtenues à partir du sélecteur de couleurs. Tout DisplayObject fonctionnera, dans ce cas, je vais utiliser du texte.
Le nom de l'instance TextField est "txt".
Créez un nouveau document ActionScript et enregistrez-le sous le nom "Main.as"..
Ce sont les classes que nous allons utiliser dans cette classe. Pour obtenir une aide spécifique sur chaque classe, reportez-vous à l’aide Flash (F1)..
package import flash.display.Sprite; import flash.display.BitmapData; import flash.geom.ColorTransform; import flash.events.MouseEvent;
Ce code va déclarer et étendre la classe, nous étendons en utilisant la classe Sprite puisque nous utilisons certaines de ses propriétés et méthodes..
public class Main étend Sprite
Nous utilisons trois variables, expliquées dans les commentaires du code.
var bitmapData: BitmapData = new BitmapData (202,132); // Objet Bitmap Data, la taille est basée sur la taille du spectre de couleur var colorTransform: ColorTransform = new ColorTransform (); var hexColor: *; // Cette variable stockera les données de couleur bitmap
C'est la fonction principale.
fonction publique Main (): void bitmapData.draw (colorPicker.spectrum); // Passe les données bitmap du spectre à la variable / * Auditeurs de fonctions * / colorPicker.spectrum.addEventListener (MouseEvent.MOUSE_MOVE, updateColorPicker); colorPicker.spectrum.addEventListener (MouseEvent.MOUSE_UP, setValue);
Cette fonction gérera les changements de couleur lorsque l'utilisateur déplace la souris..
fonction privée updateColorPicker (e: MouseEvent): void / * Obtient la couleur du pixel où se trouve la souris et transmet la valeur à la variable colorTransform * / hexColor = "0x" + bitmapData.getPixel (colorPicker.spectrum.mouseX, colorPicker .spectrum.mouseY) .toString (16); colorTransform.color = hexColor; / * Définit les données de transformation de couleur sur le clip "color" et le champ "colorHex" dans ColorPicker * / colorPicker.color.transform.colorTransform = colorTransform; colorPicker.colorHex.text = "#" + bitmapData.getPixel (colorPicker.spectrum.mouseX, colorPicker.spectrum.mouseY) .toString (16) .toUpperCase ();
Cette fonction définit la valeur activeClolor MovieClip et le champ sColor TextField dans le sélecteur de couleurs, ainsi que la cible sélectionnée par l'utilisateur..
fonction privée setValue (e: MouseEvent): void txt.textColor = hexColor; // Ceci est la couleur colorPicker cible .selectedColor.transform.colorTransform = colorTransform; colorPicker.sColor.text = colorPicker.colorHex.text;
Retournez au fichier .Fla et dans le panneau Propriétés, ajoutez "Principal" dans le champ Classe pour en faire la classe de document..
Vous pouvez maintenant choisir votre palette de couleurs ou votre spectre de couleurs préférés et les implémenter dans un sélecteur de couleurs personnalisé développé avec ActionScript 3.0. L'essayer!
J'espère que vous avez aimé ce tut, merci d'avoir lu!
Accentsconagua