Share
Dans ce didacticiel, nous allons apprendre à utiliser AS3 pour créer un RIA capable de modifier les propriétés de couleur d'une image, telles que la luminosité, le contraste, la teinte et la saturation. Continuer à lire!
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Nous allons utiliser une classe ActionScript native qui obtiendra les nouvelles valeurs d'un composant Slider, puis les appliquera à l'image cible à l'aide de la classe ColorMatrixFilter..
Lancez Flash et créez un nouveau document. Définissez la taille de la scène sur 557x400px et la cadence sur 24 images par seconde..
L'interface sera très simple. juste une image dans la scène qui sera ensuite modifiée par les composants Sliders du panneau Adjust Color.
Nous aurons besoin d'une image pour tester notre application, choisissez-la dans votre collection personnelle ou téléchargez-en une pour la tester..
Ceci est l'image de la démo, obtenue à partir de Flickr, avec une licence Creative Commons.
Fleur d'Antonio Manchado
Créez un panneau et quatre curseurs avec des noms d'occurrence, comme indiqué dans l'image suivante:
Vous pouvez ajouter des barres au-dessus des curseurs, comme indiqué, pour améliorer l'apparence..
Définissons les valeurs des composants Slider.
Celles-ci sont obtenues à partir des valeurs valides minimum et maximum de la classe AdjustColor, que nous utiliserons pour ajuster chaque propriété:
Créez une nouvelle classe ActionScript 3.0 (Cmd + N) et enregistrez-la sous Main.as dans votre dossier de classe.
Créez votre structure de classe de base pour commencer à écrire votre code.
> package import flash.display.Sprite; classe publique Main étend Sprite fonction publique Main (): void // code constructeur
Ce sont les classes que nous devons importer pour que notre classe fonctionne; la importation directive met à la disposition de votre code des classes et des packages définis en externe.
import flash.display.Sprite; importer fl.motion.AdjustColor; import flash.filters.ColorMatrixFilter; import fl.events.SliderEvent;
Ce sont les variables que nous allons utiliser; lisez les commentaires dans le code pour en savoir plus à leur sujet.
private var color: AdjustColor = new AdjustColor (); // Cet objet contiendra les propriétés de couleur private var filter: ColorMatrixFilter; // va stocker le filtre de couleur modifié pour changer l'image
Le constructeur est une fonction qui s'exécute lorsqu'un objet est créé à partir d'une classe. Ce code est le premier à être exécuté lorsque vous créez une instance d'un objet. Dans ce cas, il est exécuté lorsque le fichier SWF est chargé, comme dans la classe de document..
Il effectuera les actions nécessaires pour démarrer l'application.
fonction finale publique Main (): void // Code
La matrice de couleurs sera générée par les valeurs stockées dans les propriétés AdjustColor; nous devons définir des valeurs initiales pour ces propriétés afin d'obtenir une matrice correcte. Si nous ne le faisons pas, un tableau avec des valeurs NULL sera généré.
/ * Obligatoire pour créer la matrice initiale * / color.brightness = 0; color.contrast = 0; color.hue = 0; couleur.saturation = 0; / * Cette fonction ajoutera les écouteurs d'événements nécessaires * / addListeners ();
Cette fonction ajoute des écouteurs aux composants Slider afin d’appeler certaines fonctions chaque fois que leurs valeurs changent..
fonction finale privée addListeners (): void colorPanel.brightSL.addEventListener (SliderEvent.CHANGE, adjustBrightness); colorPanel.contSL.addEventListener (SliderEvent.CHANGE, adjustContrast); colorPanel.hueSL.addEventListener (SliderEvent.CHANGE, adjustHue); colorPanel.satSL.addEventListener (SliderEvent.CHANGE, adjustSaturation);
Cette fonction modifie la valeur de la luminosité en extrayant ses données du BrightSL composant de curseur.
fonction finale privée adjustBrightness (e: SliderEvent): void color.brightness = e.target.value; mettre à jour();
Cette fonction modifie la valeur du contraste en extrayant ses données du contSL composant de curseur.
fonction finale privée adjustContrast (e: SliderEvent): void color.contrast = e.target.value; mettre à jour();
Cette fonction modifie la valeur de teinte, obtenant ses données de la hueSL composant de curseur.
fonction finale privée adjustHue (e: SliderEvent): void color.hue = e.target.value; mettre à jour();
Lorsque vous modifiez la teinte d'une couleur, vous la déplacez autour du cercle de couleurs du nombre de degrés spécifié..
Cette fonction modifie la valeur de Saturation, en extrayant ses données du satSL composant de curseur.
fonction finale privée adjustSaturation (e: SliderEvent): void color.saturation = e.target.value; mettre à jour();
Lorsque vous modifiez la saturation d'une couleur, vous la déplacez vers ou à l'écart du centre de la roue chromatique..
Cette fonction est appelée à chaque changement de curseur. Il renouvelle le ColorMatrixFilter valeur et l'applique à l'image en scène.
fonction finale privée update (): void filter = new ColorMatrixFilter (color.CalculateFinalFlatArray ()); image.filters = [filtre];
Nous utiliserons la classe de document dans ce tutoriel. Si vous ne savez pas comment l'utiliser ou êtes un peu confus, veuillez lire cette astuce..
Vous êtes prêt à tester - appuyez sur Cmd + Retour pour exporter votre application et la voir fonctionner!
Vous avez appris une excellente technique de manipulation d'images, expérimentez-la!
Merci d'avoir lu ce tutoriel, j'espère que vous l'avez trouvé utile!
Accentsconagua